Oscar Dias - Personal Blog

Integrating WordPress with CodeIgniter

Oscar Dias — Sat, 02 Jul 2011 15:07:32 +0000

After a long time since my last post, I’m going to start writing again. My focus on the next articles will be CodeIgniter. The first thing I want to show is how to integrate CodeIgniter with WordPress. More precisely, I’m going to show how to use WordPress users inside CodeIginter. The motivation for this is that you won’t need to handle user authentication inside your application.

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:


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.

How to Add a Rate Field to WordPress Comments

Oscar Dias — Tue, 28 Sep 2010 21:39:43 +0000

In this article I’ll show you how to add a rating field to your WordPress comments. We’ll work with PHP to enable the new field and show it in the comments template. Also, we’re going to do some styling in order to give a nice look to the rate system. Finally we’ll also create a small JavaScript using jQuery to enable it.

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; ?>
     id="li-comment-">
        
            
                

                %s says:'), get_comment_author_link()) ?>
            

            comment_approved == '0') : ?>
            
            

            

            

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

            

            
                 $depth, 'max_depth' => $args['max_depth']))) ?>
            
        

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 '';
            else
                echo '';
        }
    }
}

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:


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.

    
        
            0
            1
            2
            3
            4
            5
        
    
    
    


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:
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

Adding Custom Information to WordPress Posts

Oscar Dias — Sun, 12 Sep 2010 00:07:31 +0000

In this article I’m going to show how to add custom information to your WordPress posts. We’ll start with the standard custom fields, very useful if you’re the theme developer and the only blogger. Next I’ll show you how to create your additional fields. They’re work pretty much like the custom fields, but you can add a name and description to them, so your theme users know what to write there. The last thing I’m going to show is the custom taxonomies added in WordPress 3.0.

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:

ID, 'difficulty', true) ) : ?>
        Difficulty: ID, 'difficulty', true); ?>

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".'';
                    echo "\t\t".''.$theme_metabox['label'].':'."\n";
                    echo "\t\t".'
'."\n";
                    echo "\t\t".$theme_metabox['desc'].''."\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 ''.
             ''.
             ''.
             ''.
             '';
    }
}

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

        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:

                ID, 'actor', __('Actor(s): ', 'mytheme'), ', ', ''); ?>

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.

PHP Class: First Person View

Oscar Dias — Sat, 21 Aug 2010 18:30:02 +0000

This article is about a small PHP Class that I wrote this week. The idea was to create a first person website for a virtual tour or a street view functionality. So I created the First Person View Class which allows you to move in four directions with four different angles through a map matrix loaded with images.

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:

2	X	4-0.jpg 4-90.jpg 4-180.jpg 4-270.jpg
1	1-0.jpg 1-90.jpg 1-180.jpg 1-270.jpg	2-0.jpg 2-90.jpg 2-180.jpg 2-270.jpg
0	X	3-0.jpg 3-90.jpg 3-180.jpg 3-270.jpg
	0	1

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:

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();
}

?>

    
        First Person View Class - Example
    
    
        Please go to
            http://oscardias.com/php/php-class-first-person-view/
            if ou need more info.
        
        
            checkTurnLeft())?"":"disabled"; ?>/>
            checkLeft())?"":"disabled"; ?>/>
            checkForward())?"":"disabled"; ?>/>
            checkBack())?"":"disabled"; ?>/>
            checkRight())?"":"disabled"; ?>/>
            checkTurnRight())?"":"disabled"; ?>/>
            
            
            
            
            
        
        currentView() ?>" />

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.

Tip: How to Use the Official Twitter Tweet Button

Oscar Dias — Sat, 14 Aug 2010 19:38:55 +0000

Recently I showed here how to create sharing buttons for different social media. At the time there was no official Twitter code for this purpose. But this week Twitter released it’s own Tweet Button. So I’ll quickly show how to use it.

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:

Tweet

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.

Creating a WordPress Theme (Part 6): Footer

Oscar Dias — Fri, 23 Jul 2010 21:29:12 +0000

This is the last part of the series. We’ve already seen the design creation, an introduction about the WordPress platform and the coding and styling of the entire theme except the footer. So, in this last post, we’re going to do the footer and, to finish our blog, let’s also see some plugins. The footer is pretty simple and we’re going to add some additional styles that we’ve been using during the series.

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.

