This article contains a simple and easy to use method for creating theme option pages. You can create as many pages as you like and even repeat the process to separate themes. This method does not use the new theme customiser but I will be writing a post for the new theme customiser to help with changing colours, fonts and other things that change before your eyes!
What you need to know.
There are some things you need to know before starting this tutorial, I recommend getting to grips with all of them.
- How WordPress themes work.
- The Functions.php file.
Ok great, now that we know we have a good base to work from it’s time to look at what an option page actually is and what we can do with them.
Why Theme Options Pages?
Theme option pages are great for updating static content, colours, fonts and anything inside the theme which is not content. Giving the user the ability to change options which affect the header.php, footer.php and the styles allows them to make changes without knowing HTML and CSS. A theme option page also allows the user to update their theme without losing their settings. If these settings were hard coded then they would lose these changes if the theme was ever updated.
Examples Of Good Options
An example of a good option is generally a small bit of information which fits inside the theme but not inside the content area. Check out my list below of the most used options on a couple of themes I have developed for clients.
- Contact information.
- Social network links.
- Copyright text.
- Google analytics code.
- Heading text.
Ideas For Good WordPress Theme Options
Finding good snippets to turn into options for a WordPress theme is quite easy, ask your clients or look at successful themes on themeforest and other popular websites.
If you are really struggling to find good options for themes, then it’s probably a good idea to either not add any more or to just focus on the ones you do have and extend them or make them easier to use.
WordPress Theme Option Page Code
Ok enough of the theory and examples, it’s time for some code. We are going to start off with something relatively simple, adding the option to add a google analytics tracking code.
/**
* Step 1: Create link to the menu page.
*/
add_action('admin_menu', 'ew_create_menu');
function ew_create_menu() {
//create new top-level menu
add_menu_page(__('Theme Settings', 'epicwebs'), __('EpicWebs Theme', 'epicwebs'), 'administrator', 'epicwebs-theme-settings', 'ew_settings_page', 'dashicons-megaphone');
}
/**
* Step 2: Create settings fields.
*/
add_action( 'admin_init', 'register_ewsettings' );
function register_ewsettings() {
register_setting( 'ew-settings-general', 'ew_analytics_code' );
}
/**
* Step 3: Create the markup for the options page
*/
function ew_settings_page() {
?>
<div class="wrap">
<h2><?php _e('Theme Settings', 'epicwebs'); ?></h2>
<form method="post" action="options.php">
<?php if(isset( $_GET['settings-updated'])) { ?>
<div class="updated">
<p><?php _e('Settings updated successfully', $textdomain); ?></p>
</div>
<?php } ?>
<table class="form-table">
<tr><td colspan="2"><h3><?php _e('Google Analytics Code', 'epicwebs'); ?></h3></td></tr>
<tr valign="top">
<th scope="row"><?php _e('Google Analytics Code', 'epicwebs'); ?></th>
<td>
<textarea name="ew_analytics_code"><?php echo get_option('ew_analytics_code'); ?></textarea>
<p class="description"><?php _e('Your google analytics tracking code.', 'epicwebs'); ?></p>
</td>
</tr>
<?php settings_fields( 'ew-settings-general' ); ?>
<?php do_settings_sections( 'ew-settings-general' ); ?>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php }
There is three sections to the code above, creating the options page menu to show in the admin area, the creation of the fields using the WordPress settings api and the actual markup to send the information and save it. Options pages used to be a lot more difficult before the WordPress settings api was introduced in 2.7.
Step 1: Creating the options menu in wp-admin
Creating a link to the options menu is relatively simple. First you need to hook into the admin_menu action and then write a function to add a menu page. Inside that function you can use the add_menu_page function, this allows you to create a menu link and supply a function which is used to output the HTML for the page, in our example: ew_settings_page.
Step 2: Creating settings fields using the WordPress settings API
This step used to be a lot more involved but in WordPress 2.7 the settings API was introduced, this has made adding and updating fields a lot easier. Using the admin_init action we can hook into it and supply a function to register settings. Think of settings as html form fields, it makes it a little easier to understand, although settings might not always be updated with a form field.
In the register_ewsettings() function we use the register_setting() function from the settings API. Supply the function with a settings section, like general-settings and then an individual setting, like analytics-code. For each setting (form field) you require you will need to register a setting.
Step 3: Creating the markup for the options page
There is standard markup for WordPress admin pages, it’s always recommend to copy WordPress admin page markup and then fit your form inside it. In the example above we use form-table class on a table, to display labels to the left and inputs to the right. The majority of the rest is fairly simple, it’s just HTML with form fields for each setting.
The important part of step three is making sure you use the settings_fields() function and the do_settings_section() function. This adds the required fields to edit and update your settings. You will also need to use the submit_button() to output a button to save your settings.
Step 4: Displaying your analytics code on the front end.
Now that you have an option you can update and edit, it’s time to use the option. Check out the basic code below to show your option on the front end, remember to sanitise the get_option value.
function ew_display_analytics_code() {
// Please sanitise me first, I could be dirty!
echo get_option('ew_analytics_code');
}
add_action('wp_footer', 'ew_display_analytics_code');
A final tip for the options page is to make sure any settings that have been saved are then pulled into the form field so that when the user saves the form again they don’t lose their data. This is achieved by using the get_option() function. It just grabs a settings value, you need to make sure you echo this value or save it to a variable to use later. The get_option() doesn’t actually sanitize any data, you will want to use something like filter_var() before you display it to the user.
Good luck with your site, leave your questions and comments below!
Comments