learning WordPress Widgets Tutorial > WordPress learning

 

hello everyone in this WordPress
tutorial we will learn about widgets so
let's answer three questions one what is
a widget two how do I manage widgets
from the WordPress admin area and three
if I'm creating a theme how do I make
sure that that theme supports widgets or
is ready to accept widgets so we'll
start with number one what is a widget a
widget is simply a self-contained
chunk of content that usually has a very
specific purpose that gets displayed on
a website so for example a lot of
websites have a sidebar and in that
sidebar we may see an area named recent
posts and then a list of links that is a
recent posts widget or we might see an
area labeled categories and then a list
of links that is a categories widget so
now that we have a general idea of what
a widget is let's head over to the
WordPress admin area and add our first
widget to a website in the admin sidebar
look for the appearance link then look
for the sub link named widgets in this
left column we see the available widgets
that ship with WordPress out-of-the-box
so this is the archives widget it will
output a monthly archive of our posts
this is the categories widget that we
saw in the example earlier now in this
right-hand column we see the widget
locations of the current theme that is
enabled so we see the first widget
location is named sidebar and we can see
that in our current demo theme this is
the sidebar and it's completely empty
because we have not added any widgets
yet so let's add a widget I will add the
categories widget so I click on it it
asks me which widget location do I want
to add the categories widget to I will
select the sidebar I will click Save so
if we refresh our website they see that
the categories widget is now displaying
in the sidebar let's head back to the
WordPress admin area and let's imagine
that in addition to categories I also
want to output recent posts in the
sidebar so I can click
the recent posts widget add it to the
sidebar and if we refresh here it is now
let's imagine that I decide I want this
widget to display before the categories
widget it's as simple as dragging and
dropping the recent post widget to sit
above the categories now I must point
out that widgets are not limited to the
sidebar area of our website so for
example back in the admin area we can
see that there are additional widget
locations named footer area one through
four so at the bottom of our website we
currently do not see any widgets but
let's add the search widget to the
footer area one location here it is so
you can take advantage of any widget
locations that your theme offers so
perhaps we want to add a bit of custom
text to footer area too so I will click
on the text widget I will add it to
footer area too
I can now input any text that I want
custom text here this is a custom text
for what area to save there you have it
we could also add monthly archives to
footer area 3 and we could add meta
links to footer area 4 even though I'm
not sure how truly useful that is but
you get the idea with just a bit of
clicking and dragging and dropping we
just customized the sidebar of our
website and the four columns in our
footer and it's very easy to
drag-and-drop and modify so perhaps we
want to move these meta links to sit in
the 3rd column I can just drag and drop
and switch things up however I like
alright now let's change gears a bit we
are all familiar with what a widget is
and how to manage widgets from the
WordPress admin area so we are now ready
to dig into the real meat and potatoes
of this lesson if we are creating
our own themes or modifying an existing
theme how do we add widget' support and
how do we add widget locations anywhere
that we please all right so behind the
scenes I just removed all of the code in
my theme that was adding widget support
and was adding all of the widget
locations so you can see that this theme
no longer has a sidebar this is the
exact code that we were working with in
our previous lesson so we should all be
on the same page we are going to write
all of the code together let's get
started our first step is to hollow out
or carve out a bit of space for a
sidebar so the recipe to achieve this is
just HTML and CSS so we want two divs
and we will float one to the left and
one to the right so all of this existing
content we will wrap inside a div named
main column so in index.php after the
header I'll drop out of PHP we can drop
back into PHP here but we're going to
create a new div with a class of main
column now right before the footer
begins we can close and open PHP
accordingly and I'm just going to cut
and paste all of this code that is
outputting the meat-and-potato guts of
this page I'm going to cut that into the
main column div and let's create a new
div named secondary column this will be
our sidebar so within this column let's
include a sample paragraph that reads
this is the sidebar next let's hop over
to our stylesheet and add a bit of CSS
that corresponds with these new class
names of secondary column and main
column so I will create a new comment to
stay organized in our style dot CSS file
main column select the main column class
we'll give it a width of 66% and we'll
float it to the left let's create a
comment for the side column will select
the secondary column class give it a
width of 30% and float it to the right
now if you've watched my lessons on CSS
you know that when we float columns we
need to clear our floats now there are
many different ways to clear a float but
my personal preference is to use the
clear fix on a parent element so that
our modules stay self-contained and can
be easily moved around so all I'm going
to do is create a parent div I will give
it a name of site content and I'm just
going to cut and paste both the main
column and the secondary column into
this div and then this newly created div
will receive a second class of clear fix
so if we save index.php and if we save
our stylesheet we see that from a layout
perspective our sidebar is in place so
now let's work towards making this a
dynamic widget location whenever we are
enabling a feature or making something
dynamic there's a good chance that we
need to hop over to our functions PHP
file at the bottom of our functions file
I'm going to create a comment to stay
organized add our widget locations so we
need to write a function that adds a
widget location for our sidebar so we'll
create a function we can name it
anything we would like but I will name
this our widgets initialize now we will
write the guts of this function in just
a moment but first let's make sure that
this function runs at just the right
moment so WordPress offers a function
named add action the first argument
tells WordPress when to run this
function so we want to wait until the
widgets initialize action and then we
just want to run this function so the
second argument is the name of the
function that we're creating so I'll
just paste that in add a semicolon so
now we are free to write the guts of our
function so what do we want to do we
want to register a widget location
register only the name of the function
we need to use is not register widget
location it's register sidebar now don't
get too caught up on the name this is a
very flexible function that is not only
used for sidebars this function accepts
many arguments
we're actually going to create an array
so within this array the first option is
name this is the name that end users in
the WordPress admin area will see so
this is the widget location name or in
other words this name should be human
friendly so we can name this sidebar now
the second option is named ID now
end-users will not see this so this name
doesn't need to be human friendly it
needs to be computer friendly so that
means no spaces or extra weird
characters so I will name this sidebar
one now this is all the code we need for
the time being but before I save this
new code let's head over to the
WordPress dashboard and you'll notice
that when I hover over appearance
widgets is not an option but as soon as
we save this new code that we wrote so
command s if we come back to our
dashboard and hover over appearance
widgets is an option you can see there
is the one widget location sidebar now
currently if we add a widget to our
widget location nothing will happen
because we haven't updated our template
or theme code so for example back in
index.php in our secondary column div we
still have static text which reads this
is the sidebar so we can simply replace
this with a bit of PHP that will call in
the appropriate widgets from the
specific widget location that we choose
so we'll use the dynamic sidebar
function and this is where we use the ID
that we just set up so sidebar one
sidebar one save and now this code in
index dot PHP will automatically pull in
whatever we set up in the admin area so
if we want to add recent posts add it to
the sidebar and we are in business so
this is excellent
except it's not the year 2004 and we
don't only want widgets in our sidebar
some websites don't even have a sidebar
but the great thing about WordPress is
that it's very easy to add widget
locations wherever we want
so we could add a widget location in our
header we could add a widget location at
the top of our content area we can add
widget locations in our footer so to
show you how easy it is to add
additional widget locations I'm going to
add four widget locations in the footer
so four columns in functions.php we can
simply duplicate this register sidebar
code so the name of our new location
will be footer area one we'll give it an
ID of footer one you could use any name
and ID values that you choose so with
this code in place if we revisit the
widget screen in the WordPress admin
area we see a new widget location named
footer area one now if I attempt to add
the search widget to footer area one if
we refresh our website nothing will
happen because we have not yet output
the code in footer dot PHP so I will
create a new div with a class of footer
widgets and let's use PHP to output the
widget area that has an ID of footer one
so if we save and refresh there is our
widget location so that's one footer
widget area down let's create an
additional three so over in
functions.php we simply need to register
additional widget locations we can
duplicate this again change the name to
area two and the ID to footer to
duplicate it again for the area three an
ID of three and once again for the area
four with an ID of four so if we revisit
the widget screen we now have all four
widget locations now before we add any
fun widgets to any of these new
locations
let's first output these locations in
footer dot PHP so here is the footer one
location I actually want to wrap each of
these footer locations in a div that
uses a class of footer widget area
so that we can use CSS to target this
class name later to create the four
columns effect or four columns layout
now before i duplicate this an
additional three times for the two three
and four areas i want to show you a neat
trick so if an end-user in the admin
area doesn't add any widgets to a
particular location we shouldn't output
this code in the browser it's a waste of
markup so we can use a bit of
conditional logic and say only if a
widget area is active so we can use the
is active sidebar function the argument
will be the name of this widget area so
footer one
so we're saying only if there are
actually widgets assigned to this widget
location do we want to output any of
this so then we will close our if
statement and if let's indent this to
stay organized so now we can simply
duplicate this an additional three times
for all four of our locations
all right so behind the scenes I just
finished copying and pasting this code
and then plugging in the appropriate
numbers so two two three three and four
four so now we are free to add different
widgets to these locations so we can add
archives to footer area too and we can
add meta links to footer area three and
we can add custom text to footer area
for custom text 44 alright so if we save
and then refresh in the browser we see
that all that is missing now is a bit of
CSS to position these areas so that they
sit as if they are four distinct columns
so in footer.php you can see that we
gave each column area a class of footer
widget area and we're going to be
floating these in just a second so I
want to make sure that their parent
element has a class of clear fix so
let's head over to our stylesheet create
a new comment footer widget areas now
our columns had a class of footer widget
area
I want four of these to sit on a row so
I will give them a width of 25% I will
float them to the left and I want them
to have margin or spacing between the
four columns so I will give them a bit
of padding right and to counteract this
so that our width based arithmetic still
makes sense I'm going to use box sizing
border box now obviously from a graphic
design standpoint there's still a lot of
work to be done but you now have the
tools to create widget areas and
register them within your themes and you
don't need to limit yourself to the
sidebar or the footer you can use the
dynamic sidebar function to output
widget locations anywhere in any of your
theme files maybe you want a widget
location at the end of each blog post
maybe you want a widget location that
only displays in a special page template
it's up to you you can create as many
locations as you want now before we
close out this lesson there are two more
tips that I want to share number one is
that if you're interested in customizing
the HTML that WordPress outputs for your
widgets there are a few simple options
that you can add in functions.php so for
example by default WordPress treats
widget areas as a giant unordered list
so that's why we see a bullet even for
the widget titles now we can use CSS to
hide the bullets or we can simply change
the HTML output so for example if I
inspect this header you can see that it
lives inside a list item this is the
categories widget and if I hover over
this list item you can see that it's
highlighting the recent posts widget so
we can customize that if you don't want
to live with the unordered list list
item structure you don't need to so in
functions.php we can add additional
options for this widget location so I
will say before widget output a bit of
HTML that reads div class widget item
and we'll use a different option named
after widget and we will simply say
close that div so now if we save and
refresh WordPress is using the custom
HTML structure that we just specified so
now we can see this widget is using a
div of the class of widget item and so
as recent posts so this way you are free
to add any border or margin between the
widgets you can write CSS that targets
HTML that you are comfortable with just
a quick note you also don't have to live
with the fact that by default WordPress
outputs the title of widgets as an h2
with the class of widget title so maybe
you want to use an h4 element to do that
in functions.php you can simply say v4
title h4 with a class of my special
class so you can use whatever you feel
like and then be sure to add the after
title and then close out whatever
element you just opened so now our
sidebar uses h4 elements and this
lessons final tip is that the output for
our sidebar which lives in index.php
secondary column this code should
actually live in its own file named
sidebar PHP so that way we don't repeat
ourselves so I will create a new file in
my theme folder named sidebar PHP I will
cut this secondary column code and paste
it into the newly created sidebar dot
PHP and then where this code used to
live in index dot PHP I can simply say
git sidebar and that's going to bring
this lesson to a close be sure to check
out the demo files for this lesson the
zip file is in the description in that
example I actually took the time to
write CSS so that the padding the margin
the borders the font sizes look a bit
better but feel free to experiment with
your own styles I hope you feel like you
learn something and stay tuned for more
WordPress and web development tutorials
thanks bye just a quick note at the end
here if you or anyone you know are
interested in learning html5 and css3
you might be interested in a new course
that I just published there is a
half-off coupon code in the description
for this video the course teaches these
two languages from the ground up we
learn how to create our own responsive
grid add transitions and animations we
learned about cross browser support and
feature detection and we even learn the
basics of sass it's definitely something
to consider if you're new to web design
and you want to get started on the right
foot