# A Beginners Guide to Titan: Adding a Number & Editor Type Option

While building WordPress themes, I often find myself in a position where I need the end user to enter a number within a given range to do something at the front-end. Titan Framework offers a cool number range option, which is what I'll be discussing today. Let's add a number range option in an admin panel, a meta box and a customizer section via Titan Framework.

## The Number Type Option in Titan Framework

There is a number type option in Titan Framework, which looks like this:

You can see in the above screenshot that this option type allows you to add any number in your development project. There is a bar with a slider, and next to it is a counter which can be incremented or decremented.

So, you can either drag the slider or use the counter to enter the value. Now let's take a look at the parameters which this option supports:

• name: It displays the name of the option.
• id: This parameter assigns a unique name which is later used to get values.
• desc: It displays a brief description with the number type option.
• default: (Optional) It specifies the default value.
• livepreview: (Optional) This parameter allows you to look at the live preview of changes 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.
• placeholder: (Optional) It displays dummy text each time this option type is empty.
• size: (Optional) It defines the width of the field. It may carry values like medium or large.
• min: (Optional) It sets the minimum allowable value.
• max: (Optional) It sets the maximum allowable value.
• step: (Optional) This parameter configures the increment value for the counter, i.e. for every increment how much the value increases. The default value is set to 1.
• unit: (Optional) It works as an extra label which appears right after the option type. This parameter accepts values like alphanumerics and symbols.

Most of these parameters are of the type string. However, min, max and step are number by type.

## Available Containers for the Number Type Option

The number type option can be added inside:

• Meta Boxes
• Theme Customizer Sections

The code for creating these containers is beyond the scope of this article, but you can surely find its details in previous articles of the series.

However, a uniform pattern is followed throughout to create this option type:

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

### Creating a Number Type Option Inside an Admin Panel

#### Example Declaration

First I'll show how you can add this option inside an admin panel:

I'm adding a number type option via the createOption() function inside an admin panel $aa_panel. I've used the parameters id, type, name and desc. Look at their values. Of all these, ID and type are the most important ones. ID defines the unique name used to get the values, whereas type specifies the option you're using. The above screenshot shows a number type option My Number Option inside the admin panel Neat Options. #### Example Usage Now I'll retrieve the saved options values. First, I get a unique instance of titan framework as per a parameter, preferably my theme name, i.e. neat. Then I used the getOption() function and registered ID (i.e. aa_numb_type) as a parameter. In the end, I added a div and echoed the result at the front-end. #### Displaying the Result at the Front-End Suppose I entered '500' as my demo value and saved it. You can find the position of the slider clearly. Let's display the output at the front-end. Here it is: ### Creating a Number Type Option Inside an Admin Tab #### Example Declaration Let's type its code: This time I created a number type option inside an admin tab $aa_tab1. Its ID is aa_numb_in_tab1_panel2. If you look at the code closely, you'll find some new parameters added. These are the min and max type parameters, whose function has been already discussed. Now due to these parameters, a limit is set between 100 and 500, and I won't be able to overrule it till I change their respective values.

Look at the My Number Option inside Tab 1 of admin panel Neat Options 2.

The above screenshot displays the min and max range of the option.

#### Example Usage

Let's get its values:

First an instance is called, after which the getOption() function retrieves the value of ID aa_numb_in_tab1_panel2 and saves it in a variable aa_numb_in_tab1_panel2_val. Then I'll print this value via the echo command.

#### Displaying the Result at the Front-End

Now I entered '250' as my demo value and saved it. So, this is how the front-end appears:

### Creating a Number Type Option Inside a Metabox

#### Example Declaration

Now I'll create this option inside a metabox:

number type option with ID aa_mb_numb exists inside a metabox $aa_metbox In the above image, you can find this option displayed at the end of a page editing screen. #### Example Usage Let's get its values: The process of getting values is exactly the same. Only the IDs and variables have new values, and we provide the getOption() function with two parameters, one being the ID of the option and the other the ID of the post_type. #### Displaying the Result at the Front-End This time I entered '768' as the demo value and viewed the front-end, which looked like this: ### Creating a Number Type Option Inside a Theme Customizer #### Example Declaration Finally, let's add this option inside a customizer. number type option with ID aa_sec_numb is created inside a theme customizer section $aa_section1.

In the above screenshot, you can find My Number Option inside the My Section customizer panel.

#### Example Usage

Let's get the values:

