Introduction

CodeIgniter is a MVC (model-view-controller) Framework for PHP with a small footprint. This means that it features a complete set of functions that helps you to organize and speed up the development process of web applications. Besides, it is quite simple when compared to some other frameworks.

The community around a framework is also something to take in consideration when choosing one. CodeIgniter has an active community and a good user guide, so it is easy to find the information you need. Now let me explain what MVC means.

Model-View-Controller

It is design pattern that divides the application in three parts:

• Model: database interaction and business logic. CRUD (create, read, update, delete) operations.
• View: what the user sees. Our HTML.
• Controller: application logic and user input handling. The controller uses the model to get/set the information in the database and calls the necessary views to display it to the user.

Simply explained, it is an architecture or model to structure your application. For those who have already worked with pure PHP applications that handle inputs in the same file where the HTML is, includes the database connection and executes the database actions, working with a MVC framework is awesome. At first it might look difficult, but after a few moments understanding the simplicity and organization of the code, you won’t work without it again.

Structure and Files

The CodeIgniter installation has a standard folder structure. This can be changed by tweaking a few files, but for the purpose of this application we will keep the folder structure as it is. So go to http://www.codeigniter.com and download the latest version (right now 2.1.0). Unzip the contents into your desired folder. This is what you’ll see:

• application
• system
• user_guide
• index.php
• license.txt

The file index.php indicates the environment (development, production, etc) and the system and application folders. So, if you want, you can rename this folders for something else and change this value in the index.php file. This helps improving the security of your app.

The file license.txt contains the legal agreement for the use of CodeIgniter.

application

This is the folder where all information specific to our application will go. The most important subfolders, where you will doing most of your work, are:

• config: the app configuration. Database settings, autoload libraries and helpers, routes, etc.
• controllers: app controllers. Each controller is a PHP class that extends the CI_Controller class. To access the controller you simply go to server/controller_name in your browser.
• models: database models. The models are also classes, but they extend the CI_Model class.
• views: all your views will be here.

There are many other subfolders, like libraries and helpers, where you can add your custom classes and functions.

system

This folder contains the “engine” of CodeIgniter. All the system libraries are here, so you don’t need to worry about it.

user_guide

As you can imagine this is the user guide that comes with CodeIgniter. You can remove this folder or keep it in a separate place for reference. You can find this user guide online as well.

Simple App Flow

This is a simplified flow to explain how a simple scenario works.

In this scenario we are accessing a user to edit his details. CodeIgniter handles URLs in a simple way, using the first part as the controllers and the next one as the method. Any other values can be parameters of the method. If the controller is not defined the default one will be loaded (this is defined in the config folder). If the method is not defined, the index method will be used by default.

I will explain in detail how we do everything in the next posts. My intention is to go step by step, explaining how CodeIgniter works in practical situations. Now let me explain what the application will be.

Simple Task Board

The application we will be creating is the Simple Task Board. It is available here in this blog as well as in GitHub. It was created by myself, to help me organizing my personal projects. I decided to make it available in order to improve it and, maybe, use it to help me manage projects in my company. As I don’t need and don’t want to loose to much time managing the projects, I don’t need many features. I end up using an agile board or simple spread sheets. That’s why the Simple Task Board could be tailored to support only the basic needs, being at the same time simple and useful.

Conclusion

That’s all for the introduction. I’ve prepared a new installation of CodeIgniter in my local machine, so I’m ready to start the step by step tutorial. Next weekend I’ll prepare part 2 of the tutorial. Have a nice week.

Introduction

Created using CodeIgniter, the idea is that this application will remain simple, supporting only the most basic requirements of a task management system. It’s goal is to aid in the project management process.

This is the first usable version of this application. Please use it only for testing and learning purposes.

The current version is 1.0. But it is under development and not fully tested. It should be used only for testing or if you want to learn a little bit more about CodeIgniter. In the next sections I’ll cover the following topics:

• Installation
• Screen Shots
• Future Updates
• Download

Installation

Create the database using db/create.sql, place the files in your server and update the following:

• application/config/config.php: update $config['base_url'] with your URL.
• application/config/database.php: update your database information.

Run <server>/install (where <server> should be your localhost or domain/folder).
If you have any problems let me know.

Screen Shots

Future Updates

I plan to update some portions of this application in the following months. Currently these are the features to be developed:

• Task comments: add comments in each task.
• User levels: implement level verification to allow the correct functionalities to each level.
• User profile: create a user profile with more information about the users.
• Task history: track what happens with the tasks and how long it takes in each phase.
• Tasks estimation: add an estimation field to enable a comparison between estimated and realized.
• … if you have any ideas, let me know …

Download

If you want to download this project, please go to the GitHub repository. This way you can download the latest version.

Introduction

My Trip Emission is (or was – it is not a domain anymore) an application that I developed that allows the user to detect the emission of CO2 base on a Google Maps trip and the selection of a car. It was developed in pure PHP and uses the Google Maps API. I’ll go through the directory structure and then explain the most important parts. Please note that this is an old project that haven’t been updated in a while, which means some parts of the code are using old versions of PHP/jQuery/Google Maps API.

You can download the complete project here.

Directory Structure

This is a very simple project, with a few files, so I’m going to show most of them.

• css
• bkp_style.css
• style.css
• styleIE.css
• images
• include
• config.php
• js
• jquery_cookies.js
• scripts.js
• about.php
• contact.php
• contact_sent.php
• favicon.ico
• get_emission.php
• get_model.php
• get_version.php
• help.php
• index.php
• mytripemission.sql
• robots.txt
• sitemap.xml

CSS Folder

This folder includes three files. bkp_style.css and style.css are the same file, but style.css is minified. styleIE.css has IE specific styling. I’m not going to explain the details of the styling here. If you want to know more about it, let me know in the comments.

Images Folder

Just images…

Include Folder

The include folder contains the config.php file, which handles the database connection. You need to update this file with your database info. Furthermore, this file defines two functions cleanInput($input) and sanitize($input) which are responsible for cleaning the GET variable and ensuring no bad inputs will go to the database.

// Database information
$db_user = 'root';
$db_pass = '';
$db_host = 'localhost';
$db_name = 'mytripemission';

// Database connection
$dbc = mysql_connect($db_host, $db_user, $db_pass) OR die('It was not possible to connect to MySQL: ' . mysql_error());
mysql_select_db ($db_name) OR die('It was not possible to select the database: ' . mysql_error());

define('BASE_URL', 'http://localhost/mytripemission/');

// Cleaning function
function cleanInput($input) {

    $search = array(
        '@]*?>.*?@si',   // Strip out javascript
        '@]*?>@si',            // Strip out HTML tags
        '@]*?>.*?@siU',    // Strip style tags properly
        '@@'         // Strip multi-line comments
    );

    $output = preg_replace($search, '', $input);
    return $output;
}
// Sanitizing function
function sanitize($input) {
    if (is_array($input)) {
        foreach($input as $var=>$val) {
            $output[$var] = sanitize($val);
        }
    }
    else {
        if (get_magic_quotes_gpc()) {
            $input = stripslashes($input);
        }
        $input  = cleanInput($input);
        $output = mysql_real_escape_string($input);
    }
    return $output;
}

JS Folder

Contains the JavaScript files. jquery_cookies.js is a cookie plugin for jQuery developed by Klaus Hartl. It is used on the other file in this folder, scripts.js. This file handles different things and is important for the overall functionality, so lets go through it.
The first part is based on the Google Maps API examples and handles the map generation and events.

var map;
var gdir;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(geoip_latitude(), geoip_longitude()), 10);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.enableScrollWheelZoom();
    gdir = new GDirections(map, document.getElementById("directions"));
    GEvent.addListener(gdir, "load", onGDirectionsLoad);
    GEvent.addListener(gdir, "error", handleErrors);
  }
}