Update the package information: we’ve been using @subpackage MyTheme_Theme.
Now replace all occurrences of ‘kubrick’ with ‘mytheme’.
Remove the
on the beginning.
Let’s add a
after our
.

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:

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

        
            © 2010 Oscar Dias
            
WordPress'); ?>

            
' . __('Entries (RSS)', 'oscardias') . '', '' . __('Comments (RSS)', 'oscardias') . ''); ?>

Finish it by adding a
after you close the
.

Really easy, Here is the final code:




    
        
            
                
                

            
        
        
            © 2010 Oscar Dias
            
WordPress'); ?>

            
' . __('Entries (RSS)', 'oscardias') . '', '' . __('Comments (RSS)', 'oscardias') . ''); ?>

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.

First of all, download this image. We’re going to use it as our background image.

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;
}

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;
}

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;
}

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

Adding Share Buttons for Twitter, Facebook, Buzz and Others

Oscar Dias — Wed, 07 Jul 2010 03:39:25 +0000

Today I was working on a project and I had to search for some share functionalities. I wanted to get the original code from the original social media websites and not a third party hack or something like that. So I found codes for Twitter, Facebook, Google Buzz, StumbleUpon, Reddit and Digg. The only one that’s not from the original website is Twitter, so I used Tweetmeme instead.

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’;“.

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:

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.

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.

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:

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

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:

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:

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:

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

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:

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.

Agile Brazil 2010 – Brazilian Conference on Agile Methods

Oscar Dias — Fri, 02 Jul 2010 02:47:34 +0000

Last week took place in Porto Alegre, Brazil, the Brazilian Conference on Agile Methods – Agile Brazil 2010. The event was a great opportunity to see presentations about different methods and experiences related to the agile community. I was there and I want to write a little bit about what I saw.

About the Conference

The conference was a great initiative by the agile community and was a success. The keynotes of the event were presented by some of the well known names of the agile community: Martin Fowler (from ThoughtWorks), Philippe Kruchten (professor of software engineering at the University of British Columbia) and Klaus Wuestefeld (Extreme Programming pioneer in Brazil). There was a total of 820 subscribers and 188 submissions (papers and presentations).

Main Auditorium

I’m going to write a little bit about it. I wasn’t able to be in all presentations at once, of course, so I’ll just go through some of the presentations I attended.

Martin Fowler (Keynote)

