Tonjoo Tom Theme Integration

In this tutorial we will guide you how to integrate Tonjoo Theme Options Maker (TTOM) into your WordPress Theme. Please note that the current version of TTOM is only come in plugin version. So every theme using TTOM must have TTOM installed on their plugin.

CREATE AN OPTION FILE

We need a fresh copy of TTOM plugin, and then copy and paste tonjoostudio_options.php from tonjoostudio-tom/sample-options to your theme.

MODIFY tonjoostudio_options.php

The tonjoostudio_options.php consisting of 3 function :

// Setting up the default behaviour of WP Editor in TTOM function tonjoostudio_tom_default() { ... } // Options for your theme function tonjoostudio_tom_option() { ... } // Theme options configuration (name, title, etc) function tonjoostudio_tom_config($config) { ... }

MODIFY WP EDITOR BEHAVIOR

You can specify the behaviour of WP Editor by changing the array key and value on the tonjoostudio_tom_default() function. For example we can change the font-size range or maybe change the available font options on WP Editor using font-face key

$default = array( 'font-size' => range( 9, 71 ), 'font-face' => array( 'arial' => 'Arial', 'verdana' => 'Verdana, Geneva', ), 'font-style' => array( 'normal' => 'Normal', 'italic' => 'Italic', 'bold' => 'Bold', 'bold italic' => 'Bold Italic', ), /********************************************************* * @ http://codex.wordpress.org/Function_Reference/wp_editor **********************************************************/ 'editor-settings' => array( 'media_buttons' => false, /* Set true to display media button */ 'textarea_rows' => 5, 'tinymce' => array( 'plugins' => 'wordpress' ) ) );

ADDING OPTIONS

To create a new options we must first define an Options Group. Each Options Group is defined by type => ‘heading’ on the options array. It will create a new tab on the Option Page.

/********** Tab Homepage ***********/ $options['homepage'] = array( 'name' => 'Homepage', 'type' => 'heading', // Define that this is an option groups 'desc' => 'Test description homepage'); )

Each time you define an option with type => ‘heading’ (Options Group), every options bellow the $options will belong to the Options Group defined before.

To add an options you need to add this default template to the $options array :

$options['your-options-shortcode-id'] = array( 'name' => 'Options Name', 'desc' => 'Options Description', 'type' => 'Options Type', 'default' => 'Default Value' );

Supported type value is

• heading
• text
• textarea
• select
• select tag
• select-image
• radio
• upload
• checkbox
• multicheck

The tonjoostudio_options.php default file have many sample of default options available.

CHANGING THEME OPTIONS MENU NAME

Most of the time, you will need to change the name of the Theme Options name on the WP Admin side. To do this you just need to modifiy your tonjoostudio_tom_config() functions on your tonjoostudio_options.php file.

function tonjoostudio_tom_config($config) { /* * $config['mode'] = 'lite' or 'full' * lite : User cannot create new options from the wp-admin */ # $config['mode'] = 'lite'; # $config['page_title'] = 'Your Theme Option'; # $config['page_desc'] = 'Your custom descriptions'; # $config['menu_title'] = 'Your Custom Title'; # $config['capability'] = 'edit_theme_options'; # $config['menu_slug'] = ''; # $config['icon_url'] = 'dashicons-editor-paste-text'; # $config['position'] = '61'; # $config['sub_page_title'] = 'Your Sub Page Title'; # $config['sub_page_desc'] = 'Your custom descriptions'; # $config['sub_menu_title'] = 'Your Sub Page Title'; # $config['sub_capability'] = ''; # $config['sub_menu_slug'] = ''; # $config['ads_enabled'] = true; # $config['ads_title'] = 'My Ads'; # $config['ads_endpoint'] = 'http://your_endpoint_ads.com/ads/?type=jsonp'; return $config; } 

ENABLE ADS ON OPTIONS PAGE

TTOM currently supports custom ads on the options page, so you can create your own ads on theme options page. the default of this feature is disabled. to activate it you need to add this code to tonjoostudio_tom_config(); function on tonjoostudio_options.php file located on your active theme.

$config['ads_enabled'] = true; $config['ads_title'] = 'Your ads header title';

and add the URL endpoint ads with code:

$config['ads_endpoint'] = 'http://your_endpoint_ads.com/ads/?type=jsonp';

Url endpoint must have a return value as jsonp with parameters :

permalink_promo_1 (link for 1st ad),
permalink_promo_2 (link for 2nd ad),
img_promo_1 (image url of 1st ad),
img_promo_2 (image url of 2nd ad)

Example of return value:

jsonp: ({ "permalink_promo_1":"https:\/\/tonjoostudio.com\/addons\/fluid-responsive-slideshow\/", "permalink_promo_2":"https:\/\/tonjoostudio.com\/addons\/easy-custom-auto-excerpt\/", "img_promo_1":"https:\/\/cdn-image.tongkolspace.com/@tonjoostudio\/rahasia\/wp-content\/themes\/tonjoostudio\/tom-images\/ads\/FRS-banner-box.jpg", "img_promo_2":"https:\/\/cdn-image.tongkolspace.com/@tonjoostudio\/rahasia\/wp-content\/uploads\/2014\/07\/ECAE-small-banner-ads-regular.jpg" })

to make a jsonp callback to your ads, simply create an array of parameters and print it using json_encode :

Example :

$data = array( 'permalink_promo_1' => 'http://your-1-ads-url.com/'), 'permalink_promo_2'=> 'http://your-2-ads-url.com/'), 'img_promo_1' => 'http://image1-url.com/that-will-be-displayed.png'), 'img_promo_2' => 'http://image2-url.com/that-will-be-displayed.jpg') ); // for example, in ads url has parameters get (http://your_endpoint_ads.com/ads/?type=jsonp) if(!isset($_GET['type']) && !empty($_GET['type'])){ echo "jsonp:" . json_encode($data); }

Last Updated on Februari 6, 2015 by Haris