blog

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

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:

The texttype 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 textoption inside an admin panel:

<?php
/**
* Create the options
*
* Create options for our panel that we just created called $aa_panel
*
*/
$aa_panel->createOption( array(
'id' => 'aa_txt', // The ID which will be used to get the value of this option
'type' => 'text', // Type of option we are creating
'name' => 'My Text Option', // Name of the option which will be displayed in the admin panel
'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel
) );

This code will add a texttype 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.

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.

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.

<?php
// Create options for $aa_panel2 inside the $aa_tab1
$aa_tab1->createOption( array(
'id' => 'aa_txt_in_tab1_panel2', // IDs should always be unique. The ID which will be used to get the value of this option
'type' => 'text', // Type of option we are creating
'name' => 'My Text Option', // Name of the option which will be displayed in the admin panel
'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel
) );

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 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:

Creating a Text Type Option Inside a Metabox

Example Declaration

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

<?php
/**
* Create the options for metabox
*
* Create options for our metabox that we just created called $aa_metbox
*
*/
$aa_metbox->createOption( array(
'id' => 'aa_mb_txt', // The ID which will be used to get the value of this option
'type' => 'text', // Type of option we are creating
'name' => 'My Text Option', // Name of the option which will be displayed in the admin panel
'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel
) );

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.

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.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' );
/**
* Value of metabox.
*
* Notice the use of get_the_ID(). It is because metabox is created for all
* the post types we defined. To get the value of a metabox option for a specific page/post
* we need to give getOptions() function the ID of our post/page. Which is done like this.
*
*/
$aa_mb_txt_val = $titan->getOption( 'aa_mb_txt', get_the_ID() );
/**
*
* Print the option value
*
*/
?>
<div>
The value of metabox option txt for this page is: <?php echo $aa_mb_txt_val; ?>
</div>

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.

Creating a Text Type Option Inside Theme Customizer

Example Declaration

<?php
// Header text
$aa_section1->createOption( array(
'id' => 'aa_sec_head_txt', // The ID which will be used to get the value of this option
'type' => 'text', // Type of option we are creating
'name' => 'Site Header Text',// Name of the option which will be displayed in the admin panel
'desc' => 'This is the site header' // Default value of our option
) );

A texttype 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.

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

aa_sec_head_txt is a texttype 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:

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 textareaoption.

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 textareaoption is created inside an admin page and/or theme customizer section.

placeholder: (Optional) If you want some dummy text to appear inside your textareaoption 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 textareaoption inside an admin panel with the following code.

<?php
/**
*
* Create the Textarea option
*
*/
$aa_panel->createOption( array(
'id' => 'aa_txtarea', // The ID which will be used to get the value of this option
'type' => 'textarea', // Type of option we are creating
'name' => 'My Textarea Option', // Name of the option which will be displayed in the admin panel
'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel
) );

A textareais 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 id, type, name and desc. The parameter type is what determines which kind of option it is.

A textareaoption 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 textareaas 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.

Here is the screenshot of the 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:

<?php
// Create textarea option
$aa_tab1->createOption( array(
'id' => 'aa_txtarea_in_tab1_panel2', // IDs should always be unique. The ID which will be used to get the value of this option
'type' => 'textarea', // Type of option we are creating
'name' => 'My Textarea Option', // Name of the option which will be displayed in the admin panel
'desc' => 'This is our option' // Description of the option which will be displayed in the admin panel
) );

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.

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.

The final result is shown above.

Creating a Textarea Type Option Inside a Metabox

Example Declaration

Now, I'll create a textareaoption inside a metabox.

<?php
/**
*
* Create the options for metabox
*
*/
$aa_metbox->createOption( array(
'id' => 'aa_mb_txtarea', // The ID which will be used to get the value of this option
'type' => 'textarea', // Type of option we are creating
'name' => 'My Textarea Option', // Name of the option which will be displayed
'desc' => 'This is our option' // Description of the option which will be displayed
) );

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.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' );
/**
*
* Notice the use of get_the_ID(). It is because metabox is created for all
* the post types we defined. TO get the value of a metabox option for a specific page/post
* we need to give getOptions() function the ID of our post/page. Which is done like this.
*
*/
$aa_mb_txtarea_val = $titan->getOption( 'aa_mb_txtarea', get_the_ID() );
/**
* Print the option value
*/
<div>
<h2>The value of metabox option textarea for this page is:</h2>
<br/>
<?php echo $aa_mb_txtarea_val; ?>
</div>

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.

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

Creating a Textarea Type Option Inside a Theme Customizer Section

Example Declaration

Use the following code.

<?php
/**
*
* Create the options for $aa_section1
*
*/
$aa_section1->createOption( array(
'id' => 'aa_sec_desc_txtarea', // The ID which will be used to get the value of this option
'type' => 'textarea', // Type of option we are creating
'name' => 'Site Description Textarea',// Name of the option which will be displayed
'desc' => 'This is the site description' // Default value of our option
) );

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.

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 texttype 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.