Advertisement
  1. Code
  2. WordPress
Code

A Beginners Guide to Titan Framework: Adding Text and Textarea Types

by
Languages:
This post is part of a series called A Beginner's Guide to Titan Framework.
A Beginners Guide to Titan Framework: Creating a Theme Customizer Section
A Beginners Guide to Titan Framework: Adding a Color Type and Upload Type Option

Titan Framework offers a broad range of options which you can add in a plugin or a theme to provide end users with dynamic settings. Today I am going to discuss cover two of the most basic options: a text type option and a textarea option. Let's see how to create a text type option in an admin panel, a metabox or a theme customizer section.

Text Type Options in Titan Framework

In Titan Framework there are several types of options, and today we going to review the one with type text. This is how it looks:

Adding Text Type Options in Titan

The text type option in Titan Framework carries a wide range of setting parameters:

  • name: This controls the name with which the option is displayed.
  • id: A unique name which is used to get the saved values.
  • desc: It displays a brief description with the option name.
  • default: This parameter specifies the default value of the option.
  • livepreview: (Optional) This parameter is only used when a text type option is being used inside the theme customizer section. It helps to display a live preview of changes in your theme.
  • css: (Optional) When a text field is added inside an admin page or a theme customizer section this parameter can help generate CSS. How?
  • placeholder: (Optional) This displays dummy text each time the text field is empty.
  • is_password: (Optional) An additional label, located immediately after the form field. Accepts alphanumerics and symbols. Potential applications include the indication of a unit, especially if the field is used with numbers. For example, if you use the field as input for numbers of pixels, you would enter the value as ‘px’. Or, if as a unit of percentage, you’d enter ‘%’ as value.

All of these parameters are of type string expect for the is_password parameter which is boolean. If you don't need the optional parameters, there is no need to include them.

Available Containers for the Text Type Option

Containers are basically your admin pages, tabs, meta boxes, and theme customizer sections. These are essentially the areas where you put your options. Not all option types can be placed in these containers. But the text type option can be used in any container, i.e.:

  • Admin Panel
  • Admin Tab
  • Metabox
  • Theme Customizer

Let's revise how to create options in Titan Framework:

  • Call a unique instance via the getInstance() function.
  • Create options via the createOption() function inside a container.
  • Get the saved option's values via the getOption() function.

So, let's review how a text type option is created inside each of these containers.

Creating a Text Type Option Inside an Admin Panel

Example Declaration

The following code is used while you're adding a text option inside an admin panel:

This code will add a text type option inside an Admin Panel $aa_panel. The createOption() function takes up an array of parameters which are supported by the text option. 

In this case, I've used parameters like id, type, name and desc. Off all these, ID is most the important parameter and should always be unique. It will be used later to get the saved values. 

So, a text option with ID aa_txt and name 'My Text Option' was created within the admin panel $aa_panel

Text Input in the Neat Options

The screenshot above shows My Text Option inside the admin panel Neat Options

This is a custom admin panel and has been created with Titan Framework. If you want to know how, then refer to the previous articles of this series.  

Example Usage

Use the following code to retrieve the saved values from this text option.

I used the ID of the text option as a parameter inside the getOption() function and saved the value in a variable $aa_txt_val. Voila! All that's left to do is to use this value, which I did by using the echo command.

Displaying the Result at the Front-End

Let's suppose I entered the demo value 'AA Text Settings' and saved it. So here is the screenshot of the output of the code above.

Adding Text Type Options in Titan

Creating a Text Type Option Inside an Admin Tab

Example Declaration

Let's look at the code of a text option inside an admin tab.

This time I created a text type option with ID aa_txt_in_tab1_panel2 inside $aa_tab1. $aa_tab1 is an admin tab which exists inside a custom admin panel $aa_panel2. The process of creating an admin tab has been explained in my previous articles. So, you can refer to them for help.

Note that I've used the same name, which means that names can be the same, but IDs are always unique.

The My Text Option inside Tab 1 of panel Neat Options 2

The above screenshot shows the My Text Option inside Tab 1 of panel Neat Options 2.

Example Usage

Let's retrieve the saved values from this text option.

The getOption() function retrieves the saved value via ID aa_txt_in_tab1_panel2 and then I printed it via the echo command.

Displaying the Result at the Front-End

The value I entered was 'AA Text Settings' and its output at the front-end looks like this:

The front-end output

Creating a Text Type Option Inside a Metabox

Example Declaration

You can add a text type option inside a metabox through the following code:

Again the createOption() function adds a text option inside a metabox named $aa_metbox. Same parameters are used here and the ID is aa_mb_txt.

Adding a meta box to the post editor

The above screenshot displays a page editing screen where you can find a new metabox with 'My Text Option' inside it. We created metaboxes in a previous article of this series, so refer to that if you need to revise your concepts.

Example Usage

So, here is the code to get the saved values.

Everything is pretty much the same except at line #15 where the getOption() function got two parameters:

  • aa_mb_txt, which is the ID of text type option we created
  • get_the_ID() function, which will return the ID of the current post/page/post_type.

After that, I just used the echo command and printed the value.

Displaying the Result at the Front-End

I saved 'AA Text Settings' as the value of this option and published the page. The code above was used to display that value at the front-end.

Display that value at the front-end

Creating a Text Type Option Inside Theme Customizer

Example Declaration

Finally, let's write the code for creating a text type option inside a theme customizer section.

