034_TF_Reggie_Adding-Your-First-Option-and-What-To-Do-With-ItOption give the users the capability to change, enhance and improve all aspects of the theme/site. It allows users to customize and modify the looks of the theme/site to satisfy their want designs and styles.

By understanding how it works, it will be easier to add your first option in your project. One of the most common option is the  color option.

Color option allows you to display a color picker field. This option will make it simple for you to change the color of the text or the background color of specific part of the site.


Coding the Color Option

For starters, we could use a simple code. Here’s the sample code to add color picker field:

$panel->createOption( array(
    'name' => 'My Color Picker Option',
    'id' => 'background_color',
    'type' => 'color',
    'desc' => 'Pick a color',
    'default' => '#555555',
) );
  • 'name' parameter display the name of the option field.
  • 'id' parameter will be the identifier of the option.
  • 'type' parameter allows the option type.
  • 'desc' parameter display the description of the option.
  • 'default' parameter sets the default color you want in the option.

We can also add css parameter if you want to get a live preview for changing colors.

The CSS Parameter

The css parameter above would generate all the necessary CSS rules. We can use the term value to assign all the styles to your CSS selectors:

'css' => 'h1.site-title {

Note that you can still use the methods specified in Generate CSS Automatically for Your Options, the method above is simply for convenience.

Getting the option color value

To get the value of the option you need to add a singular function called getOption and add your Instance for your Titan options.

$titan = TitanFramework::getInstance( ‘my-theme’ );

$colorValue = $titan->getOption( ‘my_option_id’ );

After that $colorValue can use in color css rules. You can add it in styles for background color and text color of your site.

[zilla_alert]You can read more about getting option values in Getting Option Values [/zilla_alert]

Check out our Documentation for more Customizer Options

Leave a Reply