Introduction to WordPress Featured Images
Hello everyone, welcome to another WordPress tutorial. In this lesson, we'll be reviewing featured images. We're going to cover four things. Number one, what is a featured image and how is it different from a regular or standard image? Number two, we're going to make sure that your theme supports featured images and if it doesn't, we'll learn how to add that support. Number three, we'll learn how to assign featured images to posts from the WordPress admin. And number four, my favorite part, we're going to roll up our sleeves, get our hands dirty with a little bit of code, and learn how to have fine-grain control over the different sizes of images that WordPress creates automatically.
So we'll learn how to provide a little bit of instructions for WordPress and then behind the scenes, when we upload a single image, WordPress will automatically create as many different versions of that image as we want using the exact aspect ratio and cropping strategies that we specify. I think that's going to be a lot of fun, so let's get started. Number one, what is a featured image?
What Is a Featured Image vs. a Regular Image?
A featured image is a single image that we choose to represent a post or a page, whereas a regular image is something that we add in the text area of the post. So for example, if I go to the dashboard and click on posts, I'll choose this first one. A regular or standard, not a featured image, would be something that we add in with the text, almost like a word processing program. We would click Add Media and then we could choose, do we want to add the image after the first paragraph of text or after the third paragraph of text?
A featured image is different. So in the bottom right-hand corner of the edit post screen, you'll see a module named Featured Image. Now if you don't see this in your version of WordPress, that's okay, we'll learn how to add it in just a moment. But for now, just know that this is where you assign a featured image to a post or page.
Now, a featured image is a hands-off approach when it comes to where you think the image should be located. You don't get to choose if it should be after the first paragraph or the third paragraph. You're basically saying, 'I will let my theme make intelligent design choices for me.' So it's up to your theme to use this image where it sees fit, but you're just assigning this image to represent this post. Perhaps when you're viewing the blog listing page, your theme will output the image as a thumbnail. But maybe when you go to the blog detail view, it'll output the image as a wide banner. Who knows? Every theme is different. The key concept is that the featured image is a separate field from the main text of your post or page, and what this does is it allows your theme to do very neat dynamic things.
Enabling Featured Image Support in Your Theme
So let's move on to number two. Let's make sure that your instance of WordPress, the theme you're using, supports featured images. So if you go into your dashboard and you begin to edit a post, if you see in the bottom right-hand corner a featured image box, that means your theme supports featured images. And if you do not see the featured image box, do not panic. It's very easy to add that support.
So behind the scenes real quick, I'm going to rip out all of the code from my theme that supports featured images and that outputs the different images in different places. And then when I come back, once that code is removed, we will rewrite all of that code together to learn how to add featured image support to your theme. Welcome back. So I've removed the code that both supports and outputs the featured images. You can see that the featured image module is no longer present. So now we are going to add that back in together.
So we'll start by heading over to the code and opening the functions.php file in our theme folder. We will scroll to the bottom and write a bit of new code. So I'll start with a comment, add featured image support. Okay. Now we only need one line of code technically. So we'll say add_theme_support and what do we want to add? We want to add support for featured images or thumbnails, so post-thumbnails.
Now technically this line of code will do the job. This is really all we need, but this is not the officially sanctioned WordPress correct way of doing things. So I'm going to cut this into my clipboard so I can paste it in in just a moment. But here's the actual correct way of doing things. We'll create a function, we can name it anything we would like. I will name it learningWordPress_setup. Okay and then we'll paste in that line within this function. The reason we're doing this is so we can call this function at the precise moment that WordPress prefers. So now we can say add_action. When do we want this function to run? after_setup_theme. Uh, then we'll just paste in the name of this function, add a semicolon. And I'm thinking we should probably move this comment in line within the function. After this new line of code we added, because this function actually has a purpose much larger than just registering image support. Technically a lot of code should be inside this function anytime you're adding support to your theme. So if you've been following along this entire WordPress theme development series, you remember that we added support for navigation menus. So we'll create a comment that says 'theme setup'. So this is where we're adding code and sort of describing what our theme should add in terms of functionality. Uh, but now that we've registered this and we've added this action, let's go ahead and refresh in the admin panel and we can see that the featured image module is now present.
Assigning and Displaying a Featured Image
So this means everyone watching this video is now on the same page. We all have a theme which supports featured images. So now let's get to the fun part, actually adding the image. So go ahead and click 'Set featured image'. I usually click on the Upload Files tab and then just click to select files. Now I've navigated to a folder named 'photo files' and I have three files on my hard drive to choose from. I'll choose this photo of a bird. You can feel free to choose any photo on your hard drive. And once it's finished uploading, just click the 'Set featured image' towards the bottom right-hand side of the screen. And you can see there is the image. Scroll up, click update to save the post, and we're off to the races.
Now if you're using a pre-existing theme that was either free or that you purchased, most likely the featured image will display somewhere on your website as a thumbnail or when you click to view the actual post. But if you're following along and watching this WordPress theme development series, you're probably interested in learning how to add that featured image into your own theme with your own code.
So now we're going to move on to step four, which is learning how to output the image into your theme and also learning how to register different aspect ratio sizes. So maybe you want the image to be a square, maybe you want it to be cropped to be a tall rectangle or a wide rectangle. We can do all of that. So let's dive in.
Let's start simple. The first goal that we'll give ourselves is to simply output the image irregardless of aspect ratio or size. Just output the image above the text for each post. So we'll head over in the code to index.php of our theme folder, and let's output the image directly above the text. So that would be about here. Drop into PHP, and then the code is the_post_thumbnail. That's it. So now if we refresh, there's our image and it is entirely too large. You can see that even on a decent sized screen, you would have to scroll to the right quite a bit.
So the first thing I'm going to do before we even learn how to register different sizes for our thumbnails, I'm going to head over to our stylesheet and create a rule that targets every image on the website and gives it a max-width of 100%. So now if we refresh, at least it fits the layout.
Creating Custom Image Sizes with add_image_size
Now that we know how to output the image in our theme, let's take things a step further and learn how to customize it. So by that I mean that we can tell WordPress to automatically generate multiple versions of the image using different aspect ratio and cropping strategies. So we'll give ourselves a goal. We'll say on the homepage, where there's multiple posts, we want to output a small rectangular, almost square-like version of the image. And then once you click on the permalink to view just that one particular post, then we'll output a very wide but not very tall banner version of the image. And WordPress can automate all of that for us if we give it a bit of instructions in the functions.php file.
So we're in functions.php. I'm going to go directly beneath this line of code that added theme support for thumbnails or featured images, and I'm going to register a few new image sizes. So we'll use the function add_image_size. We'll call this one small-thumbnail. Okay, now here are the parameters it accepts. The first number is the width in pixels, so I'll say 180 pixels wide. The next value is how tall the image should be, so I'll say 120 pixels tall. Oops. And the third value is whether you should use hard cropping or soft cropping, so I'm going to say true. And what this will do is it will crop the image to 100% fit this aspect ratio, even if WordPress might need to crop the image in a way that looks awkward and crops out an important part of the image. It will do everything in its power to keep this aspect ratio. Now sometimes that's a good idea, sometimes it's a bad idea. I'll leave it to you to decide what makes sense for your layout, but most of the time I prefer the hard crop.
So let's create the banner version of the image now. So we'll say add_image_size. banner-image. 920 pixels wide, 210 pixels tall. And again, I'll use the hard cropping. So now that we have these keywords or these names for these images, 'small-thumbnail' and 'banner-image', now if we go back to index.php, remember where we're outputting the image in our theme? Now I can say use the 'small-thumbnail' size of the image. So if we refresh on the blog listing or homepage screen, you can see that instead of taking up the whole screen, it's now using that new image size that we just registered.
Now, watch how easy it would be to add the banner version so that when you're viewing a single post, it uses that size. Just copy and paste this code, go into single.php for individual posts, paste this in, change this from small-thumbnail to, I believe it was banner-image.
Troubleshooting Custom Image Sizes
And if we refresh we can see that it is not working as we would expect. I was expecting an image to be this wide. So clearly what we need to do now is remove the featured image and upload it again. Sometimes when you register new image sizes through your functions.php file, WordPress will need a second chance to regenerate all the different sizes if those sizes weren't registered and present when you first uploaded the image. So we'll just re-upload a new copy of the image, go ahead and update and that should fix the issue. So now if I refresh on a single blog post page, you can see it's perfect. Well, it's not perfect. Um, it's the size and aspect ratio that we were hoping for, but it sort of cropped out the bird's head, which is important. So now we're going to learn how to specify what portion of the image it should crop.
Controlling Image Cropping via Code and the Admin
Now we have two options for controlling how the image gets cropped. Number one is with code, and number two is to manually in the WordPress admin draw a rectangle around the part that you want to crop. So we'll start with number one, the code way. So in our functions.php file where we registered this banner image size, let's set things up so that it crops the top left portion of the image instead of the vertical center of the image. So that way we can see the bird's head, or at least part of the bird's head. So we'll change this last part from true to instead use an array where we can specify what directional portion of the image do we want to keep when we crop. So I will say we want the left and we want the top. So this will grab the top left part of the image.
Now if I refresh, I don't think anything will happen. I think we'll need to re-upload the image again. So really quick, let's do that. Now, while you're watching this, I will say that there are plugins or even snippets of code that you can add in your theme that will re-automatically generate thumbnails every time you add new sizes, but I don't think it's the best for performance on most servers. So it's not something that you want to leave in place all the time. But you can see that our cropping code worked. So now we're getting the top of the bird's head.
Now, even though our 'top left' is sort of getting the job done, you might want even more control. Now if that's the case, instead of doing it with code, you can crop the image yourself by clicking on it in the post screen, clicking 'Edit Image' over on the right side, and then you can actually click and drag and create your own cropped rectangle. And then simply clicking 'Save', 'Set featured image', 'Update' the post, and now you have the exact portion of the image that you specified.
Advanced CSS Layout for Thumbnails
So let's review what we have. We now have on the homepage a small rectangular thumbnail version of the image and if you go to the detail page, you get this large banner version. Now the final portion of this video is going to center around CSS. We're going to learn how to take this thumbnail small version and float it so that it sits to the left of the post and even the title text.
Okay, so let's adjust our HTML and CSS so that the image sits where we want it to sit, to the side. So the first step is to head over to index.php. Here's our thumbnail. We want it to actually be above in terms of the order of the HTML, to sit above the title. So we'll output it here, but we actually want it to be in some sort of containing element. So we'll create a div named post-thumbnail and then let's paste the image into that element.
Okay, now in terms of CSS, there's a lot of different ways that we could position the element to sit to the side of the text. There's no right or wrong way, but I'll show you the way that I'm going to do it. It's involving position: absolute. So we'll give the wrapper of the entire post a class of has-thumbnail and then in our CSS create a few new rules. So has-thumbnail, that container element should be positioned relative and it should have a good amount of padding on the left. And then we can simply take our, I believe it was post-thumbnail, yes, post-thumbnail, the element that contains the image, set it to position: absolute to sit to the left. So then if we refresh, we can see that the positioning is exactly how we would prefer.
Now you may be thinking that works well if a post has an image, but what about these posts that don't have a featured image? Obviously, they shouldn't be pushed from the left 200 pixels. So that's where we use conditional code. So remember we added this class of has-thumbnail. Well, we only want to add that class if the post actually has a thumbnail. So I'll show you what I'm going to do. I'll temporarily remove that and we'll drop into PHP so we can add a bit of logic. So we'll say if the current post that's being looped through, if it has a featured image or thumbnail, then do something. And what do we want to do? We just want to output that class, has-thumbnail. So now if we refresh, we can see that the first post has a thumbnail so it gets the class that adds the space. And if a post doesn't have the image, then we just don't add that class and so they remain aligned in a way that makes sense.
Final Touches and Full Workflow Demo
Finally, let's wrap a link around the image so that you can click on the image or tap on the image to follow the permalink to the full post. So here is the image. So we'll wrap it in a hyperlink. Okay, and obviously we don't want this actual pound sign. The permalink. Okay, so now if we refresh and I click on the image, it takes us to the full view for that particular post and then you can see here's the banner image obviously.
So this concludes all of the code that we'll be writing in this video. We're now complete, but let's run through the process again with a new post and a new image just to show the full circle of functionality. So let's say we want to add an image to this 'opinion piece' post. In our dashboard, we click posts, we find the opinion piece, 'set featured image'. I'll upload a new image of a cat. Okay, so it's uploading and processing. WordPress is automatically creating the different image sizes and aspect ratios behind the scenes. If we click update and we refresh our homepage, you can see that here's the 'opinion piece' and if we click it, there's a banner. And obviously we would want the cat's face to show. So then if you need to, you can go in and make manual adjustments. So I will click to edit this image. I'll crop it a little bit closer so that we can always see the cat's face. Okay.
Now with a lot of images, you won't need to crop them because you won't be choosing such exaggerated aspect ratios. I chose a very exaggerated full-width but not very tall edge case just to show you some of the different cropping strategies. But there you can see it. WordPress is automatically creating different sizes for us and it works quite nicely.
So thank you very much for watching this lesson. I hope you feel like you learned something and stay tuned for more WordPress and web development tutorials. Thanks, bye.
