WordPress Theme Options

WordPress is often considered as a simple blogging application, but the reality is that, its so much more. Its one among the most popular tools for creating and managing websites. i.e. anything from a simple blog to a full-featured business website. Without writing a single line of code, without any knowledge on HTML, you will be able to create and manage your website. In short , wordpress is a free, open source software for website creation, written on PHP. Now we are going to discuss on the theme options on wordpress through this blog. Let me start by telling on what is a theme option.

What is Theme Option ?

Most of the Premium WordPress Themes, nowadays, offers a custom admin page to manage a variety of theme settings using the Theme Options. You can use this to change the theme settings without working on the code. These theme option pages can be very simple (like in the default Twenty Eleven theme) with few basic settings or it can have a lot of custom feature settings split into either tabs or multiple pages.

It is important to understand that WordPress themes are NOT required to have an options page. For example, Twenty Twelve, one of the default WordPress themes does not have a Theme Options page. Instead it uses the WordPress theme customizer feature which allows users to customize their themes with a live preview.

Why use Theme Option?

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.

Theme options are good only when its used to modify theme specific settings. But when its used to modify content related changes in a page, it will prove to be a bit complicated. When a build is moved from development to production, theme options should be moved separately using the import-export option within Option Tree. A direct database backup and restore will not move the theme option data properly.

Some of the good settings that can be given within theme options are :

• Social network links.
• General Contact information.
• Copyright text.
• Google analytics code.
• Homepage Slider Images
• Setting up Theme Options

If you already have a theme, but which does not have theme options in it, then you can integrated theme options to it quite easily.

Step 1 :
Download OptionTree from wordpress plugin repository Click here.

Step 2 :
Unzip and Paste downloaded package to your theme folder! Folder name “option-tree”.

Step 3 :
Copy and Paste following code into your theme functions.php

/**
* Hide the settings & documentation pages.
*/
add_filter( ‘ot_show_pages’, ‘__return_false’ );

/**
* Set theme mode true
*/
add_filter( ‘ot_theme_mode’, ‘__return_true’ );

/**
* Hide layout option from option tree
*/
add_filter( ‘ot_show_new_layout’, ‘__return_false’ );

/**
* Required: include OptionTree.
*/
include_once( ‘option-tree/ot-loader.php’ );
/**
* Theme Options
*/
include_once( ‘option-tree/assets/theme-mode/demo-theme-options.php’ );

/**
* Meta Boxes
*/
include_once( ‘option-tree/assets/theme-mode/demo-meta-boxes.php’ );

Theme Options will be listed within Appearance main menu. Option Tree will be listed as one of the main menus.

You use Option Tree to set the various editable sections in Theme Options. Import and Export of theme options settings and data is also done using the Option Tree menu.

The theme options data gets stored as an entry with the name ‘Option_tree’ and value as the option data , in the wp_options table.

Setting Up your social network links in Theme Options

Let’s write some code now and setup our first theme options elements. Lets’ setup the social network links of the website to be managable from within the theme options. We will add the Facebook, Twitter and Pinterest links.

1. Go to Option Tree >> Settings

2. Within theme option UI builder, you will see the default General Section

3. Click on the Add Setting button below it.

4. Fill in the facebook settings as shown below:

5. Click Save Changes.

6. Do the same to add Twitter and Pinterest setting as well.

7. Now if you go to Appearance >> Theme Options, you can see the Facebook, Twitter and Pinterest as Editable textboxes within the General Section.

8. Add the relevant URLs and click Save Changes.

9. Now to retrieve the values saved in these settings, use the following code:

if ( function_exists( ‘ot_get_option’ ) ) {
$test_input = ot_get_option( ‘test_input’ );
}

Here you can replace $test_input as the variable into which you need to fetch the value of the option ‘test_input’. For our example, following will be the code :

if ( function_exists( ‘ot_get_option’ ) ) {
$facebook = ot_get_option( ‘facebook_url’ );

 $twitter = ot_get_option( ‘twitter_url’ );
$pinterest = ot_get_option( ‘pinterest_url’ );
}

You can then print these values within the href attribute of the <a> tag, where you want the links to be placed.

You can use the options Tree >> Documentation section to study further on the various Option Types and its usages. Easy to grasp examples are available in the documentation. If you have thought out your options well, then you can be up and running in a couple of days.

Hope you enjoyed this post. Let me know with a comment and stick on to cubet’s blog page for the next post. 🙂

Know More About This Topic from our Techies