Martin Fowler (http://martinfowler.com/) gave three different talks. He started with “The Essence of Agile”, in which he pretty much gave an overview about Agile. He have some articles in his website related to this presentation:

The New Methodology: http://martinfowler.com/articles/newMethodology.html
Is Design Dead?: http://martinfowler.com/articles/designDead.html

Later on he continued his keynote talking about Technical Debt. He showed us a quadrant to explain it. Links from his website:

Technical Debt: http://www.martinfowler.com/bliki/TechnicalDebt.html
Technical Debt Quadrant: http://www.martinfowler.com/bliki/TechnicalDebtQuadrant.html

In his third talk he spoke about “Continuous Integration and Delivery”. Again, here is an article he wrote on the topic:

Continuous Integration: http://martinfowler.com/articles/continuousIntegration.html

Alisson Vale – Kanban: Em Busca de um Ritmo Sustentável

In a free translation into English, it’s something like “Kanban: Searching for a Sustainable Rhythm”. I had already watched a speech from Alisson at the Ágiles 2009 (“Kanban Development and the Paradigm of Flow”) and I found it very interesting. So this year I chose to see his presentation again and it was worth it. As my first internship was at a Production Engineering company, I’ve always heard about Kanban and it’s really good to see it applied to software development.

He talked the background of Kanban – going back to Taiichi Ohno – and explained the WIP (work in progress) influence over the lead time. As he continued, he went through the core concepts of Kanban and additional techniques like MMF (Minimum Markable Feature) and Swimlanes.

Don’t forget to check out his blog at http://alissonvale.com/.

David Hussman – Products and People over Process and Dogma

David Hussman is the owner of DevJam, a company focused on “Coaching & Developing Agility”. He won the Gordon Pask Award in 2009 for his contribution to the agile community.

David’s speech started with comparison between product and process. He asked us to write three words to describe our process and think how these words related to our product. He suggested a few books: The Black Swan (by Nassim Nicholas Taleb), Freakonomics (by Levitt & Dubner), Blink (by Malcomn Gladwell) and The Checklist Manifesto (by Atul Gawande).

He continued his talk mentioning the different types of problems and why software development is a complex problem. With this in mind he spoke about agility and complexity going to the process of Discovery (What & Why) -> Delivery (How & When). In the middle we find the “Pivot” and the continuous product learning.

In the end he showed us the Dude’s Law which basically is Value = Why / How. Another great speech by David Hussman.

James Lewis – Agile Adoption Anti-Patterns

On the second day of presentations I started watching this presentation about the anti-patterns to agile adoption. James Lewis works for ThoughtWorks and has a great experience introducing agile in large organizations.

The first part of his presentation was focused on enumerating the anti-patterns and explaining them. Things like “Flaccid Technical Lead”, “Novice in Charge”, “Change Everything at Once” and “Agile Adapter” made me remember some things… But, continuing with the presentation, James showed us the root causes of the anti-patterns and why it’s so hard to change.

Next he showed some ideas of what should be done when we aim at individual change and change to teams. He talked about the Dreyfus Model of Skill Acquisition and how it applies to pair programming and also talked about the Conway’s Law. He ended with two phrases: “Do the wrong thing righter” and “Do the right thing”.

Klaus Wuestefeld – Learning and Coolness – Beyond XP (Keynote)

Klaus Wuestefeld is a pioneer in the extreme programming in Brazil. He has already done pair programming with well know names like Kent Beck and Scott Ambler. In his presentation he spoke about how he is doing XP today.

He began his presentation speaking about his background. He created Prevayler and other open source initiatives. Later he discussed several characteristics of the software development process, like the fact that software is a fractal, and the agile methods. After this overview he talked about the values of the software development and why it should be a balance between Learning and Coolness.

To finish his talk, he talked about the practices he thinks that matter most. He mention that he doesn’t use Scrum, Iterations, Issue Tracking, Continuous Build and Branches. On the other hand, he adopts several practices like Planning on Demand, Continuous Deployment, Cleaners and Pair Programming, just to mention some of them.

Conclusion

This event was a great opportunity for the agile community. We saw some of the big names of agile here. I didn’t wrote too much here, because I think that the presentations are’t freely distributed. So, if you’re interested in the topic, you should search for some of the names I wrote here. Besides, there are a lot of events on the topic around the world. I also want to leave here a big thanks to the organization committee. Thanks for visiting!

Creating a WordPress Theme (Part 5): Pages and Posts

Oscar Dias — Tue, 22 Jun 2010 21:41:04 +0000

In this part of the series we’re going to create the templates used for pages and posts. The page template is very simple because it only has the basic structure of our design. The post template has more details, which makes it more complex. In order to complete the post page, we’re also going to do the comments template.

The current file with the current theme can be downloaded here.

Introduction

We start this part of the series with our theme partially done. We have already created the design, started with the CSS and coded most of our home page. Now we’re going to code the templates for pages and single posts. We want both templates to look like our home page, so it’s the same structure we’ve already seen.

At the end of this post you can find the previous parts of the series and catch up with the development.

Pages

If you create a page and check it with our current page template, this is what you’re going to see:

Single page before corrections

We’re going to fix this by updating the page template. As we used the Default theme to build our theme, we’re just going to update the PHP file. Most of the needed CSS is already defined. The images aren’t styled yet, but we’re going to do it later, for the single posts template.

page.php

Open the page.php file.
Update the package information: replace @subpackage Default_Theme with @subpackage MyTheme_Theme.
Now replace all occurrences of ‘kubrick’ with ‘mytheme’.
Let’s do the same we did for our home page and replace the
with the 2 DIV’s that will define our structure:
```
    
```
Remove the call to the wp_link_pages() function. This function is used to split the page in different pages using the “Page-Link” tag ().
Now just close the DIV created in step 4, right after the get_sidebar() function, and add a DIV with “clear” class after the function call.

Quite simple. The final code for the page.php file is the following:



	

		
		
		
			
				' . __('Read the rest of this page »', 'mytheme') . ''); ?>

			
		
		
	', ''); ?>

With this little update, this is the result:

Single page template

Posts

Before we start with the coding of the single post display we can see something similar to what we had for the pages:

Single post before changes

Once again the problem is that we haven’t added the 960.css classes. So let’s start with the PHP and do this. We’ll continue with some changes in the CSS.

single.php

Change the package information to fit our theme name.
Update the “text domain” replacing all occurrences of ‘kubrick’ with ‘mytheme’.
Replace the
with 2 DIV’s with the 960.css classes:
```
    
```
Before we call the function the_content() add a call to the post thumbnail function.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}

