In this set of tutorials, 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 LOOKS

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 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. Into the code:

With the above code in place, our results should be nearly identical to what we have posted above (depending on the theme you’d use, the output could look different). This concludes Part 1 of the Tutorial. In the next parts I’ll guide you through the process of adding another, more complex controls, a styling panel and the Elementor Editor widget altered looks.

Place this code in a new file called widget-custom-blog-loop.php within the elementor-widgets directory of your theme. Then, to load the code, paste in the following code directly within your themes functions.php file:

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.

Resources

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

ARTICLE BY RAFAŁ GICGIER

Rafal Gicgier