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
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:
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' ),
Example : empty
'parent_slug' => apply_filters( 'ot_theme_options_parent_slug', '' ),
2. Position is used to set the menu order.
'position' => apply_filters( 'ot_theme_options_position', __( '5', 'option-tree' ) ),
3. Is used to change page title.
'page_title' => apply_filters( 'ot_theme_options_page_title', __( 'This is Page Title', 'option-tree' ) ),
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' )),
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
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.
That is good article.
I want to add all optionTree tabs to theme customize page for easy setting & review.
Is it possible?
yes you can
Thanks!!
Very useful 🙂
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->max_num_pages > 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
coba di wp-config WP_DEBUG dibikin tru agar bisa tau error nya apa. Selain itu require coba diganti dengan require _once apakah bisa ?
This is really a very helpful tutorial, I am just using this in my custom theme. Thank you very much for share.