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

Start learning with our library of video tutorials taught by experts. Get started

View Source
Illustration by

002 Adding breadcrumb links to your WordPress sites


From:

View Source

with Ray Villalobos

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
View Source
2h 10m Intermediate Jan 20, 2012 Updated May 25, 2012

Viewers: in countries Watching now:

The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.

Topics include:
  • Creating a custom URL in WordPress
  • Adding breadcrumb links to sites
  • Creating a toggle button with jQuery
  • Adding Twitter feeds to a site
  • Adding PayPal buttons to pages
  • Uploading photos to your web site
  • Embedding videos for different browsers and devices
  • Parsing and placing a YouTube video feed
Subjects:
Web Web Design Projects
Software:
WordPress
Author:
Ray Villalobos

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.

There are currently no FAQs about View Source.

 
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.
Upgrade now


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.

join now Upgrade now

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

Notes cannot be added for locked videos.

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.