WordPress plugin for AnythingSlider

WordPress plugin for AnythingSlider

web solutions
English text only

Developing a WordPress plugin has been described 100k times. And there are tons of plugins, as you can see from the wordpress website. But, none of the plugins I found helped me to obtain the sliding effect on the di-side.com homepage. So, here we are…

As an example on how to develop a new plugin, let’s follow some steps in creating a WordPress plugin for AnythingSlider.

A WordPress plugin is, in its most common form, a PHP file that’s put onto the /wp-content/plugins/plugin-name directory. WordPress recognizes automatically the directory, and tries to execute the code inside the files: in particular, it looks for a file that contains something like the following commented lines:

/*
  Plugin Name: Anything Slider
  Plugin URI: http://di-side.com/wordpress-plugins/anything-slider
  Description: Anything Slider for Wordpress
  Version: 1.0
  Author: Pietrino Atzeni
  Author URI: http://di-side.com
  License: GPL2
*/

First of all, the plugin also registers on the activation hook, called when it’s activated:

register_activation_hook(__FILE__, 'wp_anythingslider_activate');
function wp_anythingslider_activate() {
  /* Registers for all options... */
}

Some action hooks can help you to link your plugin to the admin menu and pages:

  • admin_menu is called when creating the Settings menu in the backend: we are using it to register our plugin menu;
  • admin_init is called when the admin page is shown in the backend: our plugin will register its settings
add_action('admin_menu', 'wp_anythingslider_add_menu');

function wp_anythingslider_add_menu() {
  $page = add_options_page('Anything Slider',
    'Anything Slider',
    'administrator',
    'wp_anythingslider_menu',
    'wp_anythingslider_menu_function');
}
function wp_anythingslider_menu_function() {
  /* Shows the plugin settings... */
}

The admin plugin page is build as a simple table, that shows all the settings:

function wp_anythingslider_menu_function() {
  ?>

  <div class="wrap">
    <h2>Anything Slider</h2>
    <form method="post" action="options.php">
  <?php settings_fields('wp_anythingslider_settings'); ?>
      <table class="form-table">
      <?php $settings = getAnythingSliderSettings(); ?>
      <?php foreach ($settings as $setting) : ?>
        <tr valign="top">
          <th scope="row"><?php echo $setting[0]; ?></th>
          <td>
          <?php if ($setting[1] == 'boolean') : ?>
            <?php $selected = get_option('wp_anythingslider_' . $setting[0]) == 'true'; ?>
            <?php $checked = $selected ? ' checked="checked"' : ''; ?>
            <input type="checkbox" value="true"
              name="wp_anythingslider_<?php echo $setting[0]; ?>"
              <?php echo $checked; ?> />
          <?php else : ?>
            <input type="text" name="wp_anythingslider_<?php echo $setting[0]; ?>"
              id="wp_anythingslider_<?php echo $setting[0]; ?>" size="20"
              value="<?php echo get_option('wp_anythingslider_' . $setting[0]); ?>" />
          <?php endif  ?>
          </td>
        </tr>
        <tr valign="top">
          <td scope="row">Default: <strong><?php echo htmlentities($setting[3]); ?></strong></td>
          <td>Example: <strong><?php echo htmlentities($setting[4]); ?></strong></td>
        </tr>      
      <?php endforeach; ?>
      </table>

      <p class="submit">
        <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
      </p>
    </form>
  </div>

<?php
}

To link all the javascripts and stylesheets, two functions will help:

wp_enqueue_script('anythingslider',
  WP_PLUGIN_URL . '/wp-anything-slider/js/jquery.anythingslider.js',
  array('jquery'), '1.5.17', true);
wp_enqueue_style('anythingslider.styles',
  WP_PLUGIN_URL . '/wp-anything-slider/css/anythingslider.css');

The plugin can be hooked to filters that are called by WordPress when building the page: i.e. if you want to include the title of the post in a >h1< tag, you could do something like this:

function super_title($title) {
  return '<h1>' . $title . '</h1>';
}
add_filter('the_title','super_title');

and, after having activated the plugin, that function will be always applied (not something you want really, though).
Otherwise, you can expose functions that can be called from templates:

function show_anythingslider() {
  $options = array();
  $settings = getAnythingSliderSettings();

  foreach ($settings as $setting) {
    $name = 'wp_anythingslider_' . $setting[0];
    $value = get_option($name);

    if ($setting[1] === 'boolean')
      $value = $value == 'true' ? 'true' : 'false';

    if (!empty($value) && $value != $setting[3])
      $options[] = sprintf('%s: %s', $setting[0], ($setting[1] == 'string' ? "'" . $value . "'" : $value));
  }
 
  $options = implode(", \n\t", $options);

  echo <<<SCRIPT
  <script type="text/javascript">
    jQuery(function($) {
      $('.anythingslider').anythingSlider($options);
     
      $('.anythingslider img').show();
    });
  </script>
SCRIPT
;
 
}

This function can be included in your templates:

show_anythingslider();

or with a better form to avoid crashes when the plugin is disactivated:

if(function_exists('show_anythingslider'))
  show_anythingslider();

Usually, a plugin like this takes no more than a couple of hours to be created.

In the next tutorials, we’ll show you how to create them more object-oriented, and with a couple of tests.

http://codex.wordpress.org/Writing_a_Plugin
WordPress filters

Related News