Get an instance and then use the getOption() function. Enter the ID as the parameter and save its value in a new variable called $aa_sec_numb_val. In the end print the value via the echo command. #### Displaying the Result at the Front-End Let's enter '738' as the demo value and display a live preview of the changes. ## The Editor Type WordPress comes with a built-in TinyMCE editor which can be found on the post editing page. However, adding this rich text editor in an admin panel, a meta box or a customizer section can be an intimidating task for beginners. So how about going for an easier way? Titan Framework lets you add the WYSIWYG/TinyMCE editor via an option type callededitor. Let's dive into this topic and learn about it in detail. ## The Editor Type Option in Titan Framework In Titan Framework, you can find TinyMCE editor as one of the option types which you can add. It looks like this: There are several parameters which this option supports: • name: This parameter shows the name of an editor type option. • id: It defines a unique name which gets the saved values. • desc: It shows a one-line description with the option name. • default: (Optional) It sets the default value. • livepreview: (Optional) This parameter displays the live preview of changes each time an editor type option is added inside a theme customizer section. • css: (Optional) It automatically generates CSS when you add this option inside an admin page and/or theme customizer section. • wpautop: (Optional) This parameter wraps the entered text inside paragraph tags if it holds true. • media_buttons: (Optional) It places an "Add Media" button alongside the WYSIWYG editor if this parameter is true. • rows: (Optional) It control the number of rows of the WYSIWYG editor. The parameters media_buttons and wpautop are boolean and rows is of type int. The rest of the parameters are string by type. ## Available Containers for the Editor Type Option The editor type option can be created inside: • Admin Panel • Admin Tabs • Meta Boxes Note: In the customizer, this option converts itself to a text type option. You can add this option via following these steps: • First of all, get a unique instance via the getInstance() function. • Next, create an option via the createOption() function. • In the end, you'll get saved values via the getOption() function. Let's add a TinyMCE editor inside all these containers. ### Creating an Editor Type Option Inside an Admin Panel #### Example Declaration First I'll create this option inside an admin panel. I created an editor type option inside an admin panel $aa_panel. This is a custom admin panel in Titan Framework; if you don't know how to make one, refer to previous tutorials of this series. This option is created via the createOption() function which takes an array of several parameters. Look at the code and see how I've defined the values of id, type, name and desc

In the above screenshot, you can find an editor type option named My Editor Option inside admin panel Neat Options.

#### Example Usage

Now I'll retrieve the saved options values.

To get the values, first get an instance via the getInstance() function. Next, using the getOption() function, retrieve the values by entering a unique ID (i.e.aa_editor_type) as a parameter of this function. In the end, I printed the result via anecho command inside a div.

#### Displaying the Result at the Front-End

Suppose I entered dummy text as my demo setting and saved it.

The front-end appears like this:

### Creating an Editor Type Option Inside an Admin Tab

#### Example Declaration

Let's write the code for an admin tab.

#### Displaying the Result at the Front-End

I again entered the same dummy text and saved it. Let's take a look at its result:

### Creating an Editor Type Option Inside a Metabox

#### Example Declaration

Finally, let's add this option inside a metabox.

This time I created an editor type option inside a metabox \$aa_metbox. The unique ID is aa_mb_editor which later gets the saved values.

In the above screenshot, you can find this option named My Editor Option inside a metabox called Metabox Options. This appears on all post and page editing screens. You can refer to my previous articles to learn about the making of a metabox with Titan Framework.

#### Example Usage

Now I'll get the value and print it.

The process of getting the saved values is the same except that inside the getOption() function I've used an additional parameter of get_the_ID(), which is a function used to retrieve the ID of the current post_type.

#### Displaying the Result at the Front-End

Let's take a final look at its result:

That's about it. One important thing you should know is that you can add this option type in a theme customizer section, but there is not enough space for it to fit in. So this option will revert back to a text type option in the customizer, which was already discussed in a previous article.

This is all there is to the editor type option in Titan Framework. Try to integrate it in your web development project and let me know if you have any questions.

## Conclusion

Just a few lines of code and we get both a cool number range option in admin panels, meta boxes and customizer sections, and the same for our editor type option.

Nowadays, I am working on a premium WordPress plugin, and while developing it, I ended up using the number option in a creative manner. I used a number option to control the padding and margin of particular div wrapper. Think about it for a moment: an end user being able to change the size of a subscription box by sliding the range. That's a really good example of a better user experience.

Tell me how you plan to use this option. If you have any questions, use the comment section below, or reach out on Twitter.