WordPress Tutorial - How to add text settings - Option Tree

In this lesson, We will see how to add simple text setting for your custom theme using Option Tree plugin.

If you didn't view my previous tutorial -> Please click here.

1. It is very similar to my previous tutorial.
2. Instead h2 title, we will add the following code.

<h2><?php echo ot_get_option( 'featured_heading_1', 'Heading Title 1' ); ?></h2>

3. So please go to Dashboard -> Option Tree -> click -> add setting
4. Give label name and id name
5. Type -> You can choose any one of the following -> Text Area, Text, Text Area Simple
6. Add the following code where you need to display your text.

<?php echo ot_get_option( 'ID', 'Default TEXT' ); ?>

7. Instead of ID, You should give your own ID name created at steps 3,4
8. Default TEXT will display if you didn't give any text at Theme Options

Video Tutorial:

WordPress Tutorial - How to add image settings - Option Tree

In this lesson, We will see how to add simple setting for your theme using Option Tree plugin.

If you didn't view my previous tutorial (How to install Option tree plugin) -> Please click here.

1. Go to Dashboard.
2. Click Option Tree -> Settings -> Click add setting button -> Type your settings.
3. Label -> Featured Image 1 (You can add whatever the name you want).
4. ID -> fi1 (You can add whatever the name you want).
5. Type -> Upload.
6. Go down and click save.
7. Now open Appearance  -> Theme Options -> Your settings for Featured Image 1 will display here.
8. Now open your front-page.php file. (I have set my front-page is home page, if your index.php is your home page, please open it).

9. Find the three columns round image option. I mean the following code from your front-page.php.

 <img class="img-circle" src="  data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==           " alt="Generic placeholder image" width="140" height="140">

Or where ever you want to add image setting.

Add the following code inside the src=""

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


Here  "$option_id" will display your changed image. So add your id here. For example "fi1". Refer 4th point.

"$default" is your default image (value). If you didn't add any image at your theme options page this default image will display here. So give your default image link here. 

After implementing this setting image tag will display something like this.

<img class="img-circle" src="
          <?php echo ot_get_option( 'fi1', 'data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' ); ?>
          " alt="Generic placeholder image" width="140" height="140"> 


10. Now go to your Appearance -> Theme Options ->  Featured Image 1 -> Click + sign and upload image or add image from your media library -> Click Send Option Tree button -> Click save option.

11. Your custom image will display at front end.

Please view the Video Tutorial:




WordPress Tutorial - How to install Option Tree plugin fo your theme?

In this tutorial, We will see how to install Option Tree plugin for our theme.

If you are creating custom theme, Option Tree  Plugin is very useful to create Theme Options. Here we are going to install plugin for theme mode. This is not normal install like other plugin installation.

We will do this from themes folder. Here are the steps,

1. Click the following url and download the plugin.

   https://wordpress.org/plugins/option-tree/

2. Now extract the downloaded plugin. Now you will get a folder named "option-tree"

3. Copy the folder and paste it into your theme folder,

The location will be like this

/wp-content/themes/theme-name/option-tree/

4. Now copy the following code and paste it into the functions.php file (inside the php tag) and save the file.

/**
 * Required: set 'ot_theme_mode' filter to true.
 */
add_filter( 'ot_theme_mode', '__return_true' );

/**
 * Required: include OptionTree.
 */
require( trailingslashit( get_template_directory() ) . 'option-tree/ot-loader.php' );

5. Now refresh your WordPress Dashboard. You will see theme options button under the Appearance tab.

6. Also you will see Option Tree panel to create custom option.

7. That's all. You are installed Option Tree, and ready to create Theme options for your theme.

Here is the video tutorial: