Simple Way Create WordPress Theme Option Using Option Tree Framework

Seagatesite – I will share the simple way create wordpress theme option using option tree framework. If you are a wordpress theme’s developer , this article will be useful for you, especially as a beginner. Previously I had been discuss how to create wordpress theme options using option framework, where the function and purpose of the framework is same as used to assist developers in creating wordpress theme’s option. If you are a beginner and want to learn to make theme wordpress, can read my other article on Create a WordPress Theme with Bootstrap And underscores Step by Step before learning to build wordpress theme option.

Option tree is a framework created by Derek Herman, which has been used more than 70,000 more users. The advantages of the tree option is responsive ( mobile responsive ) and you can create meta box with ease, for use on the new post page. In addition, the tree option also allows developers to create interfaces with drag and drop step, and then , it can be exported in your own theme. Another advantage is just a few lines of simple code, none of your theme options conflict with other themes that use option tree framework.

In this opportunity I will discuss how to create wordpress theme option on the option tree theme mode. Please follow these steps

1. Please Download Option Tree Framework plugin here
2. Extract the zip file and copy it into your theme
3. Create a php file into option-tree folder as theme-options.php and meta-boxes.php (meta-boxes.php used if you need the extra option on wordpress post page ).
4. Edit file or-functions-admin.php (the Option-tree folder -> includes), is used to change the settings of data on option-tree, see the following picture:

How To Create WordPress Theme Option With Option Tree Framework Setting

Description :

1. Is used to adjust the position of menus and icons, I think the default is the best (theme.php), if you want to try another menu position, please replace theme.php with index.php or empty (”).
Example : index.php
'parent_slug' => apply_filters( 'ot_theme_options_parent_slug', 'index.php' ),

Change Parent Slug Option Tree Framework

Example : empty

'parent_slug' => apply_filters( 'ot_theme_options_parent_slug', '' ),

Change Parent Slug Option Tree Framework 2

2. Position is used to set the menu order.
'position' => apply_filters( 'ot_theme_options_position', __( '5', 'option-tree' ) ),

Wordpress Theme Option Using Option Tree Framework Menu Position

3. Is used to change page title.
'page_title' => apply_filters( 'ot_theme_options_page_title', __( 'This is Page Title', 'option-tree' ) ),

Simple Way Create WordPress Theme Option Using Option Tree Framework Page Title Option

4. Is used to change menu name.
'menu_title' => apply_filters( 'ot_theme_options_menu_title', __( 'Azoncast-V2 Options', 'option-tree' ) ),

5. Is used to change menu icon
'icon_url' => apply_filters( 'ot_theme_options_icon_url', __( 'Icon Url', 'option-tree' )),

Simple Way Create WordPress Theme Option Using Option Tree Framework Change Menu Icon

3. Add the following function in function.php

add_filter('ot_show_pages','__return_false');
add_filter('ot_show_new_layout','__return_false');
add_filter('ot_theme_mode','__return_true');
include_once('option-tree/ot-loader.php');
include_once('option-tree/meta-boxes.php');
include_once('option-tree/theme-options.php');

4. Open theme-options.php file that has been created and copy the following code

