OptionTree Theme 2.5.4

About

The OptionTree Theme simply demonstrates how to integrate OptionTree with any theme. In this demo, I'll show you how to setup OptionTree in your own theme, and for whichever installation mode you feel best suits your projects needs.

WARNING: This theme is not meant for production use, and is strictly for demonstration purposes only.

Installation

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

Install OptionTree and activate the plugin. For help with this refer to the Manage Plugins page in the WordPress Codex.
Create the Theme Options.
- Theme Options UI Builder (not recommended for premium themes).
  - Simply create your Theme Options with the Theme Options UI Builder — an easy to use drag & drop interface.
- Hand Built.
  - Create an inc directory in your theme.
  - Create a theme-options.php file in the new inc directory.
  - Copy and paste the contents of theme-options.php found in this themes inc directory into your new theme-options.php.
  - 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' );
```
Integrate your custom Theme Options into your theme with ot_get_option().

Theme Mode

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

OptionTree is included in the directory of your theme.
You must filter ot_theme_mode so it returns true.
You must deactivate and/or delete the plugin version of OptionTree.

I'll walk you through the step below.

Download the latest version of OptionTree and unarchive the .zip directory.
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/.

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' );

Create the Theme Options.
- Theme Options UI Builder (not recommended for premium themes).
  - Simply create your Theme Options with the Theme Options UI Builder — an easy to use drag & drop interface.
- Hand Built.
  - Create an inc directory in your theme.
  - Create a theme-options.php file in the new inc directory.
  - Copy and paste the contents of theme-options.php found in this themes inc directory into your new theme-options.php.
  - 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' );
```
Integrate your custom Theme Options into your theme with ot_get_option().

NOTE: Refer to the functions.php file found in the root directory of this theme for more information on the UI filters that can be set in your own functions.php.

NOTE: If you're using the Theme Option UI Builder, know that some servers will stop saving your options after about a 100 or so have been added with the UI Builder. This is why coding your own array is recommended for premium themes as they typically have a lot of options.

Integration

It's important to mention that the ot_get_option() function is not available to your theme or plugin until the after_setup_theme action has fired at priority 1. Which means you cannot use ot_get_option() in your functions.php unless it's used inside a function being called at priority 2 or later; however, you can use it inside your themes template files without issue, because they're being loaded after the action has been fired.

Function Reference: `ot_get_option()`

A safe way of getting values for a named option from the saved Theme Options array. If no value has been saved, it returns $default or false.

Usage

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

Parameters

$option

(string) (required) Name of the option to retrieve.

Default: None

$default

(mixed) (optional) The default value to return if no value is returned (ie. the option is not in the database).

Default: false

Return Values

(mixed): Current value for the specified option. If the specified option does not exist, returns boolean false.

Option Types

This is a complete list of all the available option types that come shipped with OptionTree. However, without OptionTree installed you're going to have a hard time changing the option type values below. Go back up to Installation Modes and get started installing OptionTree.

background: ot_get_option( 'demo_background' ); no value

border: ot_get_option( 'demo_border' ); no value

box-shadow: ot_get_option( 'demo_box_shadow' ); no value

category-checkbox: ot_get_option( 'demo_category_checkbox' ); no value

category-select: ot_get_option( 'demo_category_select' ); no value

checkbox: ot_get_option( 'demo_checkbox' ); no value

colorpicker: ot_get_option( 'demo_colorpicker' ); no value

colorpicker-opacity: ot_get_option( 'demo_colorpicker_opacity' ); no value

css: ot_get_option( 'demo_css' ); no value

custom-post-type-checkbox: ot_get_option( 'demo_custom_post_type_checkbox' ); no value

custom-post-type-select: ot_get_option( 'demo_custom_post_type_select' ); no value

date-picker: ot_get_option( 'demo_date_picker' ); no value

date-time-picker: ot_get_option( 'demo_date_time_picker' ); no value

dimension: ot_get_option( 'demo_dimension' ); no value

gallery: ot_get_option( 'demo_gallery' ); no value

gallery: ot_get_option( 'demo_gallery_shortcode' ); no value

google-fonts: ot_get_option( 'demo_google_fonts' ); no value

javascript: ot_get_option( 'demo_javascript' ); no value

link-color: ot_get_option( 'demo_link_color' ); no value

list-item: ot_get_option( 'demo_list_item' ); no value

measurement: ot_get_option( 'demo_measurement' ); no value

numeric-slider: ot_get_option( 'demo_numeric_slider' ); no value

on-off: ot_get_option( 'demo_on_off' ); no value

page-checkbox: ot_get_option( 'demo_page_checkbox' ); no value

page-select: ot_get_option( 'demo_page_select' ); no value

post-checkbox: ot_get_option( 'demo_post_checkbox' ); no value

post-select: ot_get_option( 'demo_post_select' ); no value

radio: ot_get_option( 'demo_radio' ); no value

radio-image: ot_get_option( 'demo_radio_image' ); no value

select: ot_get_option( 'demo_select' ); no value

sidebar-select: ot_get_option( 'demo_sidebar_select' ); no value

slider: ot_get_option( 'demo_slider' ); no value

social-links: ot_get_option( 'demo_social_links' ); no value

spacing: ot_get_option( 'demo_spacing' ); no value

tag-checkbox: ot_get_option( 'demo_tag_checkbox' ); no value

tag-select: ot_get_option( 'demo_tag_select' ); no value

taxonomy-checkbox: ot_get_option( 'demo_taxonomy_checkbox' ); no value

taxonomy-select: ot_get_option( 'demo_taxonomy_select' ); no value

text: ot_get_option( 'demo_text' ); no value

textarea: ot_get_option( 'demo_textarea' ); no value

textarea-simple: ot_get_option( 'demo_textarea_simple' ); no value

textblock: ot_get_option( 'demo_textblock' ); no value

textblock-titled: ot_get_option( 'demo_textblock_titled' ); no value

typography: ot_get_option( 'demo_typography' ); no value

upload: ot_get_option( 'demo_upload' ); no value