Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

4.4 Add Excerpt Support and a Styled “Continue Reading” Button

Every WordPress installation comes with the ability to write excerpts in the back end, but not every theme comes with the ability to actually display them. In this lesson, you’ll learn how to enable excerpts in your theme, and while you’re at it, how to style your “Continue Reading” button to give it more personality.

4.4 Add Excerpt Support and a Styled “Continue Reading” Button

Hi. This is Kezz. Welcome back to WordPress Theme Creation with Underscores. Now, in the Underscores theme, support for excerpts isn't in there by default. So you just need to add it in for yourself. Now an excerpt is a little bit of custom text that a user can write, so that they can control exactly what introduction is displayed for their posts on the front page and on archive pages. This here is a little test post that came along with the test content that we added earlier on in the course and this sentence here says, this is the post content. Now when this excerpt is working you won't see that text anymore. You'll see the custom excerpt content. So if we edit this post and we go in and have a look at what's actually been added on the admin side, you'll see the content area here is holding that sentence, This is the post content. And then down in the excerpt field, you'll see, This is a post excerpt. And when we're done, this front page will show this is the excerpt, and then when you hit read more button, you'll see this is the content. In your content.php function, first locate the div with the class entry-content. And then below that, find this PHP snippet. Now this PHP snippet is what's currently outputting the content of each of the posts showing on the front page or the archive pages. And we wanna replace that with something that would check to see if an excerpt is available. And if there is we'll display it instead of the content. Delete that code that you have highlighted and replace it with this. Now this first line here checks to see if the current post has an excerpt available and if it does than it uses this function, the excerpt, to output that excerpt. Then below that we have a line that is going to output a read more button or a continue reading button in this case. This else line here is just a way of saying, okay, so if there isn't a post excerpt then do this. So if there isn't a post excerpt, then we show the full content instead. And this is pretty much the same content displaying code that we had in this file by default, but we've just removed a little right pointing arrow that used to be there. When we look at that same test post again, now, there's our excerpt displaying, and we also have our Continue Reading link below it. When we click that, that takes us through to the single post view, where we see the full content. That means excerpts are now fully supported in this theme. The next thing we're going to do is change up the styling of the Continue Reading button a bit more, so it just looks a bit nicer, and it's easy for people to spot. To do the styling that we want to do for our Continue Reading button. We need to have a div wrapping around that button with a class that we can target. When we added our code for the excerpt we were able to add that div wrapper around our Continue Reading button manually. But, it's a little trickier with the button that's output from the content function. To add a wrapper around that button, we're gonna have to add a little bit more PHP to our custom functions file, but thanks to atomic filing for this code, this is a slightly modified version of something that he put together for this purpose. Drop this code into your custom functions file and it will take care of adding your div wrapper around that button for you. Back in our custom vars and mixins file, we're going to add a mixin to control the coloring and styling of our Continue Reading button. And that's this. This just adds a little border at the top and the bottom of the button and controls the link color. Then drop this code into custom styles file. Now this first style that we're applying to that div wrapper that we've just added around our Continue Reading button, center aligns the text within it. That gives us the ability to center a line the entire Continue Reading button.. The next section determines the styling of the button itself. It sets our font styling and our spacing, padding and margin, and it also uses the same technique of including FontAwesome icons that we used earlier in the course. And in this case we're using the before pseudo selector and the after pseudo selector, to add two little pointing fingers, that will point inward, that Continue Reading button. Now, when we save and compile, our Continue Reading link goes from this into this. In the next lesson, you're going to learn how to do one of the most useful things you can do in theme development and that is adding custom widget locations into your theme. Now in this case, we're going to add two widget locations. One to hold social icons and another to hold a slider. I'll see you in the next lesson.

Back to the top