WordPress Plugin Toolbox

July 8th, 2010Plugins, Tutorials, Wordpress, WordPress Tutorials0 comments

WordPress puts a lot of really useful utilities in the plugin developer’s toolbox. I’m going to go through a few of them here.

These are especially useful if you’re just beginning WordPress plugin development.

Define your WordPress plugin

This bit is placed at the top of your main plugin file: my_plugin.php:

/*
Plugin Name: My WordPress plugin
Plugin URI: http://my-plugin-site.com/my-plugin
Description: A description that describes my plugin and is shown on the WordPress plugin page
Version: 1.0
Author: Your Name
Author URI: http://my-plugin-site.com
License: Can people distribute this?
*/

Activate CSS and jQuery files

If we want to include a CSS file or any jQuery scripts so that our plugin looks and functions nice, we need to load those in our plugin file.

//first define your function
function myPluginScripts()
{
  //don't load the scripts if we're on an admin page
  if (!is_admin())
  {
    wp_enqueue_script('jquery');
    //tell our plugin where our files are located (this will equal "/wp-content/plugins/myPlugin/")
    $scriptFileDir= WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),'',plugin_basename(__FILE__));
 
    //load a css file
    wp_enqueue_style('myPluginCSS', $scriptFileDir.'css/myPlugin.css', false, '1.0', 'all');
 
    //load a jQuery script
    wp_enqueue_script('myjQueryScript', $scriptFileDir.'js/myjQueryScript.js', false, '1.0', 'all');
  }
}

WordPress Action Hooks

WordPress makes it really easy for developers to inserts code with their plugin into different sections of the website. We can use hooks to insert content into the site’s header, after every post, in the footer, etc.

The WordPress plugin API has a lot of useful information on action hooks.

Add Code or Content to the Head Section

A lot of code, for example javascript, often needs to be run from within the

<head>. . . </head>

This example function will add a bit of javascript to our site’s header section when the plugin is activated.

//first create the function
function myPluginJavaScript()
{
?>
  <script type="text/javascript">
    //<![CDATA[
      var $j = jQuery.noConflict();
      jQuery(document).ready(function()
      {
        //contact form validator
        jQuery("#myPluginForm").validate();
      });
    //]]>
  </script>
<?php
}
add_action('wp_head', 'myPluginJavaScript');

Add Code to the Footer

Perhaps we are writing a simple plugin that adds some content to the footer section of the WordPress theme. To do that we can use something like this:

// a function that creates the contact form
 
function myFooterContent()
{
  echo '<div class="myPluginContent">';
    echo '<p>My Plugin Content</p>';
  echo '</div>';
}
 
// now add it to the wp_footer
add_action('wp_footer', 'myFooterContent');

Add Content After Each Post

Want to add a related posts section after each post, or perhaps a footnote?

// your after each post function
 
function myPluginPostContent()
{
   $content .= 'I show up after every post!';
 
   return $content;
}
// insert the content after each post
add_filter('the_content', 'myPluginPostContent');

Going Further

These are just a few tools that can get you a long ways in WordPress plugin development.

The next thing to do if you’re just starting out is to go ahead and write your first plugin. Do what I did and write an extremely simple one that doesn’t something mundane. For example, my very first WordPress plugin did nothing more than turn all the text on a site blue.

Adding Administrative Menus is another great step to take in your beginning WordPress plugin development.

Follow @pippinspages

Blog