A Beginners Guide to Titan Framework: Adding an Enable Type Option

Providing end users with the option to enable or disable certain features of a premium plugin or a theme is pretty common. Titan Framework has recently pushed a new option to its core which does exactly that. Let’s see how you can add an enable/disable toggle button inside an admin panel, a metabox or a theme customizer section with Titan Framework (TF).

The Enable Type Option in Titan Framework

There is an enable type option in Titan Framework to create enable/disable toggle buttons. In the dashboard, the enable type option appears like this: 

Adding enable Type Options

Here are its parameters:

  • name: It assigns the display name of an enable type option.
  • id: This parameter specifies a unique name which gets saved options values.
  • desc: It adds a brief description with the option name.
  • default: (Optional) It assigns the default value.
  • enabled: (Optional) It is the label for the button of the enabled state. The default is set to Enabled.
  • disabled: (Optional) It is the label for the button of the disabled state. The default is set to Disabled.
  • livepreview: (Optional) Each time you add an enable type option in a theme customizer section, this parameter allows you to live preview the changes you make.

All parameters are string by type, except default which is boolean.

Available Containers for the Enable Type Option

You can add this option inside:

  • Admin Panel
  • Admin Tab
  • Metabox
  • Theme Customizer Section

To add an enable type option in these containers, follow these steps:

  • Get an instance via the getInstance() function.
  • Create an option via the createOption() function.
  • Get saved values via the getOption() function.

If you’re interested in learning how to create these containers with TF, then read the previous articles of this series.

Creating an Enable Type Option Inside an Admin Panel

Example Declaration

Let’s create this option in an admin panel first.

<?php
    /**
     * 
     * Create enable type option in an Admin Panel
     * 
     */
    $aa_panel->createOption( array(

        'id'      => 'aa_enable_opt', // The ID which will be used to get the value of this option
        'type'    => 'enable', // Type of option we are creating
        'name'    => 'Allow Custom CSS', // Name of the option which will be displayed in the admin panel
        'desc'    => 'Enable/Disable Custom CSS', // Description of the option which will be displayed in the admin panel
        'default' => true  // Default value of the option

    ) );

At line #8, I added an enable type option via the createOption() function in an admin panel $aa_panel. As this function takes up an array, I’ve defined the values of the parameters name, type, id, desc and default. The value of ID must be unique, i.e. aa_enable_opt. The value of default is set to true, which means the option’s status is set to ‘enabled‘ by default.

The Enable Type option in the Neat Options

In the above screenshot, there is an enable type option named Allow Custom CSS in an admin panel Neat Options.

Example Usage

Let’s get the saved values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_enable_opt_val = $titan->getOption( 'aa_enable_opt' );
    
    /**
     * 
     * Print saved value
     * 
     */
    if ( 1 == $aa_enable_opt_val ) {
        echo "Custom CSS in admin tab is On.";
    } else {
        echo "Custom CSS in admin tab is Off.";
    }   
     
?>

