Create a WordPress Options Panel Using CodeIgniter

The first thing that we all think about when we want to start to create a WordPress Options Panel is the code structure. How the code structure is quite clean and easy to enhance.
WordPress is one of the most popular Content Management Software (CMS) systems out there.So how we would like integrate CodeIgniter into our WordPress Options Panel.
As you already know that CodeIgniter is the popular PHP Framework, which is easy to use and quite light.
So today, let me guide you through the integration process of CodeIgniter into WordPress.

Step 1

Download the CodeIgniter source code from CodeIgniter Official Site and extract it. Now we go into your WordPress default theme folder and create some folder structures :

default/
– ctrl/
—– config/
—– controllers/
—– errors/
—– libraries/
—– models/
—– system/
——– helpers/
——– codeigniter/
——– helpers/
——– libraries/
—– views

Step 2

Copy all needed files from CodeIgniter source code into your previously created folders with this following steps :

• Copy autoload.php, config.php, constants.php, database.php, and routes.php files from system/application/config into default/ctrl/config.
• Copy all files in system/application/errors into default/ctrl/errors.
• Copy all files in system/codeigniter inti default/ctrl/system/codeigniter.
• Copy url_helper.php file from system/helpers into default/ctrl/system/helpers.
• Copy Benchmark.php, Config.php, Controller.php, Exceptions.php, Hooks.php, Input.php, Loader.php, Language.php, Model.php, Output.php, Router.php and URI.php files from system/libraries into default/ctrl/system/libraries.

Step 3

Now we are going to edit and customize the needed files:

default/ctrl/config/autoload.php

Put the url helper into something like this

$autoload['helper'] = array('url');

default/ctrl/config/config.php

Edit your base url into something like this

$config['base_url'] = get_option('siteurl') . '/wp-admin/';

Edit the uri protocol into something like this

$config['uri_protocol']	= "QUERY_STRING";

Enable the query strings into something like this

$config['enable_query_strings'] = TRUE;

default/ctrl/config/database.php

Empty this file and you can use this file later for table installer purpose for your theme.

default/ctrl/config/routes.php

Edit the default controller into something like this

$route['default_controller'] = "noop";

default/ctrl/system/codeigniter/CodeIgniter.php

Put below code on line 29 to make the Output library working

global $BM, $CFG;

Remove the “&” symbol when loading the Benchmark class into something like this

$BM = load_class('Benchmark');

Remove the “&” symbol when loading the Config class into something like this

$CFG = load_class('Config');

Disable CodeIgniter code to check the DB connection into something like this

/*if (class_exists('CI_DB') AND isset($CI->db))
{

	$CI->db->close();
}*/

default/ctrl/system/libraries/Router.php

Change uri string fetched by CodeIgniter by putting below code on line 94

$n_query_string = strpos($this->uri->uri_string, '&');
if ($n_query_string > 0)
{
	$this->uri->uri_string = substr($this->uri->uri_string, 0, $n_query_string);
}
$this->uri->uri_string = '/'.str_replace('page=', '', $this->uri->uri_string);

default/functions.php

Put below code at the end of functions.php file

<?php
/*
|---------------------------------------------------------------
| SYSTEM FOLDER NAME
|---------------------------------------------------------------
|
| NO TRAILING SLASH!
|
*/
	$system_folder = str_replace('\\', '/', dirname(__FILE__)) . "/ctrl/system";

/*
|---------------------------------------------------------------
| APPLICATION FOLDER NAME
|---------------------------------------------------------------
|
| NO TRAILING SLASH!
|
*/
	$application_folder = str_replace('\\', '/', dirname(__FILE__)) . "/ctrl";

/*
|===============================================================
| END OF USER CONFIGURABLE SETTINGS
|===============================================================
*/

/*
|---------------------------------------------------------------
| SET THE SERVER PATH
|---------------------------------------------------------------
|
*/
if (strpos($system_folder, '/') === FALSE)
{
	if (function_exists('realpath') AND @realpath(dirname(__FILE__)) !== FALSE)
	{
		$system_folder = realpath(dirname(__FILE__)).'/'.$system_folder;
	}
}
else
{
	// Swap directory separators to Unix style for consistency
	$system_folder = str_replace("\\", "/", $system_folder);
}