the_content(); ?>

Now we’re going to add a facebook Like button. So, add the following code after you call the function the_content():

                ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light"
                        scrolling="no"
                        frameborder="0"
                        allowTransparency="true"
                        class="facebooklike">

Right after the functions wp_link_pages() and the_tags() we have the post metadata. Move it outside the
, after the
that closes the entry content DIV. Also remove the class from the metadata paragraph because we already used this class in the home page.
Before we call the get_footer() function, add the sidebar and a clear with the following code:
```
    
```

The complete code of the single.php file is this:



    

	

		
			
			
		

		 id="post-">
			

			
                

                ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light"
                        scrolling="no"
                        frameborder="0"
                        allowTransparency="true"
                        class="facebooklike">

				 '' . __('Pages:', 'mytheme') . ' ', 'after' => '', 'next_or_number' => 'number')); ?>
				' . __('Tags:', 'mytheme') . ' ', ', ', ''); ?>

			
				
					
						post_date) - (60*120)); $time_since = sprintf(__('%s ago', 'mytheme'), time_since($entry_datetime)); */ ?>
						
						RSS 2.0 feed.", "mytheme"), get_post_comments_feed_link()); ?>

						
							leave a response, or trackback from your own site.', 'mytheme'), trackback_url(false)); ?>

						
							trackback from your own site.', 'mytheme'), trackback_url(false)); ?>

Now let’s go to the CSS.

style.css

First we’ll define the .navigation class. We need some margin at the top and bottom.
```
.navigation {
    overflow:hidden;
    margin-top: 10px;
    margin-bottom: 15px;
}
```

Next we’ll define the images with captions. Let’s align the text, add a gray border and a box-shadow (CSS3 property – only for modern browsers).

.wp-caption {
    text-align: center;
    padding-top: 4px;
    margin: 10px auto;
    border: 1px solid #808080;
    -moz-box-shadow: 2px 2px 2px #555; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 2px #555; /* for Safari and Chrome */
}

Continue centering the image and defining the caption size.

.wp-caption img {
    margin-left: auto;
    margin-right: auto;
    border:0;
}
.wp-caption p.wp-caption-text {
    font-size: 0.8em;
    padding-top: 5px;
    margin: 0;
}

Let’s finish it defining the size of the facebook Like IFRAME.

.facebooklike {
    border:none;
    overflow:hidden;
    width:450px;
    height:40px;
}

Comments

We’ve coded the single post template, but we still need to code the comments template in order to finish it.

comments.php

First, replace all occurrences of ‘kubrick’ with ‘mytheme’.
Then add the class “text-shadow” to the comments INPUT tag.

Few changes in the PHP file, but a lot more in the CSS file.

style.css

Let’s start with the .nocomments class. We need to align the text and add some margin.
```
.nocomments {
    text-align: center;
    margin: 10px;
    padding: 0;
}
```

Now we have to define the comment list. Add a dotted green border and remove the list style.

.commentlist {
    padding: 0;
    text-align: justify;
}
.commentlist li {
    font-weight: bold;
    margin: 15px 0 0;
    padding: 5px 5px 10px 10px;
    list-style: none;
    border: 1px dotted #008800;
}

Float the avatar image to the right and add a gray border.

.commentlist li .avatar {
    float: right;
    border: 1px solid #808080;
    padding: 2px;
    background: #d2d2d2;
}

Each comment have a class to indicate if it’s odd or even, so let’s define different background to each of them.
```
.commentlist li.odd {
    background: #f6f6f6;
}
.commentlist li.even {
    background: #fff;
}
```

As we may have comment’s replys, we need to style lists inside lists.

