Creating a tradition WordPress themes options page

Whether you’re building WordPress themes for yourself, for a client, or to sell commercially, carrying a ability to customize aspects of your topic around a WordPress control quarrel creates your topic perpetually pliant and many times some-more versatile and appealing.

By giving backend users opening to options that differently would rivet delving into a php template files to change layout, heading image, colors, and any array of other options.

A permitted options quarrel can be total to any topic by some easy additions to your theme’s functions.php file.

The methods discussed here will customarily ask to WordPress 2.8 or above. There are a array of other tutorials permitted if you’re controlling an comparison account of  WordPress

What to make customizable

Before doing any coding, we need to validate what elements of a topic we wish customizable. This can be anything from a list of selectable tinge schemes to an unconditionally new plans for your homepage. For a example, I’m going to keep it facile yet a same routine can be scaled to any class of customization you’d like.

There are 3 elements that we will be needing to be customized with this theme:

1. Text quarrel for an introduction order on a homepage.
2. The user’s Facebook form URL
3. An choice to bury or expose a intro paragraph.

Creating a code

Starting with WordPress 2.8, a array of hooks have been total to encourage a fad of tradition admin menus. We will use some of these to emanate a tradition topic settings menu for a WordPress backend.

Our initial retard of regulation calls a functions to store a new choice values in a database as good as initiating a arrangement of a HTML regulation for a options page and formulating a “Theme Options” menu intent in a WordPress backend.

?php 

add_action( 'admin_init', 'theme_options_init' );
add_action( 'admin_menu', 'theme_options_add_page' ); 

function theme_options_init(){
 register_setting( 'sample_options', 'sample_theme_options');
} 

function theme_options_add_page() {
 add_theme_page( __( 'Theme Options', 'sampletheme' ), __( 'Theme Options', 'sampletheme' ),
'edit_theme_options', 'theme_options', 'theme_options_do_page' );
}

Now we will write a avocation that contains a discernible cost of a topic settings page.

