MojoMotor & CodeIgniter Hybrid Site - Part Two

Carrying on from where we left off in the last article, I'll be looking into how to use our MojoMotor 'embed content' layouts in CodeIgniter views.

The goal is to split the header and footer of the site and use them in all of our MojoMotor and CodeIgniter pages.

Reduce, reuse, recycle. Code it once and load it when you need it.

MojoMotor's definition of an Embed Layout

"You may have a block of code you use at the top of every page, across multiple layouts. Instead of writing the same code in each layout, you can put it in a single Embed layout and include that layout in all of the others, thus allowing you to edit it in only one layout and affect all of them.


Step 1: Externalizing the Styling and Scripts

In Part One I blatantly copied the standard welcome page that greets you on a CodeIgniter install with the embedded style. Not great when we want to use this CSS over our whole website. Lets split that code out and put it in an external style sheet.

MojoMotor comes with a resources folder, so we will put our new style sheet in there.

MojoMotor Resources


::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }<p>body {
    background-color: #fff;
    margin: 40px;
    font: 13px/20px normal Helvetica, Arial, sans-serif;
    color: #4F5155;
}</p><p>a {
    color: #003399;
    background-color: transparent;
    font-weight: normal;
}</p><p>h1 {
    color: #444;
    background-color: transparent;
    border-bottom: 1px solid #D0D0D0;
    font-size: 19px;
    font-weight: normal;
    margin: 0 0 14px 0;
    padding: 14px 15px 10px 15px;
}</p><p>code {
    font-family: Consolas, Monaco, Courier New, Courier, monospace;
    font-size: 12px;
    background-color: #f9f9f9;
    border: 1px solid #D0D0D0;
    color: #002166;
    display: block;
    margin: 14px 0 14px 0;
    padding: 12px 10px 12px 10px;
    margin: 0 15px 0 15px;
    text-align: right;
    font-size: 11px;
    border-top: 1px solid #D0D0D0;
    line-height: 32px;
    padding: 0 10px 0 10px;
    margin: 20px 0 0 0;
    margin: 10px;
    border: 1px solid #D0D0D0;
    -webkit-box-shadow: 0 0 8px #D0D0D0;
}</p><p>.text_left {
    float: left;
    text-align: left;

Now lets create an external JavaScript just to show that we aren't discriminating against other web languages.



    // Display a message in the browsers console.
    if( window.console && window.console.log ){
        window.console.log( 'MojoMotor & CodeIgniter Hybrid Site' );

Step 2: Make sweet mojo with layouts

I also mentioned a "Coming Soon" page for sections of the site not yet coded. We will now log into our MojoMotor website as an admin and create this simple page.

MojoMotor Layouts

First let's create two embed content layouts. One for the header and the other for the footer.


<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">

        <!-- CSS Includes -->
        <link rel="stylesheet" href="{mojo:site:site_path}css/custom.css" />

        <!-- JavaScript Includes -->
        <script src="{mojo:site:site_path}js/custom.js"></script>    

    <body><p>        <div id="container">


            <p class="footer"><span class="text_left">{mojo:site:login}</span> Page rendered in <strong>0.0762</strong> seconds</p>


Next we create a webpage layout called "coming_soon".


{mojo:layout:embed layout="header"}<p><h1>Coming Soon</h1></p><p><div id="body">
    <p>The page you are looking at is being generated dynamically by MojoMotor.</p>

    </nav></p><p>    <p>If you are exploring MojoMotor for the very first time, you should start by reading the <a href="">User Guide</a>.</p>
</div></p><p>{mojo:layout:embed layout="footer"}

There are two things of interest in this code.

  1. The embed mojo tag to insert our header and footer layouts
  2. The page_list mojo tag to display an unordered list of our pages

Step 3: Holy mojo-pollinated pages Batman

We now need to create a temporary page using our new webpage layout.

This step is somewhat optional for the fact that this page is going to get overridden by a CodeIgniter page further on down the track, but I find it useful to do this for a couple of reasons.

Firstly when starting a site, I like to create all the pages of the site (as placeholders) to map out the sections to be coded. The pages that are to be done in CodeIgniter use a layout called "coming_soon".

Secondly (and probably more importantly) adding the page into MojoMotor's page structure allows us to use the Mojo tags that are at our disposal. Most importantly the "page_list" tag which gives us a dynamic navigation list of our pages.

For this example I've called the page "part_two" but it can be whatever you like.

MojoMotor Pages

Step 4: Put your mojo to the test

Coming Soon

Step 5: Adding ingredients automatically

Before we start to code the CodeIgniter page, there are a few resources we need to load to get it to work. These are:

You can load these manually when you need them in your CodeIgniter code or if you are like me and use these key resources everywhere, you can load them using CodeIgniter's "auto-load" feature.

To auto-load these resources, all you have to do is to add the name to the correct autoload array.


$autoload['libraries'] = array('database', 'session');<p>$autoload['helper'] = array('url');

Step 6: A pinch of gasoline & a drop of CodeIgniter

Time to cook with CodeIgniter. Create a new controller called "part_two" and view called "part_two_view".

We are calling the controller "part_two" as this is the URL title of our temporary MojoMotor page.


<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');<p>class Part_two extends CI_Controller {

     * Constructor
     * @access    public
     * @return    void
    function __construct()

     * Index Page for this controller.
     * Maps to the following URL
     *    - or -  
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/part_two/<method_name>
     * @see
    public function index()
        // Load MojoMotors layout model.

        // Load MojoMotors layout parser.

        // Data to be used by our CodeIgniter view.
        $data = array(
                        'title'     => 'Part Two - MojoMotor & CodeIgniter Hybrid Site',
                        'framework' => 'CodeIgniter'

        // Load our CodeIgniter view and set as a variable.
        $page_c $data, true);</p><p>        // Parse the CodeIgniter view using MojoMotor's function.
        $page_c $this->mojomotor_parser->parse_template($page_content);

        // Add the parsed page content to the output string.
}</p><p>/* End of file part_two.php */
/* Location: ./application/controllers/part_two.php */

The difference between what we are doing here and a standard CodeIgniter view load is that the view is getting loaded into a variable which is then passed though some MojoMotor functions. These functions replace any Mojo tags and output our final HTML webpage.


{mojo:layout:embed layout="header"}<p><h1><?= $title ?></h1></p><p><div id="body">
    <p>The page you are looking at is being generated dynamically by <?= $framework ?>.</p>

    <p>MojoMotor Page List Navigation:</p>

    <p>If you would like to edit this page you'll find it located at:</p>

The corresponding controller for this page is found at:


If you are exploring for the very first time, you should start by reading the User Guide.

{mojo:layout:embed layout="footer"}

This code looks somewhat like the love child between Mr CodeIgniter and Miss MojoMotor. You can see PHP and Mojo tags side by side. But don't worry, our controller can handle all of this and much more.

Step 7: One more route for good luck

It's time to tell MojoMotor about our CodeIgniter page with a little overriding magic. This is done in the routes config.

Routes Config

Add our new controller's name to the CodeIgniter routes array.

// Add custom CodeIgniter controller names to this codeigniter_routes array.
$codeigniter_routes = array(
    'part_one', 'part_two'

Step 8: A taste of our sweet success

CodeIgniter & MojoMotor

Example File

In part one you received a free steak knife with nothing to cut. Here's your free steak. Nice and juicy, ready to be hacked and slashed to your heart's content.

Download Example File

I haven't included the MojoMotor source code as not everything comes for free.

Crazy ramblings of a lunatic:

This is great but two questions I find myself asking are:

  1. Can trees die of old age?
  2. Can we get the glorious Mojo bar and region editor to work in CodeIgniter pages?

Stay tuned for developments:

Look out for "MojoMotor & CodeIgniter Hybrid Site - Part Three" to find out which of these lunatic questions I find an answer for.

Write a response...