Everything you need to use WP Theme Options

Understanding the Array

To build the Options Panel structure you’ll need to organize a PHP pre-configured array (easy as copy-paste). One thing you’ll need to make sure is that you don’t repeat any of the ‘id‘:

'id' => 'themeoptions_page1'

All ‘id’ must be unique, and we advise the use of ‘themeoptions_‘ to make sure it wont create any conflict with other plugins you may install on your theme.

How to create a page Tab

You have to create at least one page tab to configure components, the logic is really simple, all the components bellow a specific heading type, will belong to that page tab.

Please check the example:

$fuse_options[] = array(
  'name' => __('General Options','textdomain'),
  'id' => 'themeoptions_page1',
  'icon' => 'fa fa-home',
  'type' => 'heading'

To change the icon, you need to change the class names, you can find all the icons at, example of the definition:

'icon' => 'fa fa-home'

Component structure

WP Theme Options have more than 20 components, and to make them work correctly you should create the array in the right way, here is an example of a text input:

$fuse_options[] = array(
  'name' => __('Text field','textdomain'),
  'description' => __('Some description here (not mandatory)','textdomain'),
  'id' => 'themeoptions_textID1',
  'std' => 'Default value',
  'type' => 'text'

Understanding the array options

'name' => __('Text field','textdomain')

The title of the component.

'description' => __('Some description here (not mandatory)','textdomain')

The description, useful for some instructions to the end user.

'id' => 'themeoptions_textID1'

The unique id for each component.

'std' => 'Default value'

The std is the default value.

'type' => 'text'

The type is the element type, you have many of them, they are all published on the documentation on the next pages.

'show_title' => false

Show and Hide the title, it’s true by default.

'folds' => 1

Only used on checkbox component for grouping hidden components when not checked.

'fold' => 'folds_component_id'

This turns an element hidden, will visible if the “folds” component is checked.