Advanced Wordpress Breadcrumbs with Thesis

February 7, 2010

While working on another web site with Wordpress and Thesis, I decided that breadcrumbs would be a perfect little extra detail. My initial response was to head over to ThesisThemeTools, where I had seen a breadcrumb tutorial before (Wordpress does not have an internal breadcrumb function). However, the implementation, while definitely good and valid, doesn’t have the flavor I like. So with a little coding inspiration from CatsWhoCode, I developed an advanced version which combines the easy customization and plugin-free power of Thesis, the div and css structure from ThesisThemeTools, and the page-specific crumb-code from CatsWhoCode.

Code for custom_functions.php (in your thesis custom folder, do not edit the root functions file for thesis)
function universal_breadcrumbs() { ?>
<div id="breadcrumbs">
<a href="<?php bloginfo('home'); ?>">Home</a> <?php
if (!is_front_page()) {
echo ' &gt; ';
if (is_category() || is_single()) {
the_category(' &gt; ','multiple','');
if (is_single()) {
echo ' &gt; ';
the_title();
}
} elseif (is_page()) {
the_title('<a href="'.get_permalink() .'">','</a>');
}
}
?>
</div>
<?php }
add_action('thesis_hook_before_header', 'universal_breadcrumbs');

Code for custom.css (also in your thesis custom folder, do not edit the root style file for thesis)
/*=================================================*/
/* EASY BREADCRUMBS */
/* Version 1.0 */
/* Written by Mike Nichols December 23, 2009 */
/* Website: http://thesisthemetools.com/ */
/* Copyright (c) 2009 by Michael L Nichols */
/* License: Creative Commons Share-Alike 3.0 */
/* http://creativecommons.org/licenses/by-sa/3.0/ */
/* THIS NOTICE MUST STAY WITH ANY COPY DISTRIBUTED */
/*=================================================*/

#breadcrumbs {
/* heignt and width of the container box */
height: 12px;
width: 600px;
/* border for testing */
/*border: 1px solid #000000;*/
/* moving text within the container box */
padding: 0px 5px 0px 5px;
/* moving the container box around*/
position: relative;
/*top: 0px;*/
/*left: 0px:*/
/* to keep the breadcrumbs from showing under another object */
z-index: 100;

/* font properties */
color: black;
font-size: 1em;
/*font-family: Verdana, Arial, sans-serif;*/
/*font-weight: bold;*/
/*text-decoration: underline;*/
/*text-transform: uppercase;*/
/*font-style: italic;*/
/*font-variant: small-caps;*/
text-align: left;
}

/* link and visited properties of fonts */
#breadcrumbs a:link,
#breadcrumbs a:visited {
color: black;
font-size: 1em;
/*font-family: Verdana, Arial, sans-serif;*/
font-weight: bold;
text-decoration: none;
/*text-transform: uppercase;*/
/*font-style: italic;*/
/*font-variant: small-caps;*/
}

/* hover properties of fonts */
#breadcrumbs a:hover {
color: red;
font-size: 1em;
/*font-family: Verdana, Arial, sans-serif;*/
font-weight: bold;
text-decoration: underline;
/*text-transform: uppercase;*/
/*font-style: italic;*/
/*font-variant: small-caps;*/
}

With this pair of codes, you will see “Home” on the home page, regardless if it’s the default (with posts) view or a static home page. If you are on a page, the breadcrumbs will appear as Home > pagename. Categories will appear as Home > categoryname and posts will appear as Home > postcategory > postname. Each part of the breadcrumb trail – page, post, and category – is linked to the appropriate resource (category to the category page). Additionally, I skipped on the current page being both self-linked and non-linked one right after each other. So it’ll look like
<a href="yourhomepage">Home</a> > <a href="thepage">thepage</a>
instead of
<a href="yourhomepage">Home</a> > <a href="thepage">thepage</a> > thepage

Tweaks
Changing “Home” to “Yoursitename”
In functions file change <a href="<?php bloginfo('home'); ?>">Home</a> to <a href="<?php get_option('home'); ?>"><?php bloginfo('name'); ?></a>

Changing the section separator from greater-than bracket (>) to something else.
In the functions file, replace each of the three &gt; with the symbol of your choice. Watch for the spaces on each side of the character.

Changing style options
The CSS code contains several commented properties, which are identified by being preceding with a slash and asterisk (/*) and followed by an asterisk and slash (*/). Uncomment the properties you want by removing the preceding and succeeding asterisks and slashes, then editing as desired.

Share |

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled

Spam Protection by WP-SpamFree


Previous post:

Next post:

^ Back to Top