029_TF_Reggie_Build-a-Simple-Theme-with-Customizer-Options-1Themes have a certain look to them. Most of the time, theme users would want to tweak certain aspects of the theme’s default design to better suit their needs. For example if your theme has a dark gray navigation bar, most likely there would be a number of users which would want to change this color into another one. If would be easier to just tell your users to just use the dark gray color and suck it up. But I don’t think they’ll be too happy about that. The better way would be to allow them to change it from dark gray, to whatever color they like. And how would you do this? We do this by adding options into our themes.

The options you create for your theme will help your users tweak and style their site. It allows them to quickly change the look of individual aspects of your theme and even get a live preview while they’re at it. When used right, options can allow the customization of the whole theme/site from header to footer, and your users would end up with is a unique look that will satisfy their needs.

However, adding options into your theme isn’t such an easy task. Creating options can add hundreds or sometimes thousands of lines of code in your codebase. This can make things more tedious to maintain and update, not to mention it would add quite a few days to your development time. This is where frameworks come in.

Frameworks provide sets of functions/features that can aid and speed up the development process. They offer a set of standards to use by theme developers in creating their own themes. There’s a lot of Frameworks that may help you to build a simple theme – and one of these frameworks is the Titan Framework.

Instead of being overwhelmed with intense coding, Titan Framework will help you to build your theme easier, faster, and with less coding.

In this article I will show you how to create a WordPress theme with Customizer options from scratch. We will be using Titan Framework to help us create those Customizer options.

Step 1: The Essential Starter Theme

For us to start, you need a starter theme called _s or underscores. Underscores can be used a starting point for our new WordPress Theme. It has all the basic stuff in it to get us started.

[zilla_alert]You can read more about underscores in Introduction To Underscores: A WordPress Starter Theme With Konstantin Obenland. [/zilla_alert]

When you’re done uploading and activating your theme, next step is install and activate Titan Framework plugin.

Step 2: Download the Titan Framework plugin

First, we need to download and activate the Titan Framework plugin. Here’s the link in WordPress plugin repository.

[zilla_alert]Since our theme will be using Titan Framework to create its options, we will need it activated in order for our options to become visible.[/zilla_alert]

Step 3: Include the Titan Framework plugin

In manually setting-up the plugin, remember three (3) important steps:

  1. Download and save titan-framework-checker.php into your project.
  2. Next, in your functions.php, add this PHP code along the top of the script. What this does is that when it detects that Titan Framework is not activated, it will display a notice on the top of the admin to activate it.
require_once( ‘titan-framework-checker.php’ );​

3. Lastly, we use a custom action for creating options. We will place all the option creation code within this action. Insert this PHP code functions.php or main plugin PHP script:

add_action( ‘tf_create_options’, ‘mytheme_create_options’ );
function mytheme_create_options() {
// We create all our options here
}​

Step 4: Getting an Instance of Titan Framework

Think of this step as telling the framework that what we’re about to do is for our theme. This is important so that all the options that we create won’t get mixed up with options created by other plugins. Titan Framework does this by requiring you to give a unique identifier, or a namespace during this step.

Add this line at the start of your call to the tf_create_options hook:

$titan = TitanFramework::getInstance( 'my-theme' );​

This tells Titan Framework that everything that we’re about to do is for the namespace my-theme.

Step 5: Creating Theme Customizer Sections

Now let’s try and create a section in the Customizer:

/*
* Creating a theme customizer section
*/
$mySection = $titan->createThemeCustomizerSection( array(
'name' => 'My Section',
) );​

Your section would appear in Theme Customizer:

article-screenshot3(titan)

Step 6: Creating your Sample Option

Now, let’s create our sample customizer option. Let’s create a color option, so that we can allow our users to change the color of their menu:

$mySection->createOption( array(
'name' => 'Menu Font Color',
'id' => 'font_color',
'type' => 'color',
'desc' => 'Pick a color',
'default' => '#555555',
) );​

font-color-screenshot(titan)You can also add font option for your h1 headings:

$mySection->createOption( array(
'name' => __( 'Heading 1 Size', 'titan' ),
'id' => 'h1_font',
'type' => 'font',
'desc' => __( 'The size of all h1 headings', 'titan' ),
'default' => array(
'text-transform' => 'uppercase',
'line-height' => '1.1em',
'font-size' => '30px',
'font-weight' => 'bold',
),
) );​

font-screenshot(titan)And your text option for your footer area:

$mySection->createOption( array(
'name' => 'My Footer Text Option',
'id' => 'my_text_option',
'type' => 'text',
'desc' => 'This is our option'
) );​

Now try and visit your Customizer under the Appearance > Customize area in your admin. You should now be able to view and edit the options that we have created above. Your users can change these values and save them. But we’re not finished yet, our next task is to specify in our theme what we should do about the values of each of those options.

Step 7: Getting Saved Option Values

Getting option values is easy and done using this single function getOption.

$titan = TitanFramework::getInstance( 'my-theme' );
$myValue = $titan->getOption( 'my_option_id' );​

For example if you want to get the saved value in your footer text option, add this in your footer.php:

<footer id="colophon" class="site-footer">
<div class="site-info">
<?php 
$titan = TitanFramework::getInstance( 'titan' ); 
$footer = $titan->getOption( 'my_text_option' ); 
echo $footer; 
?>
</div><!-- .site-info -->
</footer><!-- #colophon -->​

footer-screenshot(titan)Titan Framework also allows you to directly generate CSS styles from the options it creates. To do this, you can simply add a css parameter to Generate CSS Automatically in your options. For example, we can set our Menu Font Color option to automatically generate a style rule every time the option is changed:

'css' => '#site-navigation li a { value }',​

Or for your font option for your h1 headings:

'css' => 'h1, h1 a, h1 a:visited { value }',​

css parameter will automatically generate after saving your options. This method can save you a lot of time and effort when building your theme.

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

Conclusion

This is just a short tutorial on how to create your first simple WordPress theme. Although we just created 3 options for the theme, creating these the traditional way without Titan Framework would entail a lot more effort. Feel free to browse our Documentation for more Theme Customizer Options.

We have just tackled the tip of the iceberg on the full potential of Titan Framework, but hopefully you have seen the benefits of using it.

Leave a Reply