learning WordPress Featured Image Tutorial > WordPress learning

 

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 index.php 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 functions.php file
so we're in functions.php 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
index.php 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
functions.php 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
index.php 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