Easily Create Theme Options for WordPress Theme: Part 3

I two of the previous part you have learned how to add theme options in your WordPress theme. We have shared one options.php file in where we actually set tab and property according to our site requirements. In this final part You will learn how you can add new tab and new property under each tab so that you can customize theme options easily.

add-theme-option-wordpress-part3

 

First of all open options.php file in an editor (notepad, sublime text or any editor you like). Assume that you want to add a new tab “Home Widget” and in this tab you want to add a text box an image box and a check list. Lets do it:

Add the following code in options.php file:

[html]

///////////////////////////////Home Widget SETTINGS///////////////////////////////
$options[] = array(
‘name’ => __(‘Home Widget’, ‘options_check’),
‘type’ => ‘heading’);

[/html]

add-theme-option-wordpress-9

 

And see the new tab in action:

add-theme-option-wordpress-10

 

Now add the following code after heading:

[html]

////this is text box///////////
$options[] = array(
‘name’ => __(‘Text box’, ‘options_check’),
‘desc’ => __(‘Enter Your text here’, ‘options_check’),
‘id’ => ‘text_link’,
‘std’ => ‘this is text box…’,
‘type’ => ‘text’);

[/html]

add-theme-option-wordpress-11

 

Now see the text box under Home Widget tab:

add-theme-option-wordpress-12

 

Now come the main understanding part. In every property there will be 5 objects:

  • name: This is the level of the text box
  • desc: You can set desc or not. in desc we normally provide suggestion to users. See desc in example text box right side.
  • id: This is the most important think to remember. The id has to be unique. In front end we will ust this to pull out the data.
  • std: this is the default value we want to show in the text box. In every tab bottom there is a Restore Default button exist. If you click here then the value will be the std value.
  • type: This the box type. We use text or button or reset etc. as type.

Here is code to show the value in front end:

[php]<?php echo of_get_option(‘text_link’, ‘no entry’); ?>[/php]

Here “text_link” is the id we used during tab design and “no entry” will be shown if there is no value in the field.  All the think is same wheather you are using a text box or text are or list. Just you have to assign different id to each property.

Check out the Part 1 and Part 2 and Please comment below if you feel any difficulty.

Author: mytutorialguru

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *