Advertisement
  1. Code
  2. WordPress
Code

A Beginners Guide to Titan: Adding a Radio, Palette, and Image Type

by
Languages:
This post is part of a series called A Beginner's Guide to Titan Framework.
A Beginners Guide to Titan Framework: Adding a Date Type Option
A Beginners Guide to Titan: Adding Select, Select-Posts, and Select-Pages Options

When creating a dynamic set of options, you should always provide an end user with a set of choices, and radio type options in Titan Framework can help in this regard. Let's see how you can create radio type options inside a WordPress custom admin panel, a meta box or the theme customizer.

The Radio Type Button in Titan Framework

A set of radio type buttons can be added with Titan Framework, from which you can select a single option. It appears like this:

Adding Radio Type Options in Titan

This option type supports the following parameters:

  • name: It shows the display name of the radio type option.
  • id: This parameter assigns a unique name which helps to get the saved options values.
  • options: It is an associative array which takes up value–label pair options displayed as radio buttons.
  • default(Optional) It assigns a default value.
  • desc:(Optional) It displays a one-line description with the option name.
  • livepreview: (Optional) This parameter displays the live preview of changes when a radio type option is added inside a theme customizer section.
  • css: (Optional) Whenever you add this option inside an admin page and/or theme customizer section, this parameter automatically generates CSS.

All the parameters are of type string except the options parameter, which is array by type.

Available Containers for the Radio Type Option

The radio type option can be created inside: 

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

The general format of adding this option is the same:

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

However, if you want to learn about how these containers are created with Titan Framework then skim through my previous articles.

Creating a Radio Type Option Inside an Admin Panel

Example Declaration

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

I'm adding a radio type option in an admin panel $aa_panel via the createOption() function in line #7. As you can see, this function takes up an array of parameters which this option supports. So, I've defined values for parameters id, type, name, desc, default and options.

In this code, I created a list of three radio buttons named Header, Body and Footer, each having a unique key, i.e. aa_hdr, aa_bdy and aa_ftr. Think of it like a set of options which you want an end user to choose from. For example, if you want to display a note, a user could choose if it should be displayed in the header, body or footer.

Adding a radio type in the dashboard

You can find a radio type option inside an admin panel Neat Options.

Example Usage

Let's get its saved values.

First of all, get a unique instance value in line #3. Then use the getOption() function, which takes up the ID aa_radio as a parameter (line #6). Finally, lines #14 to #28 are used to print the values at the front-end via simple if-else check statements in PHP.

According to these statements:

  • If the value of variable $aa_radio_val equals the label aa_hdr then print 'You Selected Header'.
  • If the value of variable $aa_radio_val equals the label aa_bdy then print 'You Selected Body'.
  • If the value of labels is not aa_hdr or aa_bdy then print 'You Selected Footer'.

Displaying the Result at the Front-End

Suppose I selected Header as a demo value.

Selecting a radio type option in the dashboard

Now, this setting should print 'You Selected Header' like this:

The result of selecting a radio option

Creating a Radio Type Option Inside an Admin Tab

Example Declaration

Let's create this option type inside an admin tab.

Now I'll add this option in an admin tab $aa_tab1 via the createOption() function. Its ID is aa_radio_in_tab1_panel2.

Adding the radio type option to a tabbed interface

The above screenshot shows this option in Tab 1 of Neat Options 2.

Example Declaration

Let's write the code for getting the saved values.

The process of getting the saved options values is pretty much the same. So, instead of going into details I'm listing the points:

  • First call a unique instance via the getInstance() function in line #3.
  • Then use the getOption() function and register the ID aa_radio_in_tab1_panel2.
  • Save this value inside a new variable $aa_radio_in_tab1_panel2_val in line #6.
  • Next print the values at the front-end via an if-else check, i.e. lines #14 to #28.

Displaying the Result at the Front-End

I selected Body. Now this setting should print 'You Selected Body' at the front-end. Here is the screenshot:

Displaying the result of selecting an option on the front-end

Creating a Radio Type Option Inside a Metabox

Example Declaration

Now I'll write the code for a metabox.

