WordPress Widgets

Widgets allow WordPress users a lot of freedom. Rather than having to set up a separate page to hold information and direct visitors to it, you can add information and functionality to pages by putting a widget in place. This post will explain the basics of widgets so that you can add widgets to your own WordPress website, or have a realistic idea of what you can ask your web people to do with widgets.

What can widgets do?

What can’t widgets do? There are thousands of widgets, including the ones that are normally included with your basic install, the ones that go with your theme, the ones you can download as plugins, and the ones your web people can make for you with text, images, and code. There are widgets that show weather reports, widgets with shopping carts, widgets that pull in social media accounts, and widgets that let you tweet at your senators.

Some of the most popular widgets:

Search box, newsletter sign up box and Twitter feed are shown in the screenshot below. These are among the most popular widgets.

widget2

Recent posts widgets pull the newest blog posts into a sidebar or onto the home page.

widget1

In the example below, a Facebook feed and Recent Posts are lined up horizontally rather than vertically stacked. Comparing the two Recent Posts widgets, you can see that this type of widget can be styled in different ways to suit the individual website.

widget3

Where do widgets come from?

Some widgets come with every WordPress install, some come with themes, some come with plugins, and you can also make them yourself or have them made for you. You can find WordPress widgets on other websites, too, since people share them and allow you to put them into your own website. For example, you can grab a widget to follow bills in Congress or the stock market, or a sign-up widget from your email marketing tools. Wolfram Alpha has lots of computational widgets. You can download these widgets or copy and paste the code into a Text widget.

Once they exist, all your widgets will show up in the Appearance> Widgets area of the admin section of your website, shown below.

widget6

You can see the widget options for this example website on the left. On the right you can see the places where the widgets can show up — for this website, only in sidebars. There are three different sidebars, and a widget can be dragged from the left into any of the sidebars. Just open the sidebar or footer box — in the screenshot above, the Sidebar-Sub Pages is open — and drag the widget into the box. You can see that a Text widget has been placed into the Sidebar-Sub Pages box above.

The example below, from a site using a pre-made theme, has many more options for placing widgets, and offers quite a few theme-specific widgets. By clicking on the triangle for any of the boxes on the right, we can make a place to drag any of the widgets on the left.

widget7

Regardless of the number of widgets available and the number of places you can drag them into, your Widgets page will always offer you some widgets and some boxes to put those widgets into. You can add more widgets with plugins or use the Text widget to build your own widgets.

Where do widgets go?

There are two main places you can put widgets: sidebars and footers.

In the example below, we’ve put Contact Us, Search, and Recent Posts widgets into a right-hand sidebar. Once again, the Recent Posts widget has been styled to look quite different from the other Recent Posts widgets we’ve seen. Don’t assume that any widget will look the same on your website as it does on someone else’s.

widget5

In the example below, we’re showing widgets in the second common place to put widgets: the footer. Once again we have a Recent Posts widget (again, looking different from any of the others), and we also have an Events widget and a custom widget with an image and links.

widget4

It’s possible to put widgets in other places, but they must be custom coded. If the place where you want to put a widget is not already available on your Widgets page, you should assume that putting a widget there will not be a DIY project.

How to place widgets step by step

  • Go to Appearance > Widgets in your admin area. If you do not have an Appearance section, you do not have permission to add a widget.

widget8

  • Open the widget area you want to use. In the example here, we’ve opened both widget areas: the Home sidebar and the Sub-page sidebar. Any widgets we place in the Home sidebar will show up on our home page. Any we put into the Sub-page sidebar will show up on our sub-pages.
  • Drag the widget you choose from the left-hand side of the page into the widget area you choose. In the screenshot below you see that we have dragged the Custom Menu widget into the Home Sidebar. Note that the Custom menu widget is still available. Dragging a widget will not remove it from your pool of available widgets.

widget9

  • If the widget needs configuration, there will be a form to fill out. The Custom Menu widget wants us to fill in a title and to choose which menu we want to show.

widget10

  • Make your configuration choices, and click “Save.”

widget11

At this point, you should check your website and make sure everything is as you want it to be.

What can go wrong?

Lots of things. Your new widget may be incompatible with some other elements of your website — and it won’t always be something you would expect. So, for example, your sidebar ads might make your pagination quit working. Or your widget might break your website entirely.

Or it might not look the way you want it to — especially if you wanted the look you saw at another website. The theme you are using and the color choices you made in the Customizer, to name just a couple of things, will determine how the widget looks on your website.

The widget might not fit the space you put it into. The text or image in the widget might not fit properly, or the widget might make your sidebar too long for the page.

If you have web people, have them help you. If you’re doing this on your own, make yourself some coffee and settle in for some trial and error. Change one thing at a time, be sure to refresh your page every time you check it, and be firm. You are the human. You are in charge.

Not the best use of your time? If you need WordPress website management, Haden Interactive might be just the right choice for you. Call Rosie at 479.966.9671 or contact us via web form.


Posted

in

by

Tags:

Comments

Leave a Reply