How to use Pro Panel within a Child Theme

Introduction

The Pro Panel was designed to work within a Parent Theme, however it is quite easy to integrate into a Child Theme. In this tutorial, we will use WordPress Twenty Eleven Theme as an example.

Steps to set up a child theme for Twenty Eleven

Setup child theme structure
  1. In this tutorial we will call our child theme “twentyeleven-child”
  2. In wp-content/themes/ folder create an empty folder and name it twentyeleven-child
  3. In twentyeleven-child folder create two files: style.css and functions.php
  4. Now we should have 1 folder and 2 files with the structure as follows wp-content/themes/twentyeleven-child/style.css wp-content/themes/twentyeleven-child/functions.php
Codes in style.css

In style.css, enter the following codes.

  /* Theme Name:     Twenty Eleven Child Theme URI:      http: //example.com/ Description:    Child theme for the Twenty Eleven theme Author:         Your Name Author URI:     http: //example.com Template:       twentyeleven Version:        0.1.0 */ @import url("../twentyeleven/style.css");  
Activate Child Theme
  1. Now you can log in to WordPress Admin and activate the child theme
  2. You can find all information on WordPress Child Theme by accessing this link http://codex.wordpress.org/Child_Themes
  3. Please note that you can create a child theme template to overwrite the parent theme template. For example, index.php in your child theme will overwrite the index.php of your parent theme. This rule applies to Standard WordPress Theme Templates only

 

Steps to integrate Pro Panel into Child Theme

Unzip Pro Panel and copy “admin” folder
  1. Unzip your downloaded Pro Panel package
  2. In the unzipped Pro Panel package you will find a folder named “admin”
  3. Copy the whole “admin” folder into twentyeleven-child folder Your folder structure will now be wp-content/themes/twentyeleven-child/admin/
Require files in Child Theme’s functions.php

In twentyeleven-child functions.php enter the following codes.

  <?php // codes to load Pro Panel into child theme. require_once(STYLESHEETPATH. '/admin/admin-functions.php'); require_once(STYLESHEETPATH . '/admin/admin-interface.php'); require_once(STYLESHEETPATH . '/admin/theme-settings.php'); ?>  
Minor modifications to admin-interface.php

We need to change 8 instances of get_template_directory_uri() to get_stylesheet_directory_uri() Use a code editor that shows line numbers to open up admin-interface.php, the file path is wp-content/themes/twentyeleven-child/admin/admin-interface.php and make the following changes. Go to line 140, find the following code

 <img style="display:none;" src="<?php echo get_template_directory_uri() ?>/admin/images/wpspin_light.gif" class="ajax-loading-img ajax-loading-img-bottom" alt="Working..." /> 

and change to the following code:

  <img style="display:none;" src="<?php echo get_stylesheet_directory_uri() ?>/admin/images/wpspin_light.gif" class="ajax-loading-img ajax-loading-img-bottom" alt="Working..." />  

Go to line 168 – 177 find the following function:

  function of_style_only() { 	wp_enqueue_style('admin-style', get_template_directory_uri().'/admin/admin-style.css'); 	wp_enqueue_style('color-picker', get_template_directory_uri().'/admin/colorpicker.css'); 	$color = get_user_option('admin_color'); 	if ($color == "fresh") 		{ 		wp_enqueue_style('admin-style-grey', get_template_directory_uri().'/admin/admin-style-grey.css'); 		wp_enqueue_style('color-picker', get_template_directory_uri().'/admin/colorpicker.css'); 		} }  

and replace with the following function:

  function of_style_only() { 	wp_enqueue_style('admin-style', get_stylesheet_directory_uri().'/admin/admin-style.css'); 	wp_enqueue_style('color-picker', get_stylesheet_directory_uri().'/admin/colorpicker.css'); 	$color = get_user_option('admin_color'); 	if ($color == "fresh") 		{ 		wp_enqueue_style('admin-style-grey', get_stylesheet_directory_uri().'/admin/admin-style-grey.css'); 		wp_enqueue_style('color-picker', get_stylesheet_directory_uri().'/admin/colorpicker.css'); 		} }  

Go to line 191 – 195 find the following codes:

  	wp_enqueue_script('jquery-ui-core'); 	wp_register_script('jquery-input-mask', get_template_directory_uri().'/admin/js/jquery.maskedinput-1.2.2.js', array( 'jquery' )); 	wp_enqueue_script('jquery-input-mask'); 	wp_enqueue_script('color-picker', get_template_directory_uri().'/admin/js/colorpicker.js', array('jquery')); 	wp_enqueue_script('ajaxupload', get_template_directory_uri().'/admin/js/ajaxupload.js', array('jquery'));  

and replace with the following codes

  	wp_enqueue_script('jquery-ui-core'); 	wp_register_script('jquery-input-mask', get_stylesheet_directory_uri().'/admin/js/jquery.maskedinput-1.2.2.js', array( 'jquery' )); 	wp_enqueue_script('jquery-input-mask'); 	wp_enqueue_script('color-picker', get_stylesheet_directory_uri().'/admin/js/colorpicker.js', array('jquery')); 	wp_enqueue_script('ajaxupload', get_stylesheet_directory_uri().'/admin/js/ajaxupload.js', array('jquery'));  
Visit WordPress Admin to test out Site Options!

Log in to WordPress Admin. Under “Appearance” section you will find “Site Options”. Click on it to load the Pro Panel an try it out!  

Additional Important Information

Please open up Pro Panel User Manual (User_Manual.html) which is included in your downloaded package and read up on the remaining topics.

  1. Basic Settings
  2. Modifying Your ProPanel
  3. Retrieving the values from your ProPanel