<?php add_action( 'init', 'custom_theme_options' ); function custom_theme_options() { if ( ! function_exists( 'ot_settings_id' ) || ! is_admin() ) return false; $saved_settings = get_option( ot_settings_id(), array() ); $custom_settings = array( 'contextual_help' => array( 
      'content'       => array( 
        array(
          'id'        => 'option_types_help',
          'title'     => __( 'Option Types', 'theme-text-domain' ),
          'content'   => '

' . __( 'Help content goes here!', 'theme-text-domain' ) . '

'
        )
      ),
      'sidebar'       => '

' . __( 'Sidebar content goes here!', 'theme-text-domain' ) . '

'
    ),
    'sections'        => array( 
      array(
        'id'          => 'general',
        'title'       => __( 'General', 'theme-text-domain' )
      ),
        array(
        'id'          => 'Featured_Post_Slider',
        'title'       => __( 'Featured Post Slider', 'theme-text-domain' )
      )
    ),
    'settings'        => array( 
      array(
        'id'          => 'logo_azoncastv2',
        'label'       => __( 'Header Logo', 'theme-text-domain' ),
        'desc'        => 'Upload your header logo',
        'std'         => '',
        'type'        => 'upload',
        'section'     => 'general',
        'rows'        => '',
        'post_type'   => '',
        'taxonomy'    => '',
        'min_max_step'=> '',
        'class'       => '',
        'condition'   => '',
        'operator'    => 'and'
      ),
      array(
        'id'          => 'Favicon_azoncastv2',
        'label'       => __( 'Favicon', 'theme-text-domain' ),
        'desc'        => 'Upload your favicon image',
        'std'         => '',
        'type'        => 'upload',
        'section'     => 'general',
        'rows'        => '',
        'post_type'   => '',
        'taxonomy'    => '',
        'min_max_step'=> '',
        'class'       => '',
        'condition'   => '',
        'operator'    => 'and'
      ),
      array(
              'id'        => 'google_azoncastv2',
              'label'     => __( 'Google webmaster', 'option-tree' ),
              'desc'      => __( 'Google webmaster code.', 'option-tree' ),
              'section'   => 'general',
              'type'      => 'text',
              'std'       => '',
              'class'     => '',
              'rows'      => '',
              'post_type' => '',
              'choices'   => array()
            ),
      array(
              'id'        => 'authorname_azoncastv2',
              'label'     => __( 'Author Name', 'option-tree' ),
              'desc'      => __( 'Meta author name', 'option-tree' ),
              'section'   => 'general',
              'type'      => 'text',
              'std'       => '',
              'class'     => '',
              'rows'      => '',
              'post_type' => '',
              'choices'   => array()
            ),
    )
  );
    $custom_settings = apply_filters( ot_settings_id() . '_args', $custom_settings );
    if ( $saved_settings !== $custom_settings ) {
    update_option( ot_settings_id(), $custom_settings ); 
  }
    global $ot_has_custom_theme_options;
  $ot_has_custom_theme_options = true;
  
}

Save and see the results, it will look like the following picture

Simple Way Create WordPress Theme Option Using Option Tree Framework Display

How to use

Get the value saved on theme options page

$variable = ot_get_option( 'id' );

or

$favicon_url = ot_get_option( 'favicon_azoncastv2' );

Option-tree supports many option types other than text and upload, the following list of option types supported option tree framework which I quoted directly from the official wordpress plugin.

  • Background
  • Border
  • Box Shadow
  • Category Checkbox
  • Category Select
  • Checkbox
  • Colorpicker
  • Colorpicker Opacity
  • CSS
  • Custom Post Type Checkbox
  • Custom Post Type Select
  • Date Picker
  • Date Time Picker
  • Dimension
  • Gallery
  • Google Fonts
  • JavaScript
  • Link Color
  • List Item
  • Measurement
  • Numeric Slider
  • On/Off
  • Page Checkbox
  • Page Select
  • Post Checkbox
  • Post Select
  • Radio
  • Radio Image
  • Select
  • Sidebar Select
  • Slider
  • Social Links
  • Spacing
  • Tab
  • Tag Checkbox
  • Tag Select
  • Taxonomy Checkbox
  • Taxonomy Select
  • Text
  • Textarea
  • Textarea Simple
  • Textblock
  • Textblock Titled
  • Typography
  • Upload

I will not explain all how to use it, for example to use, you can open the demo file (option-tree -> assets -> theme-mode), there are 2 demo file demo-theme-options.php and demo-meta-boxes .php. Or for more details, you can visit here .

How to use option tree meta boxes i will explain on the next article.

Thus article Simple Way Create WordPress Theme Option Using  Option Tree Framework, hope useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

5 Comments

 Add your comment
  1. That is good article.

    I want to add all optionTree tabs to theme customize page for easy setting & review.

    Is it possible?

  2. Thanks!!
    Very useful 🙂

  3. thank,s
    Saya mau tanya ini mas..saya punya kode seperti ini

    function alf_general_option(){
    global $alifacart_v;
    
    if ( ot_get_option('general_options') == 'compare' ):
    /*
    *
    * Load compare
    *
    */
    
    require '/inc/compare/compare-func.php';
    require '/inc/compare/post_type.php';
    require '/inc/compare/database.php';  
    require '/inc/compare/listing_functions.php'; 
    require '/inc/compare/merchant.php'; 
    require '/inc/compare/metabox.php';
    
    if ($wp_query-&gt;max_num_pages &gt; 1) : 
    
    endif; 
       
    elseif ( ot_get_option('general_options') == 'store' ): 
    
    /*load woocommerce*/
    
    require '/inc/cwoocommerce/class-woocommerce.php';
    
    endif;
    }
    

    pertanyaannya:
    kode di atas tidak bisa require..saya tidak tau letak kesalahannya..
    mohon bantuannya mas..terima kasih

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: