Advertisement
  1. Code
  2. WordPress
Code

A Beginners Guide to Titan: Adding Select, Select-Posts, and Select-Pages Options

by
Languages:
This post is part of a series called A Beginner's Guide to Titan Framework.
A Beginners Guide to Titan: Adding a Radio, Palette, and Image Type
A Beginners Guide to Titan Framework: Adding a Multicheck Type Option

When you need to display a lot of options in the form of a dropdown, you can use a select type option with Titan Framework. Today, we are going to create a select type option in a custom admin panel, a metabox, and the theme customizer. 

The Select Type Option in Titan Framework

The select type option in Titan Framework helps display a lot of options via a drop-down menu. This is how it looks.

Adding Select Type Options in Titan

This option type supports a list of settings:

  • name: This parameter assigns the display name of option.
  • id: It defines a unique name which retrieves the saved options values.
  • desc: It adds a one-line description with the option name.
  • options: This parameter takes up an associative array of value-label pairs which appear as options in a drop-down menu. You can even add a two-dimensional array to show grouped options (more on this later).
  • default(Optional) It defines the default value of the option.
  • livepreview: (Optional) This parameter displays a live preview of the changes when a select 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 for the 'Options', which is array in nature.

Available Containers for the Select Type Option

You can add this option inside: 

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

By now, I'm sure you must be aware of the general format which is followed while adding any option type:

  1. First get an instance via the getInstance() function.
  2. Then add an option via the createOption() function.
  3. In the end, retrieve the saved values via the getOption() function.

All these containers can be easily added with Titan Framework. Read the previous articles of this series if you don't know how.

Creating a Select Type Option Inside an Admin Panel

Example Declaration

Let's add this option inside an admin panel.

I'm adding a select type option in an admin panel $aa_panel using the createOption() function in line #9. This function defines a list of parameters, i.e. name, id, type, desc, options and default. I've defined a unique ID for my option, i.e. aa_select

Now take a look at line #15 where I've added an array of key-value pairs. Each pair adds a separate option in the drop-down list. I created three such pairs, i.e. three entries of a select type option.

Therefore, the labels aa_theme_temp1aa_theme_temp2 and aa_theme_temp3 add options named 'Theme Template 1', 'Theme Template 2' and 'Theme Template 3' in a list.

Adding a select type option to the Neat Options

The screenshot shows My Select Option inside the admin panel called Neat Options.

Example Usage

Let's retrieve the saved options values.

In line #3, get an instance via the getInstance() function. It takes a unique parameter, preferably your theme name (i.e. neat in my case). Then, use the getOption() function in line #6. It registers the option ID aa_select and saves its value in a variable $aa_select_val.

Next I'm using if-else check statements to print the selected values at the front-end, although you can do a lot of different things with this option. According to these:

  • If the value of variable $aa_select_val is equal to the label aa_theme_temp1 then print: 'You've selected Theme Template #1.'
  • If the value of variable $aa_select_val is equal to the label aa_theme_temp2 then print: 'You've selected Theme Template #2.'
  • If the value of labels is not aa_theme_temp1 or aa_theme_temp2 then print: 'You've selected Theme Template #3.'

Displaying the Result at the Front-End

I choose Theme Template 1 as my demo settings.

Choosing an option from the Select option

Let's find out how the saved settings get printed at the front-end. So, here is the screenshot.

Displaying the result of the option on the front-end

Creating a Select Type Option Inside an Admin Tab

Example Declaration

Now I'll create this option in an admin tab but with a different approach.

I'm adding this option in an admin tab $aa_tab1 with ID aa_select_in_tab1_panel2

Adding a select option to the tabs

You can find My Select Option inside Tab 1 of admin panel Neat Options 2.

Example Usage

Now I'll retrieve its values.

We get the values by following these steps:

  • Get an instance in line #3.
  • Get the saved values in line #6 by registering the unique ID.
  • Print the saved values at the front-end via if-else check statements in lines #16 to #27.

Displaying the Result at the Front-End

Now I'll choose 'Theme Template 2' as the demo settings. Here is a screenshot of the front-end.

Displaying the option from the selected value on the front-end

Creating a Select Type Option Inside a Metabox

Example Declaration

Here is the code:

Here I'm adding a select type option in a metabox $aa_metbox with ID aa_mb_select. Here, I'm using the same associative array which I defined inside an admin panel.

