Mimbo for bimbos: Making Mimbo do what you need
Mimbo is a great magazine theme. It is easy to manipulate, the CSS is clearly written, and there are so many uses for it.
For an example of a site that uses the Mimbo theme, look at The Brown Spectator. The Spectator has modified the Mimbo theme to fit its own needs, which is skill you’re about to learn. This theme is pretty neat in that it uses arrays to display data. This means that the code for Mimbo is incredibly clean, which makes for easy modifications. Let’s take a look at the front page’s file, the Main Index Template or index.php
<?php get_header(); ?>
Okay, this is just retrieving the header.php file listed as header in the WordPress theme editor. We’ll worry about that file later.
<div id=”content”>
<div class=”feature clearfloat” id=”lead”>
<?php
// this is where the Lead Story module begins
query_posts(’showposts=1&cat=3′); ?>
<?php while (have_posts()) :
the_post(); ?>
This snippet of coding looks for all posts in category 3 and then displays 1. The problem with this methodology is that WordPress doesn’t allow you to know really easily which category is cat=3. There are ways, but if you don’t know how, an easier way to display something in my humble opinion, is to use category names. To do this delete cat=3 from the code snippet and replace it with category_name=the name of the category you want displayed.
I think this is pretty obvious, but since I’m assuming people reading this are noobs like I was, I’ll take nothing for granted. If you want more posts displayed, change showposts=1 to showposts=whatever number posts you want displayed
The final part of the code is the beginning of a loop that displays what you just asked it to display. Basically, it just says that while there is still a post to display in the category deliniated, execute the loop.
<a href=”<?php
the_permalink() ?>” rel=”bookmark” title=”Permanent Link to
<?php the_title(); ?>”><img
src=”<?php bloginfo(’template_url’);
?>/images/<?php
// this is where the Lead Story image gets printed
$values =
get_post_custom_values(”Image”); echo $values[0]; ?>” alt=”"
id=”leadpic” /></a>
<h3>
This code snippet represents what makes WordPress so incredibly powerful. Custom values are a coder’s best friend as they allow you to customize wordpress in any way you want: show pictures, display posts or alternative CSS, or any other creative thing you can think of.
In WordPress, when the_permalink() appears within a loop that is retrieving posts, it will print the URL address of the post. Likewise, the_title() will print the title of the post being retrieved. The code snippet bloginfo(’template_url’), will print the URL of the file your template is located: www.X.com/wp-content/themes/YOUR_THEME’S_NAME. As a string, bloginfo is one of the most versatile and useful that WordPress has to offer.
bloginfo() or get_bloginfo(’name’) prints the title of your blog
bloginfo (’description’) prints your blog’s tagline
bloginfo(’template_directory’) prints your blog’s template directory’s URL
bloginfo(’charset’) prints the character set your blot is using like UTF-8
bloginfo(’url’) prints your website’s URL
bloginfo(’rdf_url’) prints rdf/rss1.0 url’s
bloginfo(’rss_url’) prints rss .92 url
bloginfo(’rss2_url’) prints rss 2.0 url
bloginfo(’atom_url’) prints atom feed url
bloginfo(’comments_rss2_url’) prints comment’s rss 2.0 feed’s url
bloginfo(’pingback_url’) prints Pingback’s url
bloginfo(’admin_email’) prints administrator’s email address
bloginfo(’version’) prints WordPress version your blog uses
bloginfo(’html_type’) prints Content type for your blog
bloginfo(’wpurl’) URL of WordPress installation
bloginfo(’template_url’) Current template’s URL
bloginfo(’stylesheet_url’) prints the URL of the current template’s stylesheet
bloginfo(’stylesheet_directory’) prints the directory of the current template’s stylesheet
(Most of this was synthesized from the WordPress website)
In this particular code-bit, however, the bloginfo(’template_url’) code is wrapped in a img src= code snippet and followed by a /images/ another bit of code which I’ll explain in a second. Anyhow, what it all means is that there is an images folder in the directory where the theme is located. The location of the image itself and the type of image (jpeg, gif, png) is specified by a custom value.
Now, as I said, custom values are pretty cool. But there are plenty of great blog posts on how to use them online. I’m concerned specifically with the Mimbo template. Sometimes when I’ve posted columns, there aren’t coinciding pictures. Mimbo’s way of handling this is to give a dummy location for an image that doesn’t exist. This renders on firefox as a little box with nothing in it, and in Internet explorer, this renders as one of those giant broken file images we all love so much. So here’s how you deal with that.
<?php
// this grabs the image filename
$values = get_post_custom_values("Lead-Image");
// this checks to see if an image file exists
if (isset($values[0])) {
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" id="leadpic"/></a>
<?php } ?>
You flip things around a bit. The original Mimbo code is a bit backwards. It assigns the location of the image to a variable before it checks to see if there is even an image in existence. In this example, however, the variable is assigned the value in the string get_post_custom_value(). And then, it checks to see if the value is empty. If it is empty, then it knows to skip putting in the picture, however, if the value comes back with something in it, then it knows to put a picture next to the title. Problem solved.
<?php
// this is where the name of the Lead
Story category gets printed
wp_list_categories(’include=3&title_li=&style=none’);
?></h3>
Just like the comment says. This is where the name of the Lead Story’s category gets printed. It gets printed in between h3 tags. Usually, when I implement Mimbo, I remove this portion of code for the lead story. The story is at the top of the page, and I generally just let it sit there. It’s pretty obvious that it’s the lead story, the category doesn’t matter so much, in my opinion. Once again, you can see an example of this on The Brown Spectator’s website.
<a href=”<?php
the_permalink() ?>” rel=”bookmark” title=”Permanent Link to
<?php the_title(); ?>” class=”title”>
<?php
// this is where the title of the Lead Story gets
printed
the_title(); ?>
</a>
This simply adds a link to the lead story. You can change the title of the link, if you want to, by changing the_title(). But why would you want to?
<?php
// this is where the excerpt of the Lead Story gets
printed
the_excerpt(); ?>
{<a href=”<?php
the_permalink() ?>” rel=”bookmark” title=”Permanent Link to
<?php the_title();
?>”>More»</a>}
<?php endwhile; ?>
</div><!–END FEATURE–>
This code snippet prints an excerpt of your lead story right below the title that was printed in the previous snippet. And then, right after the excerpt is printed, the there is a link that is added that looks like {More»}. Sometimes, people don’t like the snippets at the end that link to the article. In case you’re wondering, it’s safe to delete from “{<a href=”<?php
the_permalink() ?>”… to …”More»</a>}”.
<div id=”leftcol”>
<?php
// this is where the Features module begins
query_posts(’showposts=3&cat=4′); ?>
<h3><?php
// this is where the name of the
Features category gets printed
wp_list_categories(’include=4&title_li=&style=none’);
?></h3>
<?php while (have_posts()) :
the_post(); ?>
<div
class=”feature”><a href=”<?php the_permalink()
?>” rel=”bookmark” title=”Permanent Link to <?php
the_title(); ?>”><img src=”<?php
bloginfo(’template_url’); ?>/images/<?php
// this is where the custom field prints images for each
Feature
$values =
get_post_custom_values(”Image”); echo $values[0]; ?>” alt=”"
/></a><a href=”<?php the_permalink()
?>” rel=”bookmark” class=”title”>
<?php
// this is where title of the Feature gets printed
the_title();
?>»</a></div>
<?php endwhile; ?>
</div><!–END LEFTCOL–>
<div id=”rightcol”>
<?php
// this is where you enter the IDs of which categories you want to
display
$display_categories = array(5,6,7);
foreach ($display_categories as $category) { ?>
<div class=”clearfloat”>
<?php
query_posts(”showposts=1&cat=$category”);
$wp_query->is_category = false;
$wp_query->is_archive = false;
$wp_query->is_home = true;
?>
<h3><a href=”<?php echo
get_category_link($category);?>”><?php
// this is where the name of each
category gets printed
single_cat_title();
?></a></h3>
<?php while
(have_posts()) : the_post(); ?>
<?php
// this grabs the image filename
$values =
get_post_custom_values(”Image”);
// this checks to see if an image file exists
if (isset($values[0]))
{
?>
<a
href=”<?php the_permalink() ?>” rel=”bookmark”
title=”Permanent Link to <?php the_title();
?>”><img src=”<?php
bloginfo(’template_url’); ?>/images/<?php $values =
get_post_custom_values(”Image”); echo $values[0]; ?>” alt=”"
/></a>
<?php }
?>
<a
href=”<?php the_permalink() ?>” rel=”bookmark”
class=”title”><?php
// this is where title of the article gets printed
the_title();
?>»</a>
<?php
the_excerpt(); ?>
<?php
endwhile; ?>
</div>
<?php } ?>
</div><!–END RIGHTCOL–>
</div><!–END CONTENT–>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
