A demo of a custom Elementor widget, to display different text based on the day of the week.
After writing code to enhance the Elementor Pro Custom Add to Cart widget, I decided to investigate how to write a custom Elementor widget. It might come in handy at some point in the future.
Good documentation
I quickly found the simple and advanced widget examples and then the rest of the widget documentation. The docs are great, detailing each of the API functions and including examples of each.
A simple demo
My widget below is very simple, primarily to get a widget framework in place for when I need it in the future. It does have a little bit of dynamic functionality to make it less boring – it displays different text for each day of the week.
Widget settings
The core settings are 7 text fields, one for each day of the week. For completeness I also added the standard fields to the Style tab. The Advanced tab is present by default.
Backend preview
The widget render() function displays the widget on the front end and backend. For the front end it displays the text for the current day (the screenshot was taken on a Wednesday).
Just to experiment I made the backend a little bit different, indicating what day’s text was being shown.
The code
The code is split into two files because the widget’s base class (\Elementor\Widget_Base) may not be available until after the Elementor plugin has initalised.
Both files must be uploaded to the same directory, either directly in wp-content/plugins or in a subdirectory of it.
The first file simply loads the widget code file and registers the widget.
The second file, days-messages-widget.php is the actual widget code.
Enhancement ideas
One possible enhancement could be to have drop down beside each field where the user could select to use a different day’s text for that day e.g. the options would be ‘Use text box’, ‘Use Monday text’, ‘Use Tuesday text’ etc.
Leave a Reply