This time I added a radio type option in a metabox $aa_metbox with ID aa_mb_radio.

Adding radio options to a meta box

You can find this option named Choose Radio Buttons in a metabox. This screenshot is of a page editing screen. You will find similar option displayed in your post editing screens as well.

Example Usage

Now I'll show how you can get a saved value in a metabox. 

The entire code is the same, except in line #6 where I've used the get_the_ID() function, which helps to fetch the saved value from any specific page or post ID.

Displaying the Result at the Front-End

This time I chose Footer as the demo value. At the front-end, 'You Selected Footer' should print like this:

Displaying the result of the radio option on the front-end

Creating a Radio Type Option in a Theme Customizer Section

Example Declaration

Here is its code.

In the end, I'll add this option in a theme customizer section $aa_section1 whose unique ID is aa_sec_radio.

Adding radio options to the Customizer

You can find a list of radio options inside the Section 1 tab.

Example Usage

Let's retrieve the values.

Once again, getting the saved options values is done in the same manner. Only the ID and variable names are different.

Displaying the Result at the Front-End

Here's a screenshot of the live changes which take place when I change the option settings.

Viewing the result of the radio options from the Customizer

Now I'll show you how to display color palettes in the form of radio options inside a custom WordPress admin panel, a metabox, or a section of your theme customizer.

The Radio-Palette Type Option in Titan Framework

In Titan Framework, there is a cool option type, radio-palette. It can be used to offer color palettes inside your theme. Here is what it looks like:

Adding Radio Palette Type Options in Titan

Let's discuss the settings of this option.

  • name: This parameter shows the display name.
  • id: It defines a unique name which gets the saved values.
  • desc: A brief description which appears with the option name.
  • options: This defines a two-dimensional array which has sets of hex color values.
  • default(Optional) It defines the options index of the default palette/color array. 
  • livepreview: (Optional) This parameter displays the live preview of changes when a radio-palette type option is added inside a theme customizer section.
  • css: (Optional) Whenever you add this option inside an admin page and/or theme customizer section, this parameter automatically generates CSS.

All the parameters are of type string, except the options which is array by type.

Available Containers for the Radio-Palette Type Option

You can add this option inside: 

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

During its creation, you will follow a similar format:

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

The explanation of creating these containers is beyond the scope of this article. However, you can find their detail in previous articles of this series.

Creating a Radio-Palette Type Option Inside an Admin Panel

Example Declaration

Let's create this option type inside an admin panel.

In line #8, I'm adding a radio-palette type option in an admin panel $aa_panel via the createOption() function. This function takes up an array of parameters which I've defined above. 

I defined the unique ID as aa_rad_palette in line #11. The most important parameter is defined in line #15 which is the options parameter. It's a two-dimensional array, which takes up multiple hex color values. Each array set adds a color palette. So between line #16 and #38 there are three such arrays; hence three options of color palette. 

Three radio palette options

In the above screenshot, there are three color palettes which appear against the name Radio Palette Option inside admin panel Neat Options.

Example Usage

Now I'll write the code for getting the saved options values.

The return value mechanism of this option works in such a way that it returns all the colors' hex values of the selected palette. So, to get these values, call an instance via the getInstance() function in line #3. Make sure that you register a unique parameter with this function. I'll recommend keeping your theme name. That's why I used neat here.

In line #6, use the getOption() function, which retrieves the saved values by registering the option ID, i.e. aa_rad_palette. I saved its result to a new variable,  $aa_rad_palette_val.

As I've mentioned, the return values are the colors of the selected palette. So, adopt a method which prints the array contents, for example:

  • using the var_dump() function
  • using the print_r() function 

I'm using the var_dump() function to see what gets saved in $aa_rad_palette_val

Displaying the Result at the Front-End

Suppose I selected the second color palette:

Selecting a color palette

Here's the screenshot of the front-end:

Displaying the results of the color palette

All the array contents of the second color palette get printed as shown above. Now you can easily use these values by accessing any element of this array, e.g. $aa_rad_palette_val[0] will provide you with #D9CEB2 hex color.

Creating a Radio-Palette Type Option Inside an Admin Tab

