How to add multiple themes to your CI app - Wordpress-like theming for CI

[eluser]JoostV[/eluser]
Use the following setup if you wish
- to use multiple themes for your CI app, like in Wordpress;
- while leaving your application folder and system folder outside of the webroot.

First of all, the folder structure:
/application
/config
/other application folders
/system
/cache
/codeigniter system folders
/public_html
/themes
/default
/views
/css
/jscripts
/images
/some-other-theme
.htaccess
index.php

First, edit the following lines in you index.php so CI can find the application and system folders.

Code:

$system_folder = "../system";
$application_folder = "../application";

And now... theming!

Create a file MY_Loader.php in your application/libraries folder. This file will extend default the CI_Loader class, adding some handy theming functionality to $this->load.

MY_Loader.php

Code:

/**
* @category   Accent Interactive CMS
* @package    Accent_Library
* @name MY_Loader.php
* @version 1.0
* @author Joost van Veen
* @copyright Accent Interactive
*/
class MY_Loader extends CI_Loader
{
    // Set the default theme. Make sure this folder exists!
    public $theme = 'default';
    
    public function __construct() {
        parent::CI_Loader();
        // Set the loader to use the default theme path.
        $this->set_theme($this->theme);
    }
    
    /**
     * Set the theme location. This is where the loader class will look for view files.
     * his location is in the webroot, like public_html/themes/default.
     * New theme? Upload all views, css, images, jascripts to public_html/themes/my-new-theme
     * @param string $theme_name
     * @return void
     */
    public function set_theme($theme_name){
        $this->theme = $theme_name;
        $this->_ci_view_path = FCPATH . 'themes/' . $this->theme . '/views/';
    }
}

Now you can easily switch between views in your controller, or your MY_Controller.

Controller

Code:

// Get theme from database and set it
$theme_name = $this->settings->theme;
$this->load->set_theme($theme_name);

// Do a lot of other stuff

// Load the view, for instance 'pages'
$this->load->view('pages');

Because the entire theme (view files, css, jscripts, etc) is in a single folder you can drop new themes into the /themes folder and use them at the drop of a hat.

[eluser]Phil Sturgeon[/eluser]
Good shout. :-)

This is essentially the same way my Template library handles themes but by chucking this into the Loader people who don't want the "complication" of re-writing their system to use my Template library can use themes easily.

You should probably be using ../ or APPPATH instead of FCPATH as it contains index.php. Relative paths are supported in the view loading.

[eluser]JoostV[/eluser]
@phil Spot on. No partials, breadcrumbs and such. This is quick and dirty and, to be honest, a bit hacky

As for the paths, you could use a relative path, no problem. Since I always move application and system folder outside the webroot I cannot use APPPATH here - I store the templates inside the webroot, which is why I use CI's FCPATCH, the folder in which index.php resides.

Basically, the MY_Loader solution separates the view files from the application and enables you to place them anywhere you like. Thus, you can place the application folder outside the webroot, but place the view files in the webroot, along with all oth rthem files, like css, which is what I've done in this example.

Loading partial views from within other views still works in this setup, too

[eluser]PromaneX[/eluser]
This is great I love how simple it is. Definatley something I am going to build into my current project. Thanks for sharing it!

[eluser]Blaze Boy[/eluser]
i have made a similar intire helper for themes with loader extension also to load themes with this->load->theme()
here:
http://ellislab.com/forums/viewthread/142044/

[eluser]JoostV[/eluser]
@PromaneX Thanks!
@Blaze Boy Looks powerful, I'll look into that

[eluser]umefarooq[/eluser]
nice idea add themes. How can we use this with modular separation or HMVC?

[eluser]JoostV[/eluser]
I'm afraid you'll have to figure that out for yourself

I have never used modular seperation or HMVC, so I have no idea about the implications. This 'technique' is so simple, however, that I think it should not be a problem.

[eluser]mreeves[/eluser]
[quote author="umefarooq" date="1264083355"]nice idea add themes. How can we use this with modular separation or HMVC?[/quote]

Phil's template library works perfectly with modular separation from my experience. It achieves much the same thing but has a few very useful additions like layout files and partials.

see: Template Library

[eluser]JoostV[/eluser]
The reason I did not include these is because
-in my experience, enhanced features often create dependencies, need for config, etc
-CI already allows views to be loaded from within views, which is close enough to partials for me

Partials out of the box is as easy as
Controller

Code:

$data['content_view'] = 'article_teasers';
$this->load->view['main_template', $data];

View main_template

Code:

$this->load->view['partials/page_head'];
// Load page content
$this->load->view[$content_view];
// Load some more partials like sidebars, navigation, page_tail, etc.