Creating A Premium WordPress Theme

Facebook
Twitter
LinkedIn

WordPress is a free open source blogging tool and content management system. As you already know there are millions of websites running off thousands of unique themes. These themes are usually downloaded from sites such as Theme Forest, Template Monster, or even directly from WordPress. When you are searching for these themes you often hear the term “premium” being used. So the first question is what defines a premium WordPress theme and the second how can you develop your own premium WordPress themes.

The short answer to the first question would the themes ability to be customized. How many options does your theme have? Most premium WordPress themes allow their users to change basic design elements such as colors, fonts, and even in some cases provide various layout options.

Adding theme options to your website is relatively simple if you are familiar with WordPress theme development. We are going to show a quick example of adding an address field to WordPress general settings tab.

Start by opening your functions.php file and past the following code in.

<?php

add_filter( ‘admin_init’ , ‘register_address’  );

function register_address() {
        register_setting( ‘general’, ‘website_address’, ‘esc_attr’ );
        add_settings_field(‘web_add’, ‘<label for=”website_address”>’.__(‘Address’ , ‘website_address’ ).'</label>’ , ‘address_html’ , ‘general’ );
}

function address_html() {
        $value = get_option( ‘website_address’, ” );
        echo ‘<input type=”text” id=”website_address”  name=”website_address” value=”‘ . $value . ‘” />’;
}
?>

Starting from the top working our way down the add_filter function hooks a custom function to a specific WordPress action. In our case we are hooking into “admin_init”. This is called every time the administrator section is loaded. The second parameter defines the function that is called when the admin section is loaded.

The register_address function contains two main parts. The register_setting function allows you to automatically generate settings by passing a few parameters. In our case we are creating a setting called website_address and placing it into the general option group. The third parameter “esc_attr” defines the sanitization callback. By default this parameter does not need to be added.

Secondly we are calling add_setting_field. This function physically creates our address field in general settings area. Web_add defines the ID of our field. The second parameter is equal to the field’s title. This will be physically rendered onto the general settings page so in our case we have decided to use a label. The third parameter “address_html” is a call back function.  This function will eventually be used to display our input field. And lastly again the section on the page we wish to show our new address box.

Address_html callback has a variable of value. Value is checking to see if the website_address option has been added to the database and if it has we will render its value into the input.

Once this piece of code has been added to your website WordPress will handle the rest. Our setting is registered and when an update is made its corresponding value will be added to our database. To display its value into our theme we simple call the get_option function.

Now adding one address field to your theme will not define it as a “premium theme” but it’s a start. With a little creativity you can use this method to create many more options and be well on your way to developing premium WordPress themes.

If you wish to learn more about some of the functions used in this tutorial have a look at the WordPress Codex.

Add_filter
Register Setting
add_settings_field
get_option

Facebook
Twitter
LinkedIn

COMPLIMENTARY 20-MINUTE STRATEGY SESSION!

We’re eager to learn about your project. Contact us for a free strategy session.

Let’s Get Started!