In the previous movie, we added a welcome message to the top of our index page so that when people visit the site they immediately get a welcome message. And this welcome message is coming from a separate page within WordPress. Now I want to take that a step further and add a featured image to the welcome message and then display that featured image alongside the welcome message here on the right. But this is a bit of a challenge, because we're now outside the loop. The loop is what runs down here in the index page.
It shows all the different posts. But we created a special call that calls in content from a page to display above that. Now if I use the normal post thumbnail template tag to get a post thumbnail to appear, or a featured image to appear, what will happen is I'll see the featured image from the first post rather than a featured image from this page. What I need to do instead is tell the database to specifically grab the post thumbnail or featured image from this page and display it next to the overall content.
But I'm getting ahead of myself here. First I need to add a featured image to my page. So I'll go to the backend, go to Pages, Front Page, and add a featured image. So I'll add an image from my desktop, change the Title and Alternate Description, and set Use as featured image. Update the page and now the page has a featured image.
Now I need to call in that featured image in this new section that I have here on the top of my page. So I'll go to my child theme and open welcome.php, and from here I need to insert my featured image. But first I have to figure out how to call it. I want to use a function called get the post thumbnail. I want to use that function because with that function I'm allowed to provide an ID for a specific post or page and then say I want the featured image from this particular page. But where do I get that ID from? Well, if you remember, this page variable contains all the information from the database about our Front Page page.
So if I do this print_r thing again-- say I want to print everything from page, save it and refresh in my browser-- you'll see in here we have ID 114. This is the post ID for our page, so that's the number I want to use. That means I can call in that number in my new function. Because I want to insert a featured image and then not share that in all cases I will have a featured image, for example, if I pass this child theme onto someone else and they forget to apply a featured image to their Front Page post, they may not have a featured image.
I'm going to add in a conditional statement, if, and then I'll say get_the_post_thumbnail. And then I want to point to that particular ID, so I'll say page-> ID. Then we get the ID contained within the page that's from the Front Page. Do some clean up here, and then I need to end my conditional statement, endif. So now I'm saying if we have a post thumbnail attached to the page for this ID, so Front Page, put in the following say get_the_post_thumbnail($page->ID).
And because this function doesn't automatically display the content, I have to put echo in front of it. So now I am echoing the content from get_the_post_thumbnail with the page ID if it exists. Save it, reload the Front Page, and now we see the image of the cab and then the Welcome message underneath. This idea of specifying a post ID from which to call the featured image actually works for all sorts of content.
If you want to, you can use the post ID to call in titles, content, and whatever other post's info you want to from any post or page. That's what WordPress does normally. It goes to the database and says, hey, I want post number 85, give me all the content. But now you know how to do it yourself and as you can see, it's very easy to do.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.