function setDirections(fromAddress, toAddress, locale) {
  gdir.load("from: " + fromAddress + " to: " + toAddress,
            { "locale": locale });
}

function handleErrors(){
       if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
         alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
         alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
         alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_BAD_KEY)
         alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
         alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

       else alert("An unknown error occurred.");

}

function onGDirectionsLoad(){
    distance = gdir.getDistance().meters;

    // Get value for emission
    $.ajax({
        type: 'GET',
        url: 'get_emission.php',
        data: 'manufact=' + $('#manufact').val() + '&model=' + $('#model').val() +
              '&version=' + $('#version').val() + '&meters=' + distance +
              '&fuel_uom=' + $.cookie('fuel_uom'),
        success: function(result){
            $('#emissions').html(result);
        }
    });
}

The function setDirections(fromAddress, toAddress, locale) loads the new trip definition. The other function which is interesting here is onGDirectionsLoad() because it calls the calculation of the emission using AJAX and displays it in the sidebar. Next we will continue in the same file.

/*
 * jQuery
 */
function setError(field) {
    if($(field).val() == 0) {
        $(field).animate({
        backgroundColor: 'red'
            }, 1000, function() {
            $(field).animate({
            backgroundColor: '#FFD1D1'
            }, 1000);
        });

        return false;
    }
    else {
        $(field).css('background-color','white');
        return true;
    }
}

function executeForm() {
    var ok = true;

    ok = setError('#manufact');
    ok = setError('#model');
    ok = setError('#version');
    ok = setError('#fromAddress');
    ok = setError('#toAddress');

    if(!ok) return false;

    // Set cookies
    $.cookie('manufacturer',$('#manufact').val(), { expires: 30 });
    $.cookie('model',$('#model').val(), { expires: 30 });
    $.cookie('version',$('#version').val(), { expires: 30 });
    $.cookie('fromAddress',$('#fromAddress').val(), { expires: 30 });
    $.cookie('toAddress',$('#toAddress').val(), { expires: 30 });

    // Define directions according to language
    if($.cookie('language')){
        setDirections($('#fromAddress').val(), $('#toAddress').val(), $.cookie('language'));
    } else {
        setDirections($('#fromAddress').val(), $('#toAddress').val(), 'en_US');
    }

    return false;
}

function changeUom() {
    if ($.cookie('fuel_uom') == 'km/l') {
        $.cookie('fuel_uom','mpg_US', { expires: 180 });
    } else if ($.cookie('fuel_uom') == 'mpg_US') {
        $.cookie('fuel_uom','mpg_UK', { expires: 180 });
    } else if ($.cookie('fuel_uom') == 'mpg_UK') {
        $.cookie('fuel_uom','km/l', { expires: 180 });
    }

    $.ajax({
        type: 'GET',
        url: 'get_emission.php',
        data: 'manufact=' + $('#manufact').val() + '&model=' + $('#model').val() +
            '&version=' + $('#version').val() + '&meters=' + distance +
            '&fuel_uom=' + $.cookie('fuel_uom'),
        success: function(result){
            $('#emissions').html(result);
        }
    });
}

This section has other two important functions. The function executeForm() will check for errors in the form, define cookies (so the user won’t need to define the information again next time he visits the site) and execute the setDirections(), which will run the Google Maps API.
The second function is changeUom(), which updates the unity of measure cookie and does an AJAX call to update the emissions HTML in the sidebar. The next part of the code is a jQuery event handler.

// Change window and DIV's width and height on resize
$(window).resize(
    function(){
        $('#container').css('height',($(window).height()-26)+'px');
        if($(window).width() > 734){
            $('#container').css('width',($(window).width()-3)+'px');
        } else {
            $('#container').css('width','730px');
        }
        $('#sidebar').css('height',($('#container').height()-$('#header').height())+'px');
        $('#directions').css('height',($('#sidebar').height()-150)+'px');
        $('#map_canvas').css('height',($('#container').height()-$('#header').height())+'px');
        $('#map_canvas').css('width',($('#container').width()-310)+'px');
    }
);

It resizes the map container, in order to make it fit the screen area properly. Finally we arrive at the document ready event, which initializes some things and adds events.

$(document).ready(function(){
    // Hide scrollbars
    $("body").css("overflow", "hidden");

    // Initialize window and DIV's width and height
    $('#container').css('height',($(window).height()-26)+'px');
    if($(window).width() > 734){
        $('#container').css('width',($(window).width()-3)+'px');
    } else {
        $('#container').css('width','730px');
    }
    $('#sidebar').css('height',($('#container').height()-$('#header').height())+'px');
    $('#directions').css('height',($('#sidebar').height()-150)+'px');
    $('#map_canvas').css('height',($('#container').height()-$('#header').height())+'px');
    $('#map_canvas').css('width',($('#container').width()-310)+'px');

    // Settings dialog
    $("#settings").dialog({
      bgiframe: true, autoOpen: false, height: 60, width: 400, modal: false, closeOnEscape: true
    });

    // Initialize settings from cookies
    if($.cookie('fuel_uom')) {
        $('#fuel_uom').val($.cookie('fuel_uom'));
    } else {
        $.cookie('fuel_uom', 'mpg_US', { expires: 180 });
    }

    if($.cookie('language')) {
        $('#language').val($.cookie('language'));
    } else {
        $.cookie('language', 'en_US', { expires: 180 });
    }

    // Initialize values - get cookies
    if($.cookie('manufacturer')) {
        $('#manufact').val($.cookie('manufacturer'));

        $.ajax({
            type: 'GET',
            url: 'get_model.php',
            data: 'manufact=' + $('#manufact').val(),
            success: function(result){
                $('#model').children().remove();
                $('#model').append('- Select -')
                           .append(result)
                           .removeAttr('disabled');

                if($.cookie('model')) {
                    $('#model').val($.cookie('model'));

                    $.ajax({
                        type: 'GET',
                        url: 'get_version.php',
                        data: 'manufact=' + $('#manufact').val() + '&model=' + $('#model').val(),
                        success: function(result){
                            $('#version').children().remove();
                            $('#version').append('- Select -')
                                         .append(result)
                                         .removeAttr('disabled');

                            if($.cookie('version')) {
                                $('#version').val($.cookie('version'));
                            }
                        }
                    });
                }
            }
        });
    }

    // Vehicle selection ajax
    $('#manufact').change(
        function() {
            $.ajax({
                type: 'GET',
                url: 'get_model.php',
                data: 'manufact=' + $(this).val(),
                success: function(result){
                    $('#model').children().remove();
                    $('#model').append('- Select -')
                               .append(result)
                               .removeAttr('disabled');
                    $('#version').children().remove();
                    $('#version').append('- Select -')
                                 .attr('disabled', 'disabled');
                }
            });
        });

    $('#model').change(
        function() {
            $.ajax({
                type: 'GET',
                url: 'get_version.php',
                data: 'manufact=' + $('#manufact').val() + '&model=' + $(this).val(),
                success: function(result){
                    $('#version').children().remove();
                    $('#version').append('- Select -')
                                 .append(result)
                                 .removeAttr('disabled');
                }
            });
        });

    // Check my trip button
    $('#check_btn').click(
        function() {
            return executeForm();
        });

    // Fuel unit of measure Cookie
    $('#fuel_uom').change(
        function() {
            $.cookie('fuel_uom',$('#fuel_uom').val(), { expires: 180 });
        });

    // Language Cookie
    $('#language').change(
        function() {
            $.cookie('language',$('#language').val(), { expires: 180 });
        });
});

First I initialize different things:

