- View Offline
- Picking a parent theme
- Creating and activating a basic WordPress child theme
- Using the developer tools
- Changing the header image size
- Using conditional statements for customized effects
- Adding custom menus to the child theme and/or a template
- Changing the default footer content
- Adding featured images to posts
- Changing the display of meta content (such as date, author, category, etc.)
- Excluding categories from the front page with custom queries
- Including functions from external files
- Identifying and fixing common mistakes
Skill Level Intermediate
Once you have featured images in your site, you can add them pretty much anywhere you want on the site. Because the featured image is directly associated with each post and each page, without being in the content body, you can display these images in a different way from regular images in the body. The key is to know how to call them up, and how to get the correct size when you do. I have shown you this several times before. In the twentytwelve theme, the general way in which a featured image is displayed is at the top here: top of the post, large image before anything else. But earlier in the course we created new category templates and in these templates those gigantic featured images look pretty weird.
What I want to do now is add a smaller featured image here, next to the excerpt of the content in each post. To do that, we need to make some small changes to the content.php template and add in the featured image. First, I'll open content.php in my child theme and find out where I want to put in this content. What I want to do is put it next to the excerpt, and since I already have the conditional call to test for when the excerpt should be displayed, I'll just place it inside that conditional call.
I also want to place the featured image outside of the excerpt so that it'll float to the left of it. So I am going to add some new lines directly above the excerpt here, and then I can put in my featured image. But what I am going to do now is wrap the featured image call in a conditional call to make sure that we don't put in code when there is no featured image to show. So I'll start off with a php delimiter, and I'll end it, and then I'll make a conditional call. I'll say if, and here I'll use another conditional statement that comes with WordPress.
It's called has_post_thumbnail. Not surprisingly, all this function does is it checks whether or not the current post has a post thumbnail. If it has a post thumbnail, I'm going to echo out some information. So I'll print out figure and I'll give the figure a class, call it cat-thumb, because this is a thumbnail for the category. I'll then end my figure with another echo and then in between these two, I'll use the function that calls the post thumbnail.
If we scroll up here, you'll see we already have the function here in the file. It's called the_post_thumbnail. But this time I want to call a specific size of post thumbnail, so I am going to say the_post_thumbnail and then I'm going to put in a variable that defines what size I want. To refresh my memory, I'll go back to my functions.php file where I defined this new size and I'll scroll down here until I find the size. It's right here, add_image_size, and the name is category-thumb.
So I'll copy out category-thumb and paste that in here, and then finally, I have to end my conditional statement, so I'll say endif. I'll save this and now when I reload my category archive, I should see small category thumbs appear. But they don't look exactly right yet. I still have to float this to the left, and that's why I wrapped this figure class="cat-thumb" around it, so that I can now create a style for cat-thumb.
So I'll go to my style sheet, scroll down, add class cat-thumb, and then I'll say float: left; and I'll also give it a little bit of a margin, so margin, top margin 0, right margin 10 pixel, bottom margin 10 pixel and left margin 0. Then I'll close the style cat-thumb, save style.css, and reload my page again, and now you see the thumbnail hovers nicely to the left of the content. And just to make sure I didn't break anything, if we jump back to the front page, scroll down, you see we still have the gigantic featured image here, and if I go to the single posts, we still have the gigantic featured image here.
By adding featured images in strategic locations throughout your site, you both make your site look nicer and increase the chance of people reading more of your content.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.