Developer's Roundtable Notes

Session: 2015-11 The Wonderful World of Widgets

Widgets

What are widgets?

Basically, they are containers for content that can be placed – and moved around – in your site without coding.

And, perhaps one of the more non-intuitive parts of WordPress.

 

Sidebars

Sidebars don’t have to be sidebars. They can be placed anywhere in a template.

More accurately, they are “widget areas”.

Sidebars are specific to your theme, while widgets are content, and so will survive a theme change.

Create a New Sidebar

Some themes come with one sidebar, some come with many.

If you want to add a new one, it’s pretty easy.

Unlike  many custom functions, this one belongs in your functions.php file rather than a plugin – because it is theme specific.

Displaying Your Widget Area

Now that you have a new sidebar (widget area), how do you get it to display on your site?

There are many ways to do this within the WordPress template hierarchy.

Choose whichever method makes the most sense to you.

1. Make a New Page Template

If you want the contents of “My Special Sidebar” to replace the normal sidebar on just one page, you can make a copy of page.php, and change the code that calls the sidebar like this:

Then, save the file as: page-my-special-page.php. (In this case, the slug of your page would be “my-special-page”. By adding “page-” to the file name, WordPress will automagically use this template for only that page.

For more information on using special templates, take a look at the Template Hierarchy.

2. Add a Conditional Statement to Page.php

Alternately, you can simply change your page.php file like this:

This is another way to replace the default sidebar with your special one on just one page.

3. Create a Template

If you want to replace the sidebar on multiple pages, it may be easier to create a template.

Simply copy page.php, replace the sidebar as in example 1 above, and add this line to the top of the file:

This tells WordPress that this is a page template. It will then appear in the page edit screen as an option under Page Attributes->Template.

You can then use this template for as many pages as you like.

That’s Not All

There are also other ways to replace sidebars, for example, with custom sidebar pages, or conditionals in sidebar.php.

And, there are probably others that I’ve never tried.

Check the codex if you’re interested.

Widget Area Somewhere Else

What if you want to add a widget area somewhere else on your page, or in the header or footer?

It’s the same logic. Simply pick the spot in your template, and add the code:

You can add it to the beginning or the end of your blog posts, place it in the header or footer template… the possibilities are endless.

Add a Widget Without a Sidebar

Let’s say you want to add just one widget somewhere on your site.

No need to create a special widget area, just include this in your template where you want the widget. (Just use the name of the widget.)

This, for example, outputs the content of the WordPress calendar widget:

You can also add arguments to the_widget – here’s the reference: https://codex.wordpress.org/Function_Reference/the_widget

Creating Widgets

For a more complete tutorial on creating widgets, please see my previous Roundtable.

A One Time Use Widget

A simpler way to create a widget if you only need to use it once.

For example, you want to print a welcome message to visitors on your home page.

Simply add this code to your functions.php file:

The widget will show up on the Widgets page, and you can drag it into any available sidebar, if you like.

You can also display it on your site using the_widget, as above.

You can only use this type of widget once, though. After you put it into a sidebar, you will notice it disappears from the available widgets.

Skip to toolbar