• Hide body scroll bars;
• Initialize map size;
• Define settings dialog;
• Initialize values according to cookies.

The cookies manufacturer, model and version are initialized one after the other, because they depend on each other. So, first we get the manufacturer. Than we check the database and the cookie for the model. Finally we check the database again and the cookie for the version.
Next, we have the Vehicle selection AJAX calls. When we change one of the dropdowns, we check the database to fill the options of the other dropdowns.
Lastly, we have events for the “Check my Trip” button and the settings dialog screen, with the unit of measure and language changes. Now let’s go to the root folder and talk about the PHP itself.

Root Folder

The root folder contains simple files like about.php (basic information about the site), contact.php and contact_sent.php (the contact form and it’s answer), favicon.ico (site icon), help.php (information on how to use the website), mytripemission.sql (database creation script), robots.txt (defines where the search engine can go) and the sitemap.xml. I’m only go through the other files, which are more interesting.

index.php

The index file has the HTML for the main page. Besides the form, which handles the search, it also defines the main DIVs used by the JavaScript. In this file I also use the BASE_URL constant which is defined in the config.php file. You need to remember to update this if you want the application to run.

get_model.php and get_version.php

Both files are called via AJAX and are simple database queries, getting information to fill the dropdowns in the index.php file.
get_model.php

require_once 'include/config.php';

$_GET = sanitize($_GET);

$sql = 'SELECT id, name FROM model WHERE manufacturer='.$_GET['manufact'];
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)) {
    echo ''.$row['name'].'';
}

get_version.php

require_once 'include/config.php';

$_GET = sanitize($_GET);

$sql = 'SELECT id, name, trans_type FROM version
        WHERE manufacturer='.$_GET['manufact'].'
          AND model='.$_GET['model'];
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)) {
    if($row['trans_type'] == 'M') {
        $transmission_type = 'Manual';
    } elseif($row['trans_type'] == 'A') {
        $transmission_type = 'Automatic';
    } else {
        $transmission_type = '';
    }

    echo ''.$row['name'].' '. $transmission_type.'';
}

get_emission.php

This is the file that really does the trick. This file I’m going to explain step by step.

require_once 'include/config.php';

// Get emisison logic
$_GET = sanitize($_GET);

$fuel_uom = $_GET['fuel_uom'];
$distance = $_GET['meters'];

$vehicle = explode('-', $_GET['version']);
$version = $vehicle[0];
$trans_type = $vehicle[1];

First, we require the config file, which does the database connection and defines the sanitize() function. Then we start the emission logic by sanitizing the $_GET variable and assigning the fuel unit of measure, the distance and the vehicle, which includes the version and transmission type.

// Get values for calulating vehicle green stars
$sql_stars = 'SELECT MAX( emission_co2 ) AS worse, MIN( emission_co2 ) AS best FROM version';
$res_stars = mysql_query($sql_stars) or die('Database error!');
$row_stars = mysql_fetch_array($res_stars);
$worse = $row_stars['worse'];
$best = $row_stars['best'];
$star_rate = ($worse - $best)/5; // Rate for each star

The code continues defining what will be a 5 star emission. For this purpose we fetch the MAX and MIN emissions from the database and define a $star_rate based on these values.

$sql = 'SELECT kml_urban, kml_extra, kml_combined, emission_co2
        FROM version
        WHERE manufacturer='.$_GET['manufact'].'
          AND model='.$_GET['model'].'
          AND id='.$version.'
          AND trans_type=\''.$trans_type.'\'';

$res = mysql_query($sql) or die($version.'-'.$trans_type);

$change_link = '
';

if ($row = mysql_fetch_array($res)) {
// This code is in the next code block
}

Next, we get the information for the selected vehicle. As we are going to return an HTML code, we also define the $change_link, responsible for changing the unit of measure. The next chunk of code is inside the last IF statement.

    $litres = round(($distance/1000) / $row['kml_combined'], 2);
    $co2 = round((($distance/1000) * $row['emission_co2'])/1000, 2);
    $stars_num = round(($worse-$row['emission_co2'])/$star_rate, 0);
    if ($stars_num == 1) {
        $stars_txt = ' Star';
    } else {
        $stars_txt = ' Stars';
    }

    // Change unit of measure

    if ($fuel_uom == 'km/l') {
        echo '</pre>
<h1>Consumption</h1>
<pre> '.$litres.' litres ('.$row['kml_combined'].' km/l)';
        echo $change_link;
        echo '</pre>
<h1>CO2 Emission</h1>
<pre> '.$co2.' kg ('.$row['emission_co2'].' g/km)';
    } else if ($fuel_uom == 'mpg_US') {
        $gallons = round($litres * 0.264, 2);
        $mpg = round($row['kml_extra'] / 0.425, 2);
        echo '</pre>
<h1>Consumption</h1>
<pre> '.$gallons.' gallons ('.$mpg.' MPG (US))';
        echo $change_link;
        echo '</pre>
<h1>CO2 Emission</h1>
<pre> '.$co2.' kg ('.$row['emission_co2'].' g/km)';
    } else if ($fuel_uom == 'mpg_UK') {
        $gallons = round($litres * 0.220, 2);
        $mpg = round($row['kml_extra'] / 0.354, 2);
        echo '</pre>
<h1>Consumption</h1>
<pre> '.$gallons.' gallons ('.$mpg.' MPG (Imp))';
        echo $change_link;
        echo '</pre>
<h1>CO2 Emission</h1>
<pre> '.$co2.' kg ('.$row['emission_co2'].' g/km)';
    }

    echo '<span class="fltrt">';
 for ($i = 5; $i >= 1; $i--) {
 if ($i echo '<img title="'.$stars_num.$stars_txt.'" src="'.BASE_URL.'images/star.png" alt="'.$stars_num.$stars_txt.'" />';
 } else {
 echo '<img title="'.$stars_num.$stars_txt.'" src="'.BASE_URL.'images/star_black.png" alt="'.$stars_num.$stars_txt.'" />';
 }

 }
 echo '</span>';

Finally, in this part of the code we start by calculating the consumption ($litres) and emission ($co2). Note that the distance is divided by 1000, to get the km. We also calculate the number of stars for the current emission, this way we can give a rating to the vehicle emission.
Continuing, after the “Change unit of measure” comment, we check which unit of measure is selected and create the HTML accordingly. To conclude the HTML, we also echo a SPAN tag, containing the star rating.

Conclusion

So, this what I had to show in this reactivation of my blog. This small project was online until last year, and I thought I should make it available in case anyone is interested. When I did it I had the intention to add more data and make it really usable, but in the end I changed my priorities… Anyway, it is available here totally free and open, but if you use it, don’t forget to reference this blog post.
Next week I’m going to (try to) write about a task board application that I developed using CodeIgniter. It is already available at GitHub, in case you’re interested.

You can download the complete project here.

Introduction

CodeIgniter is a PHP framework with a small footprint desgned to aid the development of customized web applications. It is a MVC framework that provides the main structure in which we build our custom logics. But if you already have a WordPress website and you want to create, for example, a CRM application using CodeIgniter, it would be good to reuse some features from WordPress. One of these features is the user management. In WordPress we have user details, authentication, user levels, etc. So, in this article I’m going to show how to do this.

In this article I’m using CodeIgniter 2.0.2 and WordPress 3.2.

Preparing our CodeIgniter Application

If you haven’t downloaded CodeIgniter yet, please do it in this link. Extract the file contents to your WordPress root and rename the CodeIgniter_2.0.2 folder to your desired name. As it will be inside WordPress, it will be accessed like www.youdomain.com/wordpress/codeigniter. You need to take care of the name you choose because it may collide with WordPress categories. You may need to customise your .htaccess file in order to make your application accessible.

