1. Code
  2. WordPress

A Beginners Guide to Titan Framework: Adding a Checkbox Type Option

This post is part of a series called A Beginner's Guide to Titan Framework.
A Beginners Guide to Titan: Adding a Number & Editor Type Option
A Beginners Guide to Titan Framework: Adding a Font Type Option

WordPress themes have become dynamic, and a larger part of their control lies in the hands of a user. Today, managing and configuring theme settings has become quite easy. One of the handiest options which can enable or disable any of your theme's features in a single click is a checkbox. I'm sure you've come across several coding scripts which create this option, but how about learning a quick method of doing so? Let's discuss how Titan Framework helps to add a checkbox type option.

The Checkbox Type Option in Titan Framework

Titan Framework allow its users to add a checkbox type option, which looks like this:

Adding Checkbox Type Options in Titan

The checkbox option type has several parameters:

  • name: It defines the display name of the checkbox type option.
  • id: This parameter assigns a unique name which helps in retrieving the values.
  • default: (Optional) It sets the default value of the option.
  • desc: It displays a brief description.
  • livepreview: (Optional) This parameter displays a live preview of the changes when a checkbox type option is added inside a theme customizer section.
  • css: (Optional) When you add this option inside an admin page and/or theme customizer section, this parameter automatically generates CSS.

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

Available Containers for the Checkbox Type Option

The checkbox type option can be created inside: 

  • Admin Panel
  • Admin Tabs
  • Metabox
  • Theme Customizer Section

No matter which container type you choose, the process of adding this option type remains the same:

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

If you want to learn how these containers are created in Titan Framework, refer to the previous articles of this series.

Creating a Checkbox Type Option Inside an Admin Panel

Example Declaration

First I'll create this option type inside an admin panel.

I created a checkbox type option inside an admin panel $aa_panel via the createOption() function (line #5). This function takes up an array of parameters and that is why I've added some of the necessary parameters here, i.e. name, id, type, default, etc. 

In this type of option, id and default are quite important. 'ID' ( i.e. aa_checkbox), which should be unique, gets the saved values, while 'default' specifies the current status (i.e. enabled or disabled) of the checkbox at the time of its creation.  

A checkbox in the Neat Options

The above screenshot displays a checkbox type option named My Checkbox Option inside an admin panel Neat Options. This is initially disabled, which satisfies the value of the default parameter.

Example Usage

Now I'll retrieve the saved options values.

Being an enable/disable type option, the retrieval of its saved values is somewhat different. The checkbox option is not like the previously discussed types where the values can be directly retrieved and printed at the front-end. 

Instead, this option type is used with some other theme functionality. For example, you can allow users to enable or disable the logo with a checkbox, which means all you have to do is check whether the checkbox is enabled or disabled and process it accordingly.

So let's take a look at the code written above. In line #3, the getInstance() function takes up a unique parameter, preferably your theme name. That's why I've used neat here. 

Then in line #5, I used the getOption() function, which registers the option ID as a parameter and saves its value to a new variable aa_checkbox_val

One more thing: the checkbox type option is booloean, i.e. its value is either 'true/false' or '1/0'. So, to explain its behavior I've written a simple if-else statement (lines #11 to #15). 

If the value stored in variable $aa_checkbox_val is 1, then Enabled is printed. This indirectly means the checkbox is marked. Otherwise, Disabled is printed at the front-end, which denotes the checkbox unmarked or disabled.

I've used this if-else check for the purpose of explanation; however, you can write any code within this block. 

Displaying the Result at the Front-End

Suppose I checked this option and saved it.

Saving the checkbox

According to my code, this type of setting should print 'Checkbox type option in an admin panel isEnabled'.

The result of the checkbox on the front-end

Now I'm unmarking the checkbox to find out what gets displayed at the front-end. Here is its image:

Another result of the checkbox on the front-end

Creating a Checkbox Type Option Inside an Admin Panel

Example Declaration

Here is the code for a checkbox type option in an admin tab:

I added a checkbox type option with ID aa_checkbox_in_tab1_panel2 in an admin tab $aa_tab1. Here is its screenshot:

Displaying the option in the tabs

You can find this option inside Tab 1 of admin panel Neat Options 2.

Example Usage

Let's retrieve the values:

In line #3, I'm getting a unique instance. Then the getOption() function (line #5) is registering the ID aa_checkbox_in_tab1_panel2 and saving its value in a new variable aa_checkbox_in_tab1_panel2_val.

Finally, this variable is used inside an if-else check to print the checkbox setting at the front-end (lines #11 to #15).

Displaying the Result at the Front-End

Suppose I kept this option unmarked and saved it. The front-end appears like this:

The result of the checkbox on the front-end

Now you can enable it and view the result yourself.

Creating a Checkbox Type Option Inside a Metabox

Example Declaration

I'm going to create this option in a metabox.

This time I created a checkbox type option inside a metabox $aa_metbox via the createOption() function. Its ID is aa_mb_checkbox.

The checkbox in the meta box

You can find an option named My Checkbox Option inside a metabox displayed at the end of a page(post_type) editing screen. However, it also appears in the post editing area.

Example Usage

Now I'll get the saved options values:

Getting the saved options values for the checkbox type option in a metabox is pretty much the same process. The only difference is observed in line #5 which takes up an additional parameter, i.e. the function get_the_ID(). This function is to get the ID for a specific page/post or a post_type.

Displaying the Result at the Front-End

This time I checked the option as the demo settings. Let's upload what appears at the front-end:

The result of the checkbox being checked from the meta box

Try out the enabled part of the example yourself. It's pretty much the same.

Creating a Checkbox Type Option Inside a Theme Customizer Section

Example Declaration

Finally, let's add this option in a theme customizer.

checkbox type option with ID aa_sec_checkbox exists inside a theme customizer section $aa_section1

Adding the checkbox to the Customizer

You can find My Checkbox Option inside a theme customizer section named My Section.

Example Usage

Let's type the code for getting saved values:

Once again, use the same procedure to get the saved options values. But as this option is created inside a theme customizer, you'll write this code in your header.php file and run it.

Displaying the Result at the Front-End

In the end, I'll show the live changes which occur:

Previewing the checkbox in the Customizer


Imagine you are building a premium WordPress theme and on the single.php page, you want the end user to be able to control if the theme should:

  • display the date
  • display the author
  • display the author box
  • display the comments count
  • display ads or related content

Then you can add multiple checkboxes and enhance the user experience.

Try this out and let me know if you have any questions. Comment below or reach out on Twitter.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.