Adding Breadcrumb Navigation in WordPress Themes

Breadcrumb navigation can be a handy tool when you have a larger website. It makes for a better user experience. I recently took the opportunity to experiment with this concept on my own site. Adding breadcrumb navigation in wordpress themes is surprisingly simple and intuitive. It only requires a few lines of code in your […]

My Role(s):

Typography

Primary Font:
Secondary Font:

Development Tools

Palette

What I Learned

Breadcrumb navigation can be a handy tool when you have a larger website. It makes for a better user experience. I recently took the opportunity to experiment with this concept on my own site. Adding breadcrumb navigation in wordpress themes is surprisingly simple and intuitive. It only requires a few lines of code in your “functions.php” file and styling in your “style.php” files.

Adding the ‘Function’

The following lines of code need to be added to your ‘functions.php’ file. These lines can be altered to display the information relevant to your site. Also, the class ‘breadcrumb’ assumes you are using the Bootstrap framework. If you’re not using Bootstrap, feel free to assign any class name you would like.

function breadcrumbs(){
if(!is_home()){
echo '<nav class="breadcrumb">';
echo '<a href=" ' .home_url('/').'">'.get_bloginfo('name'). '</a><span class="divider">/</span>';
if(is_category() || is_single()){
the_category('<span class="divider">/</span>');
if (is_single()){
echo '<span class="divider">/</span>';}
elseif(is_page()){
echo the_title();
}
}	
echo '</nav>';
}
}

Adding The Breadcrumb to The Pages/Posts

Now that the heavy lifting is done, you’ll need to tell your Worpress template files where to display the breadcrumbs for your visitors. This is done using mostly HTML and a little WordPress magic.

Add the following code to your template files where you want the breadcrumb to be displayed:

<h6>&lt;h6&gt;&lt;?php if(function_exists('breadcrumbs')) breadcrumbs();?&gt;&lt;/h6&gt;</h6>

The code can be styled to your heart’s desire. You can view an example of how I used mine here.

Launch Demo

I'm Accepting New Web Projects

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Let's Talk

Get In Touch

I make it easy to get in touch with me to start your next project.

I'm available to discuss your project via email. Let's link up.

Email Me

I'm not much of a phone person, but let's talk anyway.

Call Me