Last week I wrote about removing the markup of a hidden element in Elementor. Continuing with Elementor, I decided to convert my Percentage Circle block from ACF blocks to Elementor.
Search for tutorials
I searched for “create widget for elementor” and found two good ones – Solid Digital’s tutorial from March 2020 and Ben Marshall’s one from March 2019. I also read the official documentation though some parts seem to me a little out of date (I got some deprecation warnings with some of the code I copied).
At least two files
I was surprised that the widget code cannot be in the same file as the plugin code. This is because you cannot declare the widget class until you’ve confirmed that Elementor is active. For my blog posts I like to put the code in one file (primarily to make it easier for readers to use the code) but c’est la vie.
I changed the relevant class and variable names and chose a different FontAwesome icon for my widget (a non-spinning spinner).
Similar concepts to ACF and Genesis Custom Blocks
The concept of back end input fields and front end HTML code is the same for an Elementor widget and blocks created with ACF or Genesis Custom Blocks. This made is very easy to create the Elementor widget- I needed 3 fields – number, colour and text. Rendering on the front end was also easy – I copied the code from my ACF blocks percentage-circle.php.
In the ACF blocks version I put the common CSS into its own file. I did the same here.
Using the widget
Select the widget and drag it onto the page. Then set the percentage, colour and text. If the text is left blank it will be displayed as the percentage e.g. ‘66%’.
You can add multiple widgets to each page.
Enhancement ideas
As this is my first Elementor widget I don’t know about all the options I could add to it e.g. max width of the circle.
The code
The code is split into 3 files – percentage-circle-widget.php, elementor-percentage-circle.php and percentage-circle-widget.css. Upload them to the same directory under wp-content/plugins and activate “Elementor – Percentage circle widget“
Leave a Reply