Make an Apple.com Style Breadcrumb for Your WordPress Blog

Breadcrumbs, as has been said before on WPHacks, are very useful, both for your SEO and reader’s navigation. In other words, there is no reason why you shouldn’t have them on your site.

There are a number of breadcrumb plugins you could use, but with a bit of WordPress code, you can avoid this. If you use sub-categories, then this will only display the name of the sub category.

A typical breadcrumb is something like this:

Home >> [Category] >> [Post Title]

WordPress can very easily do this – to get the name of the category the post is in, all you need is

<?php the_category(); ?>

Then, to display the post title, the code you need is

<?php the_title(); ?>

So our final code, with some arrows added in is:

<a href="/">Home</a> &raquo;  <?php the_category('   '); ?>   &raquo; <?php the_title(); ?>

So now that you’ve got your breadcrumb sorted, you can take this one step further and spice it up a bit. For the next part, we’re going to be using the code from a tutorial at Janko at Warp Speed, and with this code, we’re going to turn our breadcrumb into something that looks like the ones you see on Apple.com!

First, download the html version here, and open it in a your web editor (ie Notepad, Dreamweaver etc). Scroll down until you find <ul id=”breadcrumb”>. This is where we’re going to start editing. All you need to do is copy and paste the following code:

<ul id="breadcrumb">
<li><a href="/" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li>
<li><?php the_category(', ') ?></li>
<li><?php the_title(); ?></li>
</ul>

This is basically the same code as we had above, just putting into a list. Make sure you upload the home.png file to /images/, and while you’re at it, upload the other images.

Next thing we need to do is the CSS. Go into your style.css and paste the following:

#breadcrumb {
font: 11px Arial, Helvetica, sans-serif;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a {
height:30px;
display:block;
background-image:url('/images/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#000;
}
.home {
border:none;
margin: 8px 0px;
}
#breadcrumb a:hover {
color:#35acc5;
}

