A Simple Guide to Adding Widgets to Your Website

Whether you’re a website owner or simply an internet user, you’ve probably heard of widgets. These handy tools are far from novel now, and they often interject with website design. However, you may not know what they are precisely and what they can offer. Or, as a website owner, you may not know exactly how to add widgets to your website. In this article, we’ll explore both, briefly explaining widgets and presenting a simple guide to adding widgets to your website.

Widget types

There are multiple types of widgets, each focusing on a specific purpose and serving different needs. For example, e-Commerce sites will frequently use live chat and customer support widgets, while restaurant sites may use reservation widgets.

There are too many types to explore thoroughly, and grouping widgets by type can be somewhat subjective. Still, for context into the subject, consider these four prominent types:

Marketing widgets

Marketing widgets focus on marketing, as the name suggests. They may thus focus on encouraging visitors to do the following, among others:

• Opt in to email lists
• Sign up for free material
• Contact sales teams

These are excellent marketing tools, and Convert More is an example of such a widget, which focuses on lead conversion.

Reservation and booking widgets

Similarly, reservation and booking widgets add online booking functionalities. Any business that takes appointments may use such widgets to offer their customers a faster, frictionless booking process. Moreover, such widgets allow appointments to be scheduled even outside of office hours.

A notable example of this widget type is Reservio.

Email widgets

A subtype of marketing widgets for many, email widgets focuses on populating one’s email lists for marketing purposes. Fortunately, they frequently offer integration options with marketing tools. In a time when having a website is imperative for business, such widgets provide an excellent opportunity to improve sales.

The most notable example of this type should be MailChimp’s signup widget, which integrates into MailChimp’s other services.

Adding widgets to your website

Having outlined some of the widgets’ typical roles, let us now delve into adding widgets to your website.

Finally, to simplify the process further, you may consider code-related plugins. WordPress plugins like Code Widget frequently offer simplified code forms and interfaces to allow less experienced users to utilise code effectively.

WordPress: Widget section

For WordPress users, an arguably more straightforward process is available on their dashboard. It is as simple as this:

• Log into WordPress
• In the menu on the left side of the screen, select Appearance, then Widgets
• There, select the widget you wish to add and drag it to the appropriate section on the right 

Alternatively, you may click on your widget of choice to decide where you’d like it to go. Once you do, simply press “add widget”.

For further customisation, each widget box will come with options depending on your widget type. There, you can make your choices, preview the changes to ensure they’re right for you, and then press “done”. To define where the widget shows up, you may use the “visibility” button.

Kindly note, the widgets available on this list will include WordPress widgets and theme-dependent widgets. To add new widgets to the list, you may use WordPress plugins that do so outside of your themes.

WordPress: Customise section

Finally, if you’re a WordPress user, adding widgets to your website can also be done through the Customise section. The process is similarly simple:

• Log into WordPress
• In the menu on the left side of the screen, select Appearance, then Customise
• There, select Widgets.
• Click on the area of your website where you’d like to add a widget, then select “Add a Widget.”

Removing widgets from your website

Finally, over time, widgets may become outdated. Vendors may stop providing support, or you may simply find a better widget for your website. Thus, to conclude, let us explore the process of removing unwanted widgets. 

Code blocks

If you have added a widget through HTML code, the process is as simple as deleting the related code block. 

Alternatively, you may try WordPress’s wp_unregister_sidebar_widget() function. To do so you will need your widget’s ID tag, however. You may thus locate it by temporarily adding this to a template file:

// dump all registered widgets

global $wp_registered_widgets;

echo ‘<pre>’;

print_r( $wp_registered_widgets );

echo ‘</pre>’;

Using the template will yield your widget ID tags, so you may use the unregister function to remove them.

WordPress: Widget section

Fortunately, removing widgets from the Widget section is far simpler:

• In WordPress, go to Appearance>Widgets
• On the right, select the widget you want to remove
• Click “Delete”

Alternatively, you may remove widgets by dragging them from the right-hand section and dropping them on the left.

WordPress: Customise section

Finally, you may also remove widgets through the Customise section:

• In WordPress, go to Appearance>Customise>Widgets
• Select the widget you wish to remove on the left, and click “remove.”
• Click “Publish” to save your changes

Conclusion

To summarise, adding widgets to your website can be a straightforward process. You may edit code directly if you have such experience. Alternatively, you may use built-in WordPress widget options to do so – or similar options your CMS provides.