You probably could create your CodeIgniter application outside your WordPress folder. But you would need to customize the users cookie path in a way that WordPress functions would work.

Now let’s start coding.

WP Integration Library

There are different ways to achieve what we want. One of them would be to create a Helper file and define different functions inside that helper. The other option is to create it using the object oriented approach which requires a library file that defines a class. The last one is the option I’m going to show here. So, let’s build the library step by step.

Step 1 – File and Class Declaration

First thing we need to do is to create a new file called Wpintegration.php inside the folder application/libraries. Then we need to define our class inside this file:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

/**
* WordPres Integration Class
*
* This class enables the use of wordpress functions
*
* @author		Oscar Dias
* @link		http://oscardias.com/codeigniter/integrating-wordpress-with-codeigniter
*/
class Wpintegration {

    //
    // Our code goes here!!!
    //

}
/* End of file Wpintegration.php */

Step 2 – Class Constructor

We are going to define a constructor for our class. This constructor will define some global variables (used by WordPress functions) and will include the wp-load.php file. This file will initiate the entire WordPress application. I left some additional variables that I found during my tests commented inside the method. I’m not sure, but I think that if you use different functions you will need different variables…

    public function __construct() {
        global $table_prefix, $wp_embed, $wp_widget_factory, $_wp_deprecated_widgets_callbacks, $wp_locale, $wp_rewrite;
        // Additional WordPress global variables
        //$wpdb, $current_user, $auth_secure_cookie, $wp_roles, $wp_the_query, $wp_query, $wp, $_updated_user_settings,
        //$wp_taxonomies, $wp_filter, $wp_actions, $merged_filters, $wp_current_filter, $wp_registered_sidebars,
        //$wp_registered_widgets, $wp_registered_widget_controls, $wp_registered_widget_updates, $_wp_deprecated_widgets_callbacks,
        //$posts, $post, $wp_did_header, $wp_did_template_redirect, $wp_version, $id, $comment, $user_ID;

        require_once '../wp-load.php';
    }

Step 3 – Methods for User Management

In order to complete our class, we are going to define some methods to return user information. What we want to get from WordPress is if the user is logged in, if the user is super admin and the following links: login, logout, blog and WordPress admin section.

• The first method we’re creating is the isLoggedIn(). It is a very simple method that will just return the WordPress function is_user_logged_in(). As you can imagine, it will be true or false.

      public function isLoggedIn()
      {
          return is_user_logged_in();
      }
  

• Next, we need a method to say when a user is super admin. We are using the function wp_ge_current_user() and returning true when the user level is greater than 10. You could simply return the user level and handle the different user levels inside your CodeIgniter application. In my case I was only interested in knowing if the user is a super admin.

      public function isSuperAdmin()
      {
          if(wp_get_current_user()->user_level >= 10)
              return true;
          else
              return false;
      }
  

• The methods loginLink() and logoutLink() will return the login and logout links for our website. These links will take you to the WordPress login and logout pages, but they have a redirect_to query string, which will contain the link to our application. So, after you login (or logout), you will be redirected back to the CodeIgniter app. Notice that in these methods we use the CodeIgniter instance to load a helper. The helper is ‘ci_url’, which is a copy of the original CodeIgniter URL helper with a few changes that I’m going to explain later. The function current_url() is defined inside this helper.

      public function loginLink()
      {
          $CI = & get_instance();
          $CI->load->helper('ci_url');
          $redirect = current_url();
  
          return wp_login_url()."?redirect_to=$redirect";
      }
  
      public function logoutLink()
      {
          $CI = & get_instance();
          $CI->load->helper('ci_url');
          $redirect = current_url();
  
          return wp_logout_url()."&redirect_to=$redirect";
      }
  

• The next two methods are quite the same. They will return the links for our WordPress blog and for the admin section. This would be useful to link directly to them from our application.

      public function blogLink()
      {
          return get_option('siteurl');
      }
  
      public function adminLink()
      {
          return get_option('siteurl') . "/wp-admin";
      }
  

Changes in CodeIgniter

In the moment that we include wp-load.php, several functions are included with it. So we need to take care with possible conflicts caused by function redefinition. As an example of conflicts, I’m going to use the CodeIgniter URL helper. This helper has the functions site_url() and base_url(), which also exists inside WordPress. So, I just copied the complete helper to the helper folder inside our application. Then I changed the functions that were conflicting, renaming them to ci_site_url() and ci_base_url(). We also need to change where these two functions are used, inside the anchor(), anchor_popup() and redirect() functions. I used the URL helper as an example of the changes needed to make it work. But depending on what you need, you may need to customize different functions.

Conclusion

This integration is not natural and clean, as WordPress and CodeIgniter are obviously not built to work together. But it is quite interesting to be able to create a web application with the possibility of reusing WordPress features. Hope it helps someone. If you have any ideas or comments, leave your message.

When I wrote this article, WordPress 3.2 was not available. So I needed to do some changes inside WordPress to make the integration work. After downloading version 3.2 it became easier to do the integration. So I updated the article accordingly.

Introduction

In this article we’ll create the rating system in four steps:

• Add the comment meta data
• Update the comments template
• Add new CSS styles
• Add new JavaScript
• How to Get the Rating Average (update)

So, let’s begin.

Comment Meta Data

The first thing we need to do is to open our functions.php file and add the following code:

add_action('comment_post','comment_ratings');

function comment_ratings($comment_id) {
    add_comment_meta($comment_id, 'rate', $_POST['rate']);
}

As you can see it’s pretty simple. We’re adding a action to be executed when the comment is posted. Inside the function comment_ratings, we’re adding the new information to the comment meta data. In this case I’m adding the field rate with the value of the field rate that was posted.

Now we need to add the field rate to the comment template.

Comments Template

We need to add the field in two places: where we display the comments and where the visitor enter his comment. As we already have the functions.php file opened, let’s add the following function (it’s the same function from the WordPress Codex, with the additional rate field):

function comment_template($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
        <div id="comment-<?php comment_ID(); ?>">
            <div class="comment-author vcard">
                <?php echo get_avatar($comment,$size='48'); ?>

                <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
            </div>

            <?php if ($comment->comment_approved == '0') : ?>
            <em><?php _e('Your comment is awaiting moderation.') ?></em>
            <br />
            <?php endif; ?>

            <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

            <?php
            $rate = get_comment_meta($comment->comment_ID, 'rate');
            if ($rate[0] <> '') {
                _e('Grade: ');
                echo movie_grade($rate[0]);
            }
            ?>

            <?php comment_text() ?>

            <div class="reply">
                <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
            </div>
        </div>
<?php
}

This function will be used to display the comments list. We added here a call to the get_comment_meta function. It will return an array with the rate information. If it’s empty, we’ll not display anything. If it’s not, then we’ll show it using the following function:

function movie_grade($grade) {
    switch ($grade) {
        case '0':
            $alt = 'Zero - 0 stars';
            break;
        case '1':
            $alt = 'Really bad - 1 star';
            break;
        case '2':
            $alt = 'Bad - 2 stars';
            break;
        case '3':
            $alt = 'Good - 3 stars';
            break;
        case '4':
            $alt = 'Very good - 4 stars';
            break;
        case '5':
            $alt = 'Excellent - 5 stars';
            break;
        default:
            $alt = 'No grade';
            break;
    }

    if (!isset($grade) || $grade == '')
        echo $alt;
    else {
        for ($i = 0; $i < 5; $i++) {
            if ($grade > $i)
                echo '<img src="'.get_stylesheet_directory_uri().'/images/star_on.png" alt="'.$alt.'" title="'.$alt.'" />';
            else
                echo '<img src="'.get_stylesheet_directory_uri().'/images/star_off.png" alt="'.$alt.'" title="'.$alt.'" />';
        }
    }
}