function theme_options_do_page() { tellurian $select_options;
 if ( ! isset( $_REQUEST['settings-updated'] ) ) $_REQUEST['settings-updated'] = false;

Here we will arrangement an statue and due for a page and some acknowledgment regulation for a user to validate that their settings were saved when a form is submitted.

div
?php screen_icon(); describe "h2". __( 'Custom Theme Options', 'customtheme' ) . "/h2"; ?
?php if ( feign !== $_REQUEST['settings-updated'] ) : ?
div
pstrong?php _e( 'Options saved', 'customtheme' ); ?/strong/p/div
?php endif; ?

Now, we emanate a form a topic options, collect a extant values for any choice and discuss a settings organization name.

form method="post" action="options.php"
?php settings_fields( 'sample_options' ); ?  

?php $options = get_option( 'sample_theme_options' ); ?

Next, we addition a bit of regulation to bucket a remote record that can arrangement benefaction information for a topic user as good as links to support forums, assistance documents, or other subordinate files.

This is a permitted proceed for topic developers to keep your topic business updated with your latest information, consolidate tracking regulation to see who is controlling your topic to quarrel topic piracy, arrangement ads or special offers, emanate warnings about topic bugs or any array of other possibilities.

table
tr valign="top"td
?php @readfile("http://www.themedeveloperpage.com/news.htm"); ?
/td
/tr

Now, it’s time to arrangement a permitted options. First, we arrangement a checkbox to discuss possibly or not to arrangement a intro order on a theme.

tr valign="top"th scope="row"
?php _e( 'Display Intro Paragraph', 'customtheme' ); ?/th
td
input id="sample_theme_options[showintro]" name="sample_theme_options[showintro]" type="checkbox" value="1"
?php checked( '1', $options[‘showintro'] ); ?
/td
/tr

Next, we arrangement a ease quarrel for a Facebook URL of a user.

tr valign="top"th scope="row"
?php _e( 'Facebook URL', 'customtheme' ); ?/th
td
input id="sample_theme_options[fburl]" type="text" name="sample_theme_options[fburl]"
             value="?php esc_attr_e( $options['fburl'] ); ?" /
label for="sample_theme_options[sometext]"?php _e( 'http://facebook.com/yourprofileurl', 'customtheme' );
              ?/label /td
/tr

Moving on, we arrangement a textarea for a intro order text.

tr valign="top"th scope="row"?php _e( 'Intro Paragraph', 'customtheme' ); ?/th
td
textarea id="sample_theme_options[introtext]"
class="large-text" cols="50" rows="10" name="sample_theme_options[introtext]"?php describe esc_textarea
                  ( $options['introtext'] ); ?/textarea
/td
/tr
/table

Finally, we arrangement a quarrel pitch for a form.

p
input type="submit" value="?php _e( 'Save Options', 'customtheme' ); ?" /
/p
/form
/div
?php }

We now should finish adult with an options page such as this.

Now that we’ve got a admin side squared away, let’s combine these tradition settings into a theme. We now have 3 settings during a grouping – a checkbox that tells us possibly or not to arrangement a intro text, a discernible intro text, and a Facebook URL. In a header.php file, we’re going to feed these settings into an array called $options.

?php $options = get_option( 'sample_theme_options' ); ?

Now, we’re going to locate a prejudiced of a template where a intro ease will go and examine possibly or not to arrangement it. If we are to arrangement it, we fabrication a ease that was entered in a tradition admin panel.

?php if ($options['showintro'] == 1) { ?
div id="introtext"
?php describe $options['introtext'] ?
/p
/div
?php } ?

Now, we can find where we would like to arrangement a integrate to a Facebook form and arrangement a information in a matching manner. This time, we initial check to see if a value is entered. If a value has been entered, we go brazen and arrangement a Facebook statue image.

div id="sociallinks"
?php if isset($options['fburl']) { ?
a href=”?php describe $options['fburl'] ?" target="new"
img id="socialicons" src="smicons/facebook_icon.png" alt="Facebook Profile ?php describe $options['fburl'] ?"
/a
?php } ?
/div

These are unequivocally facile examples of how to oversee tradition options yet anything about your topic can be deteriorated in this feeling so a possibilities are endless. A well-designed options quarrel can be used as a offering prove for your topic and can make a unequivocally good designed topic even some-more appealing and versatile.

Options quarrel examples

For some-more ideas, check out some of a some-more renouned topic developers’ options panels.

Templatic

Templatic themes have a unequivocally pure and apparent options page.

WooThemes

A builder of stately WordPress themes, WooThemes‘ options quarrel provides opening to a array of customizations, shop-worn adult into subsections controlling their possess tradition layout.

FlexiThemes

The FlexiPanel options quarrel from FlexiThemes is a basic, yet easy-to-use panel.

Theme Warrior

Clear links to topic support tip a tabbed interface on a Theme Warrior options interface.

ThemeShift

Another uncluttered, well-designed options page that uses some unequivocally good jQuery options for topic tinge selection.

Kreative Themes

Kreative Themes is one of a few prerogative topic developers that indeed shows screenshots of a tradition options quarrel to encourage their themes. Their options quarrel is clean, well-designed and includes links to documentation, support forums and a changelog for a tide theme.

Custom layouts, Ajax, jQuery and beyond

Many prerogative topic developers spend a lot of time formulating tradition styles layouts for their options page. While this competence make them mountain out from a mob when looking during a page of screenshots, we feel it detracts from a WordPress UX. Remember, a user of a topic competence not be unequivocally saavy and we don’t wish someone to be buzzing by a WordPress backend to astonishing stop and amazement since a interface is astonishing drastically different. Keeping your settlement unwavering with a prevalent WordPress admin plans is, in my opinion, a best option.

You competence name to offer extend your options quarrel by integrating Ajax and jQuery so that your options can be updated though carrying to modernize a page. While this is a little tweak, it creates a page seem many some-more pointy and discriminating though potentially fraudulent your user.

In a end, we wish to enfeeble your user with ease-of-use. Your thought should be to have your topic spin a starting prove for your users website. The some-more customizable a theme, a some-more your user will feel like it is “theirs”.

Mike Moffit is an aged disseminate operative and developer during Arma Creative.

What do we find is a common problem with content topic choice panels? Has a tradition options quarrel ever assured your welfare in purchasing a WordPress theme?