Now that our header is complete, it is time to focus on the main section of our theme. Immediately after the header is the content section of our theme, and the first thing we notice when we start working with it is that it displays a large featured image. In fact, most of our pages, “Home”, “About”, “Services”, “Portfolio”, start with a large featured image that in WordPress lives separately from our main content and is called with the the_post_thumbnail() function. This gives us the flexibility to decide whether we want to display a certain featured image size in a particular template or not. Defining different featured image sizes is also important for us because apart from the large featured images we will use in our page templates, we will also have small featured images in our blog index template (check the Web Essentials – Final Design (v3).psd in the “design” folder). We can then call specific featured image sizes in specific locations.
The first thing we should do is to define theme support for post thumbnails and define featured image sizes, all of which could be accomplished through functions.php. If you examine the contents of the file, you will see that post thumbnails in our theme are already enabled through the following line of code:
[code language=”css” 1=”true”]
add_theme_support(‘post-thumbnails’);
[/code]
If you haven’t done it yet, just uncomment this line in your functions.php file.
Now it is time to add featured image sizes. If you examine the PSD design of our blog index page in Photoshop, you will see that the small featured images have a width and height of 158px.
[code language=”html” 1=”true”]
<pre><img class="aligncenter size-full wp-image-36136" src="https://www.webcoursesbangkok.com/wp-content/uploads/2015/09/small-featured-image-size.jpg" alt="small featured image size" width="657" height="196" /></pre>
[/code]
However, the large featured images we will be using on our homepage and in the rest of our page templates spans the full width of the page container (960px) and has a height of 365px.
The way we add featured image sizes is by using the add_image_size() function. Start by adding these sizes immediately after the add_theme_support() function like so:
[code language=”css” 1=”true”]
add_theme_support(‘post-thumbnails’);
add_image_size(‘large-thumb’, 960, 365, true);
add_image_size(‘small-thumb’, 158, 158, true);
[/code]
The first value of the add_image_size function is the actual name of the thumbnail, the second is its width and the third is its height in pixels. The fourth is the crop factor. If set to “true”, WordPress will take an image much larger than this size, scale it down to match the width and crop it to fit the height. If the value is set to “false”, WordPress will just display the large image as 960 by 365 pixels without cropping it. It is generally best to set this value to true.
As you see, we have named the large thumbnails we will be using in our page templates “large-thumb” and those we intend to use in our blog index template “small-thumb”.
From this moment forth, whenever we upload new images, WordPress will create the necessary featured image sizes we already defined in functions.php. However, this is not true for the existing images we have on our site. To regenerate our existing images so that they properly display in our templates, we need to use a plugin such as Regenerate Thumbnails. Go to the plugin section of your WordPress dashboard and if you don’t have it already installed, do it now. Then activate the plugin, go to Tools -> Regen. Thumbnails and press the “Regenerate All Thumbnails” button. The process will take some time depending on the number of your images and once complete, we will have them all resized and ready to be added to our templates as featured images.
Here is a list of all the other parts: part 1, part 2, part 3, part 4, part 5, part 7, part 8, part 9, part 10, part 11, part 12, part 13, part 14
