New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

002 Adding breadcrumb links to your WordPress sites

From: View Source

Video: 002 Adding breadcrumb links to your WordPress sites

Hello! This is Ray Villalobos and welcome to View Source! In this episode, we're going to add breadcrumbs to your WordPress template. And if you're wondering why that's a good idea, then it's time to View Source. If you don't believe everything you hear about SEO or search engine optimization, it's nice to find out straight from the source. You might have already heard about Google's excellent SEO Starter Guide, which you can find by just googling SEO Starter Guide, and clicking on this PDF. Now if you look to that document there's a lot of really good information about optimizing your site for search engines.

002 Adding breadcrumb links to your WordPress sites

Hello! This is Ray Villalobos and welcome to View Source! In this episode, we're going to add breadcrumbs to your WordPress template. And if you're wondering why that's a good idea, then it's time to View Source. If you don't believe everything you hear about SEO or search engine optimization, it's nice to find out straight from the source. You might have already heard about Google's excellent SEO Starter Guide, which you can find by just googling SEO Starter Guide, and clicking on this PDF. Now if you look to that document there's a lot of really good information about optimizing your site for search engines.

One of the tips that they give you is to make sure you add convenience to your users by using breadcrumbs. A breadcrumb is a row of internal links at the top or bottom of the page that allows visitors to quickly navigate back to a previous section or the root page. You can easily add them to your WordPress sites by adding a simple function to your functions.php file. To get to it, log into your WordPress Dashboard, and then click on Appearance, and then click on Editor, there's a bunch of files for the current template and you need to find the one that says functions.php, click on it, and scroll down to the very bottom.

We're going to add a new function right here at the bottom of functions.php so that it will be available to all of our pages. So I'm going to go to my codesnippets file which you can find in the exercise files section of this course. So this function essentially creates a link to your homepage by issuing an echo command that first prints out the beginning of an anchor tag right here, and then prints out the location of your homepage by using the get_option ('home') function. And then for the actual clickable link, it inserts the name of the blog by using the bloginfo function with the keyword name and adds the word Home after that.

So in our case, it will say View Source Home. After that, it closes out the anchor tag, and then it adds a double right quotation character which will look like that. Next, it checks to see whether or not the page that is calling this function is a category page or an individual post. Regardless, it's going to print out the link to the category that this page is under. If it is an individual post, then it will print out the right quotation again and the title of the page.

If it's neither of those and it's actually a page, not a post or a category, then it will just print out the title. So let's copy this code and go back into our Edit Themes, and at the bottom of my functions.php file, I'm going to paste this piece of code. Now it's time to update the file. Now that we've updated our functions.php, it's time to add this code to whatever template we want on our web page. So I'm going to go back to our codesnippets and grab this second piece of code.

This piece of code simply calls our function using a standard PHP call and wrapping everything around a breadcrumbs id so that we can style it later. So I'm going to grab this, I'm going to copy it, I'm going to switch back to my Edit Themes, and I'm going to find first the Category template and right underneath the header, I'm going to paste this code, and I'm going to hit update the file. Then I want to find my Single Post template and paste the breadcrumbs right there, make sure I update this file.

And finally, I want to add this to the Page template, and right underneath the header I want to paste that code, hit Update File and we're almost ready to go. Now let's add just a little bit of CSS so that we have a little bit more breathing room in our breadcrumbs. We're going to add this very simple bit of CSS here that will just give our breadcrumbs a little bit of breathing space. So I'm going to copy that, switch back over to WordPress, and look for my style.css file, which is right here, and I'm going to scroll down to the bottom of that and paste our code for our breadcrumbs.

I'm going to hit update the file. Now when we click on the View Source link right here to go to our site, and I click on an article, you'll see that the breadcrumbs are right here. If I click on a page like the About Us page, I will also see the breadcrumbs appear right here. If I go back to the homepage and click on an article, and click on one of these previous links, it's going to take me to the categories and it's simply going to display link back to the homepage and a link to the categories right here.

Don't forget to check out our excellent list of courses on SEO available from the lynda.com Online Training Library. So see you next time, and remember that if it's NBD to VNC onto your CPU, then you've probably got time to View Source.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 15716 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.