Wordpress Tip: How to Create a Plugin to Help Automate a Complicated Theme

Most of my Wordpress design work has been for bloggers thus far. Designing a template for a blogger is usually straightforward and doesn't require much Wordpress hacking development work to get it what you want it to do. Most of that type of work is UI and design orientated.

But what about if you are a newspaper or some other type of publisher? A newspaper always has a major headline or breaking news they want to show across the whole site in an instant. A magazine always has to show the details on the current issue available in stores. Wordpress doesn't natively give you the ability to create theme specific variables, and since more often than not this information can't be pulled directly from a page, post or link, the need for a Wordpress Option (or two) is in order.

Steps to Create a Plugin that Saves Time & Effort

To be able to take advantage of Wordpress Options, you need to create a Wordpress Plugin. There is a lot to be scared of when creating one, but if you just buckle down and dissect the simplest of example plugins with me below, you will find that the work involved with learning and creating a plugin is well worth it.

1. The Plugin Header

This is at the top of every plugin. The comments below are what eventually are pulled into the plugin page of the Wordpress install. This part is pretty un-intimidating and self explanatory.

<?php
/*
Plugin Name: My Theme Options
Plugin URI: http://www.yourdomain.com/
Description: Sets My Theme's Options
Version: 1.0
Author: Joe Shmoe
Author URI: http://www.yourdomain.com/
*/

2. Install & Uninstall Routines

The first 3 lines here tell the plugin what to do when it is Activated, Deactivated and what function to run to create the dashboard admin page, respectively.

Below those 3 lines are the functions that create and delete the new Wordpress Options from the Wordpress database table.

Remember: You will need to add to or change the options listed in the example to fit your theme's requirements and filter those changes down though the rest of the steps.

register_activation_hook(__FILE__,"mythemeopt_install");
register_deactivation_hook(__FILE__,"mythemeopt_uninstall");
add_action('admin_menu','mythemeopt_add_admin_page');

function mythemeopt_install () {
  	global $wpdb;
		require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
		dbDelta($sql);
		
		add_option("mythemeopt_current_date", '');
		add_option("mythemeopt_current_title", '');
		add_option("mythemeopt_current_thumbnail", '');
   	}
   	
function mythemeopt_uninstall () {
		delete_option("mythemeopt_current_date");
		delete_option("mythemeopt_current_title");
		delete_option("mythemeopt_current_thumbnail");
}

3a. Setting up the Dashboard Admin Page

This function creates a top-level menu page, with the title of "My Theme Options" which runs the "mythemeopt_options" to create the admin page. You could probably get away with not changing any of this if you end up keeping my naming conventions.

function mythemeopt_add_admin_page () {
	add_menu_page(
		'My Theme Options',
		'My Theme Options',	
		'manage_options',	
		__FILE__,	
		'mythemeopt_options'
	);  
}

3b. Updating the Dashboard Admin Page's Data

This is the function that is called from the above setup function. It checks to see if an update has been submitted by the admin page, and if so: it updates the WP database table with the new values, otherwise it shows the page HTML. The only thing you need to make sure of here is that you include every option here that you declared up in Step 2.

function mythemeopt_options () {
	if ($_REQUEST['submit']) {
		mythemeopt_update_options();
	}
	echo '<div class="wrap"><h2>My Theme Options</h2>';
		mythemeopt_form();
	echo '</div>';	
}

function mythemeopt_update_options() {
	$updated = false;
	
	if ($_REQUEST['mythemeopt_current_date']) {
	update_option('mythemeopt_current_date', $_REQUEST['mythemeopt_current_date']);
	$updated = true;
	}
	if ($_REQUEST['mythemeopt_current_title']) {
	update_option('mythemeopt_current_title', $_REQUEST['mythemeopt_current_title']); 
	$updated = true;
	}
	if ($_REQUEST['mythemeopt_current_thumbnail']) {
	update_option('mythemeopt_current_thumbnail', $_REQUEST['mythemeopt_current_thumbnail']);
	$updated = true;
	}
	
	if ($updated) {
	echo '<div id="message" class="updated fade">';
	echo '<p>My Theme Options Updated</p>';
	echo '</div>';
	} else {
	echo '<div id="message" class="error fade">';
	echo '<p>Unable to update My Theme Options</p>';
	echo '</div>';
	}
}

3c. Creating the Dashboard Admin Form and Page

This is the part of the plugin that generates the admin page's HTML. You have some leeway here as to what you make the page look like, and the only requirement is that you first pull the options from the WP database (first 3 lines), and then create the inputs for those options in the form below it.

function mythemeopt_form() {
	$mythemeopt_current_date = get_option('mythemeopt_current_date');
	$mythemeopt_current_title = get_option('mythemeopt_current_title');
	$mythemeopt_current_thumbnail = get_option('mythemeopt_current_thumbnail');

echo "<form method=\"post\">";
echo "<h3>My Theme Requirements</h3>";
echo "<p><label>Current Theme Date:</label>";
echo "<input type=\"text\" name=\"mythemeopt_current_date\" value=\"".$mythemeopt_current_date."\" />";
echo "<label>Current Theme Title:</label>";
echo "<input type=\"text\" name=\"mythemeopt_current_title\" value=\"".$mythemeopt_current_title."\" />";
echo "<label>Current Theme Thumbnail:</label>";
echo "<input type=\"text\" name=\"mythemeopt_current_thumbnail\" value=\"".$mythemeopt_current_thumbnail."\" /></p>";
echo "<p class=\"submit\"><input type=\"submit\" name=\"submit\" value=\"Update My Theme Options\" /></p>";
echo "</form>";
}

4. Finally, The Template Function!

This is the function that ends up getting called from your theme's templates. In this example we accept one variable ($myopt_request) and use that variable to determine which option to display back to the template. Since we created only 3 options with this example plugin, we only have 3 potential function calls:

  • One to display the date <?php echo mythemeopt('date'); ?>
  • One for the title <?php echo mythemeopt('title'); ?>
  • …and another for the thumbnail location <?php echo mythemeopt('thumbnail'); ?>
function mythemeopt ($myopt_request) {
	
	global $wpdb;
	$myopt_date = get_option('mythemeopt_current_date');
	$myopt_title = get_option('mythemeopt_current_title');
	$myopt_thumbnail = get_option('mythemeopt_current_thumbnail');
	
	if ($myopt_request == 'date') { return $myopt_date; };
	if ($myopt_request == 'title') { return $myopt_title; };
	if ($myopt_request == 'thumbnail') { return $myopt_thumbnail; };
	
}

When you create Wordpress options with a plugin like this, you have the ability to call for this information from just about anywhere. You are no longer bound to only working from within the Loop and because of this, the possibilities are endless.

Go try it out… but before you go too far, here are a few of my plugin creation tips to make life a little easier:

  • Return, don't echo - I have made it a habit to return all my variables instead of echoing them. This will allow you to manipulate the data given to you as you see fit, whether it be changing the date format or putting it in an if statement.
  • Admin not Options - I usually create an top-level menu page, and not a page within the Options submenu to make life easier for whoever is going to run it. You do this by using add_menu_page as opposed to add_options_page in Step 2. You obviously don't need to do this to make the plugin work.

Download the Full Example

Download this exact plugin and try it for yourself.

Post a Comment (rss)





Pittsburgh Web Design - Cagintranet Web Design