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

4.3 Add Featured Image Support

Hey, this is Kez. Welcome back to WordPress Theme Creation With Underscores. In this lesson, you are going to learn how to add support for featured images or post thumbnails in your theme. Now these are really popular, people love to use them so it's a great thing to know how to do. We're gonna be adding ours in below our post titles and above our post meta. The first part of making that happen, is letting WordPress itself know that featured images are supported in the theme so that it will make the feature images upload tool available to users in the admin panel. If you have a look at a post in the admin panel right now, you'll see that there's nowhere there that you can add a featured image. Open up your custom functions.php file again and add this code. This first line here is where we're letting WordPress know that the theme does support featured images, post thumbnails. And the second line that we are working with here is setting the default size of the thumbnails that we wanna use in our theme. The first number is the width, we're setting that to a default of 811 pixels. The second is the height 456, and the third is whether or not you want thumbnails to be cropped to that exact size. And we've set that to true because we do want them to be cropped. Set that code and go back and have another look at one of the posts in your admin panel. Now, you'll see that we have the featured image box in the side bar on the right. And we can go ahead and add a new featured image to this post so that we can test it in our theme. We've let WordPress know that our theme is going to support post thumbnails or featured images and we have added a featured image into one of our posts, but it's not gonna show up until we specify in our theme files where we want that post thumbnail to appear. In underscores, the file we'll need to edit to place our featured image is the content.php file. This is the file that determines what the default content is of any of our front page posts. Just like before, we're gonna make a duplicate of this file, and we're gonna rename that duplicate to _content-original. With an underscore at the beginning so we know that this is one of the files that we've been changing. Open up your Content.php file for editing. This code here outputs the title of each of the post. And this code outputs the meta information. We want our post thumbnail to appear in between these two. So paste this code right in between those two lines. This code first checks if there is a post thumbnail on this particular post and if there is, it will output a wrapper with a class name that we can style and then it will output the post thumbnail itself. When we refresh our site now we can see our post thumbnail. Now all we have to do is style it. Back in our custom bars and mixins file, we're gonna add this coloring mixin. And this is just gonna add a thick border at the top and the bottom of the post thumbnail. And in our custom styles bar, we'll add this code. And, this is our main post thumbnail class. We're using some negative margins here to make sure that the post image will stretch the whole width of the white space of the post. Setting a minimum width of 100% on the images also helps to make sure that even if the image isn't quite large enough it will still fit the layout properly. And then we're also including our coloring mixin that we just created. We'll take another look at our theme, and there's our nicely styled featured image with our borders at the top and bottom, and fitting the whole width of that white space on our posts. I've also added in some extra posts and extra featured images for you to take a look at, so you can see the kind of effect that we're creating with these post thumbnails. Our post thumbnails are almost ready to go, but they're just a little bit wonky when the screen size starts to shrink a bit. And, we just need to add in a little bit of extra code to our media queries to prevent that from happening. In your first media query in your custom styles file, the one that kicks in at your total site width value. Added this code in, just above the entry title code. This uses the same technique that we used to adjust all of our other layout elements in our media query. We're just placing the exact same code that we did the first time we set up this style using the exact same variables, but because the value of those variables has been re-declared in this media query, that will automatically take care of correcting the sizes that are set against those margins. You'll then want to place the exact same code in the other media query where you re-declared the value of your padding variables and that is our very last media query. When we see the site now at various widths the featured image stays just where it should be it doesn't overlap the edges and it's exactly the right width. In the next lesson, you'll be learning how to add support for excerpts in posts, so that allows the user to create their own custom little snippet of text to display on the front page instead of the content itself. You'll also be learning how to add some custom styling to the continue reading button that appears on posts so that we can make it look a little bit more snazzy. I'll see you in the next lesson.

Back to the top