Widgets are what you use when you want to add functionality to all or some of your site’s pages. How many, which widgets, and how you can use them depends on your installed WordPress theme and plugins.
Therefore it’s important to consider what functionality you’ll need before you choose a theme. Using too many plugins is indeed not recommended as that can easily lead to incompatibility issues.
Changing your WordPress theme later on is not a good idea either. Even though it’s often advertised as the easiest thing in the world, it might cause quite a lot of problems, including incompatibility, design issues, and functional troubles. In all cases you’ll need to redo the design of all your pages.
What Can Be Done With Widgets
Widgets’ flexibility consists of three elements: position, design, and content.
Widgets can usually be placed in the sidebars, the footer, the area between the header and the body text, and the header itself- as long as your WordPress theme supports all these widget areas.
Some themes have the option to add custom widget areas, as well as to incorporate them in the body text section.
Most free and low-bugdet themes come, however, with predefined spots where you can place widgets.
Regarding design and content, there aren’t that many standard options you can control. Usually, it’s the individual widget that gives you the opportunity to tweak it via the plugin that creates it or via theme pre-defined options.
Normally, you can choose a title for the widget (or choose to not display a title) and tweak the way it functions. Some additional widget design options are available via the theme’s sidebar settings.
Step-by-Step Widget Management
As mentioned above, working with widgets is pretty much predefined by the themes and the plugins you use. You might therefore not have all the options described below. The provided screenshots are from The7 WordPress theme but they are available in similar variations in many other themes.
Design the Sidebar, Header or Footer
Widgets are usually placed in the sidebars, the header or the footer of your site. You can in most cases design them via standard design options. Such include width, background, divider lines, gaps, and in some cases widget appearance, for example, text color.
Among the most important customization settings are width and vertical distance between widgets as they’ll not only affect the appearance of your widgets but also their functionality. Some widgets need certain minimum space to perform optimally. 280-300 px width is enough for most widgets and 30 px is a good choice for vertical distance between site objects. These depend of course on your site’s overall design.
Design options as dividers and background depend on your preferences and have no influence on widget functionality.
The header text is what you’ll write in the field “Title” and text is the content of the widget (this is explained further down in the post). Besides the color of these elements, you can often change font and size via your site’s Content Fonts Settings.
Even when you don’t have a defined widget font setting, you can control the font and size of widget text by noticing which of h1-h6 is used for it and tweaking that instead.
Add New Widget Areas
It’s important to differentiate between a sidebar (or header/footer) and a widget area. A sidebar is a spot on a page where you can place one widget area. A widget area is a sort of an insert for a sidebar with one or more widgets. You can usually – as long as your theme doesn’t set limits for that – create as many widget areas as you want. You can then place them in the available spots and change them as you like.
The first step is to create the widget areas that you want to use. You do that by going into your themes settings and finding Widget Areas.
Give your sidebars names and descriptions that tell you what you’re using them for. Especially if you create many widget areas, it’ll become pretty difficult to manage them if their names don’t tell you what they contain or where they’ve been used.
After adding a new widget area, remember to click on Save Settings. Clicking only on Add doesn’t save your new settings!
If your theme doesn’t allow you to add widget areas, you’ll have to work with the available ones. Typically, you have a default sidebar and a default footer. If it’s important to have more sidebars but no footer, you can simply use the default footer widget area as a sidebar.
Add Widgets to Widget Areas
Widgets are added to widget areas by going into Appearance ->> Widgets in your Admin Panel. There you can see the list of all available widgets – standard, theme-defined, and plugin-controlled – to the left and the available widget areas to the right.
Open the widget area you want to edit by clicking on it. Then drag and drop the widget you want to add to it. You can now see it in the widget area. You can either continue adding widgets right away and leave widget settings for later or you can set up each widget before continuing to add more.
You can, of course, choose whether you’ll only have one or more widgets in each widget areas.
For each widget you add to the widget areas you have a number of custom settings. Many of them are controlled via the individual plugins creating the widgets and I won’t review them here as it’s not possible to cover every plugin out there.
Some of the settings are, however, controlled via the general plugin settings via Appearance ->> Widgets. They appear when you add a widget to the chosen widget area.
The settings that appear are dependent on the type of the widget you choose and the general customization options of your theme. It’s important to check them out and decide what works best. Usually, you have some default values filled out that might provide fine results. So if you aren’t sure how to set up the widget, try the default settings and then check out the end result by viewing and testing your pages. You can come back and tweak further anytime.
The only thing you really need to think about – and there’s no default setting for – is the title. The title is a text that appears above the widget itself. In some cases, as for example with search boxes, you can also choose what text to appear in the search box – or another place – in the widget. You can also choose to not add any text.
So, if you work with a search box widget and choose “Explore the site” as a title and “What are you looking for” as text, you’ll get the standard search box with the “What are you looking for” written inside the box and “Explore the site” written above. You can control font and sizes for these texts as described above.
You have to go through the widget settings for each widget you add to avoid performance issues!
Tip: If viewing a list, as for example Archives, Posts, or similar, don’t list more than 6-10 items at one page as this will slow it down.
Create Custom Widgetised Sidebars
Above I explained that you can add widgetised sidebars at custom spots on your pages, as for example in your posts. This isn’t a standard function for WordPress but you can get it by using a widgetised sidebar customizing plugin.
In this case I’ll use Visual Composer to exemplify how you can add widgetised sidebars to your pages. In Visual Composer you can choose the number of columns you want to have in each row (you can add multiple rolls with different number of columns on a single page). If you, for example, choose two columns, you can add a text box in the first column and a widgeised sidebart in the second.
You add a widgetised sidebar by clicking on Add Element. This are then your options:
Choose the Widgetised Sidebar by clicking on it. It will then appear as an icon in the roll or column where it was added.
Click on the icon to enter edit mode.
In the settings Widget title corresponds to Title in Appearance ->> Widgets and appears above the widget itself.
In the window Sidebar you can choose which of your existing widget areas should be displayed.
Last but not least, you have additional customization settings in the form of CSS edits and background settings. Notice that when I talked about designing your sidebars, I mentioned background. That setting applies to all standard sidebars. In this case though, the background setting applies only to the widgetised sidebar you’re working on. You can therefore apply a different background setting than your standard setting.
And there you go – a widget in the middle of your body text:
Are you in doubt about how to proceed in your specific case when using other themes or plugins, use the contact form available via the Get Help page and get personalized help with customizing widgets for free.