3-19: Working with Widgets Video Lecture | WordPress for Beginners - Software Development

hello and welcome back in this video we
are going to explore house we utilize
widgets to add content to our side bars
and footer widgets our standalone blocks
of content that can be added to any
widget iced area your theme provides
widget sized areas are typically the
left and right side bars as well as the
footer of the site currently on the Left
we have the search widget recent posts
widget recent comments widget archives
widget and so on in the footer we have a
page list widget to access the widget
sub panel hover over the quick access
toolbar then click widgets
alternatively you can access the widget
sub panel by hovering over appearance
and then selecting widgets in the widget
sub panel you can add delete edit or
rearrange the widgets on the left is a
list of available widgets and on the
right you can see an overview of the
widget sized areas as well as the
widgets in those areas the list of
widgets and the number of versatile
areas will vary depending on the theme
you're using it's also worth noting the
names of widget sized areas may be named
differently we are currently using the
default WordPress theme called 2014 and
this theme comes with a custom widget
code 2014 ephemera this theme supports
three widget iced areas the primary
sidebar content sidebar and footer
widget area the primary sidebar refers
to the area on the left of the theme and
the content side bar refers to the right
side of the same currently the right
sidebar isn't showing because we do not
have any widgets in that area the footer
widget area corresponds to the bottom of
the site currently blank also due to the
widget sized area being empty to edit
these settings for a widget simply click
the down arrow on the right side of a
widget
let's open a new tab so we can view the
front end of our website hover over your
site name right click on visit site and
open a new tab
on the left you can see the Search
Widget recent posts recent comments
archives categories and meta the display
order of these widgets corresponds
directly to the primary sidebar area you
see the search widget on the Left does
not have a title so let's go ahead and
add a title go back to the widget sub
panel and expand the search widget enter
a title and click Save
go to the front end of your site and
refresh the page the Search Widget now
has a title
to add a widget simply drag the widget
into the area you prefer or you can
click on a widget and from the pop-up
menu choose the widgets destination and
then click add widget
the display order of widgets can be
rearranged by dragging and dropping them
into a new order or you can drag them
into a new area to delete a widget
simply drag the widget into the
available widgets box or you can expand
the widget settings and then click
delete
just wanted to deactivate the widget
where they're losing widget settings
drag it to the inactive widgets area to
reactivate the widget simply drag it
back let's refresh the front end of our
website and have a look at the changes
we've made so far
as you can see the sidebar on the left
only contains the search categories meta
and calendar widgets
while the recent posts recent comments
and archives widgets have been moved to
the footer
we'll also add some content to the right
sidebar go back to the widget sub panel
and drag the 2014 ephemera widget into
the content sidebar
this widget allows us to display
selected post formats for this widget we
are going to display video posts into a
title set the number of posts you'd like
to show choose the video format and save
refresh your site and you should see the
widget active in the right sidebar one
thing to remember is widgets are not
single-use meaning you can drag the same
widget into any areas as many times as
you like for example we'll drag another
2014 ephemera widget into the content
sidebar but this time we'll set post
formats to display audio posts hit save
and refresh your website
you'll now see audio posts displayed
within the widget
go back to the widget sub panel and
we'll have a look at the text widget the
text widget is extremely flexible it
allows you to add plain text as well as
HTML some common applications for the
text widget includes adding copyright
messages displaying a newsletter signup
form displaying social elements or
miscellaneous text just to name a few
we'll add a bit of code to embed a tweet
from wordpress.org first go to
twitter.com slash WordPress this is the
official Twitter account for WordPress
choose a tweet you like click on more
just under it and then click embed tweet
copy this code
go back to the widget sub panel and drag
a text widget into the content sidebar
into a title then paste the code into
the content field
click Save
before we view our site though let's
also add in a copyright message in the
footer expand the text widgets in the
footer area if you don't have a text
widget in the footer area simply drag
one over
into a title then add a copyright
message
head safe then refresh your website
we can see the tweet from wordpress is
now displayed on the right sidebar in
the copyright message is now displayed
in the footer
you may be wondering what the
automatically add paragraphs checkboxes
let me demonstrate
if you'll recall the editor for posts
and pages had to editing modes visual
and text the text widget is essentially
a simplified text editor which means any
formatting of the text will require code
let me demonstrate
I'll add a new text widget to the
content sidebar and place it at the top
then I'll enter a title and paste some
content I prepared earlier
the text looks quite
Missy at the moment so I'll tidy it up
quickly
the formatting of the text looks okay
now but let's see what happens when I
save it and refresh the website
even though we formatted the text
properly in the widget settings the text
is still showing as one huge block of
text we can fix this by adding some
simple HTML
this tag is called the paragraph tag and
let's browsers know that the ticks
contained within the tag is a paragraph
let's view this site again
as you can see the text is now formatted
correctly
if you're not familiar with HTML or you
dislike coding then this is where the
check box comes in handy I'll go ahead
and delete the paragraph tags check the
box and refresh
as you can see we do not have the
paragraph tags anymore but the text is
still properly formatted
in a nutshell the check box tells
wordpress to automatically add paragraph
tags every time it detects a blank line
now that you're familiar with widgets in
the next video we are going to learn how
to customize the menus on your website
you