A text type option with ID aa_sec_head_txt is created inside a theme customizer section $aa_section1. Refer to my previous articles if you want to learn how to add customizer sections in Titan Framework.

A Customizer Section

The above screenshot shows a theme customizer section named My Section in which a Site Header Text option is being displayed.

Example Usage

Here is the code to get the saved values.

aa_sec_head_txt is a text type option, and I retrieved its value again with the getOption() function. No rocket science here.

Displaying the Result at the Front-End

I entered 'My Text Option Header' and you can see the live preview result below:

The live preview result

Next, let's cover the textarea type option in Titan Framework. Let's review how you can leverage Titan Framework to create a textarea type option in admin panels, meta boxes and the customizer section with just a few lines of code.

The Textarea Type Option in Titan Framework

You must have seen the textarea type option in several WordPress plugins and themes. With Titan Framework, you can add this type of option with the createOption() function. Some parameters of this option are:

  • name: This parameter decides the display name of the textarea.
  • id: This is a unique name which is used to retrieve the saved option values.
  • desc: It displays a one-line description with the option name.
  • default: (Optional) It represents the default setting of the textarea option.
  • livepreview: (Optional) This parameter works exclusively with the theme customizer section and shows a live preview of changes which you make.
  • css: (Optional) It generates CSS each time a textarea option is created inside an admin page and/or theme customizer section.
  • placeholder: (Optional) If you want some dummy text to appear inside your textarea option then use this parameter.
  • is_code: (Optional) This parameter performs a check for better-looking code input and if it is true, then the font of the code becomes monospaced.

All parameters are of the type string, except for the is_code which is boolean

Available Containers for the Textarea Type Option

This option has type textarea and can be added in places like:

  • Admin Page
  • Admin Tab
  • Metabox
  • Theme Customizer

But before I explain how to add this option inside all these containers, let me summarize the basic steps which should be followed:

  • Call the getInstance() function at the beginning of every new file when Titan Framework is being used.
  • Use the createOption() function to add any new option.
  • Get the saved option values by calling the getOption() function.

Keeping things to the point, I'll only explain how to add this option inside these containers. If you want to know how to create these containers, then read previous articles of this series.

Creating a Textarea Type Option Inside an Admin Panel

Example Declaration

I will create a textarea option inside an admin panel with the following code.

textarea is created inside an admin panel $aa_panel via the createOption()function. This function takes up an array of parameters and I'll only use those which the option supports. I've used idtypename and desc. The parameter type is what determines which kind of option it is.

A textarea option

textarea option with ID aa_txtarea and name My Textarea Option is shown in the above screenshot, which we just created.

Example Usage

Now I'll retrieve the saved value of whatever an end user enters inside this textarea.

To retrieve the saved values, first get a unique instance via the getInstance() function, followed by the getOption() function, within which we use the ID of textarea as a parameter. 

Later, print the saved value at the front-end via the echo command.

Displaying the Result at the Front-End

Let's enter any dummy text inside our textarea and save it.

Displaying the Result at the Front-End

Here is the screenshot of the output at the front-end.

Output at the front-end

Now let's create this option inside an admin tab.

Creating a Textarea Type Option Inside an Admin Tab

Example Declaration

Here is the code:

I created a textarea option with ID aa_txtarea_in_tab1_panel2 inside an admin tab $aa_panel2. It appears against the name My Textarea Option.

A textarea in the first tab of the dashboard

The above screenshot shows this option inside my second admin panel, i.e. Neat Options 2

Example Usage

Let's get the saved values.

Again get an instance, then use the getOption() function and enter ID as its parameter. Next I'll print the output at the front-end using the echocommand inside a div tag.

Displaying the Result at the Front-End

I'm using the same dummy text once again as an example.

Textareas output on the front-end

The final result is shown above.

Creating a Textarea Type Option Inside a Metabox

Example Declaration

Now, I'll create a textarea option inside a metabox.

The createOption() function adds a textarea with ID aa_mb_txtarea inside a metabox $aa_metbox. This option appears on all page/post editing screens.

The screenshot above shows a textarea named My Textarea Option right at the end of a page editing screen. The same also appears inside the Add New Post section.

Example Usage

Now I'm going to write the code for retrieving its saved options values.

Repeat the process again, i.e. get an instance first, and then use the getOption() function and submit the ID of the textarea with the ID of our post_type. The result is saved in a variable called $aa_mb_txtarea_val. Finally, I echoed the output in a div tag.

Displaying the Result at the Front-End

Let's upload the final output at the front-end.

The final output at the front-end

Let's move to the final part where I'll create a textarea option inside a theme customizer section.

Creating a Textarea Type Option Inside a Theme Customizer Section

Example Declaration

Use the following code.

textarea with ID aa_sec_desc_txtarea exists inside a theme customizer section $aa_section1

Adding Textarea Type to the Customizer

A textarea type option in the above figure is displayed against the name Site Description Textarea within the My Section theme customizer section.

Example Usage

Let's get the saved options values.

This code retrieves and prints the value in pretty much the same way as discussed above.

Displaying the Result at the Front-End

Here is the live preview of my input.

The Live Preview of the Output

You can use this option, for example, to add a brief description on your landing page.

Conclusion

That's about it. Now you know where and how a text type option and the textarea type option can be added with Titan Framework. 

I have seen people who build products abuse the text type option in places where an end user might want to add more data than just a few words. You should always use the textarea type option in such a case.

The entire process is pretty simple and easy. I hope you enjoyed reading this article. If you have any queries you can comment below or reach out to me 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.