In this function we’re displaying images according to the rate posted by the visitors. Last thing we need to do in order to show the rates in the comments list is in the comments.php file. Find the call to wp_list_comments and add the parameter ‘type=comment&callback=comment_template’. It should look like this:

<?php wp_list_comments('type=comment&callback=comment_template'); ?>

This will display the comments list using the callback function comment_template that we created earlier. The next and last thing we need for the comments template is it to update the comment entry. We need to add a rate field there. Let’s add some image links, to make it more functional.

<div>
    <div class="comment-rating">
        <ul class="star-rating">
            <li><a href="#" title="<?php _e('Zero - 0 stars'); ?>" class="zero-star" onclick="rateClick(0); return false;">0</a></li>
            <li><a href="#" title="<?php _e('Really bad - 1 star'); ?>" class="one-star" onclick="rateClick(1); return false;">1</a></li>
            <li><a href="#" title="<?php _e('Bad - 2 stars'); ?>" class="two-stars" onclick="rateClick(2); return false;">2</a></li>
            <li><a href="#" title="<?php _e('Good - 3 stars'); ?>" class="three-stars" onclick="rateClick(3); return false;">3</a></li>
            <li><a href="#" title="<?php _e('Very good - 4 stars'); ?>" class="four-stars" onclick="rateClick(4); return false;">4</a></li>
            <li><a href="#" title="<?php _e('Excellent - 5 stars'); ?>" class="five-stars" onclick="rateClick(5); return false;">5</a></li>
        </ul>
    </div>
    <?php _e('Your rate'); ?>
    <input type="hidden" name="rate" id="rate" value="<?php echo esc_attr($comment_author_rate); ?>" />
</div>

Next we’ll style the links and add JavaScript to update the hidden input.

New CSS Styles

We’ll create the styles we’ve used in the HTML. These styles will replace the links with images and use a hover effect. I pretty much copied it from Create a Star Rater using CSS. So, the necessary CSS is:

.comment-rating {float:left; width:180px;}
.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{background: url(images/star.png) left -1000px repeat-x;}
.star-rating{position:relative;width:108px;height:25px;overflow:hidden;list-style:none;margin:0;padding:0;
             background-position: left top;}
.star-rating li{display: inline;}
.star-rating a,
.star-rating .current-rating{position:absolute;top:0;left:0;text-indent:-1000em;height:25px;line-height:25px;
                             outline:none;overflow:hidden;border: none;}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{background-position: left bottom;}
.star-rating a.one-star{width:34%;z-index:6;}
.star-rating a.two-stars{width:51%;z-index:5;}
.star-rating a.three-stars{width:68%;z-index:4;}
.star-rating a.four-stars{width:85%;z-index:3;}
.star-rating a.five-stars{width:100%;z-index:2;}
.star-rating .current-rating{z-index:1;background-position: left center;}
.star-rating a.zero-star {width:17%;z-index:8;background: url(images/no_star.png) left top no-repeat;}
.star-rating a.zero-star:hover,
.star-rating a.zero-star:active,
.star-rating a.zero-star:focus {background-position: left center;}
.star-rating a.zero-selected {background-position: left center;}

We defined here a width of 180px for the hole DIV. It’s a quick attempt to align it with the other texts. In Chrome it looks OK, but not in Firefox. You may choose an alternative way to align them. Anyway, you’ll need the following image files:

• star.png
• no_star.png
• star_on.png
• star_off.png

It was possible to use the same files, but I was lazy to update the hole thing… So, after we had created the functions, updated the templates and created the CSS, now it’s time to create the JavaScript.

New JavaScript

We’re going to use jQuery functions, so you’ll need to have it enqueued in your blog. In our js file we have two functions. They may not be optimized, but it works

function clearSelected() {
    $('.star-rating a.zero-star').removeClass('zero-selected');
    $('.star-rating a.one-star').removeClass('current-rating');
    $('.star-rating a.two-stars').removeClass('current-rating');
    $('.star-rating a.three-stars').removeClass('current-rating');
    $('.star-rating a.four-stars').removeClass('current-rating');
    $('.star-rating a.five-stars').removeClass('current-rating');
}

function rateClick(num) {
    clearSelected();
    switch (num) {
        case 0:
            $('.star-rating a.zero-star').addClass('zero-selected');
            $('#rate').val('0');
            break;
        case 1:
            $('.star-rating a.one-star').addClass('current-rating');
            $('#rate').val('1');
            break;
        case 2:
            $('.star-rating a.two-stars').addClass('current-rating');
            $('#rate').val('2');
            break;
        case 3:
            $('.star-rating a.three-stars').addClass('current-rating');
            $('#rate').val('3');
            break;
        case 4:
            $('.star-rating a.four-stars').addClass('current-rating');
            $('#rate').val('4');
            break;
        case 5:
            $('.star-rating a.five-stars').addClass('current-rating');
            $('#rate').val('5');
            break;
    }
}

In the first function we only clear the selected classes. In the second one we add the selected class and set the hidden input with the correct value.

How to Get the Rating Average

This section is an update to this post. Updated in July 27th, 2011.

It is quite easy to calculate the average of ratings posted in your comments. First, we need to add the following function inside our functions.php file:

function get_average_ratings($id) {
    $comment_array = get_approved_comments($id);
    $count = 1;

    if ($comment_array) {
        $i = 0;
        $total = 0;
        foreach($comment_array as $comment){
            $rate = get_comment_meta($comment->comment_ID, 'rate');
            if(isset($rate[0]) && $rate[0] !== '') {
                $i++;
                $total += $rate[0];
            }
        }

        if($i == 0)
            return false;
        else
            return round($total/$i);
    } else {
        return false;
    }
}

This function will get all approved comments for a given post ID and loop through them summing up the total value of the rate field. It will sum up only when the rate field was defined. So, if the user didn’t defined a rate, it will not be calculated. This function will return the average of ratings or will return false if there are no approved comments.
Later you can call this function in your single.php file. You can use it to first verify if there are ratings. If there are ratings, you can use the function movie_grade() to display it properly. The code to use it could be something like this:

<?php (get_average_ratings($post->ID))?movie_grade(get_average_ratings($post->ID)):'Not available'; ?>

Conclusion

That’s all I had to show this time. It’s possible to use similar functions to create any comment entry template. This way you could not only make your blog unique, but also make the discussion unique. Here is a preview of the result (more or less):

Rate Comment Preview

Custom Fields

The WordPress custom fields allows you to add different information to your post. When you use them you are able to place these fields directly in your theme template and give a standard look to your posts even when you have different bloggers. In the past this feature was used to add post thumbnails, but today we can use the Featured Image. But we can use it for different information like, for example, the difficulty level of your tutorial post.

There are two ways of doing this: the standard one and the customized one.

Standard Custom Fields

The standard way of using custom fields are really simple. When you add a new post, you can see after the Excerpt and Send Trackbacks areas a area called Custom Fields. It looks like this:

Standard Custom Fields

As you can see, you’re able to add as many fields as you want. You just have to name them and set their value. Then you may add them to you theme template by using the function get_post_meta($post_id, $key, $single). Here is an example for the difficulty level of your tutorial:

<?php if ( get_post_meta($post->ID, 'difficulty', true) ) : ?>
        Difficulty: <?php echo get_post_meta($post->ID, 'difficulty', true); ?>
<?php endif; ?>

But you can make it simpler to your blog’s user.

Predefined Custom Fields

In your theme’s functions.php file you are able to predefine which are the custom fields you want for your theme. You have different ways to implement this, so I’ll show here one way of doing it. So open your theme’s functions.php file and do the following steps.

Step 1 – Field Definition

