Using the Block Widget Editor

Widgets provide a convenient means of adding content and features to a website and require no coding experience. This lesson will give an introduction to finding and including widgets on your website.

Learning outcomes

• Demonstrate how to use widgets included in the installed theme on a website
• Add widgets with the Block Editor
• Add widgets from plugins

Comprehension questions

1. What is the function of a widget?
2. Describe how you change or include widgets on a freshly installed website.
3. What is the difference between existing widgets, third party widgets and block-based widgets?

Transcript

Hi, and welcome to Learn WordPress. My name is Wes Theron and today we are going to explore the Widget Editor. If you have clicked on an Instagram feed, search block or calendar in your footer, header or sidebar of your website, you have clicked on a widget. Yes, you can also use widgets to add a map to your site for example. So what are widgets? Widgets are tools that allow user to add and control features or content in a sidebar header or footer without knowing any code. Most WordPress themes come with a set of pre-installed widgets ready to use. Or you can add a new widget with the Block Editor, or by using a plugin.

Here is a fine example of a website that have used widgets. On the right-hand side you will see the search block, a calendar, a music video, and even a donate button. And if you scroll down to the bottom part of the page, the footer, you will see links to membership and even social media. So after this workshop, you’ll be able to demonstrate how to use widgets that form part of your theme, and add widgets with the Block Editor, or from a plugin. So let’s look at where you can find widgets and how they differ, depending on the pre-installed theme. So you can find widgets in your Dashboard or Customizer, but let’s first look at the Dashboard.

Go to Appearance and scroll down to widgets. Here you will find your available widgets that form part of your theme, the widgets that are already available to modify or create. And as you can see, this theme has many pre-installed widgets that you can use. Take a moment to find where these widget areas appear on your Dashboard. So now let’s go look at the widget area of the 2016 theme that I’ve installed. At the top you will see the sidebar widget which includes the Search Block, Recent Posts, Recent Comments, Archives, and Categories.

You have the option to change these and also add more widgets in your sidebar. As you can see, there’s so many things you can do with the Block Editor. You may also decide to reposition the blocks as you please by dragging and dropping the block where you want it. And then of course there’s always the undo button. Now, if I go ahead and close this drop-down menu, you will see Content Bottom One and Content Bottom Two. These are widgets you can add, and with this theme will appear below all pages and posts. Lastly, we see Inactive Widgets. These are the ones you have created and are not using anymore. Now we can go ahead and make any changes and additions as necessary. I’m going to add these changes in the Customizer because then you will be able to see changes live and preview. So let’s click on live preview on the right of your page, it will take you directly to the Customizer.

On this page, we only have access to the sidebar widgets. So I’ll click on the sidebar. And there you will see your widgets on the left. And the first thing I’ll do is change the existing search widget instead of displaying search twice. I will change the button on the right to ‘GO’, and I’m happy with the rest. Secondly, I will add a widget to the sidebar using the Block Editor. So in my block I’m going to create a link to our newsletter. Firstly, I will create a group for my blocks and then choose a suitable heading. I’m going to say ‘Receive our Newsletter.’ Then I will add an image via the Media Library or you can upload it directly from your computer. Lastly, I’m going to add a button and in this case, I’m going to call it ‘Subscribe.’ Please remember to add a link. Now I would like to create a social icons widget as many people prefer or use social media platforms. I’ll go to one of my posts and click on Customize. Scroll down to widgets and choose Content Bottom One or Two. I will choose Content Bottom One.

I’ll scroll down so that I can see the live preview while I’m working. And then I will go ahead and add a new block. I’ll click on the social icons widget and then I’ll add Twitter, WordPress, Facebook and Instagram. And once I add the link, it will appear in the live preview at the bottom of the page. Thirdly, I would like to add a map to tell people where our offices are. And to do this I’ll use a plugin. Make your way to the dashboard, click on Plugins and Add New. I’m going to choose the WP Map Block plugin. And remember, once it’s installed, we need to activate. Back in the Customizer, I’m going to use the Block Editor to add my map. Once you installed the map, click on the three vertical dots at the top. Show more settings and there you can choose the Google map or the Open Street Map. Click on ‘Map marker’, and once you’ve changed your address and details, go ahead and publish.

There are many types of widget plugins available to add things like contact forms, calendars, polls and surveys, weather information and even live chat support. A user may also install and activate the Classic Widgets plugin to opt-out of using the Widget Editor if they prefer. Have fun exploring the Widget Editor or finding the right plugin that fulfils your requirements. Visit learn wordpress.org for more workshops and training materials.