• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » PHP » Simple Way Create Wordpress Theme Option Using Option Tree Framework

Simple Way Create WordPress Theme Option Using Option Tree Framework

By Sigit Prasetya Nugroho ∙ November 23, 2015 ∙ PHP, Wordpress ∙ 6 Comments

Share : TwitterFacebookTelegramWhatsapp

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.

Table of Contents

  • 1 In this opportunity I will discuss how to create wordpress theme option on the option tree theme mode. Please follow these steps
    • 1.1 Thus article Simple Way Create WordPress Theme Option Using  Option Tree Framework, hope useful 🙂

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

Related Articles :

  • How To Create Custom Post Meta Boxes WordPress Using Option-tree Framework

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

1
2
3
4
5
6
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?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 🙂

Another PHP Related Post :

  • How To Replace String With Another String In PHP
  • Login Page – Tutorial CRUD Client and API Server Using JQuery And Lumen Part 2
  • Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1
  • How To Solve Problems Illegal mix of collations (latin1_swedish_ci,IMPLICIT) In Laravel
  • How To Resolve No ‘Access-Control-Allow-Origin’ Header In Lumen
  • How To Create Custom Class In Laravel 5.5 For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for SergeySergey says

    January 6, 2016 at 4:07 pm

    That is good article.

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

    Is it possible?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      January 8, 2016 at 3:35 pm

      yes you can

      Reply
  2. Avatar for SemaSema says

    March 23, 2016 at 6:27 pm

    Thanks!!
    Very useful 🙂

    Reply
  3. Avatar for asranasran says

    April 27, 2017 at 7:50 am

    thank,s
    Saya mau tanya ini mas..saya punya kode seperti ini
    [php]
    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;
    }
    [/php]
    pertanyaannya:
    kode di atas tidak bisa require..saya tidak tau letak kesalahannya..
    mohon bantuannya mas..terima kasih

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      April 27, 2017 at 8:25 am

      coba di wp-config WP_DEBUG dibikin tru agar bisa tau error nya apa. Selain itu require coba diganti dengan require _once apakah bisa ?

      Reply
  4. Avatar for JahidJahid says

    March 18, 2018 at 8:39 pm

    This is really a very helpful tutorial, I am just using this in my custom theme. Thank you very much for share.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for JahidThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com