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) + 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 = [] ) {} } - -