Example Declaration

Now I'll add this option inside an admin tab.

This time I'm adding a radio palette inside an admin tab $aa_tab1 with ID aa_rad_palette_in_tab1_panel2. Once again, I'm defining three arrays of color values, i.e. three color palette options.

Adding the color palette to a tabbed interface

Here is the screenshot, where you can find a radio-palette type option in Tab 1 of admin panel Neat Option 2.

Example Usage

Let's get the saved options values.

The code is exactly the same, so I'm summarizing all its points:

  • Get a unique instance in line #3.
  • Retrieve the saved value via the getOption() function in line #6.
  • Print the array contents via the var_dump() function in line #16.

Displaying the Result at the Front-End

This time I choose the first palette, and here are its contents.

Reviewing the results of the interface on the front-end

Creating a Radio-Palette Type Option Inside a Metabox

Example Declaration

Let's create a radio-palette type option in a metabox.

radio-palette type option exists in a metabox $aa_metbox with a unique ID aa_mb_rad_palette. The createOption() function in line #8 takes up the same list of parameters which I've mentioned in previous examples.

Adding radio palettes into a meta box

The above screenshot shows a page editing screen, and right at the end, a Radio Palette Option is displayed in a metabox.

Example Usage

Here is the code.

In line #6, there is an additional get_the_ID() function which provides the ID for a specific page/post or a post_type. The rest of the code is same.

Displaying the Result at the Front-End

Choose the third color palette, for example, and save the results. Here are the array contents:

Viewing the results of the selected palette

Creating a Radio-Palette Type Option Inside a Theme Customizer Section

Example Declaration

In the end, I'll add this option in a customizer section.

This code adds a radio-palette type option in a theme customizer section$aa_section in pretty much the same way.

Adding the radio palette to the Customizer

There is a My Section theme customizer section in which there are three options of color palettes named Radio Palette Option

Example Usage

Let's write the code to get the options values.

The code for getting the values from a theme customizer section is almost the same. Only the ID and variable names are different. So, you may refer to the details written above.

Displaying the Result at the Front-End

Here is a screenshot of the live changes which take place.

Previewing the results from the Customizer

Finally, we're going to explore yet another option type in Titan Framework, theradio-image option, which displays a set of radio buttons with image labels. Today, I am going to write about how you can use the radio-image type option inside a custom admin panel, a metabox, or the theme customizer.

The Radio-Image Type Option in Titan Framework

This option type allows the user to select any image from a list of options which appear as radio buttons. The radio-image option in Titan Framework looks like this:

Adding Radio Image Type Options in Titan

Let's list the parameters of this option:

  • name: It displays the name of the option type.
  • id: It assigns a unique name which gets the values.
  • desc: This parameter adds a brief description to the option type.
  • options: (Optional) This defines a two-dimensional array which contains value and image URL pairs.
  • default(Optional) It defines the default value of the option.
  • livepreview: (Optional) This parameter displays a live preview of changes when a radio-image type option is added inside a theme customizer section.
  • css: (Optional) Whenever you add this option inside an admin page and/or theme customizer section, this parameter automatically generates CSS.

The options parameter is array by type, while the rest are string

Available Containers for the Radio-Image Type Option

This option type can be added inside: 

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

Irrespective of the container type, the option is added via the following method:

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

If you don't know how to create these containers, head back to previous articles in this series. 

Creating a Radio-Image Type Option Inside an Admin Panel

Example Declaration

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

In line #8, I'm adding a radio-image type option with the createOption() function inside an admin panel $aa_panel. This function takes up an array of parameters, i.e. name, id, desc, type, options and default. The ID (line #10) is aa_rad_image, which should always be unique.

The options parameter at line #14 takes an associative array which defines image URLs and their labels. Each of these key-value pairs creates a radio-image option. So, I added three radio image options with labels: aa_hdr_img aa_bdy_img and aa_ftr_img.

The get_template_directory_uri() function is used to fetch the path of the images for each label.

The radio images in the Neat Options

In the above screenshot, you can view three radio-image options inside an admin panel Neat Options.

Example Usage

Let's get the saved values.

