Widgets are an important part of WordPress, and sadly, one of the most misunderstood.
According to WordPress.org:
WordPress Widgets add content and features to your Sidebars.
That’s like saying a Rolls Royce will get you to the grocery store — it’s perfectly true, but doesn’t go nearly far enough. Widgets do a lot, and can add a ton of functionality to your WordPress site.
I was vividly reminded of this recently when a client taught me a lesson about using the tools at hand. (Note to self: just because something is “the way it’s done” doesn’t mean there’s not another way!)
Most WordPress themes today display a smallish logo in the upper left-hand corner. Typically, you can either show text with the site’s name and tagline, or the logo image, but not both.
My client, who had opted to use a logo image, emailed me to ask if I could change it to also include the site name.
Without missing a beat — because, after all, I know my WordPress stuff! — I told her it could be done but would require some coding. A short time later, she emailed me again to say she’d taken care of it. I looked at her site, then smacked myself on the forehead.
Her theme (Executive Pro from StudioPress) includes a widgetized area on the right-hand side of the header. It’s typically used for a search box, a date, or an RSS feed. Well, she placed a text widget there, with the name of the site.
I had missed it, because in my semi-expert mind, logos and site titles live on the left side of the header area. My bad. Here’s what she ended up with.
There are two lessons here:
- In WordPress, there’s almost never only one way to do something
- Know your widgets
Let’s talk about how widgets work.
Widgetized Areas
Widgets can only live in specific places on your WordPress site, called widgetized areas. It used to be that the sidebar was the only widgetized area — hence the definition above that says that widgets add features to the sidebar.
That’s no longer true. Today, common widgetized areas include the sidebar, footer, and header. Widgetized areas can be created pretty much anywhere there’s a hook – the name for a place for a plugin to call functions.
That means you can add a widgetized area before a content loop, or after a post (just two examples).
So What’s a Widget Anyway?
Widgets add content and features to your WordPress site. The types of content are practically limitless. Some of the most common include:
- Social media follow buttons
- Social media share buttons
- Social media recent posts (from Twitter, Facebook, Pinterest, Instagram, Google Plus, etc.)
- Opt-in forms
- Menus
- Maps
- Advertisements
- Images
- Slideshows
- Videos
- Audio
- Recent posts
- Related posts
- Popular posts
- Calendars
- Testimonials
- Categories
- Tag clouds
A few (search, categories and tag clouds) are built into WordPress, while plugins create the rest. While a plugin may or may not create a widget, most widgets come from plugins.
Use widgets for information you want to display on every page of your site.
How to Install a Widget
Installing widgets is simple. And, as with most things WordPress, there are a couple of ways to do it.
Install from the Widget Menu
Log into your WordPress dashboard, then select Appearance / Widgets.
Available widgets are shown in two columns on the left-hand side of the page, while available widgetized areas are on the right, like this. (Your choices will depend on the theme you’re using.)
Click the widget you want to install, then select the widgetized area and click the Add Widget button.
Depending on the widget, you may have more to do. Social media widgets, for example, require information about the accounts to include. This one also gives you choices relating to icon size and color.
Install from the CustomizerOnce you’ve selected the options you want and filled in the platform URIs, click Save. (Note there are additional options not shown in the images above.) Now your social follow icons will be displayed in the sidebar — the example above shows the icons with a custom color background to match the site’s branding.
The Customizer allows you to see changes in real time. Navigate to Appearance / Customize.
Your customizer screen will look something like this — your choices will vary depending on your theme.
Select Widgets, then click the widgetized area to change.
The next screen shows you the widget(s) already installed in that area, and offers a choice to add a new widget, or reorder those you already have in place.
Click Add a Widget, and a scrollable list of available widgets flies out. If you know the widget name, type it into the search box at the top, otherwise scroll down until you find the one you’re looking for.
Fill in any required information. When you’re finished, you can add another widget, or click Save & Publish.
If you want to change the widget order, click the Reorder button, then drag and drop to put the widgets in the desired order. Always click the Save & Publish button to save your changes.
The advantage to this method, is you can see changes you’re making in real time, because your site is displayed to the right. The display is navigable, so to check how something looks on a specific page, you can navigate to it and watch real-time changes.
Common Widgetized Areas
Here are the most common widgetized areas, and what you’ll find in them most frequently.
Front Page
A number of themes now provide widgetized areas on the front page. Many of the scrolling-style homepages are built with widgets, and chances are good if you see a homepage with a section divided into columns, that arrangement involves widgets.
StudioPress, one of my favorite theme designers, makes widgetized front pages that are extremely flexible, with the layout changing depending on the number of widgets assigned.
Here’s an example:
- One widget provides a full-width, single column
- Two widgets make one row of two equal columns
- Three widgets make three equal columns
- Four widgets make four equal columns — but wait, now it gets more interesting!
- Five widgets make three rows. The first two each display two equal columns, and the third is full width.
- Six widgets make two rows of three equal columns.
- Seven widgets make four rows. The first three show two equal columns, and the fourth is full width.
- Eight widgets make two rows of four equal columns.
- Nine widgets make three rows of three equal columns.
In other words, it’s a system that’s extremely versatile and flexible, letting you build a truly customized front page.
In the Header
As mentioned above, the right-hand side of the header is another place you’ll often find a widgetized area. While most commonly used for a banner ad, a search box, social follow buttons, or the date, you can use it creatively, as my client did.
Above or Below the Header
Homepages often include opt-in forms in widgetized areas just below the header. Sliders are another popular item in that spot.
Widgets display special notices above the header. These include sales, events, or current news.
Sidebar and Footer Widgets
Sidebars were the original location for widgets, and the variety of what you can display in a sidebar is enormous. Opt-in forms, brief bios, video or audio, ads, calendars, tag clouds, testimonials, social media follow buttons, images, navigation menus, site categories or archives, search boxes, contact information, and more are often found in sidebars and footers.
After-Post Widgets
Quite a few plugins create a widgetized area in the space below a post. They use it to show social media share buttons, opt-in or other forms, or related posts.
As you can see, it’s well worth getting to know your WordPress widgets.
Digital & Social Articles on Business 2 Community(44)
