Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our design, each post has an optional featured image that appears before the main content, like you see here, at the very top of each post. Now that we have the featured image sizes defined, it's time to call them into the single post template so they display just like they do in the design. Before I do that though, I need to have some featured images to work with. In the theme unit test data, there's two posts. One called template featured image vertical and one called template featured image horizontal that both already contain featured images.
I'm going to add an additional featured image to the first post in my site here, Template Sticky. So I'll go to the post, and then click on Edit Post. And here I'm going to scroll down to the bottom of the screen, click on the Set Featured Image button. And go to the Media Library and look through the images that came in with the theme unit test data. And find an image that's big enough to take up the whole space. So you'll remember the full width of the biggest image was 1060. So I need to find an image that's bigger. Then 10 60, so if I select this one, It's 800, this one is 1,600 so we're going to use this one.
It's bigger than the size I'm going to use. So, I'll set this as a it appears down here which means it is set. And now I can update my pulse. Now of course, when I go and view my post, the image does not appear. That's because we are yet to see our post through our template. So now I need to go back to my templates and find where the featured admission should be inserted, is within the loop. Now, we're working on the single post here, and you'll remember that the get_template_part single function is within the loop.
And this is important because each featured image is associated with the post through the post ID. So to display the featured image within a template, I have to put the featured image call within the loop. So here we have the loop. And the loop points to content single, so it's content single I need to put the featured image call into. I'll close single.php and open content single instead. And here I have to decide exactly where I want to place my featured image. Now i mentioned that in the design I have the featured image appear before the content, but it should still appear within the article.
So naturally I need to make some space here above the header, and then place the featured image right at the top. The way you can call in a featured image is by using the function the post thumbnail. So here I'll put in a PHP delimiter. And then just say echo the post thumbnail, and here I can also add a variable to specify exactly which size I want. Here I want the large thumb. You'll remember that's the name of the large image that we created in the previous movie. I'll end my function and end my PHP delimiter, and then I can save content single and reload my browser.
And now my featured image appears here at the top and it's nice and big. Now of course, this is a huge image. So, it will expand the entire screen that I have now, because my screen is relatively small. But if I go and re-load the featured image posts, you'll see that we have a little more work to do here because. When the image doesn't span the full width of the screen, it currently aligns to the left-hand side of the screen. Same thing happens with this post, and it looks kind of weird. So what I need to do is add some styles, so that I can center this image above the content.
And to do that I need to wrap a div with a class around the featured image function. And here, we run into a bit of a problem. If I go inspect the code here, you'll see that when I call the post thumbnail, all WordPress does is output the actual image code. And of course, that means if I call the post thumbnail on a post that doesn't have a thumbnail, then WordPress outputs nothing. But if I add an extra markup around the post thumbnail, say, a div. With a class in it and then apply styles to that class.
Then, when I call in a pulse that doesn't have a thumbnail, the div will still appear within my markups. I'll have an empty div and I might potentially add extra clutter into my site. So, to add in a div, I also have to wrap it in a conditional statement that tests whether or not the image is present and then only places the div in place if we have a featured image. To do that, I've created a small cold small snippet that you can copy out and I'll replace the code I put in with the snippet here. And here you see we have the same call, the post thumbnail large thumb.
I've wrapped in a div with a class single post thumbnail that also has a clear post so that it clears properly. And I also end that div. And then I wrapped this entire stack of code inside a function called has post thumbnail. And obviously, this function just tells WordPress whether or not there is currently a post thumbnail available. So now I have a conditional statement that only outputs this code if the post thumbnail is available. And that means have a class that I can target with my styles. That's next.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66384 Viewers
61 Video lessons · 96849 Viewers
56 Video lessons · 110541 Viewers
82 Video lessons · 105174 Viewers
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.