We start by defining what fields we’ll have. We can do that by creating a array with the details of each field. Here I’m going to create two fields, the difficulty level and a screen cast link (using the YouTube video ID).

    $theme_metaboxes = array(
       "difficulty" => array (
            "name"      => "difficulty",
            "default"   => "3",
            "label"     => __('Tutorial Difficulty Level', 'mytheme'),
            "type"      => "text",
            "desc"      => __('Enter the difficulty level here. Use only integer numbers from 0 (zero) to 5 (five).', 'mytheme')
        ),
       "screencast" => array (
            "name"      => "screencast",
            "default"   => "",
            "label"     => __('YouTube Screencast', 'mytheme'),
            "type"      => "text",
            "desc"      => __('Enter the YouTube ID here. For example: http://www.youtube.com/watch?v=SuNprTu5Y5c, use only the "SuNprTu5Y5c" value. Use the original studio trailer if possible.', 'mytheme')
        )
    );

As you can see we defined the following values for each field:

• name: field name;
• default: value that should be used as default;
• label: name that is displayed to the user;
• type: type of the HTML input field;
• desc: description shown after the field entry.

Step 2 – Add the Fields to the New Post Page

Now we need to add the necessary HTML to the WordPress New Post page. We’re going to create two new functions and use a new action hook. Here is the code:

    function custom_fields_box_content() {
            global $post, $theme_metaboxes;
            foreach ($theme_metaboxes as $theme_metabox) {
                    $theme_metaboxvalue = get_post_meta($post->ID,$theme_metabox["name"],true);
                    if ($theme_metaboxvalue == "" || !isset($theme_metaboxvalue)) {
                            $theme_metaboxvalue = $theme_metabox['default'];
                    }
                    echo "\t".'<p>';
                    echo "\t\t".'<label for="'.$theme_metabox['name'].'" style="font-weight:bold; ">'.$theme_metabox['label'].':</label>'."\n";
                    echo "\t\t".'<input type="'.$theme_metabox['type'].'" value="'.$theme_metaboxvalue.'" name="'.$theme_metabox["name"].'" id="'.$theme_metabox['name'].'"/><br/>'."\n";
                    echo "\t\t".$theme_metabox['desc'].'</p>'."\n";
            }
    }

    function custom_fields_box() {
            if ( function_exists('add_meta_box') ) {
                    add_meta_box('theme-settings',__('Custom Settings', 'mytheme'),'custom_fields_box_content','post','normal','high');
            }
    }

    add_action('admin_menu', 'custom_fields_box');

In this code we use our array with fields to create the necessary HTML to be used in our admin area, when we create a new post. The result is this:

Improved Custom Fields

Much more user friendly, don’t you think?

Step 3 – Using the Values

The last part is the actual value usage. We need another action hook to add/update/delete our values. So we’ll create another function like this:

    function custom_fields_insert($pID) {
        global $theme_metaboxes;
        foreach ($theme_metaboxes as $theme_metabox) {
            $var = $theme_metabox["name"];
            if (isset($_POST[$var])) {
                if( get_post_meta( $pID, $theme_metabox["name"] ) == "" )
                    add_post_meta($pID, $theme_metabox["name"], $_POST[$var], true );
                elseif($_POST[$var] != get_post_meta($pID, $theme_metabox["name"], true))
                    update_post_meta($pID, $theme_metabox["name"], $_POST[$var]);
                elseif($_POST[$var] == "")
                    delete_post_meta($pID, $theme_metabox["name"], get_post_meta($pID, $theme_metabox["name"], true));
            }
        }
    }

    add_action('wp_insert_post', 'custom_fields_insert');

As you can see we use the WordPress functions to add, update and delete the values according to the fields we’ve created.

In order to use these fields, you can do the same as we did for the standard WordPress custom fields. You can create a new function for that as well. For example, in our screen cast example we could create a function that would show the video only if the user set the value:

function screen_cast($id) {
    if ($id) {
        echo '<div class="youtube">'.
             '<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/'.$id.
             '?fs=1&amp;hl=pt_BR"></param>'.
             '<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>'.
             '<embed src="http://www.youtube.com/v/'.$id.'?fs=1&amp;hl=pt_BR" type="application/x-shockwave-flash" '.
             'allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>'.
             '</div>';
    }
}

With this function we can add a simple function call to our single.php template:

        <?php screen_cast(get_post_meta($post->ID, 'screencast', true)); ?>

And that’s all we need to use custom fields!

Custom Taxonomies

The last thing I’m going to show is the custom taxonomies feature added in WordPress 3.0. This is a powerful feature and is really simple to be used. They work just like post tags so you’re able to use as much values as you want. All you need is a new function and a new action hook in your functions.php file. In the next example I’m adding the custom taxonomy for a list of actors. The necessary code is:

    function create_custom_taxonomies() {
        register_taxonomy('actor', 'post', array(
            'hierarchical' => false, 'label' => __('Actor(s)', 'mytheme'),
            'query_var' => true, 'rewrite' => true));
    }
    add_action('init', 'create_custom_taxonomies', 0);

And that’s it. It’s really simple. This is the result:

Custom Taxonomy

In order to show the values in your single.php template, this is what you need:

                <?php echo get_the_term_list($post->ID, 'actor', __('<p>Actor(s): ', 'mytheme'), ', ', '</p>'); ?>

Conclusion

In this article I showed how to use Custom Fields and Custom Taxonomies. These two “features” let you customize your blog posts and make them unique. Besides, they help you improve WordPress usability by separating information in different fields.

The public methods provided by this class are:

• firstPersonView($map, $curX = 0, $curY = 0, $curAng = 0, $path = “”) - constructor, needs at least the map matrix with the images (there’s an example in the end of the post). You should also provide the X, Y position and the angle (0, 90, 180, 270). The last parameter is the path to the image files.
• checkForward() and moveForward() – check if it’s possible to move forward and the actual move method.
• checkBack() and moveBack() – same thing, but moving backwards.
• checkRight() and moveRight() – same thing, but moving right.
• checkLeft() and moveLeft() – same thing, but moving left.
• checkTurnRight() and turnRight() – same thing, but turning right – changes the angle.
• checkTurnLeft() and turnLeft() – same thing, but turning left – changes the angle.

Download the class with the example: fpv.zip

Example

To instantiate the class you need to provide a matrix variable with coordinates and angles, like this:

$map[X][Y][Angle] = "image";

So, an example with 4 positions would be:

$map[0][1][0] = "1-0.jpg";
$map[0][1][90] = "1-90.jpg";
$map[0][1][180] = "1-180.jpg";
$map[0][1][270] = "1-270.jpg";
$map[1][1][0] = "2-0.jpg";
$map[1][1][90] = "2-90.jpg";
$map[1][1][180] = "2-180.jpg";
$map[1][1][270] = "2-270.jpg";
$map[1][0][0] = "3-0.jpg";
$map[1][0][90] = "3-90.jpg";
$map[1][0][180] = "3-180.jpg";
$map[1][0][270] = "3-270.jpg";
$map[1][2][0] = "4-0.jpg";
$map[1][2][90] = "4-90.jpg";
$map[1][2][180] = "4-180.jpg";
$map[1][2][270] = "4-270.jpg";

We can put the coordinates inside a table to have a graphical description of what this code is doing:

You can see that we have only 4 positions in this example with 16 images, representing each angle of each position. You still need to create an HTML where you will have a form or some links with query strings where you can execute the class methods. Here is the HTML file that comes in the example:

<?php

require_once('fpv.class.php');

