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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.