Add an options page to WordPress

This post is a little out of date – Read below

The framework is no longer available as an open source project and is now a premium framework!
But I’ve created another options page using only the theme customizer which is pretty awesome. It allows you to view the changes to your theme as you make them in the options page! So I should recommend clicking the link below to check out the newer very cool options page tutorial
Click to view “Create a better options page with the theme customizer”

An options page can give a theme much more value and with the help of a “Theme Options Framework” this can be a lot less painful to implement. There are a few out there to choose from, but personally I think that Lee Masons – NHP Theme Options Framework is one of the best. With a vertical section tabbed menu and an exhaustive list of features, I am sure this will fit your every need.

Begin by downloading the framework.

Unzip the file and move the nhp-options.php and the options folder to your chosen theme folder.

With that done…
Open up your themes functions.php in dreamweaver and add a call to the new template part.

get_template_part('nhp', 'options');

Now when you refresh your site you should see a new Theme Options tab.

Next open up the nhp-options.php and find this line (around line 103).

$args['opt_name'] = 'twenty_eleven';

Change the ‘twenty_eleven’ to your theme name or a name you’ll easily remember. I’m using ‘WPtricks’, so the new option name looks like this:

$args['opt_name'] = 'WPtricks';

Then below that change the Menu Title, Page Title and Page Slug to something that suits your design.

//Custom menu icon
//$args['menu_icon'] = '';

//Custom menu title for options page - default is "Options"
$args['menu_title'] = __('Theme Options', 'nhp-opts'); // I'm leaving this one as is.

//Custom Page Title for options page - default is "Options"
$args['page_title'] = __('WPtricks Theme Options', 'nhp-opts'); // Changed to WPtricks

//Custom page slug for options page (wp-admin/themes.php?page=***) - default is "nhp_theme_options"
$args['page_slug'] = 'wptricks_theme_options'; // Changed to wptricks_

That done, we’ll need to get the options that we’re about to create. Create a new variable
in our functions.php, below the get_template_part we added in the first step.

$WPT = get_option('WPtricks); // Use the opt_name we added earlier 

To use any of the options that we’re about to create, we’ll need to add a global call to this get_option.
We do this simply by adding global $WPT; followed by $WPT[‘option_name’]; to call the value.

Like so:

global $WPT; // Keyword we created
$WPT['option_name']; // Change the option_name to the name of the option we create.

For a full list of options visit the wiki:
Github wiki: https://github.com/leemason/NHP-Theme-Options-Framework/wiki
Using the options: https://github.com/leemason/NHP-Theme-Options-Framework/wiki/Using-The-Options

An few simple examples of how to use these in your theme are below:

Let’s say that you want to provide some layout options, well that’s really easy.

Let’s open up the new options page and in particular we’ll take a look at the radio and checkbox fields from the list of options. Scroll down to the Radio Image Option For Layout section.

You’ll notice the options plugin is kind enough to provide us with some simple image options, cool!

Now let’s make these work within the theme.

Open up the nhp-options.php and go to line 367.

array(
		'id' => 'radio_img',
		'type' => 'radio_img',
		'title' => __('Radio Image Option For Layout', 'nhp-opts'), 
		'sub_desc' => __('No validation can be done on this field type', 'nhp-opts'),
		'desc' => __('This uses some of the built in images, you can use them for layout options.', 'nhp-opts'),
		'options' => array(
			'1' => array('title' => '1 Column', 'img' => NHP_OPTIONS_URL.'img/1col.png'),
			'2' => array('title' => '2 Column Left', 'img' => NHP_OPTIONS_URL.'img/2cl.png'),
			'3' => array('title' => '2 Column Right', 'img' => NHP_OPTIONS_URL.'img/2cr.png')
			),

You can see that each options key is represented by a number (1, 2 + 3) . If we want to use these as a usable class for our div tags then we should rename them to something we can use in our CSS.

Replace the above with this below, I’ve just changed the id to something more descriptive and given each option a logical key name.

array(
		'id' => 'position',
		'type' => 'radio_img',
		'title' => __('Radio Image Option For Layout', 'nhp-opts'), 
		'sub_desc' => __('No validation can be done on this field type', 'nhp-opts'),
		'desc' => __('This uses some of the built in images, you can use them for layout options.', 'nhp-opts'),
		'options' => array(
			'no-sidebar' => array('title' => '1 Column', 'img' => NHP_OPTIONS_URL.'img/1col.png'),
			'left-sidebar' => array('title' => '2 Column Left', 'img' => NHP_OPTIONS_URL.'img/2cl.png'),
			'right-sidebar' => array('title' => '2 Column Right', 'img' => NHP_OPTIONS_URL.'img/2cr.png')

Let’s use this in our single.php.

Open your single.php.

Below the get_header(); call add the required* global tag.

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>
<?php global $WPT; ?>

Then we just need to add the selected class to the #content div.

<div id="content" role="main" class="<?php echo $WPT['position']; ?>">
				<?php while ( have_posts() ) : the_post(); ?>
					<nav id="nav-single">

When you refresh the single post page, inspect the newly added tag! Now you just need to add the appropriate CSS to your style sheet and your done.

.no-sidebar #secondary {display: none;}
.left-sidebar #secondary,
.right-sidebar #primary {float: left !important;}
.right-sidebar #secondary,
.right-sidebar #primary {float: right !important;}

Like I said this is super easy and you’re only restricted by your imagination with this great plugin.