Adding a select option to the meta box

A drop-down menu named My Select Option is shown at the end of the page editing screen inside a metabox Metabox Options.

Example Usage

Let's get the values.

The process of getting the saved values is pretty much the same as I discussed in the case of an admin panel. The only difference is in line #6, which retrieves the saved value of a specific page or post ID via the get_the_ID() function.

Displaying the Results at the Front-End

Let's choose 'Theme Template 3' as the demo settings. Here is a screenshot of the front-end.

Displaying the selected option on the front-end

Creating a Select Type Option Inside a Theme Customizer Section

Example Declaration

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

Here I added the select type option in a theme customizer section $aa_section1

This is how it looks in the customizer.

Adding a select element the Customizer

In the above screenshot, you can find a drop-down list containing colors inside a theme customizer section named My Section.

Example Usage

Here is the code.

First of all I registered an instance via the getInstance() function and then the saved values via the getOption() function in line #3 and #6. Next, in line #16 I created a div tag with some dummy text. Finally I used the inline CSS to print the value of the color.

Displaying the Result at the Front-End

Here's a screenshot of the changes which occur in the live preview mode.

Viewing the selected option on the front-end

While building a WordPress theme or a plugin, sometimes I need to provide an end user with an option to attach a particular post with some custom functionality. This is where the select-posts type option of Titan Framework comes in handy.

The Select-Posts Type Option in Titan Framework

In Titan Framework, you can create a drop-down menu containing a list of existing posts. This is possible via the select-posts type option. Custom post types are also supported, which I'll discuss later in this article.

Adding a select posts option to the dashboard

Let's look at its parameters:

  • name: It displays the name of the select-posts type option.
  • id: This parameter assigns a unique name, which gets the saved options values.
  • desc: It adds a brief description.
  • default(Optional) This parameter configures the default post ID.
  • livepreview: (Optional) When you add a select-posts type option in a theme customizer, you can preview the live changes with this parameter.
  • post_type: (Optional) It specifies the type of posts which appear in the drop-down list. The default is set to post
  • post_status: (Optional) This parameter controls the status of displayed posts which appear in the options list. The default value is set to any, but it can be set to publish, pending, draft, etc. Learn more!
  • num: (Optional) It specifies the number of posts in the drop-down list. The default is set to -1, which refers to all posts.
  • orderby: (Optional) The display order of the listed posts is controlled by this parameter. The default setting lists them by post_date. You can set it to author, id, title, type, etc. Learn more!
  • order: (Optional) This parameter decides whether the display order of the options is ascending (asc) or descending (desc). The default is set to desc.

All parameters are string by type, except for the 'num' which is int in nature.

Available Containers for the Select-Posts Type Option

The select-posts type option is added in: 

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

To add this option, you need to follow a uniform pattern of steps:

  • Get an instance via the getInstance() function.
  • Then add an option via the createOption() function.
  • In the end, retrieve the saved values via the getOption() function .

If you don't know how containers are created in Titan Framework then read previous articles of this series.

Creating a Select-Posts Type Option Inside an Admin Panel

Example Declaration

First, I'm going to add this option inside an admin panel.

This code adds a select-posts type option in an admin panel $aa_panel via thecreateOption() function. The parameters which I've used are quite simple: id, name, type and desc. Among these parameters, ID should always be unique. 

So, a select-posts option with ID aa_select_posts_opt and name 'Select Posts Option' is created, which looks like:

Adding Select-Posts Type Options in Titan

In the above screenshot, there is a drop-down menu named Select Posts Option which list all the posts. Note, this option is inside an admin panel Neat Options.

Example Usage

Let's retrieve the saved options values.

In line #3, first get your instance via the getInstance() function; I used my theme name as a parameter here. Then in line #6, retrieve the saved values via the getOption() function, with ID aa_select_posts_opt as its parameter, and save it to a variable$aa_panel_getpostid_val.

Next in line #9, I've used the get_post_field() function, which retrieves data from a post field based on post ID. So, the post ID is provided by the variable$aa_panel_getpostid_val and together with the post_title parameter, the title of selected post gets saved in a new variable $aa_panel_getpost_title_val

