Both VibrantCMS and Over Easy are themes which turn WordPress into a Content Management System. Using a plugin and some template hacking, we’re going to integrate breadcrumbs into these themes.

First, you’ll need to download and install the Yoast Breadcrumbs plugin, and you can configure it in the Settings menu. It’s quite simple, and gives you a lot of customisation over what is displayed on your site. Time to get into some coding.

Adding the Breadcrumbs

There are quite a few files we will need to modify to add in the breadcrumbs. We will be adding the same lines of code to each of the following files:

• archive.php
• page.php
• single.php
• tag.php

Let’s open archive.php and add the breadcrumbs to that file.

If you are using VibrantCMS, you will need to find this line:

<div id="leftcontent" class="grid_10">

If you are using OverEasy, then you will need to look for this line:

<div class="spacer">

After, add:

<div class="breadcrumbs">
	<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } ?> 
</div>

Upload to your site and view any category or archive page, and you should see the breadcrumbs showing at the top of your page. If not, go back and check that you have done the steps correctly.

Now, you will need to add the breadcrumbs code to the other three files mentioned above. You should add it in the same place as before.

Styling the Breadcrumbs

At this point, the breadcrumbs have no styling at all. However, we have given our code we added a class attribute, and so we can add styling to change the link colours, the font size, positioning, and lots more.

To do this, we will need to change style.css and add the following lines to the end:

/* ---- BREADCRUMBS ---- */
 
.breadcrumbs {
 
}

For example, if we would like to change the size of the text to 12px, we would change the CSS to this:

.breadcrumbs {
	font-size: 12px;
}

You could even add a border to your breadcrumbs:

.breadcrumbs {
	font-size: 12px;
	padding: 3px;
	border: 1px solid #ccccff;
}

You can experiment with CSS styling to completely transform how your breadcrumbs look. The plugin is completely flexible too, and so you can change what text is displayed and where the breadcrumbs are shown.

WooThemes are wonderful because they look beautiful out of the box. But if you’d prefer to customize them to your taste they’ve built-in the tools to make that very easy. Here are a few tips I learned first-hand when I built our new Cubicle Ninja’s website with the VibrantCMS theme.

Let’s pretend we’re launching a fun new website about an upcoming war between kittens and mankind. We’ve installed Wordpress, followed the detailed directions provided by the WooThemes team to install the VibrantCMS theme, and we were ready to add in our own imagery.

Using Large Images

By default the featured post area will grow vertically to match your image, but horizontally, your image will overflow into the next featured panel. Take a look at the left side of the image above as an example.

Is there an easy way to add in image greater then 340 pixels wide without this issue?

1. Go to Manage > Pages and locate the page with the problem image.

2. Find “VibrantCMS Custom Settings” where we’d originally placed our image URL. Located here are two fields, “Top” and “Left”. We will use these to adjust where our image is located.

3. Place a value you’d like to move your image into the field labeled “Left”. For example -50 moves your image 50 pixels to the left.

4. Hit save to update this featured panel.

5. View your page to see how you did. You can keep guessing and checking until your image fits perfectly.

Editing the Background

We now have our custom images snuggly in place. Would it be possible to customize our background color or image?

Absolutely. As a matter of fact, if you can customize this you’ve learned how to customize any element of your theme – the same rules apply. We’ll be using an amazing plug-in for Firefox that helps us see what we’ll need to edit. This tool is called Firebug. Click here to install your copy before we begin.

1. With Firebug, finding out what the code is behind any part of our website is as easy as clicking. Let’s open Firebug by going to Tool>Firebug>Open in New Window within Firefox.

2. At the top-left of Firebug there is an menu item called “Inspect”. Let’s click this.

3. As we run our mouse over the page we can see a blue outline appearing. These are the hidden elements of your webpage. If we mouse-over the top of our background and click, we see the specific code that controls this area.

4. In Firebug’s top right corner it displays where this code is located. This class is located in a file called “pink.css”. All of the template variations have their own CSS file. This controls the look and feel for that specific style. Use a FTP program to find the folder where these CSS files are located.

It should look close to this:
www.yourwebsitehere.com/wp-content/themes/vibrantcms/styles/

5. Next, use a text editor to open the “pink.css” file.

6. Once inside look for an entry that matches our Firebug name, “#featured”. It should look like this:

#featured {
background: #ffc0d4 url(pink/featuredbg.jpg) repeat-x top left;
}

7. Looking at this class we can see how quickly we can modify our featured area:
“#FFC0D4″ is the pink in our background, by changing this value we will modify the color
“url(pink/featuredbg.jpg)” is referencing the gradient image across the top of the featured area
“repeat-x scroll left top” tells the image to repeat horizontally and start at the top left

8. Let’s say we like our background gradient image, but we’d like there to be repeating text in this area. This would be as simple as finding the referenced image above and replacing it. (If you’re using a different style then Pink, your featured background image will be located in the folder name of that style.)

9. We can find this image at:
www.yourwebsitehere.com/wp-content/themes/vibrantcms/styles/pink/featuredbg.jpg

10. Edit and replace the old version of “featuredbg.jpg”. Your website now has a new repeating background image.

And that’s it! We’ve only begun editing our Kitten Wars website, and it looks very rough, but you can see how quickly we could change almost every aspect of the featured panel. And with your knowledge of Firebug exploring the remainder of your website should be that much easier.