.commentlist li ul li {
    margin-right: -5px;
    margin-left: -15px;
}
.commentlist li.depth-2, .commentlist li.depth-3, .commentlist li.depth-4, .commentlist li.depth-5 {
    background: transparent;
}
.commentlist li.parent {
    padding-bottom: 0;
}

Now we need to style the comment’s paragraphs and the comment’s metadata::

.commentlist p {
    font-weight: normal;
    line-height: 1.5em;
    margin: 10px 5px 10px 0;
}
.commentmetadata {
    margin: 5px 0;
}

We’ll finish by styling the comment’s form.

#commentform {
    margin: 5px 10px 0 0;
}
#commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
}
#commentform textarea {
    width: 100%;
    padding: 2px;
}
#commentform #submit {
    margin: 0 0 5px auto;
    float: right;
    background: #006600;
    border:1px solid #008800;
    color:#fff;
    font-weight: bold;
    cursor: pointer;
}
#commentform p {
    margin: 5px 0;
}
#respond:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

With the last changes we have also finished our single post page. Here is the result:

Single post

Conclusion

With this post we have finished the main templates of our theme. Very simple changes, similar to what we’ve done for our home page. The theme is almost 100% functional. There are some missing templates, like links.php, archive.php and archives.php, that are easily updated doing the similar changes as we’ve done for the page.php file. For this reason, I’m not going to show these templates here. It’s just a repetition of what we’ve done.

Download our theme with the changes we made in this post here (76 Kb).

Next week I plan to finish these series about the WordPress theme creation. We’ll see the footer, some additional styling and the widgets I use. Thanks for the visit and don’t forget to come back for the last part.

Creating a WordPress Theme (Part 4): Home Page

Oscar Dias — Mon, 07 Jun 2010 11:02:29 +0000

As we continue with our theme’s development, I’ll show you in this article what changes we need in our index.php. So we’ll continue changing the files we copied from the Default theme and we’ll create new CSS styles. In order to complete the main part of our home page, we’ll also prepare our sidebar and add some functions to our theme.

If you didn’t read the previous article, click here to download our theme’s files.

Introduction

In the previous article we copied the Default theme (which comes with WordPress 2.9) and started our development by changing its header (header.php). We also defined different styles in the style.css. Today we’ll continue our development by coding our home page and the index.php file.

So far this is how our theme looks like:

Our theme with the header

As you can see we have everything ready until our menu. The post title appears next to the menu. Now we’re going to fix this.

PHP Development

Please open the index.php file from our theme (wp-content/mytheme). The code is the original one from the Default theme, so let’s do the necessary changes. Besides this file, we’ll also create some functions and correct our sidebar.

As we’re using the 960.css (960 Grid System) we need to insert our content in a new container. The container will have 12 columns, 8 columns for the main content and 4 columns for the sidebar (this will be defined inside sidebar.php). So, the structure of our index.php will be:

Home Page

As we did the last time, change the subpackage information at the first lines: replace @subpackage Default_Theme with @subpackage MyTheme_Theme
In order to speed thing up, also replace all occurrences of ‘kubrick’ with ‘mytheme’. This will update the default text domain for our own text domain which will be used for translation later.
Now replace also the
with 2 div’s which will define our structure:
```
    
```
Inside the tag
we’ll change the post information. We’ll include the author, the date and the number of commetns:
```
     
```

The next step is to replace the simple call for the function the_content() – which shows the post content, of course – with another code that will also show the post’s thumbnail:

Now we need to remove the number of comments from the post metadata paragraph. Besides, we’ll also add a “clear” DIV before the metadata because we’re going to use float for the thumbnail and the “clear” will force the metadata into the next line. The code will look like this:


'); ?>

Close the DIV we created in step 3, but put the get_sidebar() function inside it. Also add another “clear” after this function.

The complete code for the index.php file is the following:



    

	

		

			 id="post-">
				
				     

				
                                    
				

                                
				'); ?>

If you go to your browser and check your website you’ll see a fatal error. That’s because we used the thumbnail functions without enabling it in our theme. Therefore we’ll need to do that by changing our functions.php.

Creating the Functions

Open the functions.php file and remove all the content.

