WordPress Widgets Tutorial

by birtanpublished on July 3, 2020

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

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

functionsphp 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 footerphp 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 functionsphp 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

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

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

Related Videos

Be the first to comment “WordPress Widgets Tutorial”

Your email address will not be published.

There are no comments yet.