Once you’ve done that, then you’re done! If you copy the code from the source file (which you should), then make sure you change the url of the images.

  • Leave a Comment
  • How to: Using Thumbnails in your Sidebar “Recent Post” Listing

    On the WP Recipes forum, a guy just asked me how I managed to insert thumbnails on the recent post widget located on the sidebar of my blog Cats Who Code. That’s a lot simpler than it seems.

    If you’d like to see a live demo of this tutorial, just click here.

    1) – Make sure you’re using a custom field in your posts, with the thumbnail url.

    There’s a lot of tutorials available online to add a custom field to your pots. This one is good in my opinion, so you should read it if you don’t know how to define a custom field.

    2) – Download the required plugins

    In order to customize your recent posts widget, you have to download the Recent Posts plugin by Sebastian Schmieg.

    You’ll also need to download and install the Post-Plugin Library, which contains all the php functions needed by the Recent Posts plugin.

    3) – Upload and activate the plugins

    Once you downloaded the plugin and the library, unzip the files and upload it to your wp-content/plugins directory. Then, login to your WordPress dashboard, Go to “Plugins” and activate both the library and the Recent Posts plugin.

    4) – Configure the plugin

    After having the plugin and the library uploaded and activated, you have to configure the options so you’ll be able to display the post thumbnail on your sidebar.

    To do so, login to your WordPress dashboard and navigate to “Settings”, “Recent Posts”.
    On “General”, you can tell the plugin how many posts to be displayed, if it should display posts and pages or only posts, and a lot more.

    Once you configured the “General” options to fits your needs, go to the “Output” options. In order to display your custom field thumbnail on your sidebar, you have to enter a bit of html as well as the special parameter to embed the custom field.

    Here’s the code that I entered:

    <li><img src="{custom:Image}" width="48" height="48" alt="" />{link}
    <div class="clear"></div>
    </li>

    The special parameter {custom:Image} tells the plugin to embed the Image custom field. Don’t forget to replace Image with the name of your custom field!

    5) – Add the widget to your sidebar

    Simply go to “Design”, “Widgets” and add the Recent Posts + widget to your sidebar. Visit your blog, your thumbs are showing in the sidebar along with your recent posts!

  • Leave a Comment
  • How To: Adding an External RSS Feed to Your WordPress Blog

    Have you ever wanted to add an external RSS feed to your WordPress blog?  This is a great way to promote one of your other blogs (if it is in a similar niche) on a more popular site you run.

    Most of you will probably remember that about a month ago we finally got around to launching our WordPress Forums, which has an RSS feed associated with it.   In order to cross-promote our forums on this site, I wanted to display our most recent forum posts in the sidebar here at WordPress Hacks.

    In order to accomplish this, I grabbed the following code from Jean’s post over at Smashing Magazine:

    <?php include_once(ABSPATH.WPINC.'/rss.php');
    wp_rss('http://wpforums.com/external.php?type=RSS2', 5); ?>

    It takes the rss.php file that is built into WordPress (used for widgets).  In this code it is set to display the most recent 5 posts from the RSS feed “http://wpforums.com/external.php?type=RSS2.”

    Here is how it looks:

    I have gone ahead and added this to our WordPress Code page for easy reference.

  • Leave a Comment
  • How To: Display WordPress Categories without Children

    About a week ago I decided I was unhappy with the archives plugin I was using to display our archives, so I decided to build a custom archives page.   This archives page is fairly basic in that it displays the categories and archives side-by-side, then all the posts below it.   This way people can use Ctrl+F to quickly find posts they are looking for. 

    After getting the page built, I realized all of the “child” categories I use for the WordPress Hacks theme was causing some problems, so I decided to remove them from the display.   After all, these posts can also be found in their parent category. 

    If you are displaying your categories somewhere and would like to remove the children, here is the code you’ll need (for WordPress 2.5+):

    <?php wp_list_categories('title_li=&depth=1&show_count=1') ?>

    The depth=1 is the important one for the purpose of this hack as it is what tells WordPress not to display more than your parent categories.   By default, it is of course set to depth=0 (shows all categories).   If you are wondering what other options you have, here is what the WordPress Codex lists for the depth parameter:

    • 0 – All Categories and child Categories (Default).
    • -1 – All Categories displayed in flat (no indent) form (overrides hierarchical).
    • 1 – Show only top level Categories.
    • n – Value of n (some number) specifies the depth (or level) to descend in displaying Categories.
  • Leave a Comment
  • Code: Displaying Your WordPress Feedburner Count

    You’ve probably noticed that with our last redesign of this site, we switched from displaying the Feedburner widget to instead displaying our actual Feedburner feed count.

    Back in May of 2008 I wrote about the FeedCount plugin, which is a WordPress plugin which allows you to easily display your WordPress feed count to your readers. Basically you just activate the feedcount option in your Feedburner feed and activate the Awareness API, then upload and activate the Feedcount WordPress plugin, and then enter your feed information into the dashboard option panel and you are done.

    If you’d prefer to instead build the code directly into your WordPress theme, Joost De Valk of Yoast.com recently published a great post providing the code you need to show off your Feedburner count. The code is incredibly easy to integrate into your theme and also includes caching so you won’t overload the Feedburner API.

    When Should You Display Your Feedburner Count?

    This is a question that doesn’t really have a correct answer, but I’ve always found it interesting to hear others thoughts on this topic. I personally have always felt a good round number is 500 and I’ve had several people tell me that when they are considering subscribing to a feed, 500 is the number that they look for as a mark of a good blogger. 500+ subscribers generally shows that people like your content.

    Do you look at a blog’s feed count before subscribing to a feed?

  • Leave a Comment
  • How To: Adding a “Tweet This” Button to Your WordPress Theme

    Are you following the WordPress Recipes blog?    If not, you really should be! My fellow blogger and friend Jean-Baptiste Jung has created this blog to feature a number of “recipes” or code snippets. In addition to the content, he’s also got a great design that has been getting attention all throughout the blogosphere.

    In his latest recipe, Jean explains how to add a “Send to Twitter” link to your blog, or what I prefer to call it, a “Tweet This!” link.   The idea is to add a link on your blog (usually below the content) that people can simply click to discuss the post on Twitter.

    If you’d like to add a “Tweet This!” link to your blog, here is the code you’ll need:

    <a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Tweet This!</a>

    I would think that this could potentially be another great way to fetch traffic, possibly even better than a “Digg This!” link or something else along those lines.

  • Leave a Comment
  • Fixing the Unresponsive Script Problem in WordPress 2.5+

    Yesterday in my post about moving your blog to a new domain, I mentioned that there is a problem that presents itself when posts are imported into WordPress 2.5 or later.   A quick search determined that I wasn’t the only one having this problem, so I decided to document how to fix this problem here (or at least how I was able to fix it).

    Here are the steps I took to fix the problem with the unresponsive script in the Write panel (requires CPanel/PHPMyAdmin access):

    1. Please make a backup of your database in case you run into any problems.  These are the steps that worked for me to fix the problem, but I can’t guarantee they will work for everyone. 
    2. Login in to your CPanel.   This is usually found at http://yourdomain.com/cpanel/ and usually uses your FTP password.
    3. Access your PHPMyAdmin (in CPanel this is usually found at the bottom of the MySQL Databases page).
    4. Click on the MySQL database you created for your new WordPress installation in the menu on the left.
    5. Click on wp_postmeta in the list of tables on the left.
    6. Click the Browse icon.
    7. Click on the post_id tab once to sort the list from 0 to higher.
    8. Now you’ll need to delete anything with a post_id of 0.  Depending on how many posts were imported, there may be a lot of zeroes.  I had about 600 of them to delete.

    The best way to do this is to locate the boxes with “row(s) starting from record #” between them.  In the front box put 100 (or whatever number of your choice) and always put 1 in the right box.   Click Show.  You can use the select all button and verify all of them are zero.   Uncheck any that aren’t zero and click Delete.  Repeat until all zeroes are gone.

    Now open your Write panel in your new blog’s dashboard and everything should be good!

  • Leave a Comment
  • Hack WordPress Rebrands as WPHacks.com!

    Wow, what an exciting couple of weeks this has been!  This is a very exciting day for me personally as I have just finalized the move that took the blog formerly located at HackWordPress.com over to its new home at WPHacks.com.  

    After months of trying to acquire a “WP” domain that I felt was suitable for this website, I actually ended up acquiring the best one I could have possibly hoped for at an affordable price.  I feel very fortunate as I had made offers much higher than what I ended up spending on domains that weren’t as good of a fit as this one.

    So, what are the reasons behind the switch to this new domain name?  Here are a few reasons, ranked in the order of importance:

    1. Having WordPress in your Domain is Trademark Infringement – At the time I registered HackWordPress.com, I was not aware that the term WordPress was trademarked.   I was aware of trademarks of course and know that most products are trademarked, but WordPress was open source so I guess I just assumed it wasn’t.   A few months after launching this blog I found out that it was in fact trademarked, but there wasn’t a lot I could do at that point.   I had already established a blog and a brand of my own on that domain name.   I had a brief discussion with Matt Mullenweg & Lorelle and learned that they were unhappy with my domain name, though to their credit I have never been actually asked to move to a new domain name. 
    2. Better Domain Name – Though I will lose a little bit of that keyword value the old domain name carried (and all backlinks), this new domain name is a MUCH better domain in my opinion.   I’ve dropped from 13 letters down to only 7, and I feel having the word “hack” after WordPress (WP) sounds much better than having it before.   This new domain is also quick to type and very easy to remember.

    A couple of things of note to our readers about the domain transfer:

    • The feed URL will remain the same (which I’m sure will be a relief to all the sites that steal our content via our feed each day). 
    • Monday I plan to publish a very detailed post on how to transfer your blog to a new domain, so keep an eye out for that. 

    How Can I Help Your Transition to the New Domain Name?

    From a readers perspective, nothing really should change.   You’ll still get our content via our feed and the old URL will redirect to the new domain.   The one thing you could do to help us out is to update your links on your blog to the new domain (or updating the domain part of the URL to the new domain if you linked to a specific post).   All permalinks remain the same with the exception of the domain name itself.

    Questions about the change?   Thoughts on the new domain?   Let us know in the comments below!

  • Leave a Comment
  • How To: Build a Categories and Archives Drop-down Box

    Over the past couple years I’ve really enjoyed monitoring trends in the blogosphere and one of the trends that has come up recently is blogger’s cleaning up their sidebars by adding drop-down boxes.

    If you’d like to build drop-down boxes for your categories and archives on your WordPress blog, here is the code you need:

    Archives Drop-down Code

    <select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
    <option value=""><?php echo attribute_escape(__('Select Month')); ?></option>
    <?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>

    Categories Drop-down Code

    <form action="<?php bloginfo('url'); ?>/" method="get">
    <?php
    $select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0');
    $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select); echo $select; ?>
    <noscript><input type="submit" value="View" /></noscript>
    </form>

    I think something like this can be a good idea if done with the right theme, but I have also seen it on a few sites where it didn’t look very good, so keep that in mind if you decide to move your categories and archives to a drop-down box!

    To see other code snippets we’ve featured here over the past year, check out our WordPress Code page!

  • Leave a Comment
  • How to: Display your WordPress Tags in a Drop-Down Menu

    Tags are useful to any blog: As you know it, they allow the user to display a list of posts related to a subject.
    Most of the time, tags are displayed with in a tag cloud. If you have 20 different tags, that’s ok, but if you have 100 or more tags your tag cloud will be very hard to read, and no-one will click on it.

    This is probably why many blogs recently stopped displaying their tag cloud, or put it on a separate page. But I got another solution.

    My wife owns a blog where she reviews books. She use tags to display author names, which is a great use of tags, in my opinion. The tags were first displayed as a list, and it was perfect. But after she reviewed 60+ books, the list started to be too long.

    She asked me about a solution, and after some reflection, I came up with the idea of using a drop-down menu (select html element + a bit of javascript). Happily, I was able to found this code on WordPress forums.

    First, we have to create a php function. Copy and paste the following code in the functions.php file of your theme (Be careful with the php opening/closing tags!)

    <?php
    function dropdown_tag_cloud( $args = '' ) {
    	$defaults = array(
    		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
    		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
    		'exclude' => '', 'include' => ''
    	);
    	$args = wp_parse_args( $args, $defaults );
    
    	$tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags
    
    	if ( empty($tags) )
    		return;
    
    	$return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
    	if ( is_wp_error( $return ) )
    		return false;
    	else
    		echo apply_filters( 'dropdown_tag_cloud', $return, $args );
    }
    
    function dropdown_generate_tag_cloud( $tags, $args = '' ) {
    	global $wp_rewrite;
    	$defaults = array(
    		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
    		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
    	);
    	$args = wp_parse_args( $args, $defaults );
    	extract($args);
    
    	if ( !$tags )
    		return;
    	$counts = $tag_links = array();
    	foreach ( (array) $tags as $tag ) {
    		$counts[$tag->name] = $tag->count;
    		$tag_links[$tag->name] = get_tag_link( $tag->term_id );
    		if ( is_wp_error( $tag_links[$tag->name] ) )
    			return $tag_links[$tag->name];
    		$tag_ids[$tag->name] = $tag->term_id;
    	}
    
    	$min_count = min($counts);
    	$spread = max($counts) - $min_count;
    	if ( $spread <= 0 )
    		$spread = 1;
    	$font_spread = $largest - $smallest;
    	if ( $font_spread <= 0 )
    		$font_spread = 1;
    	$font_step = $font_spread / $spread;
    
    	// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
    	if ( 'name' == $orderby )
    		uksort($counts, 'strnatcasecmp');
    	else
    		asort($counts);
    
    	if ( 'DESC' == $order )
    		$counts = array_reverse( $counts, true );
    
    	$a = array();
    
    	$rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';
    
    	foreach ( $counts as $tag => $count ) {
    		$tag_id = $tag_ids[$tag];
    		$tag_link = clean_url($tag_links[$tag]);
    		$tag = str_replace(' ', '&nbsp;', wp_specialchars( $tag ));
    		$a[] = "t<option value='$tag_link'>$tag ($count)</option>";
    	}
    
    	switch ( $format ) :
    	case 'array' :
    		$return =& $a;
    		break;
    	case 'list' :
    		$return = "<ul class='wp-tag-cloud'>nt<li>";
    		$return .= join("</li>nt<li>", $a);
    		$return .= "</li>n</ul>n";
    		break;
    	default :
    		$return = join("n", $a);
    		break;
    	endswitch;
    
    	return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );
    }
    ?>

    Once you have your function, you must call it somewhere on your theme. Just open the file where you want the list to be displayed (Most of the time it is sidebar.php) and paste the following code:

    <select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
    	<option value="#">Liste d'auteurs</option>
    	<?php dropdown_tag_cloud('number=0&order=asc'); ?>
    </select>

    Now, you have a very cool drop-down list to display you tags. No more unreadables tag clouds!

  • Leave a Comment