WordPress: Polldaddy Responsive

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/12

Currently, the standard Poll Daddy objects that I use are fixed width and not mobile responsive. Here are some simple CSS styles that I use to make Poll Daddy objects responsive to small devices.

@media only screen and (max-width: 400px) {
    .PDS_Poll { width: 100%; overflow:hidden; }
    .PDS_Poll .pds-box-outer { padding: 0; }
    .PDS_Poll .pds-box { width: 100% !important; border:none !important; }
    .PDS_Poll .pds-input-label { width: 100% !important; margin-left: -25px; padding-left: 25px; }
}

source: shibashake

WordPress: Create Plugin Action Links

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/13

There is 2 option to add additional links information to our WordPress plugins. With Plugin Row Meta which I already posted before. Plugin Row Meta add additional custom links ind the description plugins.

Screen Shot 2014-11-26 at 12.37.58 PM

But right now we will add information in the left, plugin tab. By default, plugin action links only give you Activate or Deactivate and Edit links.

Here the default plugin action links.

Screen Shot 2014-11-26 at 10.05.09 AM

Copy the code below to your main file (php) of the plugins.

add_filter( 'plugin_action_links_' . plugin_basename(__FILE__), 'AF_action_links' );

function AF_action_links( $links ) {
   $links[] = '<a href="'. get_admin_url(null, 'admin.php?page=arabic-font/inc/init.php') .'">Settings</a>';
   $links[] = '<a href="https://profiles.wordpress.org/darto#content-plugins" target="_blank">More plugins by Darto KLoning</a>';
   return $links;
}

And the result will be like this.

Screen Shot 2014-11-26 at 12.32.12 PM

WordPress: podPress Show Incorrectly, Player Show at Top Content Not at the Bottom Content

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/14

First time I setup WordPress for audio content, the first thing I remembered is podPress. But twice I setup podPress and I’m get podPress show incorrectly. The player show at top content, not at the bottom content as the General Settings I setup.

Screen Shot 2014-11-25 at 8.10.09 AM

As you can see at the picture, the player is show at the top content. But I want the player is show perfectly at the bottom.

Screen Shot 2014-11-25 at 8.10.32 AM

And the solution to the problem is, change the podpress.css in folder style. Just remove three line at the podpress.css. But in my case, I just make them commented.

.podPress_content .fluid-width-video-wrapper {
	position: static !important;
}

Screen Shot 2014-11-25 at 8.51.04 AM

 

WordPress: Create Additional Links for Plugin with Plugin Row Meta

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/15

By default, WordPress only display the author and plugin URI links. Since the version 2.8, they applied filter plugin_row_meta within the plugin administration section. With this filter, you can create many links for your plugin or another plain text.

Let’s start to create the additional links by using the filter. First, create function that returns the links in an array and then add the filter with your function.

Put this function in your main .php plugin file:

function RPSS_plugin_meta( $links, $file ) { // add 'Plugin page' and 'Donate' links to plugin meta row
		if ( strpos( $file, 'radio-streaming.php' ) !== false ) {
			$links = array_merge( $links, array( '<a href="http://www.kloningspoon.com/radio-player-streaming-stats/" title="Plugin page">Radio Player Streaming &amp; Stats</a>' ) );
			$links = array_merge( $links, array( '<a href="http://about.me/dartokloning" title="About me">About.me</a>' ) );
		}
		return $links;
	}
	add_filter( 'plugin_row_meta', 'RPSS_plugin_meta', 10, 2 );

 

WordPress: Plugin Require Another Plugin Installed

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/16

Sometimes when you write plugins, you need some other plugin installed. Yes, indeed you can copy the plugin to your folder plugin but it’s will have disadvantage that we must copied again when the plugins is updated or codes in the plugin that you copied to your folder plugin is deprecated by WordPress.

Instead we copied the plugin to your plugins then it will be better if we write some function that when user activated our plugin, show the information that other plugin that we needed for our plugins works better is must installed.

Here the codes:

<?php
/*
Plugin Name: Our Plugin
Description: The Other Plugin should be installed and active to use this plugin.
Version: 1.0.0
*/
add_action( 'admin_init', 'our_plugin' );
function our_plugin() {
    if ( is_admin() && current_user_can( 'activate_plugins' ) &&  !is_plugin_active( 'other-plugin/other-plugin.php' ) ) {
        add_action( 'admin_notices', 'no_other_plugin_installed' );

        deactivate_plugins( plugin_basename( __FILE__ ) ); 

        if ( isset( $_GET['activate'] ) ) {
            unset( $_GET['activate'] );
        }
    }
}