The process of retrieving the saved values starts from getting an instance in line #3 via thegetInstance() function. Then I used the getOption() function in line #6 with a parameter, i.e. an ID aa_rad_image, and saved its value to a new variable$aa_rad_image_val.

Up to this point, the label of the selected radio image gets stored in this variable. This means that the user has selected an image from the dashboard and saved the setting. Now there are several ways in which you can display the saved setting values.

Let's take a look at this simple example. I've used if-else check statements in lines #15 to #26:

  • If the value of variable $aa_rad_image_val is equal to the label aa_hdr_img then print 'You've selected Header image.'
  • If the value of variable $aa_rad_image_val is equal to the label aa_bdy_img then print 'You've selected Body image.'
  • If the value of labels is not aa_hdr_img or aa_bdy_img then print 'You've selected Footer image.'

Displaying the Result at the Front-End

Suppose I select the first image.

Adding another image to the available options

The front-end appears like this:

Viewing the results of the radio image on the front-end

The saved setting was for the label aa_hdr_img, so the corresponding statement was printed.

Creating a Radio-Image Type Option Inside an Admin Tab

Example Declaration

Now I'll create this option inside an admin tab.

This time I'm adding a radio-image type option in an admin tab $aa_tab1 whose ID isaa_rad_image_in_tab1_panel2. Once again, there are three image options.

Adding a radio image to the tabbed interface

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

Example Usage

Here is the code for getting the values:

The code is almost the same, so I'm listing the steps in bullet points:

  • Get a unique instance in line #3 via the getInstance() function.
  • Retrieve the saved options values in line #6 via the getOption() function.
  • Print the saved user settings via if-else check statements in lines #15 to #27.

Displaying the Result at the Front-End

Now I choose the second image. The front-end looks like this:

Viewing the results of the selected radio image

Creating a Radio-Image Type Option Inside a Metabox

Example Declaration

Now I'll be adding the same radio images in a metabox.

radio-image type option exists inside a metabox $aa_metbox with unique IDaa_mb_rad_image.

Adding the radio images to a meta box

The image above shows a page editing screen, and right at the end there is a metabox within which this option exists.

Example Usage

Let's retrieve the saved values.

The only difference in the above code is found in line #6 where I've defined a new parameter inside the getOption() function. This is the get_the_ID() function which retrieves the value of a specific page or post ID.

Displaying the Result at the Front-End

This time, I selected the third image and preview what appears at the front-end.

Viewing the results of the selected radio image on the front-end

The desired result is printed as shown in the above image.

Creating a Radio-Image Type Option Inside a Theme Customizer Section

Example Declaration

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

radio-image option whose ID is aa_sec_rad_image is created inside a theme customizer section $aa_section1.

Adding radio images to the Customizer

There is a My Section customizer section, within which exists a Radio Image Option field.

Example Usage

Here is the code:

This entire code is the same—only the ID and variable names are different.

Displaying the Result at the Front-End

Here's a screenshot of the live changes which took place as I saved my settings:

Viewing the results of selecting a radio image in the Customizer

The radio-image type option can be used to help a user choose different layouts of your theme.

For example, most commercial themes allow the end user to choose between a left sidebar, right sidebar or no sidebar with a full-width page. This can be done with a radio-image type option in a metabox. You can also create several layouts for the output of a plugin, or provide the user with different background patterns to choose from. 

Conclusion

So this is how you can add a set of radio buttons in different containers. These buttons can be used to achieve an extended level of functionality in various places in your themes.

Additionally, this was quite a handy way of introducing some easy styling properties within your WordPress themes. You can add radio palettes to allow users to change the theme's skins. In the next article, we'll explore another option which is related to this radio type.

For example, in a plugin, I gave a user two radio buttons to choose a full-width button or not. I named the option "Make The Buttons Full Width?" with options "Yes" or "No". But I used an associative ID for these options to be 100% or auto, which I used to output the CSS. Check the code below to see if you can understand the trick here:

Cool, eh? 

In the next article, we will explore some more options which are related to this radio type. Let me know if you have any questions via comments, or reach out on Twitter.

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