From 7233c93a253fc9261bc9c37ba282b8abc2791502 Mon Sep 17 00:00:00 2001 From: Benjamin Campbell Date: Thu, 18 Jan 2018 13:48:22 +0000 Subject: [PATCH 1/2] Updated to work with new Elementor settings method. # custom-elementor-element This commit allows you to use the code given to immediately install and make use of the boilerplate plugin. Two things have been updated from the current code: 1. Added functionality to support fetching the `my-widget.php` file from the plugin directory, instead of relying on the theme folder having the `my-widget.php` file located in `plugins/elementor/my-widget.php`. 2. Updates the function of getting the values of the input fields, making use of the `$this->get_settings();` method. This is then applied to the `$custom_text` and `$post_count` statements to evaluate correctly. 3. Added in comments for the use of Font Awesome iconset [linking to the Cheat Sheet](http://fontawesome.io/cheatsheet/). --- elementor-custom-element.php | 2 ++ my-widget.php | 16 ++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/elementor-custom-element.php b/elementor-custom-element.php index a4591fe..bec6381 100644 --- a/elementor-custom-element.php +++ b/elementor-custom-element.php @@ -43,7 +43,9 @@ public function widgets_registered() { $template_file = plugin_dir_path(__FILE__).'my-widget.php'; } if ( $template_file && is_readable( $template_file ) ) { + // allow the widget to be located in the plugin folder require_once $template_file; + Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Elementor\Widget_My_Custom_Elementor_Thing() ); } } if ( defined( 'ELEMENTOR_PATH' ) && class_exists( 'Elementor\Widget_Base' ) ) { diff --git a/my-widget.php b/my-widget.php index 1d2740b..3a38306 100644 --- a/my-widget.php +++ b/my-widget.php @@ -14,8 +14,9 @@ public function get_title() { } public function get_icon() { - // Icon name from the Elementor font file, as per http://dtbaker.net/web-development/creating-your-own-custom-elementor-widgets/ - return 'post-list'; + // Icon name from Font Awesome 4.7.0 + // http://fontawesome.io/cheatsheet/ + return 'fa fa-star'; } protected function _register_controls() { @@ -26,7 +27,7 @@ protected function _register_controls() { 'label' => esc_html__( 'Blog Posts', 'elementor' ), ] ); - + $this->add_control( 'some_text', @@ -52,7 +53,7 @@ protected function _register_controls() { ] ] ); - + $this->end_controls_section(); } @@ -60,9 +61,10 @@ protected function _register_controls() { protected function render( $instance = [] ) { // get our input from the widget settings. + $settings = $this->get_settings(); - $custom_text = ! empty( $instance['some_text'] ) ? $instance['some_text'] : ' (no text was entered ) '; - $post_count = ! empty( $instance['posts_per_page'] ) ? (int)$instance['posts_per_page'] : 5; + $custom_text = ! empty( $settings['some_text'] ) ? $settings['some_text'] : ' (no text was entered ) '; + $post_count = ! empty( $settings['posts_per_page'] ) ? (int)$settings['posts_per_page'] : 5; ?> @@ -89,5 +91,3 @@ protected function content_template() {} public function render_plain_content( $instance = [] ) {} } - - From 6ba066dc2dd3f6ad1b98b2d52c1cff87418da696 Mon Sep 17 00:00:00 2001 From: Benjamin Campbell Date: Wed, 31 Jan 2018 18:01:37 +0000 Subject: [PATCH 2/2] Added Readme --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..56673a5 --- /dev/null +++ b/README.md @@ -0,0 +1,16 @@ +# elementor-custom-element +Basic boilerplate plugin showing how you can add a custom widget to Elementor. + +Updated code from the tutorial at [David Taylor's Blog](https://dtbaker.net/blog/web-development/2016/10/creating-your-own-custom-elementor-widgets/). + +### Installation & Usage + +1. Ensure [Elementor](https://elementor.com) is installed on your WordPress installation. +2. Upload the files to your wp-content/plugins folder and activate it in your WordPress Plugins area. +3. Edit a page using the Elementor Page Builder and see your custom plugin. +4. Modify the plugin to your needs. + +#### Extra information + +You can find information for the Elementor API here: [Elementor Developer API Github Docs](https://github.com/pojome/elementor/tree/master/docs) +