Web Development: What is a Widget in WordPress?

What is a Widget in WordPress?

WordPress widgets are a great way to add extra content, snippets and interactivity to your site.

They make your site more than just a blog, and they give you the flexibility to identify content you want to show on every page of your site and make sure people won’t miss it.

In this article, you’ll learn all about WordPress widgets. You’ll learn how to add them to your site, where they go and how to get the most from them. I’ll also look at some of the more technical aspects of widgets and help you create your own widget areas for displaying widgets and even get you started on creating your own widget plugin.

The Best WordPress Plugins on CodeCanyon

You can explore thousands of the best WordPress plugins ever created on CodeCanyon. With a low-cost one time payment, you can purchase these high-quality WordPress plugins and improve your website experience for you and your visitors.

What is a WordPress Widget?

Let’s start by identifying exactly what widgets are.

In WordPress, widgets are snippets of content that live outside the flow of the page or post content.

WordPress Widgets contain navigation, information or media that’s separate to the actual post or page. In most case, each widget will be displayed on every page in the site, but you can also register widget areas for specific pages such as the home page.

To add a widget to your site, you add it to a widget area. Widget areas are created by your theme because they’re part of the design and layout of your site.

Most themes have widget areas in the sidebar and footer, although some will have multiple widget areas in lots of places, such as below or above the content or in the header. Or they might have multiple widget areas in the sidebar and/or footer, which gives you even more flexibility.

The screenshot below, of one of my own sites, shows widgets in the sidebar and footer.

How to Use Widgets

There are lots of things you can use widgets for; in fact, the options are only limited by your imagination.

But here are some common uses for widgets that you might want to consider for your won site:

Add an extra navigation menu with the pre-installed Navigation Menu widget—useful in the footer so people have somewhere to go when they reach the end of a post.
Add a call to action button with a Text widget or a Custom HTML widget, great for encouraging people to do something specific.
Add a social media feed by installing a plugin that links to your social media accounts. It’s common to put these in the footer.
Add a shopping cart - most e-commerce plugins come with a shopping cart widget.
Add your favorite image with the Image widget.
Add a list of your more recent posts with the Recent Posts widget—one of the most popular widgets for websites with a blog.

There are plenty more options. If you go to the WordPress plugin directory by going to Plugins > Add New in your site then search for widget, you’ll find hundreds of plugins that give you extra widgets you can add to your sidebar, footer, or other widget areas.

How to Add Widgets to Your Site

WordPress comes with a set of widgets preinstalled so you can use them without having to install any plugins or write any code. But you can also add lots more widgets by installing plugins or coding your own. These can cover a vast range of content types, such as media, social media feeds, navigation, search, maps and lots more. There’s very little you might want on your site that you can’t find a widget for. In fact, the biggest challenge is often choosing between all the options and not going overboard.

Let’s start by seeing how you add the pre-installed widgets to your site.

Adding Preloaded Widgets to Your Site

WordPress comes with some great widgets already installed:

Archives: link to archives by month, designed for blogs but rather outdated now.
Audio: embed a podcast, song or other audio.
Calendar: a calendar of your posts, again suitable for blogs especially if yours is time-sensitive (but not so common these days).
Categories: a list of the categories in your blog, with links to the archive pages.
Custom HTML: the ultimate in flexibility, add whatever content you want by typing (or pasting) in the HTML. Avoid this one if you aren’t comfortable with coding!
Gallery: more advanced than the image widget, display a gallery of images.
Image: display an image from your media library.
Meta: metadata such as login links and RSS feeds. A hangover from WordPress’s early days and not very useful now.
Navigation Menu: show the main navigation menu or a separate one you create specially.
Pages: show a list of your site’s pages with links.
Recent Comments: a list of recent comments with links to them.
Recent Posts: display a list of your most recent posts to encourage people to read them.
Search: a simple search box.
Tag Cloud: a list of tags in a cloud format, with links to the relevant archives.
Text: any text you want to add, such as information about the site.
Video: embed a video from a streaming service like YouTube or Vimeo.

You can add widgets to your site from one of two places: the Customizer and the Widgets screen.

The Customizer lets you preview your changes before you save them, which means you can try things out and see how they look.
The Widgets screen adds extra functionality such as the ability to save unused widgets which you might have configured and want to save for later. It also makes it easier to move widgets between widget areas and has an accessibility mode you can use without a mouse.

To access widgets in the Customizer, go to Appearance > Customize > Widgets. Select the widget area you want to work with.

Then click the Add Widget button and select the widget you want to add. It will show up as a preview on the right, and you can make tweaks to the settings or try different widgets until you’re happy with it. Once you are, click the Publish button at the top to save your changes.

