ProPanel - Wordpress Theme Options Panel

A Premium CodeCanyon Product by TrueThemes

Thank You

First and foremost we want to give a huge thank you for purchasing this CodeCanyon product. We truly appreciate your support!

As a TrueThemes customer you now have full access to our amazing support services. We highly encourage you to watch the online Training Videos before proceeding any further. The Training Videos are super helpful and will walk you through every single aspect of setting up and using your awesome new product.

Watch the Training Videos →

1. Theme Integration

  • Step 1: Open up the folder named 1. Wordpress Files located in your CodeCanyon ProPanel download package.
  • Step 2: Open up the root directory of the Wordpress theme. (ie: wp-content/themes/twentyeleven/)
  • Step 3: From within the 1. Wordpress Files folder, copy the entire admin folder into your theme's root directory.
    (ie: wp-content/themes/twentyeleven/admin/)
  • Step 4: Open up the functions.php file located within the 1. Wordpress Files folder. Copy the 3 lines of code presented in that file:
    require_once(TEMPLATEPATH . '/admin/admin-functions.php'); require_once(TEMPLATEPATH . '/admin/admin-interface.php'); require_once(TEMPLATEPATH . '/admin/theme-settings.php');
  • Step 5: Open up your theme's functions.php file and paste the 3 lines of code you just copied.
  • Step 6: That's it! The ProPanel is now added to your Wordpress Theme. The ProPanel is located within Your Wordpress Dashboard under Appearance > Site Options


2. Basic Settings

  • Before modifying the ProPanel you'll need to set a shortname for your theme.
  • 1. Wordpress Files/admin/theme-settings.php ← This is the only file that you'll ever need to edit in order to make changes to the ProPanel.

Set the Shortname:

  • Step 1: Open up theme-settings.php located within 1. Wordpress Files/admin/.
  • Step 2: Scroll down to line 9 in the code and setup your shortname. This shortname will be used to retrieve the values set by your users within the ProPanel. We recommend a name that is short and has no spaces or special characters. (ie: yourtheme)

3. Pages and Options

  • This section describes how to add Pages and Options to your ProPanel.
  • Open up theme-settings.php and scroll down to line 62 in the code. This is where all the magic happens. This is where you will add/remove pages and options displayed in your Options Panel. We recommend to simply copy/paste the included samples to easily build out your Options Panel.

Adding Pages:

  • A Page is added to the Navigation of the ProPanel and contains the various Options that you specify.
  • Adding a page is done by specifying a new Heading. Specifying a new heading is done using this code:
    $options[] = array( "name" => __('All Options','framework_localize'), "type" => "heading");
  • The Page within the sample code above is named "All Options". You can rename this to your desired page title.
  • Any Options added below a Heading will be displayed on that Page.



Sample Code:

  • $options[] = array( "name" => __('Page 1','framework_localize'), "type" => "heading"); ...options for this page go here... $options[] = array( "name" => __('Page 2','framework_localize'), "type" => "heading"); ...options for this page go here... $options[] = array( "name" => __('Page 3','framework_localize'), "type" => "heading"); ...options for this page go here...

Adding Options:

  • Adding options to your ProPanel is similar to adding pages. The default ProPanel comes with a sample of each option type.
  • Simply copy/paste your desired option below your desired page Heading.
  • Below is the code for a text option type. A description of each parameter is listed below.




  • name: This is the name/title of the option and is displayed to the user within your Options Panel.
  • desc: This is the description displayed to the user in the Options Panel.
  • id: This is the id of the option. This id will be used to retrieve the value set by the user. Be sure to leave the $shortname code in tact and only modify the "_sample_text_area". Please note that the ID must starte with an underscore "_"
  • std: This is the default value of the option.
  • type: This is where you specify the option type. There are 10 option types to choose from:
    - checkbox
    - color
    - heading
    - images
    - info
    - radio
    - select
    - text
    - textarea
    - upload

Sample Code:

  • $options[] = array( "name" => __('Page 1','framework_localize'), "type" => "heading"); $options[] = array( "name" => __('Website Logo','framework_localize'), "desc" => __('Upload a custom logo for your Website.','framework_localize'), "id" => $shortname."_sitelogo", "std" => "", "type" => "upload"); $options[] = array( "name" => __('Page 2','framework_localize'), "type" => "heading"); $options[] = array( "name" => __('Blog Page','framework_localize'), "desc" => __('Select your blog page from the list.','framework_localize'), "id" => $shortname."_blogpage", "std" => "", "type" => "select", "options" => $of_pages);

4. Outputting Values

  • 1. Wordpress Files/sample-page.php ← this file shows you how the values are stored and retrieved. Review this file and follow the same logic for storing and retreiving your Options within your WordPress Theme.
  • Each value must first be stored in a variable. You can then display that variable anywhere in your Wordress Theme.

Storing and Displaying Values:

  • Storing the value into a variable:
    $sample_variable = get_option('yourtheme_sitelogo');
  • Displaying the value within your WordPress Theme:
    echo $sample_variable;

Sample Code:

  • $sample_variable = get_option('yourtheme_sitelogo'); <img src="<?php echo $sample_variable ?>" alt="<?php bloginfo('name'); ?>" />