To get the saved value, first get an instance via the getInstance() function (line #3). Then at line #6, the getOption() function retrieves the saved value by registering the option ID aa_enable_opt as its parameter. I saved the result inside a new variable $aa_enable_opt_val. Then I used an if-else check which prints the saved value at the front-end.  

Now the enable type option can hold two values: either 1/0 or true/false. The value is either ‘1’ (enabled state) or ‘0’ (disabled state). Considering this fact, I wrote lines 15 to 20 of the code, which checks the value of the variable $aa_enable_opt_val. If it is ‘1’ then it prints ‘Custom CSS in admin panel is enabled’ at the front-end. If the value of the variable is ‘0’ then it prints ‘Custom CSS in admin panel is disabled‘.

Displaying the Result at the Front-End

Suppose I enabled the option and saved it.

Saving the value for the enable type option

Here is a screenshot of the final result which appeared at the front-end.

The result of the option as viewed on the front-end

Creating an Enable Type Option Inside an Admin Tab

Example Declaration

Next I’ll create this option in an admin tab.

<?php
    /**
     * 
     * Create enable type option in an Admin Tab
     * 
     */
    $aa_tab1->createOption( array(

        'id'       => 'aa_enable_opt_in_tab', // The ID which will be used to get the value of this option
        'type'     => 'enable', // Type of option we are creating
        'name'     => 'Allow Custom CSS', // Name of the option which will be displayed in the admin panel
        'desc'     => 'Enable/Disable Custom CSS', // Description of the option which will be displayed in the admin panel
        'enabled'  => 'On', // Label for the enabled option
        'disabled' => 'Off' // Label for the disabled option

    ) );

Here, I added this option in an admin tab $aa_tab1. The value of the ID is aa_enable_opt_in_tab. This time, I’ve also defined new labels for the enabled and disabled parameters. 

Adding the enable type option in a tabbed interface

In the image, there is an enable type option inside Tab 1 of panel Neat Options 2. Also note the newly defined labels ‘On‘ for enable and ‘Off‘ for disable.

Example Usage

Now I’ll get saved values.

<?php

// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_enable_opt_in_tab_val = $titan->getOption( 'aa_enable_opt_in_tab' );

/**
 * 
 * Print saved value
 * 
 */
if ( 1 == $aa_enable_opt_in_tab_val ) {
    echo "Custom CSS in admin tab is On.";
} else {
    echo "Custom CSS in admin tab is Off.";
}    

?>

The code is pretty much similar to what I wrote above. So, let me summarize all the steps:

  • Get a unique instance via the getInstance() function at line #4.
  • Get the saved value via the getOption() function at line #7.
  • Print the saved value at the front-end via the if-else check statement on lines 15 to 20.

Displaying the Result at the Front-End

This time I toggled the option to Off. The front-end prints the following line:

Displaying the result of the option on the front-end

Creating an Enable Type Option Inside a Metabox

Example Declaration

Now I’ll create an enable type option in a metabox.

<?php
    /**
     * 
     * Create enable type option in a Metabox
     * 
     */
    $aa_metbox->createOption( array(

        'id'      => 'aa_enable_opt_in_metabox', // The ID which will be used to get the value of this option
        'type'    => 'enable', // Type of option we are creating
        'name'    => 'Allow Custom CSS', // Name of the option which will be displayed
        'desc'    => 'Enable/Disable Custom CSS', // Description of the option which will be displayed
        'default' => false // Default value of the option

    ) );

Here I added yet another enable type option in a metabox $aa_metbox. Its ID is aa_enable_opt_in_metabox. The value of default is set to false.

Adding the enable type option in a meta box

In the above screenshot, you can find this option in a metabox. It appears on all page and post editing screens.

Example Usage

Let’s get the saved value for this option.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_enable_opt_in_metabox_val = $titan->getOption( 'aa_enable_opt_in_metabox', get_the_ID() );
    
/**
 * Print saved value
 * 
 */
if ( 1 == $aa_enable_opt_in_metabox_val ) {
    echo "Custom CSS in a metabox is enabled.";
} else {
    echo "Custom CSS in a metabox is disabled.";
}    

?>

I’ve written almost the same code again. The only difference can be spotted at line #6. There exists a new parameter inside the getOption() function. This is the get_the_ID() function which is used to retrieve a specific page or post ID.

Displaying the Result at the Front-End

Let’s again enable the option and save it. The front-end appears like this:

Viewing the result of the option as saved in the meta box

Creating an Enable Type Option Inside a Theme Customizer Section

Example Declaration

Finally, I’ll create this option in a theme customizer section.

<?php
    /**
     * 
     * Create enable type option in a Theme Customizer Section
     * 
     */
    $aa_section1->createOption( array(

        'id'      => 'aa_enable_opt_in_sec', // The ID which will be used to get the value of this option
        'type'    => 'enable', // Type of option we are creating
        'name'    => 'Allow Custom CSS', // Name of the option which will be displayed
        'desc'    => 'Enable/Disable Custom CSS', // Description of the option which will be displayed
        'default' => false // Default value of the option

    ) );

Here I created this option in a theme customizer section $aa_section1. Its unique ID is aa_enable_opt_in_sec. The rest of the parameters are the same.

Adding the enable type option into the Customizer

In the above image, there’s an enable type option in a theme customizer section named My Section.

Example Usage

Use the following code to get saved values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_enable_opt_in_sec_val = $titan->getOption( 'aa_enable_opt_in_sec' );
    
/**
 * 
 * Print saved value
 * 
 */
if ( 1 == $aa_enable_opt_in_sec_val ) {
    echo "Custom CSS in a customizer section is enabled.";
} else {
    echo "Custom CSS in a customizer section is disabled.";
}    
 
?>

Once again, the code is exactly the same. Only the ID and variable names are different.

Displaying the Result at the Front-End

Here is the screenshot, which displays the changes in live preview mode.

Viewing the enable type option in the Customizer

Conclusion

From an end user’s point of view, the enable type option is quite useful, as you can enable or disable any of the features with just a single click. So go through this tutorial and share your views about it in the comments section.

At this point, we’ve covered all there is to cover about the Titan Framework. Please remember to checkout the series page if you have any questions or comments about any of the topics that we’ve covered. Or feel free to reach out to me on Twitter.

Related posts:

  1. How to Customize Bootstrap’s Sass Files With Grunt
  2. How to Make Your WordPress Theme or Plugin Multilingual-Ready
  3. How to Create a WooCommerce Product Table for Free