How To Create Custom Widgets For WordPress

You can add numerous different types of elements to your website using WordPress widgets. In areas of your website that are widget-ready, like sidebars and footers, you can add already-existing widgets.

How do I Create a Custom Widget Area?

What if you want to add your customized widgets to your website or non-widget area of the site? This tutorial is for you. Using this method, you can add customized widgets anywhere on your website just by using a short-code.

We are using a drag-and-drop page builder to build this widget. So you don’t need to know how to code for this. Follow these step-by-step guidelines.

Install WordPress Custom Widget Plugin

You will need 2 plugins for this tutorial. These plugins must be installed before you proceed, and they are free.

The plugins “Elementor Page Builder” (Download Elementor Page Builder) and “Anywhere Elementor” (Download Anywhere Elementor) must be installed. I have already installed the Elementor Page Builder, so I am going to install the other plugin.

elementor and anywhere elementor plugins

In your WordPress dashboard, navigate to the plugin area. Then click “Add new” and search for the “Anywhere Elementor“.

WordPress Dashboard > Plugins > Add New

Install and activate the plugin. After that, you will see a new element called “AE Templates”.

How to Create Custom Widget in WordPress?

Here you can add your new customized widgets. Click the “add new” button to start designing your widget. You can name the template using any name.

anywhere elementor wordpress custom widget

Choose the template as “Elementor Full Width” and update it. After that, you can click the “Edit with Elementor” button to start.

This is a drag-and-drop page builder, so you can design whatever you want without any coding knowledge. I am going to skip the building process by speeding up the video. You can freely design your widget.

How to Display Custom Widget in WordPress?

OK, now I am finished designing. For the next step, save these changes and exit from Elementor. I will add this widget to the site’s footer area.

Navigate to the “widget section” under the “Appearance” menu, copy the template’s short code, and paste it there.

WordPress Dashboard > Appearance > Widgets

This short code can be added in the footer widget area using a text box. Let’s see if the website displays our customized widget. You can see it successfully displayed on the site.