Note: If you leave the Customizer without clicking Publish, none of your changes will be saved. Don’t forget!

To access the Widgets screen, go to Appearance > Widgets. Here you will see a list of the available widgets on the left and the widget areas on the right. Remember, widget areas are created by your theme - so if you need more, you might need to switch themes.

All you need to do then is drag the widget you want into the widget area where you want it. You can then adjust the settings (if the widget has settings) in the widget area, and move widgets around with the mouse.

The Widgets screen also has an accessibility mode. To access that, click the Enable accessibility mode link at the top right of the screen.

To come out of accessibility mode, click that link again—it will let you exit accessibility mode.

Installing and Activating a Widget Plugin

If you want to add widgets to your site that go beyond what WordPress provides out of the box, you can use use a WordPress plugin.

WordPress

What Is a WordPress Plugin?

Rachel McCollin

To add a free widget plugin to your site, go to Plugins > Add New and search for widget. Alternatively if you want a widget that will do a specific task, search for that task. There are plenty of plugins that include widgets but aren’t just widget plugins, such as eCommerce plugins with their shopping cart widgets.

Once you’ve found the plugin you want, click the Install button. After a few moments, this will change to an Activate button. Click that to activate the plugin.

WordPress

How to Add Plugins to WordPress

Jessica Thornsby

Now when you go to the Customizer or the Widgets screen, you’ll be able to add the widget provided by the plugin to a widget area in your theme.

If you’ve bought a widget plugin from an external provider like CodeCanyon, you’ll need to upload the plugin to your site. You can do this right from your admin screens.

Go to Plugins > Add New. Click on the Upload Plugin button.

Upload the zip file for the plugin (don’t upload uncompressed files, only zip files will work).

Click the Install Now button and then activate the plugin.

The widget will then be available when you go to the Customizer or the Widgets screen.

How to Add Extra Widget Areas to Your Theme

If your theme doesn’t have the widget areas you’d like, the easiest solution is to find a theme that does. But what if you’re happy with the design of your theme but just want to add one or more extra widget areas?

WordPress lets you create your own widget areas using the register_sidebar() function. Doing this consists of two steps:

Registering the widget area with a function in your functions.php file.
Adding the widget area to the relevant place in your theme.

If you’re working with a third party theme (i.e. one you downloaded from the theme directory or bought somewhere like the CodeCanyon), then you mustn’t edit your theme directly. Instead, create a child theme and add your new code to that.

WordPress

How to Create a WordPress Child Theme

Rachel McCollin

Registering the Widget Area

To register the widget area, you write a function like this in your functions.php file.

function tutsplus_register_widgets() {
register_sidebar( array(
            'name' => __( 'After Content Widget Area', 'tutsplus' ),
                'id' => 'after-content-widget-area',
                'description' => __( 'Widget area after the content', 'tutsplus' ),
                'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
                'after_widget' => '</div>',
                'before_title' => '<h3 class="widget-title">',
                'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'tutsplus_register_widgets' );

Save the file and you will find the widget area appears in your Widgets screen and in the Customizer. But it won’t output anything to the site - yet.

Displaying the Widget Area on Your Site

To get the widget area to show up on your site, you need to add code to the relevant template file in your theme. For the sidebar, this will be sidebar.php and for the footer it will be footer.php. But if you want to add an extra widget area in a different place, you’ll need to identify the right template file.

To add a widget area above or below the content, add it to your single.php file, page.php file, or any other file that outputs single posts or pages.
To add a widget area to a specific file such as the home page, create a file called front-page.php, copy the contents of your index.php or page.php file to that and then add the code for the widget area.
To add a widget area to posts of a specific post type, add the code to single-posttype.php, where posttype is the name of the post type.

There are more options—the best resource to work out which file to use is the WordPress template hierarchy.

For the after content widget area I registered above, I would add this code after the content in my template files:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>
            <aside class="after-content widget-area full-width" role="complementary">
                        <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
                </aside>
<?php }

Once you’ve added that, any widgets you add to that widget area will show up in the correct place in the site.

Coding Your Own Widgets

There are hundreds of widgets available for you to use on your site, but what if you want to code your own?

Coding a widget plugin is more advanced than registering a widget area, but you can do it by following our series on writing a widget plugin. The specifics of your own plugin will depend on what you want the widget to do.

WordPress Widgets

Creating Your Own Widgets Using Various WordPress APIs: Introduction

Bonang Salemane

But before you start coding your own widget, check it isn’t already available. You could save yourself a lot of work.

The Best WordPress Themes and Plugins on Envato Market

Explore thousands of the best WordPress themes ever created on ThemeForest and leading WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors.