by Drew Conroy
Posted on January 31, 2019
Note: This post is from our video tutorial on Widgets in WordPress.
To access the Widget panel, hover your cursor over “Appearance” in the left side panel, then select “Widgets” from the flyout.
Widgets are used to add content to sidebars and footers. They are stand alone blocks of content that can be added to any Widget area that a theme provides. Widget areas are usually located in the left and right sidebars along with the footer. But you can have widgets in header and body as well. Anywhere your theme has specified as a Widget area you can add Widget content blocks.
On the right hand side we have a total of 6 “Widgets”. There is “Search”, “Recent Posts”, “Recent Comments”, “Archives”, “Categories” and “Meta”. There are currently no “Widgets” on the right or bottom of the website.
You can rearrange, add or delete “Widgets” from the “Widgets” panel. On the left side you can see available “Widgets”. “Sidebar” lists most of the “Widgets” I currently have activated.
The locations for this theme are The “Sidebar” which is on the right hand side of the page and “Content Bottom 1” and “Content Bottom 2” at the bottom.
To edit a “Widget”, you can access its settings by clicking the down arrow on the right side of the “Widget”. I will hover my cursor over the little house up in the left hand corner. Then right click to view the front end of the website in a different window.
We can also edit and view the front end of the website by using the customizer. This should look familiar as we have went over it in past videos. If you want to use the customizer you can access it by clicking the “Manage with Live Preview” tab.
All of the widgets you see along the right side of the page, the display order of these “Widgets” directly corresponds with the Sidebar area you see.
The search widget does not currently have a title so lets add one. We need to go back to the “Widget” panel. Then click the down arrow to open up the search “Widget” adding a title then clicking save. I will repeat the same process as before to view the front end of the website. As you can see the title I added is now showing.
To add a “Widget”, just drag the “Widget” to the area you want it added too. You can also click on the “Widget,” then from the menu you can choose the “Widgets” destination and click “Add Widget”.
The display order of “Widgets” can be changed by dragging and dropping them in the order you want. To delete a “Widget”, simply drag it to the “Available Widgets” area. Or you can expand the “Widget” settings and click “Delete”.
If you only want to deactivate a “Widget” without losing its settings, you can drag the “Widget” to the “Inactive Widgets” area. To reactivate it, just drag it back.
Next, I’m going to drag, the “Gallery Widget” to the Sidebar area. I will add some images by clicking the “Add Images” button. From here, select the images then click the “Create a New Gallery” button followed by the “Insert Gallery” button. Then click “save” to save the images you added.
I am going to add a “Navigation Menu” to the “Content Bottom 1” area. I will edit the footer by selecting the “Primary Menu” from the dropdown. That will add all the navigation links from the Primary Menu.
Next, I will drag over the “Calendar Widget” to the “Sidebar” area. Finally, I will add the “RSS feed” to the “Sidebar”. This time I will not drag it over but select it from the dropdown.
Let’s view the frontend of the website. We have the “Gallery Widget” showing thumbnails of the images. You can click on any one of them to see a larger view. Over to the right we have the “Calendar” and “RSS” Feed” Widgets, and along the bottom in the footer area we have the “Navigation Menu” Widget.
“Widgets” are not single use, you can drag the same Widget into any areas as many times as you want. As an example, we will add the “Gallery Widget” to the sidebar again and add some more images, then click save.
I will hover my cursor again over the little house at the top and right click on “visit site”, and open a new window. As you can see we have the additional images added with the second gallery.
There are many other “Widgets” that can be acquired and used for free. The following details for the “Widgets” are all free. Some of them do let you upgrade to paid plans with additional options.
“Simple Social Icons” is a way to display icons that link visitors to your social profiles. You can easily choose which profiles to link too, then customize the color and size of your icons.
You have the option of aligning them to the left, center, or right. The best part is you can do it all from the widget form. You can reordered the icons with the use of a filter. You can even add 20 plus of your social networks if you want.
Google Maps are known to be slow and time consuming to setup when using a plugin. The “Google Maps Widget” provides a perfect looking map with a thumbnail & lightbox. It only takes a few minutes to set up and you are off and running.
The “YouTube Widget Responsive” is a great way to add video to a sidebar on your website. This widget uses a shortcode to embed YouTube video’s, not just on sidebars but anywhere on your website. By embedding the video, you are saving your resources and letting YouTube do all the work.
This Widget gives you the option like choosing the precise minute and second you want your video to start and end. It includes several customization features to make your embedded video look exactly the way you want it too.
The “Testimonials Widget” provides you with an easy way to display your reviews using sliders, lists, and even videos. Plus, you can insert the widgets you create with it, anywhere you want, using shortcodes.
The “SnapWidget” is the perfect way to enable content from social media that can be automatically be displayed on your website. You can easily embed photos and videos from Facebook, Instagram, or Twitter on your site. The free plan allow you to use basic video and photo embedding.
The default archives widget shows your archives in a long list of months. This takes up a lot of space and makes users scroll down. The “Compact Archives” Widget solves this problem by grouping your monthly archives into years and displaying them in a compact form.
“Quick Chat” is a tiny but very powerful and highly configurable chat system for WordPress websites. It comes with a widget which you can add to your WordPress sidebar to enable chat everywhere on your website. You can also create a dedicated chat page on your site by using a shortcode.
If you have ever wanted to add jQuery based accordions, toggles, and tabs on your WordPress site, then “Whistles” will do the job. It allows you to easily create and display content like an accordion, tab and toggled menus.
“Soliloquy WordPress Slider Image” is a responsive WordPress slider plugin. It makes building sliders easy. The best thing is that you can add these sliders anywhere using their widget. You can show your recent posts, featured posts, videos, pinterest images, instagram, or anything else you like.
Check out our WordPress Beginner Tutorials Series on our YouTube Channel.
Thanks for Reading - Have a Great Day!
Drew & the WebStop.net Crew