The WordPress Guru » Navigation

Easy WordPress Breadcrumbs

MarkB — Wed, 21 Apr 2010 13:22:40 +0000

Image by PetitPlat by sk_

Your site should always be as usable as possible and site navigation is a big part of that. Aside from your standard sidebars and top navigation, it’s always a good idea to include a breadcrumb to let users track their way back to the home page. Of course there are lots of plugins you can use to insert this, but why use a plugin, when you can do it just as easily on your own.

Here’s the code that you’ll need to add to your functions.php file:

//breadcrumb function
function YLcrumbs() {
 if ((is_page() && !is_front_page()) || is_home() || is_category() || is_single()) {
 echo '';
 echo 'Home»';
 $post_ancestors = get_post_ancestors($post);
 if ($post_ancestors) {
 $post_ancestors = array_reverse($post_ancestors);
 foreach ($post_ancestors as $crumb)
 echo ''.get_the_title($crumb).'»';
 }
 if (is_category() || is_single()) {
 $category = get_the_category();
 echo ''.$category[0]->cat_name.'»';
 }
 if (!is_category())
 echo ''.get_the_title().'';
 echo '';
 }
}

Then, in your template, wherever you want to display your breadcrumb, you’d add the following:

Note that the function generates a breadcrumb in a UL element, so your CSS might look something like this:

#breadcrumbs {padding: 10px 0;margin:0;}
#breadcrumbs li {display:inline;padding: 0 10px 0 0;}

That would give you a list of LI elements in a row. Then you can style it up further as you require.

Have you used this somewhere? Leave a link in the comments to your implementation of this breadcrumb system.

Make your own WordPress drop down menu

MarkB — Wed, 07 May 2008 10:18:22 +0000

When it comes to creating a site that has multi-level navigation, a drop down menu is often your best means of keeping the navigation simple and uncluttered. There are a few plugins that you can use to achieve this, but I’ve found that many of them make too many assumptions and don’t work exactly how I’d like them too. For that reason, I’ll detail a simple means of making your own WordPress drop down menu.

Here’s a demo of what we’re going to accomplish. (Tested in IE7 & FF)

Getting started

Firstly, you’ll need to setup your pages in WordPress in a hierarchal manner. IE:

Home Page
About Us
- What We Do
- What We’ve Done
- Who Works For Us
Services
Portfolio
- Our Clients
Contact Us

This will generate a nested UL LI list in your code.


	Home Page
	About Us
		
			What We Do
			What We've Done
			Who Works For Us
		
	
	Services
		
			Portfolio
			Our Clients
		
	
	Contact Us

Sorted?

Making it dynamic

What you’re going to do now, is break that list down somewhat and create your own navigation. The top level menu items will be static, and their subpages will be dynamic. Like so:

You might also want to include a home link. You can add this manually like so:


	Home

The Script

There’s a tiny piece of jQuery required to show/hide the drop down menu’s. From an accessibility point of view, you can link the top level navigation item so that if JS is disabled, the user will still be able to get around your site. Here’s the script.

$(document).ready(function() {
	$("#nav ul").css({display: "none"}); // Opera Fix
	$("#nav li").hover(function(){
	$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });
});

The CSS

This CSS is really a guide and it largely depends on the styling of your site. The important thing is to add “position:relative;” to the first level of LI elements. The UL element (the drop down menu) needs to have “position:absolute;” so the parent LI needs to be relatively positioned to your dropdown menu doesn’t display topleft corner of the page.

/*navigation*/
#nav {padding:0;margin:0;}
#nav li {position:relative;display:block;float:left;}
#nav li a {display:block;float:left;height:30px;line-height:30px;padding: 0 20px;}

/*sub navigation*/
#nav ul {position:absolute;top: 30px;left:0;padding:0;} /*the top:30px command must be the same height as your parent LI so the dropdown displays below the main navigation*/
#nav ul a, #nav ul li {float:none;}

This is the CSS used to achieve the effect in the demo. You can of course change it to suit your site’s styles.

And presto, you’ll have a drop down menu. As you add sub pages in your WP admin, those pages will automatically be included in your drop down.

Slick

Creating a dynamic select menu

MarkB — Thu, 17 Apr 2008 09:25:30 +0000

Image by: leunix

I think more of an explanation is required on the title of this post to properly convey what we’re going to accomplish here. We’re going to setup 2 form selects. The 2nd select menu will be dynamically populated based on the selection made in the first drop down. Practically, lets say you want a user to choose from a list of main categories, and then use the second select to choose a sub category of the category chosen in the first select. Make sense? Cool.. here’s how…

Here’s a demo of what we’re going to do.

Firstly, you need the form that will generate the select menu made up of main categories. In this case, I’ve chosen to manually create this list, but you can of course use a bit of creativity to generate this list dynamically too.

You notice this:

Ok, now you can populate your city.php file with the options for the second, dynamically populated select menu. My file looks like this:

For each of these entries, you should change the child_of value. Basically each of these commands is creating a select menu that contains the child categories of the category I choose in the first select menu.

Now your form content is ready. All thats left to do, is power it up with a bit of Javascript. Call this script in your header.

// select box
function GetXmlHttpObject(handler)
{
 var objXMLHttp=null
 if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
 else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
 return objXMLHttp
}

function stateChanged()
{
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 document.getElementById("txtResult").innerHTML= xmlHttp.responseText;
 }
 else {
 //alert(xmlHttp.status);
 }
}

// Will populate data based on input
function htmlData(url, qStr)
{
 if (url.length==0)
 {
 document.getElementById("txtResult").innerHTML="";
 return;
 }
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }

 url=url+"?"+qStr;
 url=url+"&sid="+Math.random();
 xmlHttp.onreadystatechange=stateChanged;
 xmlHttp.open("GET",url,true) ;
 xmlHttp.send(null);
}

And that’s that.

Tweak it all up to suit your category names and ID’s and you’ll be good to go. Let me know if you’ve implemented this and how it worked for you!

Displaying child pages of the current page

MarkB — Tue, 08 Apr 2008 10:09:08 +0000

A prime feature of most CMS systems is that pages have a strong hierarchy – plenty of pages, sub-pages and sub-sub-sub pages. Depending on exactly what you want to accomplish, there’s a main means of doing this that will help you have a nicely dynamic navigation area.

At first glance

wp_list_pages('title_li=&child_of='.$post->ID);

…would be an option, except that when you end up on a child page, the list disappears because the current page no longer has any children.

Enter the solution:


if(wp_list_pages('child_of='.$post->ID.'&echo=0&exclude=2')) {
echo "";
wp_list_pages('title_li=&child_of='.$post->ID.'&exclude=2');
echo "
";
}
elseif(get_the_title($post->post_parent) != the_title(' ' , ' ',false)) {
echo "";
wp_list_pages('child_of='.$post->post_parent.'&title_li=&exclude=2');
echo "
";
} ?>

What this does is:

Generate a list of sibling pages if there are no child pages present
If there are child pages, they’ll be shown

This is really useful for creating a dynamic navigation that constantly allows users to move to other pages on the site and will also allow your client or the end user to create pages and sub pages freely without having to worry about digging through code to update the navigation area.