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 · 15800 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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.