// MAP MATRIX
$map[0][1][0] = "1-0.jpg";
$map[0][1][90] = "1-90.jpg";
$map[0][1][180] = "1-180.jpg";
$map[0][1][270] = "1-270.jpg";
$map[1][1][0] = "2-0.jpg";
$map[1][1][90] = "2-90.jpg";
$map[1][1][180] = "2-180.jpg";
$map[1][1][270] = "2-270.jpg";
$map[1][0][0] = "3-0.jpg";
$map[1][0][90] = "3-90.jpg";
$map[1][0][180] = "3-180.jpg";
$map[1][0][270] = "3-270.jpg";
$map[1][2][0] = "4-0.jpg";
$map[1][2][90] = "4-90.jpg";
$map[1][2][180] = "4-180.jpg";
$map[1][2][270] = "4-270.jpg";

if (isset($_POST["current_angle"])) {
    $fpv = new firstPersonView($map, $_POST["current_x"], $_POST["current_y"], $_POST["current_angle"], "images");
} else {
    $fpv = new firstPersonView($map, 0, 1, 0, "images");
}

if($_POST['go-forward']) {
    $fpv->goForward();
} else if($_POST['go-back']) {
    $fpv->goBack();
} else if($_POST['go-left']) {
    $fpv->goLeft();
} else if($_POST['go-right']) {
    $fpv->goRight();
} else if($_POST['turn-right']) {
    $fpv->turnRight();
} else if($_POST['turn-left']) {
    $fpv->turnLeft();
}

?>
<html>
    <head>
        <title>First Person View Class - Example</title>
    </head>
    <body>
        <p>Please go to
            <a href="http://oscardias.com/php/php-class-first-person-view/">http://oscardias.com/php/php-class-first-person-view/</a>
            if ou need more info.
        </p>
        <form name="movements" action="example.php" method="post">
            <input type="submit" name="turn-left" value="Turn Left" <?php echo ($fpv->checkTurnLeft())?"":"disabled"; ?>/>
            <input type="submit" name="go-left" value="Move Left" <?php echo ($fpv->checkLeft())?"":"disabled"; ?>/>
            <input type="submit" name="go-forward" value="Move Forward" <?php echo ($fpv->checkForward())?"":"disabled"; ?>/>
            <input type="submit" name="go-back" value="Move Back" <?php echo ($fpv->checkBack())?"":"disabled"; ?>/>
            <input type="submit" name="go-right" value="Move Right" <?php echo ($fpv->checkRight())?"":"disabled"; ?>/>
            <input type="submit" name="turn-right" value="Turn Right" <?php echo ($fpv->checkTurnRight())?"":"disabled"; ?>/>
            <!-- BEGIN IMPORTANT HIDDEN INFO -->
            <input type="hidden" name="current_x" value="<?php echo $fpv->currentX; ?>" />
            <input type="hidden" name="current_y" value="<?php echo $fpv->currentY; ?>" />
            <input type="hidden" name="current_angle" value="<?php echo $fpv->currentAngle; ?>" />
            <!-- END IMPORTANT HIDDEN INFO -->
        </form>
        <img id="view" src="<?php $fpv->currentView() ?>" />
    </body>
</html>

Now the demo is online. You can check it in: http://oscardias.com/other/fpv/example.php

Notes

This is the first version of the class. I did’n have time to detail it too much, but if you’re interested in it, leave your comment. I’ll dedicate more time to it .

This class has been approved in the PHPClasses.org website with a notable package notification. The direct link to the package is http://www.phpclasses.org/package/6460.html.

Introduction

Recently I wrote the post Adding Share Buttons for Twitter, Facebook, Buzz and Others, where I explained how to create sharing buttons for some social media sites. But when I wrote that post, there was no official solution provided by Twitter itself. Now Twitter has made available their own code for this. So let’s see how it works.

Code

It’s quite simple and can be obtained in the following address Twitter / Tweet Button. Let me make it simpler and show the necessary code:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://yourdomain.com" data-text="Share Text" data-count="vertical" data-via="oscardias">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

As you can see we can customize the following information:

• data-url: link to be shared. If you delete this property, the page link will be shared by default. Twitter will also use their own URL shortener, so you don’t have to worry about that.
• data-text: text to be shared. If you delete this property, the page title will be shared by default.
• data-count: button style. I can contain the values: vertical, horizontal or none. The “vertical” value will show the counter above the button. The “horizontal” value will show the counter next to the button. And the value “none” will show only the button, without the counter.
• data-via: Twitter’s username to be reshared.

You can also change the button text by replacing the text inside the link tags

Conclusion

This is all we need to add the official Twitter button. A lot of people is already changing Tweetmeme button for Twitter’s one, but the decision is up to you. Thanks for visiting.

If you want to catch up with the current status of our theme, please download it here.

Introduction

This is the sixth and last part of my WordPress theme creation series. Here is a list of all articles from the series:

Creating a WordPress Theme (Part 1): Photoshop
Creating a WordPress Theme (Part 2): Introduction
Creating a WordPress Theme (Part 3): Header
Creating a WordPress Theme (Part 4): Home Page
Creating a WordPress Theme (Part 5): Pages and Posts

Today I’m only going to finish our footer and create some additional styles. Later I’m also going to describe some plugins I use.

Footer

Currently this is how our footer looks:

Our footer before our changes

So, in order to change this, let’s open the footer.php file.

1. Update the package information: we’ve been using @subpackage MyTheme_Theme.
2. Now replace all occurrences of ‘kubrick’ with ‘mytheme’.
3. Remove the <hr> on the beginning.
4. Let’s add a <div class=”container_12″> after our <div id=”footer”>.
5. Inside the previous created DIV we’re going to add two DIV’s. First, let’s add the links to our blog floated left. Add the following code:

           <div class="floatleft">
               <ul>
                   <li class="page_item first_page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home', 'oscardias'); ?>"><?php _e('Home', 'oscardias'); ?></a></li>
                   <?php wp_list_pages('sort_column=post_title&title_li=');?>
   
               </ul>
           </div>
   

6. Next, we’re going to add some info about our blog and theme floated and aligned  right. Add the following code:

           <div class="floatright alignright">
               &copy; 2010 <a href="<?php echo get_option('home'); ?>/">Oscar Dias</a>
               <br /><?php printf(__('%1$s is powered by %2$s', 'oscardias'), get_bloginfo('name'),'<a href="http://wordpress.org/">WordPress</a>'); ?>
   
               <br /><?php printf(__('%1$s and %2$s', 'oscardias'), '<a href="' . get_bloginfo('rss2_url') . '">' . __('Entries (RSS)', 'oscardias') . '</a>', '<a href="' . get_bloginfo('comments_rss2_url') . '">' . __('Comments (RSS)', 'oscardias') . '</a>'); ?>
   
           </div>
   

7. Finish it by adding a <div class=”clear”></div> after you close the <div class=”container_12″>.

Really easy, Here is the final code:

<?php
/**
 * @package WordPress
 * @subpackage MyTheme_Theme
 */
?>

<div id="footer" role="contentinfo">
    <div class="container_12">
        <div class="floatleft">
            <ul>
                <li class="page_item first_page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home', 'oscardias'); ?>"><?php _e('Home', 'oscardias'); ?></a></li>
                <?php wp_list_pages('sort_column=post_title&title_li=');?>

            </ul>
        </div>
        <div class="floatright alignright">
            &copy; 2010 <a href="<?php echo get_option('home'); ?>/">Oscar Dias</a>
            <br /><?php printf(__('%1$s is powered by %2$s', 'oscardias'), get_bloginfo('name'),'<a href="http://wordpress.org/">WordPress</a>'); ?>

            <br /><?php printf(__('%1$s and %2$s', 'oscardias'), '<a href="' . get_bloginfo('rss2_url') . '">' . __('Entries (RSS)', 'oscardias') . '</a>', '<a href="' . get_bloginfo('comments_rss2_url') . '">' . __('Comments (RSS)', 'oscardias') . '</a>'); ?>

        </div>
    </div>
    <div class="clear"></div>
