Seegatesite.com – I will continue my article on how to use option-tree framework. This discussion is a continuation of my previous article about simple way create wordpress theme option using option tree framework. The use of meta boxes using the option tree framework will allow us to create custom fields in wordpress post’s page.
Meta boxes have a variety of uses, for example to improve SEO ONPAGE on your post page, we can create a meta boxes to include the meta description and meta keywords. If you sell products, you can create meta boxes to include price, product images, ratings and additional parameters.
Option tree framework is a powerful plugin which very helpful to wordpress theme’s developers. With a bit of coding we have offered variety of panels and meta boxes that responsive.
Table of Contents
Here’s how to create a custom meta boxes using option-tree framework
1. Surely you already have the option-tree framework plugin
2. Add the following script on the functions.php file in your theme
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'); |
3. Create new php file as metaboxes.php and save on option-tree folder( your theme folder -> option-tree ) and copy this 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 | <?php add_action( 'admin_init', 'custom_meta_boxes' ); function custom_meta_boxes() { $my_meta_box = array( 'id' => 'my_meta_box', 'title' => __( 'Example Meta Box', 'theme-text-domain' ), 'desc' => '', 'pages' => array( 'post' ), 'context' => 'normal', 'priority' => 'high', 'fields' => array( array( 'label' => __( 'Tab 1', 'theme-text-domain' ), 'id' => 'Tab_one_id', 'type' => 'tab' ), array( 'label' => __( 'Text', 'theme-text-domain' ), 'id' => 'text_box_meta', 'type' => 'text', 'desc' => __( 'This is a example of text field meta boxes.', 'theme-text-domain' ) ), array( 'label' => __( 'Tab 2', 'theme-text-domain' ), 'id' => 'tab_two_id', 'type' => 'tab' ), array( 'label' => __( 'Textarea', 'theme-text-domain' ), 'id' => 'textarea_meta', 'type' => 'textarea', 'desc' => __( 'This is a example Textarea field.', 'theme-text-domain' ) ) ) ); if ( function_exists( 'ot_register_meta_box' ) ) ot_register_meta_box( $my_meta_box ); } |
Save, then go to your new post page ( Posts -> Add New ), You will see the results of the meta boxes that have been made like the following picture
An outline, the code in the theme options and meta boxes are the same, the difference in meta boxes we don’t need to create a section to add a new tab.
The use of meta boxes on the theme’s building is using the following syntax
$demo_meta_box = get_post_meta( post_id_wordpress, meta_box_id, true );
or
$demo_meta_box = get_post_meta( $post->ID, 'demo_meta_box', true );
For detail tutorial, you can learn more from meta boxes demo example on (option-tree -> assets -> theme-mode)
Leave a Reply