/*
|---------------------------------------------------------------
| DEFINE APPLICATION CONSTANTS
|---------------------------------------------------------------
|
| EXT		- The file extension.  Typically ".php"
| SELF		- The name of THIS file (typically "index.php")
| FCPATH	- The full server path to THIS file
| BASEPATH	- The full server path to the "system" folder
| APPPATH	- The full server path to the "application" folder
|
*/
define('EXT', '.php');
define('SELF', pathinfo(__FILE__, PATHINFO_BASENAME));
define('FCPATH', str_replace(SELF, '', __FILE__));
define('BASEPATH', $system_folder.'/');

if (is_dir($application_folder))
{
	define('APPPATH', $application_folder.'/');
}
else
{
	if ($application_folder == '')
	{
		$application_folder = 'ctrl';
	}

	define('APPPATH', BASEPATH.$application_folder.'/');
}

/*
|---------------------------------------------------------------
| LOAD THE FRONT CONTROLLER
|---------------------------------------------------------------
|
| And away we go...
|
*/

/*
 * ------------------------------------------------------
 *  Load the framework constants
 * ------------------------------------------------------
 */
require_once(APPPATH . 'config/constants' . EXT);

function my_theme_admin()
{
	require_once(ABSPATH . '/wp-admin/includes/plugin' . EXT);

	require_once(APPPATH . 'config/config' . EXT);
	require_once(APPPATH . 'config/database' . EXT);
}

function my_theme_noop()
{
	require_once BASEPATH.'codeigniter/CodeIgniter'.EXT;
}

add_action('admin_menu', 'my_theme_admin');
?>

Now all the CodeIgniter customization are done and you are ready to go to the next step.

Step 4

Now create the theme options menu by editing your ctrl/config/config.php file and put below code on line 2.

/*
|--------------------------------------------------------------------------
| MENU
|--------------------------------------------------------------------------
*/
if (function_exists('add_object_page'))
{
	add_object_page('My Theme Options', 'My Theme Options', 'edit_themes', 'my_theme_controller', 'my_theme_noop');
	add_submenu_page('my_theme_controller', 'Other Options', 'Other Options', 'edit_themes', 'another_theme_controller', 'my_theme_noop');
}

If you refresh your administration panel’s plugin page, you will now see that you have two additional menus on the sidebar.

Step 5

Now you need to create three controller files

noop.php

<?php

class Noop
{

function Noop()
{}

function index()
{}
}

my_theme_controller.php

<?php

class My_theme_controller extends Controller
{

	function My_theme_controller()
	{
		parent::Controller();
	}

	function index()
	{
		echo $this->load->view('my_view', array(
			'the_first_example_variable' => get_option('siteurl'),
			'the_second_example_variable' => 'Oh no, my admin theme panel is working!!! COOL!!!',
			'the_get_querystring' => $this->input->get('page')
		), TRUE);
	}
}

other_theme_controller.php

<?php

class Another_theme_controller extends Controller
{

	function Another_theme_controller()
	{
		parent::Controller();
	}

	function index()
	{
		echo $this->load->view('my_another_view', array(), TRUE);
	}
}

Step 6

Now you need to create two view files

my_view.php

<h3><?php echo $the_second_example_variable; ?></h3>
This is my site url : <?php echo $the_first_example_variable; ?>
<br/>
This is the get querystring : <?php echo $the_get_querystring; ?>

my_another_view.php

<h3>This is my another view</h3>

If you click on your new menu panel, you will see that your controller and view are loaded.

Conclusion

We have now integrate CodeIgniter into your WordPress Options Panel.

Click below link to download the source.

I hope this tutorial gave you all the information you need to integrate CodeIgniter into your WordPress Options Panel. Please feel free to post your comments below.

Thanks for reading! ^_^