How to Create an Option Page for Your WordPress Theme

You should consider adding a theme options page for your theme in order to make your theme more user friendly. This will help the users of your theme to customize various aspects of the theme by choosing the options from this settings page.

It also enables your user to easily change and update information such design template, color, font family, font size etc. Creating custom options panels in WordPress is very easy and in this article I will show you how to add an option page to your WordPress theme.

Step 1. Register Admin Menu

To show the options page to the users, you have to register a menu item in WP admin panel. You have to use add_menu_page()function for that. The add_menu_page()function will require some parameters to register the menu in the WordPress environment.

The required values are:

Page Title (This is required. The text to be displayed as title of the page when the menu is selected)

Menu Title (This is required. The on-screen name text for the menu)

Capability (This is required. The capability defines how the menu will be displayed to the user)

Menu Slug (This is required. The slug name which is referred the menu)

Function (The function is optional. This is the function that will display the page content for the menu page)

Icon URL (This is another optional option. The icon url that is to be used for the menu)

Position (The position in the menu order this menu should appear. You will find details here)

For example, to add a menu named Custom Theme you will use the following code:

<?php
add_action('admin_menu', 'register_custom_theme_page');
function register_custom_theme_page() {
add_menu_page('Custom Theme Title', Custom Theme', 'manage_options', 'custom_theme', 'theme_customization_options', bloginfo('template_url') . '/images/menu_icon.png', 6);
}

function theme_customization_options(){
//custom option code goes here.
}
?>

Step 2. Add Options for Your Theme

Now you have to create a form to display your theme options to the user. As we have passed the theme_customization_options as the function reference, we have to write all the code in the theme_customization_options() function.

Lets say, you want to give your users the option to choose theme style to change theme’s look dynamically from the options page. The following example code will do that:

<?php
function theme_customization_options(){
//custom theme options code goes here.
?>
<h2>Custom Theme</h2>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options') ?>
<div>
<strong> Theme Name </strong><br />
<select name="themestylecss">
<option <?php echo get_option('themestylecss') == "style_red" ? 'selected="selected"' : ''; ?> value='style_red'>Red Theme</option>
<option <?php echo get_option('themestylecss') == "style_blue" ? 'selected="selected"' : ''; ?> value='style_blue'> Blue Theme </option>
</select>
</div>
<div>
<input type="submit" name="Submit" value="Change Style" />
</div>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="themestylecss" />
</form>
<?php
}
?>

Step 3. Use The Option in Your Theme Code

The above code will give users the option to choose the theme style. You can then retrieve the value saved in this option by simply calling get_option(‘themestylecss’).

Now, In your theme’s header you can call the following line to load the correct CSS file based on the user’s selection in the options menu:

<link media=”all” type=”text/css” href=”<?php bloginfo(‘template_url’) . ‘/’ . get_option(‘themestylecss’) . ‘.css’; ?>” rel=”stylesheet”>

This will automatically load the correct CSS file based on the user selection.

I have shown you a very simple way to create theme options page for your theme in this tutorial. Now, you could easily extend this functionality to add more options for your theme.