WordPress Featured Picture Tutorial

by birtanpublished on July 3, 2020

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-grained 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 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 a not 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

Paige your theme will output the images

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 poster page and

what this does is it allows your theme

to do very neat dynamic things so let's

move on to number 2 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 really quick I'm going to rip

out all of the code from my theme that

supports featured images and it 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 the

comment add featured image support okay

now we only need one line of code

technically so we'll say add theme

support well and what do we want to add

you 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 learning

WordPress since that's the name of this

theme 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 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 in 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 menu so we'll

create of comment says themes setup so

this is where we're adding code and sort

of describing what our theme should add

in terms of functionality 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

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 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 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 indexphp of our theme

folder and let's output the image

directly above the text so that would be

about here drop in to 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 style sheet

and create a rule that targets every

image on the website and gives it a max

width of a hundred percent so now if we

refresh at least it fits the layout 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 give ourselves a goal

we'll say

on the home page 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 functionsphp file

so we're in functionsphp I'm going

go directly beneath this line of code

that added themed 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 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

indexphp 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 home page 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 dot

PHP for individual posts paste this in

change this from small thumbnail to I

believe it was banner

banner image 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

uploaded again sometimes when you

register new image sizes through your

functionsphp file final 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

reupload 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 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 partly one crop so we'll

start with number one the code way

so in our functions dot 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 cropped

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 quickly 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 really 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 so let's

review what we have we now have on the

home page a small rectangular thumbnail

version of the image 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

indexphp 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 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 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

as thumbnail 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 a

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

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 in 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 home page you can see that here's

the opinion piece if we click it there's

a banner and obviously okay we want the

cat's face to show so then if you need

to you can go in and make

annual 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 learn something and stay

tuned for more wordpress and web

development tutorials thanks bye

Related Videos

Be the first to comment “WordPress Featured Picture Tutorial”

Your email address will not be published.

There are no comments yet.