function no_other_plugin_installed(){
    ?><div class="error"><p>Sorry, for better works, Our Plugin requires the other plugin to be installed and active.</p></div><?php
}

source: kosinix

WordPress: Load jQuery UI Theme from Google CDN

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/17

WordPress comes with a number of built in Javascript and Stylesheet libraries which you can use in your application. One of these libraries is jQuery UI which you can easily load into your website by using the function wp_enqueue_script.

wp_enqueue_script('jquery-ui-core');

This loads in the Javascript required to have access to the core UI library, but jQuery UI comes with a number of modules such as tabs, sliders, accordions, datepickers etc. But to display these correctly on your website you need to load in the CSS themes for jQuery UI. WordPress does not have these themes by default but you can download them from the jQuery ui website.

Instead of downloading these themes you can use these default themes from the Google CDN.

Below is the code you will need to load the correct version of the jQuery UI theme, first you load in the jQuery UI by using the wp_enqueue_script(). This value is added to the $wp_scripts object. From here we can get access to the jquery-ui-core where we can get the exact version of the library.

Once we have the version we can add this to the URL of the Google CDN and use this to load the theme stylesheet that we want.

function load_jquery_ui_google_cdn() {
    global $wp_scripts;
 
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-slider');
 
    // get the jquery ui object
    $queryui = $wp_scripts->query('jquery-ui-core');
 
    // load the jquery ui theme
    $url = "http://ajax.googleapis.com/ajax/libs/jqueryui/".$queryui->ver."/themes/smoothness/jquery-ui.css";
    wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
}
 
add_action('wp_enqueue_scripts', 'load_jquery_ui_google_cdn');

And here the list of all jQuery UI theme: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast,pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

source: paulund

Responstable – a Responsive Table Solution

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/18

Author: jordyvanraaij

Source: tjoen

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <!--
Copyright (c) 2014 by Theun (http://codepen.io/tjoen/pen/LEpeq)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

  <title>Responstable 2.0: a responsive table solution - CodePen</title>

  <style>
  /*

RESPONSTABLE 2.0 by jordyvanraaij
  Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
*/ .responstable { margin: 1em 0; width: 100%; overflow: hidden; background: #FFF; color: #024457; /* border-radius: 10px; */ border: 1px solid #167F92; } .responstable tr { border: 1px solid #D9E4E6; } .responstable tr:nth-child(odd) { background-color: #EAF3F3; } .responstable th { display: none; border: 1px solid #FFF; background-color: #167F92; color: #FFF; padding: 1em; } .responstable th:first-child { display: table-cell; text-align: center; } .responstable th:nth-child(2) { display: table-cell; } .responstable th:nth-child(2) span { display: none; } .responstable th:nth-child(2):after { content: attr(data-th); } @media (min-width: 480px) { .responstable th:nth-child(2) span { display: block; } .responstable th:nth-child(2):after { display: none; } } .responstable td { display: block; word-wrap: break-word; max-width: 7em; } .responstable td:first-child { display: table-cell; text-align: center; border-right: 1px solid #D9E4E6; } @media (min-width: 480px) { .responstable td { border: 1px solid #D9E4E6; } } .responstable th, .responstable td { text-align: left; margin: .5em 1em; } @media (min-width: 480px) { .responstable th, .responstable td { display: table-cell; padding: 1em; } } body { padding: 0 2em; font-family: Arial, sans-serif; color: #024457; background: #f2f2f2; } h1 { font-family: Verdana; font-weight: normal; color: #024457; } h1 span { color: #167F92; } </style> </head> <body> <h1>Responstable <span>2.0</span> by <span>jordyvanraaij</span></h1> <table class="responstable"> <tr> <th>Main driver</th> <th data-th="Driver details"><span>First name</span></th> <th>Surname</th> <th>Date of birth</th> <th>Relationship</th> </tr> <tr> <td><input type="radio"/></td> <td>Steve</td> <td>Foo</td> <td>01/01/1978</td> <td>Policyholder</td> </tr> <tr> <td><input type="radio"/></td> <td>Steffie</td> <td>Foo</td> <td>01/01/1978</td> <td>Spouse</td> </tr> <tr> <td><input type="radio"/></td> <td>Stan</td> <td>Foo</td> <td>01/01/1994</td> <td>Son</td> </tr> <tr> <td><input type="radio"/></td> <td>Stella</td> <td>Foo</td> <td>01/01/1992</td> <td>Daughter</td> </tr> </table> </body> </html>