OptionTree – A Theme Options UI Builder for WordPress

Share this article

When was the last time you were excited about building an administration panel for your WordPress Theme? Chances are you’re still building it by hand, and spending a lot of time on it, too. The goal of this article is to introduce you to OptionTree, a Theme Options UI Building for WordPress.

What OptionTree Will Allow You To Do

OptionTree will allow you to build a powerful Theme Administration page containing all kinds of functionality, from a simple text field, to Date Pickers and file upload fields. It’s also possible to create repeatable fields, tabbed sections, custom galleries, a CSS editor and many more. Think building whole administration options and custom metaboxes for your custom post types and taxonomies in under an hour. This is what OptionTree is all about, it sets at your disposal, a lot of pre-configured options types which you can use on your Themes in minutes, instead of hours.

OptionTree
OptionTree (source: https://wordpress.org/plugins/option-tree/screenshots/)

Key Takeaways

  • OptionTree allows the rapid creation of a Theme Administration page with diverse functionalities such as text fields, date pickers, file uploads, and more, significantly reducing development time.
  • It offers two installation modes: Plugin Mode (traditional plugin installation via WordPress) and Theme Mode (embedding directly within a theme for more control over updates).
  • OptionTree supports a variety of option types including text, textarea, checkboxes, and select boxes, which can be integrated into themes using the ot_get_option() function.
  • Advanced customization is possible with filters and hooks that modify the behavior of option types, such as disabling media upload buttons or customizing the WYSIWYG editor settings.
  • The plugin is designed to be compatible with any WordPress theme, providing flexibility and ease of use across different projects.
  • OptionTree is available for free from the WordPress plugin directory, making it an accessible tool for developers looking to enhance theme customization.

Installing OptionTree On Your Site

There are two possible installation modes when using OptionTree. The first option is Plugin Mode, which is going to be the traditional way WordPress would like you to use plugins. Which means, OptionTree is installed and activated through the Plugins page and upgraded via the WordPress Plugins Directory. The second option is Theme Mode, this is where you include OptionTree somewhere within the directory of your theme and take advantage of the flexibility and control you’ll have over your themes upgrade path.

Below, I’ll walk you through setting up OptionTree for each installation mode.

Plugin Mode

  1. Install OptionTree and activate the plugin. For help with this refer to the Manage Plugins page in the WordPress Codex.
  2. Create the Theme Options.
    • Theme Options UI Builder (not recommended for premium themes).
      • Simply create your Theme Options through the Theme Options UI Builder — an easy to use drag & drop interface.
    • Hand Built.
      • Create an includes directory in your theme.
      • Create a theme-options.php file in the new inccludes directory.
      • Load the theme-options.php file through your functions.php file on your theme.

Theme Mode

The two installation modes share some of the same steps, but Theme Mode has 3 key differences.

  1. OptionTree is included in the directory of your theme.
  2. You must filter ot_theme_mode so it returns true.
  3. You must deactivate and/or delete the plugin version of OptionTree.
Installation
  1. Download the latest version of OptionTree and unarchive the .zip directory.
  2. Put the option-tree directory in the root of your theme. For example, the server path would be /wp-content/themes/your-theme/option-tree/.
  3. Add the following code to the very beginning of your functions.php so it is executed before anything else.
/**
 * Activates Theme Mode
 */
add_filter( 'ot_theme_mode', '__return_true' );

/**
 * Loads OptionTree
 */
require( trailingslashit( get_template_directory() ) . 'option-tree/ot-loader.php' );
Loading Your Theme Options In Your Theme

Load the theme-options.php file by adding the following code to your functions.php

/**
 * Loads Theme Options
 */
require( trailingslashit( get_template_directory() ) . 'inc/theme-options.php' );

Integration

Integration with your custom Theme Options into your theme is done through the ot_get_option() function. If no value has been saved, it returns $default or false.

<?php echo ot_get_option( $option, $default ); ?>

Exploring OptionTree Option Types

Let’s explore some of the OptionTree Option Types that shipped by default with OptionTree.

Text

The Text option type is used to save mostly string values. For example, any optional or required text that is of reasonably short character length

// OptionTree Text Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
    'id'          => 'spyr_demo_text',
    'label'       => __( 'Text', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'text',
    'section'     => 'your_section',
)

// Get the value saved on Theme Options Page
$spyr_demo_text = ot_get_option( 'spyr_demo_text' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_text = get_post_meta( $post->ID, 'spyr_demo_text', true );

// Wrap the value in a P tag and echo it
echo wpautop( $spyr_demo_text );

Textarea

The Textarea option type is a large string value used for custom code or text in the theme and has a WYSIWYG editor that can be filtered to change how it is displayed. For example, you can filter wpautop, media_buttons, tinymce, and quicktags.

// OptionTree Textarea Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
  array(
    'id'          => 'spyr_demo_textarea',
    'label'       => __( 'Textarea', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'textarea',
    'section'     => 'your_section',
    'rows'        => '5',
  )

// Get the value saved on Theme Options Page
$spyr_demo_textarea = ot_get_option( 'spyr_demo_textarea' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_textarea = get_post_meta( $post->ID, 'spyr_demo_textarea', true );

//  Whether to use wpautop for adding in paragraphs
// Defaults to True
add_filter( 'ot_wpautop' , 'spyr_textarea_ot_wpautop', 10, 1 );
function spyr_textarea_ot_wpautop( $field_id ) {
    if( 'spyr_demo_textarea' == $field_id ) {
        return false;
    }
}

// Remove the Media upload buttons for a particular field
// Defaults to True
add_filter( 'ot_media_buttons' , 'spyr_textarea_ot_media_buttons', 10, 1 );
function spyr_textarea_ot_media_buttons( $field_id ) {
    if( 'spyr_demo_textarea' == $field_id ) {
        return false;
    }
}

// Disable the Visual and Text views for a particular field
// Defaults to True
add_filter( 'ot_tinymce' , 'spyr_textarea_ot_tinymce', 10, 1 );
function spyr_textarea_ot_tinymce( $field_id ) {
    if( 'spyr_demo_textarea' == $field_id ) {
        return false;
    }
}

Textarea Simple

The Textarea Simple option type is a large string value used for custom code or text in the theme. The Textarea Simple does not have a WYSIWYG editor, you could use it to store your Google Analytics code and be sure it will be displayed correctly without having p tags in it.

// OptionTree Textarea Simple Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
    'id'          => 'spyr_demo_textarea_simple',
    'label'       => __( 'Textarea Simple', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'textarea-simple',
    'section'     => 'your_section',
    'rows'        => '5',
),

// Get the value saved on Theme Options Page
$spyr_demo_textarea_simple = ot_get_option( 'spyr_demo_textarea_simple' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_textarea_simple = get_post_meta( $post->ID, 'spyr_demo_textarea_simple', true );


//  Whether to use wpautop for adding in paragraphs
// Defaults to False in Textarea Simple
add_filter( 'ot_wpautop' , 'spyr_textarea_simple_ot_wpautop', 10, 1 );
function spyr_textarea_simple_ot_wpautop( $field_id ) {
    if( 'spyr_demo_textarea_simple' == $field_id ) {
        return true;
    }
}

Textblock Titled

The Textblock Titled option type is used only on the Theme Option page. It will allow you to create & display HTML, and has a title above the text block. You can then use the Textblock Titled to add a more detailed set of instruction on how the options are used in your theme. You would never use this in your themes template files as it does not save a value.

Radio

The Radio option type displays a group of choices. It allows the user to choose one and will return that value as a string for use in a custom function or loop.

// OptionTree Radio Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
    'id'          => 'spyr_demo_radio',
    'label'       => __( 'Radio', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'radio',
    'section'     => 'your_section',
    'choices'     => array( 
        array(
        'value'       => 'yes',
        'label'       => __( 'Yes', 'text-domain' ),
        ),
        array(
        'value'       => 'no',
        'label'       => __( 'No', 'text-domain' ),
        ),
        array(
        'value'       => 'maybe',
        'label'       => __( 'Maybe', 'text-domain' ),
        )
    )
)

// Get the value saved on Theme Options Page
$spyr_demo_radio = ot_get_option( 'spyr_demo_radio' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_radio = get_post_meta( $post->ID, 'spyr_demo_radio', true );

Checkbox

The Checkbox option type displays a group of choices. It allows the user to check multiple choices and will return that value as an array for use in a custom function or loop.

// OptionTree Checkbox Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
    'id'          => 'spyr_demo_checkbox',
    'label'       => __( 'Checkbox', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'checkbox',
    'section'     => 'your_section',
    'choices'     => array( 
        array(
        'value'       => 'no',
        'label'       => __( 'No', 'text-domain' ),
        ),
        array(
        'value'       => 'Yes',
        'label'       => __( 'Yes', 'text-domain' ),
        )
    )
)

// Get the value saved on Theme Options Page
// This will always return an array
$spyr_demo_checkbox = ot_get_option( 'spyr_demo_checkbox' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
$spyr_demo_checkbox = get_post_meta( $post->ID, 'spyr_demo_checkbox', true );

Post Checkbox

The Post Checkbox option type displays a list of post IDs. It allows the user to check multiple post IDs for use in a custom function or loop.

// OptionTree Post Checkbox Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
    'id'          => 'spyr_demo_post_checkbox',
    'label'       => __( 'Post Checkbox', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'post-checkbox',
    'section'     => 'your_section',
),

// Get the value saved on Theme Options Page
// This will always return an array
// Only the Post IDs will be returned
$spyr_demo_post_checkbox = ot_get_option( 'spyr_demo_post_checkbox' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Post IDs will be returned
$spyr_demo_post_checkbox = get_post_meta( $post->ID, 'spyr_demo_post_checkbox', true );


// Display only the latest 3 posts from a specific category (14)
add_filter( 'ot_type_post_checkbox_query', 'spyr_post_checkbox_custom_query', 10, 2 );
function spyr_post_checkbox_limit_posts( $query, $field_id ) {
    if( 'spyr_demo_post_checkbox' == $field_id ) {
        return array_merge( $query, array( 'posts_per_page' => 3, 'cat' => 14 ) );
    }
}

Page Checkbox

The Page Checkbox option type displays a list of page IDs. It allows the user to check multiple page IDs for use in a custom function or loop.

// OptionTree Page Checkbox Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_page_checkbox',
    'label'       => __( 'Page Checkbox', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'page-checkbox',
    'section'     => 'your_section',
),

// Get the value saved on Theme Options Page
// This will always return an array
// Only the Page IDs will be returned
$spyr_demo_page_checkbox = ot_get_option( 'spyr_demo_page_checkbox' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Page IDs will be returned
$spyr_demo_page_checkbox = get_post_meta( $post->ID, 'spyr_demo_page_checkbox', true );

// Display only top level pages
add_filter( 'ot_type_page_checkbox_query', 'spyr_page_checkbox_top_level_only', 10, 2 );
function spyr_page_checkbox_top_level_only( $query, $field_id ) {
    if( 'spyr_demo_page_checkbox' == $field_id ) {
        return array_merge( $query, array( 'post_parent' => 0 ) );
    }   
}

// Display only sub-pages from a parent page
add_filter( 'ot_type_page_checkbox_query', 'spyr_page_checkbox_sub_pages', 10, 2 );
function spyr_page_checkbox_sub_pages( $query, $field_id ) {
    if( 'spyr_demo_page_checkbox' == $field_id ) {
        return array_merge( $query, array( 'post_parent' => 7 ) );
    }   
}

Custom Post Type Checkbox

The Custom Post Type Select option type displays a list of IDs from any available WordPress post type or custom post type. It allows the user to check multiple post IDs for use in a custom function or loop. Requires at least one valid post_type in the post_type field.

// OptionTree Custom Post Type Checkbox Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_custom_post_type_checkbox',
    'label'       => __( 'Custom Post Type Checkbox', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'custom-post-type-checkbox',
    'section'     => 'your_section',
    'post_type'   => 'movie',
)

// Get the value saved on Theme Options Page
// This will always return an array
// Only the Page IDs will be returned
$spyr_demo_page_checkbox = ot_get_option( 'spyr_demo_custom_post_type_checkbox' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Page IDs will be returned
$spyr_demo_page_checkbox = get_post_meta( $post->ID, 'spyr_demo_custom_post_type_checkbox', true );

// Add a second CPT to the list
add_filter( 'ot_type_custom_post_type_checkbox_query', 'spyr_cpt_checkbox_include_trailers', 10, 2 );
function spyr_cpt_checkbox_include_trailers( $query, $field_id ) {
    if( 'spyr_demo_custom_post_type_checkbox' == $field_id ) {
        return array_merge( $query, array( 'post_type' => 'movie_trailers' ) );
    }       
}

Category Checkbox

The Category Checkbox option type displays a list of category IDs. It allows the user to check multiple category IDs and will return that value as an array for use in a custom function or loop.

// OptionTree Category Checkbox Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
'id'          => 'spyr_demo_category_checkbox',
'label'       => __( 'Category Checkbox', 'text-domain' ),
'desc'        => __( 'Your description', 'text-domain' ),
'type'        => 'category-checkbox',
'section'     => 'your_section',
),

// Get the value saved on Theme Options Page
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_category_checkbox = ot_get_option( 'spyr_demo_category_checkbox' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_category_checkbox = get_post_meta( $post->ID, 'spyr_demo_category_checkbox', true );

// Hide categories without a post
add_filter( 'ot_type_category_checkbox_query', 'spyr_ot_type_category_checkbox_hide_empty', 10, 2 );
function spyr_ot_type_category_checkbox_hide_empty( $query, $field_id ) {
    if( 'spyr_demo_category_checkbox' == $field_id ) {
        return array_merge( $query, array( 'hide_empty' => true ) );
    }   
}

Tag Checkbox

The Tag Checkbox option type displays a list of tag IDs. It allows the user to check multiple tag IDs and will return that value as an array for use in a custom function or loop.

// OptionTree Tag Checkbox Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_tag_checkbox',
    'label'       => __( 'Tag Checkbox', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'tag-checkbox',
    'section'     => 'your_section',
)

// Get the value saved on Theme Options Page
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_tag_checkbox = ot_get_option( 'spyr_demo_tag_checkbox' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_tag_checkbox = get_post_meta( $post->ID, 'spyr_demo_tag_checkbox', true );

Taxonomy Checkbox

The Taxonomy Checkbox option type displays a list of taxonomy IDs. It allows the user to check multiple taxonomy IDs and will return that value as an array for use in a custom function or loop.

// OptionTree Taxonomy Checkbox Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_taxonomy_checkbox',
    'label'       => __( 'Taxonomy Checkbox', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'taxonomy-checkbox',
    'section'     => 'your_section',
    'taxonomy'    => 'category,post_tag', // Comma separated list
)

// Get the value saved on Theme Options Page
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_taxonomy_checkbox = ot_get_option( 'spyr_demo_taxonomy_checkbox' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_taxonomy_checkbox = get_post_meta( $post->ID, 'spyr_demo_taxonomy_checkbox', true );

// Hide categories and tags not having a post
add_filter( 'ot_type_taxonomy_checkbox_query', 'spyr_ot_type_taxonomy_checkbox_hide_empty', 10, 2 );
function spyr_ot_type_taxonomy_checkbox_hide_empty( $query, $field_id ) {
    if( 'demo_taxonomy_checkbox' == $field_id ) {
        return array_merge( $query, array( 'hide_empty' => false ) );
    }       
}

// Override taxonomy via code
add_filter( 'ot_type_taxonomy_checkbox_query', 'spyr_ot_type_taxonomy_checkbox_add_genre', 10, 2 );
function spyr_ot_type_taxonomy_checkbox_add_genre( $query, $field_id ) {
    if( 'demo_taxonomy_checkbox' == $field_id ) {
        return array_merge( $query, array( 'taxonomy' => 'genre' ) );
    }       
}

Select

The Select option type is used to list anything you want that would be chosen from a select list.

// OptionTree Select Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_select',
    'label'       => __( 'Select', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'select',
    'section'     => 'your_section',
    'choices'     => array( 
            array(
                'value'       => 'yes',
                'label'       => __( 'Yes', 'text-domain' ),
            ),
            array(
                'value'       => 'no',
                'label'       => __( 'No', 'text-domain' ),
            ),
            array(
                'value'       => 'maybe',
                'label'       => __( 'Maybe', 'text-domain' ),
            )
        )
)

// Get the value saved on Theme Options Page
$spyr_demo_select = ot_get_option( 'spyr_demo_select' );

// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_select = get_post_meta( $post->ID, 'spyr_demo_select', true );

Post Select

The Post Select option type displays a list of post IDs. It will return a single post ID for use in a custom function or loop.

// OptionTree Post Select Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_post_select',
    'label'       => __( 'Post Select', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'post-select',
    'section'     => 'option_types',
)

// Get the ID value saved on Theme Options Page
$spyr_demo_post_select = ot_get_option( 'spyr_demo_post_select' );

// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_post_select = get_post_meta( $post->ID, 'spyr_demo_post_select', true );

// Get the Post's title
$title = get_the_title( $spyr_demo_post_select );

// Get the permalink 
$link = get_permalink( $spyr_demo_post_select );

// Limit the number of posts displayed on the drop down for selection
add_filter( 'ot_type_post_select_query', 'spyr_ot_type_post_select_query_set_limit', 10, 2 );
function spyr_ot_type_post_select_query_set_limit( $query, $field_id ) {
    if( 'spyr_demo_post_select' == $field_id ) {
        return array_merge( $query, array( 'posts_per_page' => 10 ) );
    }       
}

// Populate the drop down select from posts belonging to this category (14)
add_filter( 'ot_type_post_select_query', 'spyr_ot_type_post_select_query_set_cat', 10, 2 );
function spyr_ot_type_post_select_query_set_cat( $query, $field_id ) {
    if( 'spyr_demo_post_select' == $field_id ) {
        return array_merge( $query, array( 'cat' => 14 ) );
    }       
}

Page Select

The Page Select option type displays a list of page IDs. It will return a single page ID for use in a custom function or loop.

// OptionTree Page Select Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_page_select',
    'label'       => __( 'Page Select', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'page-select',
    'section'     => 'option_types',
)

// Get the ID value saved on Theme Options Page
$spyr_demo_page_select = ot_get_option( 'spyr_demo_page_select' );

// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_page_select = get_post_meta( $post->ID, 'spyr_demo_page_select', true );

// Get the Post's title
$title = get_the_title( $spyr_demo_page_select );

// Get the permalink 
$link = get_permalink( $spyr_demo_page_select );

// Populate the drop down select with subpages from a pre-defined Parent page (7)
add_filter( 'ot_type_page_select_query', 'spyr_ot_type_page_select_query_set_parent', 10, 2 );
function ot_type_page_select_query_set_parent( $query, $field_id ) {
    if( 'spyr_demo_page_select' == $field_id ) {
        return array_merge( $query, array( 'post_parent' => 7 ) );
    }       
}

Custom Post Type Select

The Custom Post Type Select option type displays a list of IDs from any available WordPress post type or custom post type. It will return a single post ID for use in a custom function or loop. Requires at least one valid post_type in the post_type field.

// OptionTree Custom Post Type Select Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_custom_post_type_select',
    'label'       => __( 'Custom Post Type Select', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'custom-post-type-select',
    'section'     => 'your_section',
    'post_type'   => 'movie',
)

// Get the ID value saved on Theme Options Page
$spyr_demo_custom_post_type_select = ot_get_option( 'spyr_demo_custom_post_type_select' );

// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_custom_post_type_select = get_post_meta( $post->ID, 'spyr_demo_custom_post_type_select', true );

// Get the Post's title
$title = get_the_title( $spyr_demo_custom_post_type_select );

// Get the permalink 
$link = get_permalink( $spyr_demo_custom_post_type_select );

// Override Custom Post Type via code
add_filter( 'ot_type_custom_post_type_select_query', 'spyr_ot_type_cpt_select_query_set_cpt', 10, 2 );
function spyr_ot_type_cpt_select_query_set_cpt( $query, $field_id ) {
    if( 'spyr_demo_custom_post_type_select' == $field_id ) {
        return array_merge( $query, array( 'post_type' => 'movie' ) );
    }   
}

Category Select

The Category Select option type displays a list of category IDs. It allows the user to select only one category ID and will return that value for use in a custom function or loop.

// OptionTree Category Select Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_category_select',
    'label'       => __( 'Category Select', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'category-select',
    'section'     => 'your_section',
)

// Get the ID value saved on Theme Options Page
$spyr_demo_category_select = ot_get_option( 'spyr_demo_category_select' );

// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_category_select = get_post_meta( $post->ID, 'spyr_demo_category_select', true );

// Get the Category name
$name = get_the_category_by_ID( $spyr_demo_category_select );

// Get the category description
$cat_desc = category_description( $spyr_demo_category_select );

// Get the Archive link for this category
$link = get_category_link( $spyr_demo_category_select );

// Hide categories with zero posts from the drop down list
add_filter( 'ot_type_category_select_query', 'spyr_ot_type_category_select_hide_cats', 10, 2 );
function spyr_ot_type_category_select_hide_cats( $query, $field_id ) {
    if( 'demo_category_select' == $field_id ) {
        return array_merge( $query, array( 'hide_empty' => true ) );
    }   
}

Tag Select

The Tag Select option type displays a list of tag IDs. It allows the user to select only one tag ID and will return that value for use in a custom function or loop.

// OptionTree Tag Select Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_tag_select',
    'label'       => __( 'Tag Select', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'tag-select',
    'section'     => 'your_section',
)

// Get the ID value saved on Theme Options Page
$spyr_demo_tag_select = ot_get_option( 'spyr_demo_tag_select' );

// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_tag_select = get_post_meta( $post->ID, 'spyr_demo_tag_select', true );

// Get the Tag's name
$tag = get_term_by( 'id', $spyr_demo_tag_select, 'post_tag', OBJECT, '' );
$name = $tag->name;

// Get the Archive link for this tag
$link = get_tag_link( $spyr_demo_tag_select );

Taxonomy Select

The Taxonomy Select option type displays a list of taxonomy IDs. It allows the user to select only one taxonomy ID and will return that value for use in a custom function or loop.

// OptionTree Taxonomy Select Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode

array(
    'id'          => 'spyr_demo_taxonomy_select',
    'label'       => __( 'Taxonomy Select', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'taxonomy-select',
    'section'     => 'your_section',
    'taxonomy'    => 'category,post_tag', // Defaults to Categories and Tags
)

// Get the ID value saved on Theme Options Page
$spyr_demo_taxonomy_select = ot_get_option( 'spyr_demo_taxonomy_select' );

// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_taxonomy_select = get_post_meta( $post->ID, 'spyr_demo_taxonomy_select', true );

// Override Taxonomy via code
add_filter( 'ot_type_taxonomy_select_query', 'spyr_ot_type_taxonomy_select_set_tax', 10, 2 );
function spyr_ot_type_taxonomy_select_set_tax( $query, $field_id ) {
    if( 'spyr_demo_taxonomy_select' == $field_id ) {
        return array_merge( $query, array( 'taxonomy' => array( 'genre' ) ) );
    }   
}

Sidebar Select

This option type makes it possible for users to select a WordPress registered sidebar to use on a specific area. By using the two provided filters, ot_recognized_sidebars, and ot_recognized_sidebars_{$field_id} we can be selective about which sidebars are available on a specific content area.

For example, if we create a WordPress theme that provides the ability to change the Blog Sidebar and we don’t want to have the footer sidebars available on this area, we can unset those sidebars either manually or by using a regular expression if we have a common name like footer-sidebar-$i.

// OptionTree Sidebar Select Option Type

// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
// This option type will read all of your available 
// Sidebars on your theme, so there is very little work to do here
array(
    'id'          => 'spyr_demo_sidebar_select',
    'label'       => __( 'Sidebar Select', 'text-domain' ),
    'desc'        => __( 'Your description', 'text-domain' ),
    'type'        => 'sidebar-select',
    'section'     => 'your_section',
)

// Get the ID value saved on Theme Options Page
$spyr_demo_sidebar_select = ot_get_option( 'spyr_demo_sidebar_select' );

// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_sidebar_select = get_post_meta( $post->ID, 'spyr_demo_sidebar_select', true );

// Call the sidebar
dynamic_sidebar( $spyr_demo_sidebar_select );

Conclusion

In this article we introduced OptionTree covering some of the most basic fields and looked at how we can access their values from the Theme Options page or from a post, page or even a Custom Post Type.

Frequently Asked Questions (FAQs) about OptionTree Theme Options UI Builder

What is OptionTree and how does it work?

OptionTree is a powerful WordPress plugin that allows developers to build theme options and meta boxes with ease. It works by providing a user-friendly interface where you can create, manage, and customize various theme options. These options can range from simple text inputs to complex image uploads, color pickers, and more. The created options can then be used in your theme to customize its appearance and functionality.

How do I install OptionTree on my WordPress site?

Installing OptionTree is straightforward. You can download it from the WordPress plugin directory or directly from your WordPress dashboard. Once downloaded, you can activate it from the ‘Plugins’ section of your dashboard. After activation, you can access OptionTree from the ‘Appearance’ menu.

Can I use OptionTree with any WordPress theme?

Yes, OptionTree is designed to be compatible with any WordPress theme. However, the level of customization and the options available may vary depending on the theme’s design and structure.

How do I create a new option with OptionTree?

Creating a new option with OptionTree is simple. Navigate to the OptionTree panel in your WordPress dashboard, click on ‘OptionTree’ > ‘Settings’ > ‘Option Types’. Here, you can add a new option by filling in the required fields and selecting the type of option you want to create.

Is OptionTree compatible with the latest version of WordPress?

OptionTree is regularly updated to ensure compatibility with the latest versions of WordPress. However, it’s always a good idea to check the plugin’s details on the WordPress plugin directory for the most recent compatibility information.

Can I use OptionTree to create custom meta boxes?

Yes, OptionTree allows you to create custom meta boxes. You can do this by going to ‘OptionTree’ > ‘Settings’ > ‘Meta Boxes’ in your WordPress dashboard. Here, you can add new meta boxes and customize them according to your needs.

How can I export my OptionTree settings?

OptionTree provides an easy way to export your settings. Simply go to ‘OptionTree’ > ‘Settings’ > ‘Export’ in your WordPress dashboard. Here, you can generate a downloadable file of your settings.

Is there any documentation available for OptionTree?

Yes, OptionTree provides comprehensive documentation that covers everything from installation to creating options and meta boxes. You can access this documentation from the OptionTree panel in your WordPress dashboard.

Can I use OptionTree on a multisite network?

Yes, OptionTree is fully compatible with WordPress multisite networks. You can network activate the plugin and use it across all sites in your network.

Is OptionTree free to use?

Yes, OptionTree is a free plugin. However, it’s always a good idea to consider donating to the developer if you find the plugin useful and want to support its continued development.

Yojance RabeloYojance Rabelo
View Author

Yojance Rabelo has been using WordPress to build all kinds of Websites since July 2006. In his free time he likes to try out new technologies, mainly PHP and JavaScript based, and also playing with his EV3RSTORM, a Lego MINDSTORMS robot. He maintains his own blog among other sites about various topics.

ChrisBOptionTreethemesWordPress
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week