Video: WordPress SEO Setup Guide – Adding Breadcrumbs to TwentyFourteen

Posted OnJan 21, 2014     CategoryPlugins, Videos     Comments2 comments

Audio Transcription

In this tutorial, we’re going to show you how to add breadcrumbs to the WordPress TwentyFourteen theme and ones that will be generated by Yoast WordPress SEO plugin.

As you can see, we’re currently looking at the breadcrumb settings within the plugin. We’ve already defined a separator, some anchor text, prefixes where required and just down towards the bottom, you can see we’ve chosen to bold the last page in the breadcrumb.

So what that means is we now need to add this code snippet into the particular theme files we want that to appear. So if we go back to WordPress and we just find a post, any old post. I’m going to use The Cosmos Awaits because it’s just a regular text post. We can see there’s no great deal in there right now.

So what we need to do is add those breadcrumbs in. So we need to identify where we want to add them. I think adding them just above that category there is a good spot. So if I just have a look, I can see that there’s the “div class entry meta” and that’s within the actual header on this page.

So I think a good place would be between the header and the entry meta. So what we now need to do is go back into our text editor and you will need to connect your server at this point.

We need to just run a quick search. So I’ve already run a search and I’ve run it searching for class entry header within the TwentyFourteen theme directory.

There are actually 13 places where that’s found. So we can see it’s in “content aside,” “content audio,” “featured post,” “gallery,” “image,” “content link,” “content page,” “content quote,” “content video,” “content,” “image,” “widgets,” and “contributors”.

So that’s quite a number of changes that we’re going to need to make, if we want to put this across all of those files. It’s pretty easy to do though. There’s not a great deal of work to do it. We’re just going to do it for two files today.

So, I’m going to start going ahead and showing you that right now. The first one we’re going to change is “content.php”. Fortunately we’ve already copied content.php in an earlier tutorial into our child theme. You can see that here.

What we need to do right now is identify where we want this breadcrumb to go. So we did that earlier. We said underneath the header and before the entry meta. So all we need to do there is create a new line and paste the coding that the plugin has provided us.

We save and we just quickly hop back into WordPress and we refresh that page and there you go. You can see it says, “You are here: Home Page – The Cosmos Awaits”.

Actually you can remove this part here and change that to be not bold if you would like. But that’s entirely up to you. The process is precisely the same if you want to add breadcrumbs to a video type post for instance.

So what we can do is hop back into our text editor and we will go back to that find and if we just look for the video, we can see “content-video.php” is where that will appear.

So what we need to do now is go into the TwentyFourteen theme and find “content-video.php” and we just copy that, as in copy all of the contents of the file and then in the TwentyFourteen child folder, we create a new file. We call it “content-video.php” to be the same as the parent theme.

We paste what we require in there, which is the content of that file. We just go back to find the breadcrumb code again. Put it in exactly like we did before and save. So now back to our WordPress website and we will open up our video post. There you go. You can see it says, “You are here: Home Page – Our Video Post”.

So that’s what you need to know in terms of actually adding these breadcrumbs to your theme. The process will be slightly different depending on the theme you’re using. But this process is consistent for the TwentyFourteen theme regardless of what template files you want to add it to.

Just to reiterate what we’ve covered just earlier is that there are actually 13 content template files in here. So if you wanted to add that to all of them, you would need to do so one by one. That covers the end of the tutorial now. If you have any questions about how to create child themes, using child themes, or even just adding in the breadcrumbs to your child theme, please feel free to ask in the comments below.


2 comments

Comments

  1. Chuck Dreyfus

    Hi… Thank you for this tip. I just have a slight concern though. On mobile view, my site shows bread crumbs on the front page of my site on all links below the featured posts.

    How can I hide them. Pls check out my site on http://www.chuckiedreyfus.ph using mobile to see what I mean.

    Thanks again. Cheers! 🙂

    1. Aaron Osteraas

      Hey Chuck,

      That’s actually pretty easy to fix with a little CSS. If your theme has the ability to use custom CSS, then use that feature, otherwise make a child theme. The css that should do the trick is as follows:

      @media screen and (max-width: 480px) {
      	#breadcrumbs { display:none; }
      }
      

      Let me know how you go 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend