A feature of the content management system WordPress is the possibility to integrate widgets into the sidebar of a theme. Widgets are blocks of defined content, for example, a calendar, a post list, a category list, a keyword cloud or a search form. They offer visitors to your website helpful information or convenient navigation options. We explain how to integrate widgets into a chosen theme and present five widgets.
How are widgets installed?
Widgets have been part of WordPress since version 2.3 and can be used with many themes. Many widgets are not yet available in the basic version but are installed together with plugins. In the administration area, you can set which widgets should appear on your website or blog and which properties they should have.
To do this, click on “Themes” and “Widgets” in the main menu. In the window that opens you will see all available widgets on the left side and on the right side the areas where they can be inserted. The areas vary depending on the theme.
For example, in the “Twenty-Fourteen” theme, you can add widgets to the primary sidebar, a content sidebar, and the footer. In the Twenty-Thirteen theme, only two widget areas are available.
- To add a widget to a pane, drag the widget from the left side of the pane while holding down the left mouse button on the corresponding pane button.
- Alternatively, you can click on the name of the widget and select the area in the pop-up window. Then click on “Add widget”.
- Click on the area title to open a list of the added widgets. At this point you can make more detailed settings for these, for example, set the visibility of the widget and assign a title.
- If you leave the visibility options unchanged, the widget will be displayed on all pages.
- If your preferred theme does not support widgets, you can make it widgettable by adding a sidebar.php.
The plugin “Page Builder by SiteOrigin” for inserting widget areas into a theme
If you do not want to program sidebar.php yourself, the plugin “Page Builder by SiteOrigin” is a helpful extension. With this plugin, you can create new page layouts with freely placeable widget areas.
After installing the plugin you will find the tab “Page Builder” in the editor when creating a new page. If you click on it, the layout area opens with two new buttons. You can make general settings beforehand via “Settings” and “Page Builder”.
By clicking on the “Row” symbol you can add new rows with a freely definable number of columns to the page layout. If you click on the “+” button, you integrate a widget from a drop-down list into an activated row or column.
Once you have created a layout, you can save it as a sample layout for further use.
Full control over widgets with the “Dynamic Widgets” plugin
With the help of the “Dynamic Widget” plugin, you can control which pages selected widgets should be displayed. With just a few mouse clicks you can show and hide widgets without PHP knowledge and set rules for different browsers or mobile devices.
After installing the plugin, click on “Design” and “Dynamic Widgets”. In the next step, you will see the widget areas and the activated widgets. To edit one of these, click on the widget title. In the options window that opens, you can define your individual settings.
Displaying individual widgets on mobile devices with the “Responsive Widgets” plug-in
If you want to display individual texts on selected mobile devices, install the “Responsive Widgets” plugin. After successful installation, the plugin will add a number of new widgets to the widget area, such as “iPad (landscape)”, “Nexus Tablets” and “Samsung Tablets”.
To add a message for a device, drag the corresponding widget into a widget area and write your individual text in the field under “Text/HTML”. HTML allows you to use formatted text.
Design your own widgets with the plugin “Widget Builder
To display your own text areas, forms or files in a widget area, the plugin “Widget Builder” is helpful”. If you have installed it, you will find the new button “Widget Builder” under “Design” in the main menu of the administration area. Clicking on this button opens a new window with an overview of the widgets you have already written yourself if any are already available. To create a new widget, click on “Add New Widget”.
In the next step, an editor window will open. Here you enter a title for your widget and write a text or HTML in the text field, link an image or add a contact form. Then enter a description in the field under “Widget Admin Details” and determine where your widget should appear by activating or deactivating the checkboxes in front of “Available As Dashboard Widget” or “Disable Sidebar Widget”. Finally, click “Update” to save your widget.
Then click on “Design” and “Widget” to add your personal widget to a widget area. You will find this in the widget overview on the left side. By clicking on the widget title, you can choose in the pop-up window where you want the widget to appear. Then click on “Add widget”.
The widget will then be displayed in the selected area in the frontend.
Using the “Widget Importer & Exporter” plugin to move widgets to another WordPress installation
If you run multiple blogs or websites with WordPress, it’s helpful not to have to recreate every setting and widget. To move widgets to or import them from another WordPress installation, the Widget Importer & Exporter plugin supports you.
After you have installed the plugin, click on “Tools” in the main menu and then on “Widget Importer & Exporter”. In the dialog box that opens, click the “Export Widgets” button to save all active widgets to a location of your choice. The plugin saves the widgets in the “.how” format.
In order to integrate the widgets into another WordPress presence, you must also install the “Widget Importer & Exporter” plugin in that presence. Then open the tools area and click on “Browse”. Select the saved “.how” file and start the import by clicking on “Import Widgets”. The plugin will then display an import overview. If the plugins were already available, you will receive a message.