Modifying Mimbo 2.2: Step Two – Modifying index.php
This is the second in a series of articles that will cover making several modifications to the Mimbo 2.2 Theme by Darren Hoyt. I am modifying the theme to fit the requirements for my own site. To see the first step requirements and get an overview of what I have planned, please read The first article in the series; Modifying Mimbo 2.2: Step One – Identifying Requirements
Without further ado, let’s dive into the code for Mimbo’s index page and make some changes.
As mentioned in the first article of this series, one of my first requirements is to use category names to pull posts out of the DB instead of the default setup used by Mimbo. This isn’t a complicated change, but when there is the possibility of category ID’s Changing over the course of a development cycle, it’s one worth making. To make this modification, we first need to find the section of code that calls Lead Story and modify it to suit our new requirements.
Again, this is where Mimbo shines, since we find the first module right at line 6 of the index.php file:
; ?>/images/<?php
// this is where the Lead Story image gets printed
$values = get_post_custom_values()
" alt="" id="leadpic" />
{More»}
Line 8 is the one we need to take note of.
query_posts('showposts=1&cat=3'); ?>
This call uses the query_post() WordPress Template Tag to get 1 post from category number 3. What I want to do is get the category information by name, in this case, I want to display the latest post in the “Recipes” category, so we’ll change it to read as follows:
query_posts('showposts=1&category_name="Recipes"'); ?>
The next call to a category ID is at line 16, where the category title is displayed:
// this is where the name of the Lead Story category gets printed
wp_list_categories('include=3&title_li=&style=none'); ?>
Unfortunately, wp_list_categories does not allow for calling categories by name, But since we’re already specifying the ctegory that we want by name, we can actually eliminate the need for a php call and simply print out the name using standard html, like so:
// this is where the name of the Lead Story category gets printed
?>Recipes
In the case of the project I’m working on I don’t think it’s necessary to print anything at all, since it’s going to be pretty obvious that what the reader is looking at is going to be a recipe, so I’ve made the following changes, starting at line 13:
Note: I’ve only commented these lines out in the example so that line numbering is not affected. In my production site, I removed them from the code altogether.
The second change needed to match my requirements is that all posts must show author information and date posted. This is required by several of my advertisers so that they can keep track of the dates that ads and reviews were posted. I really like to keep the people that make me money happy, so I’m going to add it in.
I want the author and date information directly under the title of the post, so I’ll start adding it in at line 19:
Original Code:
// this is where the title of the Lead Story gets printed
the_title(); ?>
And we change it to:
// this is where the title of the Lead Story gets printed
the_title(); ?>
By • • Category:
What we end up with is this:
The layout works, but it's not pretty. It'll look better once images are added and a little css work is done
As you can see, we now have no category title and we've got author information posted below the post title using the <small> tag. It's ugly as heck, but all that will be fixed later when I modify the stylesheet to fit the look that I want. What we've got is working, and I call that so-far so-good.
At this point we need to modify the second column to work in the same manner. Since we've already covered the changes needed in detail, I'll just show you the code before and after modification, you should easily be able to spot the changes:
Original Featured Column:
Modified Featured Column:
Recent Recipes
The only real difference between the first examples is at line 36 of the modified code:
query_posts('showposts=5&category_name="Recipes"&offset=1'); ?>
Take note of the offset parameter. Since we're using this column as a continuation of the Recipes category and we've already displayed the first, or newest, post in the category, we use the offset parameter and set it to 1. This tells query_posts() to skip the newest post in this category and move on to the next, thus avoiding a duplicate entry.
The other main addition to the original Mimbo code is that I added post excerpts to the second column so that my readers get a glimpse, or teaser, of what the post contains. I've found that this can, at times, persuade a casual passerby to move a little deeper into the blog to find what he or she needs, and again adheres to the requirements of some of the companies that pay me to do what I do.
Modifying the third column is much the same as the first two. with just one exception. By default Mimbo uses an array of integers to get the first post in any number of categories specified and display them in that column:
I just switched the code up a bit to use category names so that all the sections matched:
// this is where you enter the IDs of which categories you want to display
$display_categories = array("Reviews","Product Spotlight", "Blog Events", "Shopping Alerts", "Blog Spotlight");
foreach ($display_categories as $category) { ?>
all I did was change the array to hold category names instead of ID's. After that, changing just the "cat=" parameter to "category_name=" was enough to let the theme do the rest. Easy Peasy!
I think that's enough to digest for now. In the next article I'll address modifying the way Mimbo handles images on the main page.
Have fun coding!
; ?>/images/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values()
" alt="" />; ?>/images/<?php
// this is where the custom field prints images for each Recent Recipe
$values = get_post_custom_values()
" alt="" />
