Something to keep me busy

Building my first WordPress plugin

November 9th, 2008 by wes

Take a look to the right of my site, see that little twitter feed on the sidebar?  That’s a new plugin I just created.  I had tried a few different twitter plugins for WordPress, but none of them did exactly what I wanted.  Plus, I have been meaning to take some time to figure out how to create plugins and this was a good opportunity to do just that.  Feel free to comment if there are easier/better ways of creating plugins.

The first thing I did was create a new directory in my wp-content/plugins/ directory.  I named my plugin twitkick. The name is derived from twitter and kickstand.  Kickstand is the name of my web development agency, I plan to make more plugins under the kickstand name.

Inside wp-content/plugins/twitkick I created a new file named twitkick.php.  At the top of that file I needed to include some information.

<?php
/*
Plugin Name: Twitter Kicker
Plugin URI: http://wesbillman.com/twitter-kicker
Description: Twitter Kicker for WordPress
Author: Wes Billman
Author URI: http://wesbillman.com
*/
?>

The above should get the plugin to appear in your WordPress plugins list.  Now I’m going to make the plugin actually do something.  I started building my plugin by creating the admin page first and then the actual content.  So, to hook into the admin page I added the following to twitkick.php.

// Hook for adding admin menus
add_action(‘admin_menu’, ‘tk_admin_page’);

This will add a hook to WordPress to call “tk_admin_page” when building the admin menu.  Now I needed to add code for “tk_admin_page”.

// action function for above hook
function tk_admin_page() {
// Add a new submenu under Options:
add_options_page(‘Twitter Kicker’, ‘Twitter Kicker’, 8, ‘twitkickoptions’, ‘tk_options_page’);
}

Then, I created an options page to control the options for my plugin.  Most of the code below is just for styling to match WordPress admin pages.  The important part is “get_option(‘twitter_username’);” this is the only option I created for my plugin.

// tk_options_page() displays the page content for the Test Options submenu
function tk_options_page() {
?>
<div class=”wrap”>
<h2>Twitter Kicker</h2>

<form method=”post” action=”options.php”>
<?php wp_nonce_field(‘update-options’); ?>

<table class=”form-table”>

<tr valign=”top”>
<th scope=”row”>Twitter Username</th>
<td><input type=”text” name=”twitter_username” value=”<?php echo get_option(‘twitter_username’); ?>” /></td>
</tr>

</table>

<input type=”hidden” name=”action” value=”update” />
<input type=”hidden” name=”page_options” value=”twitter_username” />

<p class=”submit”>
<input type=”submit” name=”Submit” value=”<?php _e(‘Save Changes’) ?>” />
</p>

</form>
</div>

<?php
}

At this point I had a functioning admin page that would create  and save my options.  So, it’s time to make the plugin display in the sidebar (hopefully you’re using a theme with proper widget hooks).  I added a new hook function “add_action(‘init’, ‘tk_init’)”

// Hook for adding admin menus
add_action(‘admin_menu’, ‘tk_add_pages’);
add_action(‘init’, ‘tk_init’);

And finally, populate the “tk_init” function to get the plugin to display.

// action function for above hook
function tk_init() {
if ( !function_exists(‘register_sidebar_widget’) || !function_exists(‘register_widget_control’) )
return;

function widget_twitkick($args) {

//setup some variables
$twitter_url = ‘http://twitter.com/’;
$user_feed_url = $twitter_url . ‘statuses/user_timeline/’ . get_option(‘twitter_username’) . ‘.rss’;
$user_feed_url.= ‘?count=5′;
$user_twitter_home = $twitter_url . get_option(‘twitter_username’);

echo “<li id=\”twitkick\” class=\”widget twitkick\”>”;
?>
<div id=”twitter_div”>
<h1 class=”sidebar-title”>Twitter</h1>
<ul id=”twitter_update_list”></ul>
</div>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/wesbillman.json?callback=twitterCallback2&amp;count=5″></script>
<?php
echo “</li>”;
}

register_sidebar_widget(array(‘Twitter Kicker’, ‘widgets’), ‘widget_twitkick’);
}

That should be all.  Please add a comment if you have any suggestions or questions.

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.