This is a quick tutorial on how to use Titan Framework.

Alright, so you want to create a WordPress theme or plugin and you want to get your hands dirty with Titan Framework. Let’s get right to it! What do you want to do?

Set up Your Project Create Options Getting Values

Set up Your Project

(Go Back)
If you are creating a new theme, then our Underscores theme + Titan Framework theme generator is the way to go. It already contains sample code and is built using the latest Underscores version:

Based on _s from github


Here’re the steps if you want to do it manually:

  1. Download and save titan-framework-checker.php into your project
  2. Next, in your functions.php or main plugin PHP script, add this PHP code along the top of the script:
    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

That’s it, it’s as easy as pie.

Back Start Creating Options

Create Options

(Go Back)
To create options in Titan Framework, you’ll have to create a container, then put options inside it. For example, let’s create a color picker inside the WordPress theme customizer to change our theme’s footer background color. Here’s how we’ll do that:

1. Get an Instance of Titan Framework,

$titan = TitanFramework::getInstance( 'mytheme' );

The getInstance function creates/gets a unique instance of Titan Framework specific to “mytheme”. This is the namespace we’re going to use to ensure that our settings won’t conflict with other plugins that use Titan Framework. Be sure to change it to your theme or plugin name.

2. Next, Create a Theme Customizer container,

$section = $titan->createThemeCustomizerSection( array(
    'name' => __( 'Footer Colors', 'mytheme' ),
) );

The createThemeCustomizerSection function creates a Theme Customizer section called “Footer Colors”. This function accepts a bunch of parameters that modify the behavior of the section. Right now we’re just changing the name.

[zilla_alert]Theme Customizer sections via createThemeCustomizerSection is just one of the containers you can create, you can also create meta boxes, admin panels and tabs.[/zilla_alert]

3. Then, create a Color Option inside it.

$section->createOption( array(
    'name' => __( 'Background Color', 'mytheme' ),
    'id' => 'footer_bg',
    'type' => 'color',
    'default' => '#222222',
    'css' => 'footer { background: value }',
) );

Now we use the variable $section we created above and create a color option with the ID footer_bg inside it. It’s going to be named “Background Color” and we’ve given it a default value of #222222 .

One cool feature of Titan Framework is it’s ability to generate CSS automatically. The parameter css here has CSS rules that get applied, the text value is replaced with whatever the option is set to. Now every time this option gets changed by your users, your styles will get updated automatically.

[zilla_alert]For a list of all the containers and option types available in Titan Framework, open the documentation menu icon on the top right of the site.[/zilla_alert]

Remember, all the code we’re writing here will be placed in the tf_create_options action (as seen in the previous page).

That’s basically it, just keep on creating containers and options!

Now on the next part, let’s learn how to get values.

[zilla_alert]For this specific example you don’t necessarily have to get the value of the option we just created since the CSS already takes care of what the option does.[/zilla_alert]

Back Getting Values

Getting Values

(Go Back)

Getting values is easy with Titan Framework. One of the most important parts is where in your code to get your options. You can get your option values in:

  • inside actions or hooks that run on or after after_setup_theme:
    add_action( 'after_setup_theme', 'my_action' );
    function my_action() {
        // Option code here
  • or inside a theme/template file like header.php or single.php:
    <?php while ( have_posts() ) : the_post(); ?>
        // Option code here
    <?php endwhile; // end of the loop. ?>

Now on to getting our values. As with creating options, first you’ll need an instance of the framework:

$titan = TitanFramework::getInstance( 'mytheme' );

Then, whether you’ve created themes customizer options, meta box options or admin panel options, you’ll only have to call this one command:

$mySavedValue = $titan->getOption( 'footer_bg' );

You’ll get the current or default value of your option in your new variable $mySavedValue . Just replace the string with the ID of your option. You can do whatever you like with the value you get, you can print them out as styles, display them in your page templates, use them in database queries, whatever you want.

[zilla_alert style=”red”]

A friendly reminder:

  • Do not do this directly in functions.php while outside a hook, you will get fatal errors.
  • Do not do this on very early hooks like plugins_loaded.
  • Do not pass go, do not collect 200


That’s all there is to it. Dive into the documentation and try out the different options for yourself 🙂