Then I printed it at the front-end using an echo command inside a div (line #20). Pretty fascinating, isn't it? You can do a number of things once you have the selected post ID.

Displaying the Result at the Front-End

Suppose I choose Hello World as my demo settings.

Selecting a page from the dropdown

The front-end will appear like this: 

Viewing the result of the selected page on the front-end

Creating a Select-Posts Type Option Inside an Admin Tab

Example Declaration

Let's create this option in an admin tab.

Now I'm adding this option in an admin tab $aa_tab1 with ID aa_select_posts_opt_in_tab1. Note there is a new addition in the parameters list. In line #14, I've used the 'post_status' parameter whose value is draft. This means now only the drafted posts are being displayed in the select-posts list. 

Adding a select-post option to the tabbed interface

In the screenshot, there is a list named Select Posts Option inside Tab 1 of panel Neat Options 2. You'll also find that there are fewer list options than before for the obvious reasons.

Example Usage

Let's get its values.

The process of getting saved is almost the same, so let me summarize all the points briefly:

  • Get a unique instance in line #3.
  • Get the saved values via the getOption() function in line #6.
  • Get the drafted post title via the get_post_field() function in line #9.
  • Print the results of variable $aa_tab_getpost_title_val using an echo command in line #20.

Displaying the Result at the Front-End

This time I select 'Portfolios' for example. Here's a screenshot of the front-end.

Displaying the results of the selected posts on the front-end

Creating a Select-Posts Type Option Inside a Metabox

Example Declaration

Now I'll create this option in a metabox.

Now I'm adding this option in a metabox $aa_metbox with IDaa_select_posts_opt_in_metabox. I'm using the 'post_type' parameter in line #14 with value set to page. This means that only the pages will get listed in the drop-down menu.

Add the select posts option to a meta box

The above screenshot shows a page editing screen, and right at the bottom there is a Select Page Option containing a list of pages in a metabox.

Example Usage

Use this code.

The entire code is quite similar to what I've used previously. You'll only find an additional parameter in line #6 which is the get_the_ID() function.

Displaying the Result at the Front-End

Let's suppose I selected the page 'Titan Framework'. The front-end looks like this: 

Viewing the results of the selected posts from the meta box

Creating a Select-Posts Type Option Inside a Theme Customizer Section

Example Declaration

Use the code written below.

Finally, a select-posts type option with ID aa_select_posts_opt_in_sec exists inside a theme customizer section $aa_section1.

Adding the select-post option to the Customizer

The image shows this option inside a customizer section named My Section.

Example Usage

Now I'll write the code to get the saved values.

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

Displaying the Result at the Front-End

Here's the screenshot.

Viewing the results of the selected post in the Customizer

This option was fairly simple to implement. You can provide an end user with this option if you want a particular script, function, or action/filter to run only when the selected post is visited. Really, the possibilities here are infinite.

Next, we're going to discuss the select-pages type option of Titan Framework. Let's see how you can add an option for end users to select an existing page inside a custom admin panel, a metabox or the theme customizer.

The Select-Pages Type Option in Titan Framework

Similar to select-posts, there exists a select-pages type option in Titan Framework which displays a drop-down list containing the existing pages of your website. It appears in the dashboard like this:

Adding Select-Pages Type Options in Titan

Let's list the parameters this option supports:

  • name: This parameter assigns the display name of the select-pages type option.
  • id: It is a unique name which helps to retrieve the saved values.
  • desc: It adds a one-line description.
  • default(Optional) This parameter assigns the default page ID.
  • livepreview: (Optional) When you add this option in a theme customizer, you can preview live changes with this parameter.

All parameters are string by type.

Available Containers for the Select-Pages Type Option

You can add this option in: 

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

Read previous articles of this series if you need to understand the details about adding containers with Titan Framework.

  • Get an instance through the getInstance() function.
  • Add an option using the createOption() function.
  • Retrieve the saved values with the getOption() function.

Creating a Select-Pages Type Option Inside an Admin Panel

Example Declaration

First, I'm going to add this option inside an admin panel.

In line #8, I'm using the createOption() function to add a select-pages type option in an admin panel $aa_panel. Of all the parameters, I've used name, id, type and desc.

The value of ID has to be unique as it is later used to get the saved values. Here the option ID is aa_select_pages_opt.

Adding Select-Pages Type Options in Titan

In the screenshot, there is a select-pages type option displayed against the name Select Pages Option in an admin panel Neat Options. Also, look at the list entries. These are the names of the existing pages.

Example Usage

Now I'll get the saved values.

First of all, get an instance via the getInstance() function in line #3. Then in line #5, I'm using the getOption() function which gets the saved values by registering the option ID aa_select_pages_opt as its parameter. The result of this function is saved in a variable $aa_panel_getpageid_val.

In line #7, there is a get_post_field() function which can be used to get data from a post field based on the post ID.

The variable $aa_panel_getpageid_val provides the page ID of the selected page and the post_title parameter, and retrieves the title which I then saved in a new variable $aa_panel_getpage_title_val

Finally, in line #19 I'm printing the page title at the front-end via an echo command in a div.

Displaying the Result at the Front-End

Suppose I choose the 'About us' page from the list and save the settings.

Selecting pages from the select options

The title of this page gets printed at the front-end like this:

The result of selecting a page option on the front-end

Creating a Select-Pages Type Option Inside an Admin Tab

Example Declaration

Now, I'm going to add this option inside an admin tab.

This time I'm adding a select-pages option inside an admin tab $aa_tab1. Its ID is aa_select_pages_opt_in_tab. The rest of the parameters are the same.

Adding a Select-Page element to the tabbed interface

In the image, you can find a drop-down list containing pages inside Tab 1 of admin panel Neat Options 2.

Example Usage

Let's retrieve the saved options values.

The values of an admin tab can be retrieved by following the same steps:

  • Get a unique instance in line #3.
  • Register the option ID aa_select_pages_opt_in_tab in the getOption() function (line #5).
  • Save the results in variable $aa_tab_getpageid_val.
  • Get the selected page's title via the get_post_field() function in line #7.
  • Finally, print the page title at the front-end via the echo command in line #17.

Displaying the Result at the Front-End

This time I chose the page 'Contact' and its title at the front-end appears like this: 

Rendering the value of the selected option on the front-end

Creating a Select-Pages Type Option Inside a Metabox

Example Declaration

Let's create a select-pages type option inside a metabox.

I created a  select-pages type option with ID aa_select_pages_opt_in_metabox inside a metabox $aa_metbox.

Adding select-pages to a meta box

In the above screenshot, you can find a metabox at the end of a page editing screen. Inside it, there is a Select Pages Option which lists all the pages.

Example Usage

Use this code to get the values.

In this code, I've registered an additional parameter inside the getOption() function (line #5). This is the get_the_ID() function. The rest of the code is pretty much the same.

Displaying the Result at the Front-End

Now let's suppose I select 'Sample Page'. The front-end prints the corresponding title like this:

Rendering the value of the selected option on the front-end

Creating a Select-Pages Type Option Inside a Theme Customizer Section

Example Declaration

Finally, I'll add this option in a customizer section.

I created a select-pages type option with ID aa_select_pages_opt_in_sec inside a theme customizer section called $aa_section1.

Adding the select-pages option to the Customizer

Example Usage

Let's get the saved values.

Displaying the Result at the Front-End

Here is a screenshot of the changes which were previewed in live mode.

Previewing the selected value on the Customizer

Consider a situation where you need an end user to select a category for featured posts. You'll need a dropdown select option with WordPress categories populated inside it as options. Titan Framework can help you create such an option with an option type calledselect-categories. Let's see how to use it.

The Select-Categories Type Option in Titan Framework

In Titan Framework, the select-categories type option creates a drop-down menu containing all the existing post categories. This option supports other taxonomies as well.

Adding Select-Categories Type Options in Titan

This option defines a list of parameters:

  • name: It specifies the name of an option.
  • id: This parameter assigns a unique name which gets the saved values.
  • desc: It adds a brief description with the option name.
  • default(Optional) This parameter sets the default category ID.
  • livepreview: (Optional) Whenever you add the select-categories option in a theme customizer section, this parameter lets you preview the live changes which you make.
  • orderby: (Optional) It decides in what order categories are displayed. The default is set to name. You may change it accordingly.
  • order: (Optional) This parameter list the categories in ascending or descending order. The default is set to asc
  • taxonomy: (Optional) It helps to display the type of taxonomy you want to show. Its default value is category.
  • hide_empty: (Optional) If this parameter is set to true, then all such categories and/or taxonomies which do not have posts will not appear. The default value is false.
  • show_count: (Optional) This parameter displays the number of posts in each category if set to true. The default setting is false.

The last two parameters, hide_empty and show_count, are boolean, while the rest are string by type.

Available Containers for the Select-Categories Type Option

Let's list the containers in which you can add this option:

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

Irrespective of the container type, the select-categories option is added by following these steps:

  • First get an instance through the getInstance() function.
  • Next add an option through the createOption() function.
  • Then get saved options values through the getOption() function.

Creating a Select-Categories Type Option Inside an Admin Panel

Example Declaration

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

At line #8, the createOption() function adds a select-categories type option in an admin panel called $aa_panel. I've defined a few parameters, i.e. name, type, id and desc. The value of ID, which should always be unique, is aa_select_categories_opt at line #10.

Adding the select-categories dropdown to the dashboard

In the above screenshot, there is a Neat Options panel, within which is a drop-down list displaying all the post categories.

Example Usage

Now I'll get the saved options values.

At line #3, I'm using the getInstance() function, which takes up a unique parameter, preferably your theme name. Then I'm using the getOption() function at line #6 to retrieve the saved value by registering the option ID, i.e. aa_select_categories_opt. The result is saved in a variable $aa_panel_getcategoryid_val. Up to this point, the ID of the selected category is placed inside this variable. 

Let's say I want to display the title of my category at the front-end. To achieve this, I'm going to use the get_cat_name() function. Look at line #9, which retrieves the category title from variable $aa_panel_getcategoryid_val.

I saved the title in a variable $aa_panel_getcategory_title_val and then echoed it.

Displaying the Result at the Front-End

Suppose I choose the 'Portfolios' category from the list and save the settings.

Choosing an option from the Select-Categories dropdown

So, according to the code, 'Title of the selected category in an Admin Panel is: Portfolios' must print at the front-end. 

Viewing the result of the selected category on the front-end

Creating a Select-Categories Type Option Inside an Admin Tab

Example Declaration

Next I'll add it in an admin tab.

Here I'm adding the select-categories type option in an admin tab $aa_tab1. Its unique ID is aa_select_categories_opt_in_tab. Take a look at the parameters list. You'll find some new additions, i.e. the order and show_count parameters. Their functions have been discussed previously.  

Adding the select-categories type to a tabbed interface

In the screenshot, you can find this option named Select Categories Option in Tab 1 of panel Neat Options 2. Note that the number of posts in each category is also shown due to the show_count parameter. The display order of the categories is also different than before.

Example Usage

Let's retrieve the saved values.

This code is quite similar; here's a summary of the steps:

  • Get an instance on line #3.
  • Use the getOption() function on line #6 to retrieve saved values via ID.
  • Get the selected category's title via the get_cat_name() function on line #9.
  • Print the category title at the front-end via an echo command on line #22.

Displaying the Result at the Front-End

I select 'Biographies' as a demo value. The front-end appears like this:

Viewing the select-categories type from a tabbed interface

Creating a Select-Categories Type Option Inside a Metabox

Example Declaration

Now I'll add a select-categories type option in a metabox.

I created a select-categories type option inside a metabox $aa_metbox with ID aa_select_categories_opt_in_metabox.

Adding the select-categories type to a meta box

In the above image, you can find a metabox at the end of a page editing screen. Inside it is a drop-down list containing all the post categories.

Example Usage

Use the following code.

On line #6, I've used the get_the_ID() function as a parameter inside the getOption() function. This additional parameter is to fetch the saved values via a specific page or post ID. The rest of the code is the same.

Displaying the Result at the Front-End

This time I choose 'Stories' and the result appears like this:

Viewing the results of the select-categories chosen from the meta box

Creating a Select-Categories Type Option Inside a Theme Customizer Section

Example Declaration

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

I am adding this option in a theme customizer section $aa_section1 with ID aa_select_categories_opt_in_sec.

Adding select-categories to the Customizer

In this image, there is a My Section customizer section containing a drop-down list of categories inside the customizer.

Example Usage

Use the following code to get the values:

This code is almost the same as above. Only the ID and variable names are different.

Displaying the Result at the Front-End

Here's a screenshot of the changes which were witnessed in live preview mode.

Viewing the results of the selected categories on the front-end

Conclusion

By now we've discussed all the option types which are related to the select option in Titan Framework.

For example, if I were to code a plugin which provides an end user with 15 layout elements, I could provide those elements in the form of a select box, to keep the options neat and minimal.

Let me know if you have a creative user-case for this option. You can reach out to me on Twitter or leave comments in the box below.

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.