The UpThemes Framework

A powerful, lightweight theme options framework.

Settings API

The new UpThemes Framework takes advantage of the Settings API, making our theme options panel extremely lightweight and easy-to-use.

WordPress-Standard Media Uploader

No longer a separate piece of functionality, the Framework now uses the built-in WordPress media uploader for enhanced security and less code overhead.

Custom Layouts & Color Schemes

Many themes offer a choice of layout and color scheme. The UpThemes Framework makes it incredibly easy to select the layout and color scheme that’s right for your website.

Live Theme Customizer

With the new theme customizer, the UpThemes Framework now allows you to preview every option, including instant header and background image updates.

Customizable Header and Background Images

Easily update the logo and background image or color instantly!

Multiple Language Support

Most themes come with multiple languages to choose from, and if not - we make it easy to add your own language.

Documentation & Getting Started

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' => 'text_list' - custom text list
  • 'type' => 'select' - drop-down select
  • 'type' => 'multiple' - multiple select
  • 'type' => 'checkbox' - checkbox
  • 'type' => 'color' - colorpicker
  • 'type' => 'image' - WordPress image uploader
  • 'type' => 'category' - category picker drop-down
  • 'type' => 'categories' - categories multiple select
  • 'type' => 'page' - page picker drop-down
  • 'type' => 'pages' - page multiple select
  • 'type' => 'taxonomy' - taxonomy multiple select

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.