Tonjoo TOM Theme Integration

Tonjoo TOM Theme – In this tutorial we will guide you on 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.

How to Integrate Tonjoo TOM Theme

Here’s how to integrate Tonjoo’s TOM theme:

1. 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)
{
...
}

2. 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' )
    )
);

3. 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.

4. 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;
}

5. 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:\/\/tonjoostudio.com\/rahasia\/wp-content\/themes\/tonjoostudio\/tom-images\/ads\/FRS-banner-box.jpg",
	"img_promo_2":"https:\/\/tonjoostudio.com\/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);
}

Have You Managed to Tom Theme?

That is how to integrate Tonjoo TOM Theme into your WordPress theme. If you want to add features to your WordPress website, you can do so by installing WordPress plugins.

Using WordPress, you can also create your own online store by installing WooCommerce and adding the best WooCommerce plugins.

However, if you want to focus on your business and avoid the hassle of website development, you can collaborate with the Tonjoo Team, specialists in website development with over 10 years of experience.

We have worked with governments, corporations, and startups. Some examples of our work include Borobudurpark, Universitas Gadjah Mada, Futureskills, and Hello Health Group. Contact us to collaborate!

Read similar posts by Moch. Nasikhun Amin on the Tonjoo’s blog about WordPress, WooCommerce, plugins, and other web development subjects.

Updated on May 16, 2024 by Moch. Nasikhun Amin