UpThemes Framework

A powerful, lightweight theme options framework that utilizes the Settings API and Theme Customizer.

View on Github Download the Framework Quick Start Guide

Quick Start Guide

The UpThemes Framework is hosted on Github for easy access and collaboration with our community of developers. Here’s how to include it in your WordPress theme:

Step 1. Add the framework to your theme

First you’ll want to drop the UpThemes Framework into your WordPress theme.

Method 1: Git Submodule (recommended)

If your plugin uses git… Add the UpThemes Framework as a submodule. This makes it easy for you to stay updated with the latest version of the UpThemes Framework. Any time we update the module, you can run git submodule update and grab the latest stable version of the framework.

$ cd your_repo_root/repo_name
$ git submodule add git://github.com/LiftUX/UpThemes-Framework.git options

Method 2: Drag-n-Drop /options/ folder into your theme

Download the UpThemes Framework as a ZIP file, unzip it, then move the contents into a folder named ‘options’ within your theme’s root folder.

Step 2. Create Theme Options

Copy the theme-options-example.txt to theme-options.php:

$ cp -R your_repo_root/repo_name/options/theme-options-example.txt your_repo_root/repo_name/theme-options.php

Step 3. Include the UpThemes Framework in functions.php

Add this to the top of functions.php:

/**
  * Bootstrap the Theme Options Framework
  */
  if( file_exists(get_template_directory().'/options/options.php') )
    include_once(get_template_directory().'/options/options.php');

Bootstrap each theme options file in your theme’s root folder like so (this is new in this version of the framework, previously these files were automatically included if they were in the /theme-options/ folder.):

/**
  * Set up General Options
  */
  if( file_exists(get_template_directory().'/theme-options.php') )
    include_once(get_template_directory().'/theme-options.php')

Step 4. Customize your options

Edit your theme options arrays. The framework now supports option tabs, which are now required. Options must be attached to an option tab. Once you create a tab, you can then hook your actual options into the tabs, using the ‘tab’ argument, as shown below:

$thistab = array(
      "name" => "colors_and_images",
      "title" => __("Colors and Images","upfw"),
      "sections" => array(
          "color_scheme" => array(
              "name" => "color_scheme",
              "title" => __( "Color Scheme", "upfw" ),
              "description" => __( "Select your color scheme.","upfw" )
          )
      )
  );
  register_theme_option_tab($thistab);

  $options = array(
      "theme_color_scheme" => array(
          "tab" => $thistab["name"],
          "name" => "theme_color_scheme",
          "title" => "Theme Color Scheme",
          "description" => __( "Display header navigation menu above or below the site title/description?", "upfw" ),
          "section" => "color_scheme",
          "since" => "1.0",
          "id" => "color_scheme",
          "type" => "select",
          "default" => "light",
          "valid_options" => array(
              "light" => array(
                  "name" => "light",
                  "title" => __( "Light", "upfw" )
              ),
              "dark" => array(
                  "name" => "dark",
                  "title" => __( "Dark", "upfw" )
              )
          )
      )
      "theme_hyperlink_color" => array(
          "tab" => $thistab["name"],
          "name" => "theme_hyperlink_color",
          "title" => "Theme Hyperlink Color",
          "description" => __( "Default hyperlink color.", "upfw" ),
          "section" => "color_scheme",
          "since" => "1.0",
          "id" => "color_scheme",
          "type" => "color",
          "default" => "#ffffff"
      )
  );

  register_theme_options($options);

The available types of theme options are listed below:

‘type’ => ‘text’ – standard text box
‘type’ => ‘textarea’ – standard textarea
‘type’ => ‘select’ – drop-down select
‘type’ => ‘multiple’ – multiple select
‘type’ => ‘checkbox’ – checkbox
‘type’ => ‘upload’ – WordPress media uploader

To register theme options tabs, simply use register_theme_options() and register_theme_options_tab() within your existing code as shown in the above example. This makes it extremely easy to attach your theme options to specific functionality. That way if you have a lite version and a pro version of a theme, you can keep the theme options separated easily.