As we did for all the PHP files, insert the package information for our theme.
Right after that we’ll add the function that will be in charge of loading our text domain. First we have to add the function using add_action() and later we add the function itself:
```
add_action ('init','mytheme_init');

function mytheme_init (){
    load_theme_textdomain('mytheme', get_template_directory());
}
```
The next step is enabling the thumbnails by adding support in our theme. We’ll also define the thumb’s size. in our case it will have a width of 125 pixels, without constraints for the height.
add_theme_support( ‘post-thumbnails’, array( ‘post’ ) );
set_post_thumbnail_size( 125, 9999 );

Now we’ll register our sidebar and define the tags used inside it.

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '',
		'after_title' => '',
	));
}

If you go to your browser again, you’ll see that the theme is working again.

Sidebar

Let’s finish the PHP part of this post updating the file sidebar.php. As it’s a small file, let’s simply remove all the content and add the following:

Here we define the size of 4 columns by using grid_4. We used here the dynamic_sidebar() function to check if the widgetized sidebar is enabled. In case it’s not enabled we’ll show only the blog archives.

This is how our theme looks before we add the new styles:

Theme before the new styles

So now let’s go to our CSS.

Style Definition in the CSS

Open the style.css file from our theme. First we’ll add the index page styles and later the sidebar ones.

Index Page

Let’s start with the

. We’ll define it with a white background, green (#008800) border with a border-radius. We’re going to define margin and padding too.

#main {
    background-color: white;
    border: 2px solid #008800;
    border-radius:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 32px auto;
    padding: 20px 0;
}

Next, we’ll define the font details for the post entries.

.entry {
    font-size: 1.4em;
    text-align: justify;
    line-height: 1.5em;
}

Now we have to add the different sizes for the headers. We’ll also add a border on the top of the header in order to have a better separation among sections.

.entry h1, .entry h2, .entry h3, .entry h4 {
    color: #000;
    border-top: 1px dotted #afa;
}
.entry h1 {
    font-size: 1.8em;
    padding: 25px 0 0 0;
    margin: 25px 0;
}
.entry h2 {
    font-size: 1.6em;
    padding: 15px 0 0 0;
    margin: 15px 0;
}
.entry h3 {
    font-size: 1.4em;
    padding: 10px 0 0 0;
    margin: 10px 0;
}
.entry h4 {
    font-size: 1.2em;
    padding: 5px 0 0 0;
    margin: 5px 0;
}

Align the thumbnail by adding a float to it. Also add a border to it.

.attachment-post-thumbnail {
    float:left;
    margin:4px 8px 4px 0;
    padding:0;
    background: #d2d2d2;
    border: 1px solid #808080;
    border-radius:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

The last thing is to define the metadata:

.postmetadata {
    font-size: 1.2em;
    line-height: 1.5em;
}

Sidebar

We’ll start the sidebar by defining the border that will make it appear.

#sidebar {
    border: 2px solid #008800;
    border-radius:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 15px 8px;
}

Next, we’ll remove the list styles and the padding:

#sidebar ul {
    list-style: none;
    padding:0;
}

And now we’ll fix the H2 headers, which we used when we registered our sidebar (in the functions.php).

#sidebar h2 {
    background: #006600;
    color: #fff;
    padding: 5px;
    border-top: 2px solid #008800;
    border-bottom: 2px solid #008800;
    text-shadow: #000 2px 2px 2px;
}
#sidebar h2 a {
    color: #fff;
}

As there are different HTML structure for the widgets, we’re going to define the spacing inside widgets in different ways.

#sidebar ul li ul {
    font-size: 1.4em;
    padding: 5px;
}
#sidebar div {
    font-size: 1.4em;
    padding: 5px;
    text-align: justify;
    line-height: 1.5em;
}
#sidebar table {
    font-size: 1.4em;
    padding: 5px;
}
#sidebar div div {
    font-size: 1em;
    padding: 0;
}
#sidebar ul div ul {
    font-size: 1em;
    padding: 0;
}

So now we have finished our theme’s home page (except the footer). This is the result so far:

Our theme's home page

Conclusion

In this article we continued our theme’s development by updating it’s home page. We’ve also created some function inside our functions.php, which allows us to enable and/or create some functionalities.

Click here (75 Kb) to download the current version of our theme.

In our next post we’ll continue our theme’s development preparing the templates used for single posts and pages. From the next part we’ll reuse a lot of styles and the PHP files will look similar because our structure will be almost the same for different files. Once again, thanks for the visit!

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