ELEMENTOR CUSTOM widget TUTORIAL – part 1

Intro

In this two part tutorial, I’ll guide you through the process of creating a custom Elementor Widget. In some case scenarios, say a custom website with unique functionalities, an out-of-the-box solution may be nowhere to be found. One may decide to use shortcodes instead; this, however, may not satisfy your client’s needs and is both less elegant and less configurable.

Our Widget will create a custom posts loop with several settings. In this part, we’ll set up bare-bones for our Widget, that is:

1. Some simple settings: A title displayed above the posts, a number of posts to choose from
2. A custom Widget Icon
3. Widget keywords used to filter the Widget in the Elementor Sidebar

Elementor Custom Widget Visuals

After the tutorial, your Widget will render several defined posts one after another and have the following icon display:

Elementor Custom Widget Icon

The widget settings panel will look as follows:

Elementor Custom Widget Settings

Finally, the widget will display posts in the following way:

Elementor Custom Widget Display

Elementor Custom Widget Code

The following snippet of code can be placed in two places:

1. In a Custom Plugin
2. Within Child Theme’s functions.php file

The tutorial will cover the second case scenario, where we will place the widget’s code within a subdirectory of our theme. Place that one in a file called widget-custom-blog-loop.php under the elementor-widgets directory. Note: For clarity reasons, I commented the code directly within the following two snippet files.

Now, within your theme’s functions.php file, place the following snippet of code. It will load our New Widget’s code from the aforementioned directory.

With the above code in place, our results should be nearly identical to the images I have posted above (depending on the theme you use, the output could look different, as we haven’t styled our Widget yet, so it’s using the default theme styles). 

Let me know in the comments below if you need any help or extra explanation regarding this part of the tutorial. I’ll be more than happy to offer my support here. 

In part two of this guide, we’ll cover extra options to play with:

1. Styling our Widget
2. Additional Back End Controls
3. Loading external CSS and .JS files

Resources

1. https://wp-doin.com/elementor-custom-widget-tutorial-part-2/ — Part 2
2. https://elementor.github.io/elementor-icons/ – Elementor Icons to choose from, used the get_icon method
3. https://developers.elementor.com/docs/widgets/widget-data/ – Base information of the Widget structure
4. https://developers.elementor.com/docs/controls/ – Elementor Controls documentation

Please leave this field empty

Oh hi there 👋
It’s nice to meet you.

Sign up to receive WordPress tips in your inbox, every month.

Email Address *

I don’t spam! Read my privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.