</div>
		<?php wp_footer(); ?>
</body>
</html>

This is the result:

Footer without the necessary styles

We still need to create our last styles.

Styles

Let’s open our styles.css file.

1. First of all, download this image. We’re going to use it as our background image.
2. Now let’s style the footer DIV.

   #footer {
       background: #fff url('images/footer.jpg') repeat-x top;
       margin: 0 auto;
       padding-top:100px;
       padding-bottom:20px;
   }
   

3. Let’s continue and create the styles for the footer lists (UL and LI).

   #footer ul {
       list-style: none;
       margin:0;
       padding:0;
   }
   #footer ul li {
       float:left;
       margin:5px 0 5px 5px;
       padding-right:5px;
       border-right: 1px solid #000;
   }
   

4. We’re almost there. But we still need to create the styles to align everything. So let’s create different align classes.

   .floatleft {
       float:left;
       margin-left: 10px;
   }
   .floatright {
       float:right;
       margin-right: 10px;
   }
   .alignleft {
       text-align: left;
   }
   .alignright {
       text-align: right;
   }
   .center {
       text-align: center;
   }
   

5. Now let’s add some additional classes. We’re going to style the shadows and the images.

   .box-shadow {
       box-shadow: 3px 3px 3px #000;
       -moz-box-shadow: 3px 3px 3px #000; /* for Firefox 3.5+ */
       -webkit-box-shadow: 3px 3px 3px #000; /* for Safari and Chrome */
   }
   .text-shadow {
       text-shadow: #000 2px 2px 2px;
   }
   img.aligncenter, img.center {
       display: block;
       margin-left: auto;
       margin-right: auto;
   }
   .frame {
       padding:5px;
       background: #d2d2d2;
       border: 2px solid #808080;
   }

And that’s it. We’ve finished the development of our theme. I didn’t covered all files, but the remaining ones should follow the same ideas we’ve been using during these series.

Now let me show what plugins I’m using.

Plugins

Here is a quick list about the plugins I’m using with the explanation.

AddToAny: Share/Bookmark/Email Button

Plugin for sharing/bookmarking. Really useful and complete. It only takes one button to enable your readers to share over lot’s of different social medias.

Akismet

This one comes with the default installation of WordPress. It will filter comments made in your website and check whether their spam or not automatically. This way you don’t need to check each and every comment made in your blog.

All in One SEO Pack

Another great plugin that improves your blogs SEO capabilities.

FD Feedburner Plugin

If you use Feedburner, this one is mandatory. It will redirect all feeds to your Feedburner feed.

Google Analytics for WordPress

Also, if you use Google Analytics, this plugin will add analytics code automatically for you.

Google XML Sitemaps

This plugin will generate sitemaps automatically for your website. Sitemaps are used by search engines to index your blog, so it’s quite important.

RatenTweet

This one adds another way to share your posts in Twitter using a quick rating system.

SyntaxHighlighter Evolved

Plugin for syntax highlighting. It will take your code entries and make them look pretty.

TweetMeme Retweet Button

Another Twitter sharing service. It’s used all over the web.

Conclusion

So we’ve came to the end of our series about WordPress themes. I’ll write about WordPress again, but not in this series. If you have any comments or if you want to see something specific here, leave your message and I’ll answer as soon as possible

Download the last version of our theme here (82 Kb).

Other Posts from the Series
Creating a WordPress Theme (Part 1): Photoshop
Creating a WordPress Theme (Part 2): Introduction
Creating a WordPress Theme (Part 3): Header
Creating a WordPress Theme (Part 4): Home Page
Creating a WordPress Theme (Part 5): Pages and Posts

Introduction

I’m sure you have already seen some of the icons displayed in this post. And you probably use some of these services. But do you know how to add a share link to your website the proper way? That’s what I’m going to show here. I used the official references to find the code examples I’m going to show here.

Twitter

Twitter is one of the most famous social media websites today. Unfortunately I didn’t found the official “tweet” button with tweet count. But, in this case, we have Tweetmeme, which is widely used.

Reference: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/

Here is a simple example with the big size button. You can see that you can customize the source and the URL. You should set a short URL or use the tweetmeme_service parameter. You can also use the compact button adding the code “tweetmeme_style = ‘compact’;“.

 <script type="text/javascript">
    tweetmeme_source = 'username';
    tweetmeme_url = 'http://yourdomain.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

An additional feature is the ability to change the tweet text. By default it will use the page title, but if you want to change it, you have to add the following:

<meta name="tweetmeme-title" content="Different Text" />

Facebook

Facebook is also very famous. And has great developer tools. So it’s really easy to create a share button for it. You can customize it and get the code in the following website:

Reference: http://www.facebook.com/share/

Here is an example for the box size. It will use the page title and the page URL as the values to be posted. In this case we don’t need to limit the size to 140 chars.

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

If you want, you can use ‘type=”button_count“‘ for the small button. You can also customize the title and URL to be shared by changing the HREF value like this: http://www.facebook.com/sharer.php?u=url&t=text

Google Buzz

Google Buzz is one of the most recent social medias. It was developed by Google as a response to Twitter. It has some nice resources for sharing.

Reference: http://code.google.com/apis/buzz/buttons_and_gadgets.html

One of the most customizable resource uses JavaScript together with HTML5 tags. Here is an example using the normal size button.

<a href="http://www.google.com/buzz/post"
    class="google-buzz-button"
    title="Google Buzz"
    data-message="Message Text"
    data-url="http://yourdomain.com"
    data-locale="en"
    data-button-style="normal-count"></a>
    <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

You can use ‘data-button-style=”small-count”‘ for the small button with counter.

StumbleUpon

StumbleUpon has one of the best ways to create the button code. All you have to do it check this website:

Reference: http://www.stumbleupon.com/buttons/

From there you can select the button style and if you want to add it to existing platforms or your own website. The code for the bigger button is this:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=http://yourdomain.com"></script>

You may remove the ‘&r=http://yourdomain.com‘ if you want. The JavaScript will get the current page URL in this case.

Reddit

Reddit has nice buttons available. With small size, big size and even with the ET

Reference: http://www.reddit.com/buttons/

In this page you can choose your preferred option and just check the code. It also have great customization options, all done via JavaScript. The basic code for a big button is this:

<script type="text/javascript" src="http://reddit.com/static/button/button2.js"></script>

If you change to button1.js, you’ll have a small button. If you change to button3.js you’ll have their ET logo. And you can customize it with the following options:

<script type="text/javascript">reddit_url='[URL]'</script>
<script type="text/javascript">reddit_target='[COMMUNITY]'</script>
<script type="text/javascript">reddit_title='[TITLE]'</script>
<script type="text/javascript">reddit_newwindow='1'</script>
<script type="text/javascript">reddit_bgcolor='[COLOR]'</script>
<script type="text/javascript">reddit_bordercolor='[COLOR]'</script>

Digg

Digg is another social media that has nice buttons. It’s a little bit different though. It’s based in one basic code, and the details are customized directly in the A tag.

Reference: http://about.digg.com/button

This is the basic JavaScript code:

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

In order to place the button, you have to add the following tag where you want:

<a class="DiggThisButton DiggMedium"></a>

All options should be added to this last tag. For example, to show a small button you can simply change the class to “DiggThisButton DiggCompact“. If you want to customize the URL, you can use the following:

<a class="DiggThisButton DiggMedium" href="http://yourdomain.com"></a>

Conclusion

In this quick post we saw some social media buttons. I chose the ones that have the counter because they provide a instant feedback about your post/page popularity. If you want to implement them, it’s a good idea to check the references I mentioned.