├── elementor-custom-element.php
└── my-widget.php


/elementor-custom-element.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * Plugin Name: Elementor Custom Elements
 5 |  * Description: Custom element added to Elementor
 6 |  * Plugin URI: http://dtbaker.net/web-development/creating-your-own-custom-elementor-widgets/
 7 |  * Version: 0.0.1
 8 |  * Author: dtbaker
 9 |  * Author URI: http://dtbaker.net
10 |  * Text Domain: elementor-custom-element
11 |  */
12 | 
13 | if ( ! defined( 'ABSPATH' ) ) exit;
14 | 
15 | // This file is pretty much a boilerplate WordPress plugin.
16 | // It does very little except including wp-widget.php
17 | 
18 | class ElementorCustomElement {
19 | 
20 | 	private static $instance = null;
21 | 
22 | 	public static function get_instance() {
23 | 		if ( ! self::$instance )
24 | 			self::$instance = new self;
25 | 		return self::$instance;
26 | 	}
27 | 
28 | 	public function init(){
29 | 		add_action( 'elementor/init', array( $this, 'widgets_registered' ) );
30 | 	}
31 | 
32 | 	public function widgets_registered() {
33 | 
34 | 		// We check if the Elementor plugin has been installed / activated.
35 | 		if(defined('ELEMENTOR_PATH') && class_exists('Elementor\Widget_Base')){
36 | 
37 | 			// We look for any theme overrides for this custom Elementor element.
38 | 			// If no theme overrides are found we use the default one in this plugin.
39 | 
40 | 			$widget_file = 'plugins/elementor/my-widget.php';
41 | 			$template_file = locate_template($widget_file);
42 | 			if ( !$template_file || !is_readable( $template_file ) ) {
43 | 				$template_file = plugin_dir_path(__FILE__).'my-widget.php';
44 | 			}
45 | 			if ( $template_file && is_readable( $template_file ) ) {
46 | 				require_once $template_file;
47 | 			}
48 | 		}
49 | 		if ( defined( 'ELEMENTOR_PATH' ) && class_exists( 'Elementor\Widget_Base' ) ) {
50 | 			// get our own widgets up and running:
51 | 			// copied from widgets-manager.php
52 | 
53 | 			if ( class_exists( 'Elementor\Plugin' ) ) {
54 | 				if ( is_callable( 'Elementor\Plugin', 'instance' ) ) {
55 | 					$elementor = Elementor\Plugin::instance();
56 | 					if ( isset( $elementor->widgets_manager ) ) {
57 | 						if ( method_exists( $elementor->widgets_manager, 'register_widget_type' ) ) {
58 | 
59 | 							$widget_file   = 'plugins/elementor/my-widget.php';
60 | 							$template_file = locate_template( $widget_file );
61 | 							if ( $template_file && is_readable( $template_file ) ) {
62 | 								require_once $template_file;
63 | 								Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Elementor\Widget_My_Custom_Elementor_Thing() );
64 | 
65 | 							}
66 | 						}
67 | 					}
68 | 				}
69 | 			}
70 | 		}
71 | 	}
72 | }
73 | 
74 | ElementorCustomElement::get_instance()->init();
75 | 


--------------------------------------------------------------------------------
/my-widget.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | namespace Elementor;
 3 | 
 4 | if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
 5 | 
 6 | class Widget_My_Custom_Elementor_Thing extends Widget_Base {
 7 | 
 8 | 	public function get_name() {
 9 | 		return 'my-blog-posts';
10 | 	}
11 | 
12 | 	public function get_title() {
13 | 		return __( 'My Custom Widget', 'elementor-custom-element' );
14 | 	}
15 | 
16 | 	public function get_icon() {
17 | 		// Icon name from the Elementor font file, as per http://dtbaker.net/web-development/creating-your-own-custom-elementor-widgets/
18 | 		return 'post-list';
19 | 	}
20 | 
21 | 	protected function _register_controls() {
22 | 
23 | 		$this->start_controls_section(
24 | 			'section_my_custom',
25 | 			[
26 | 				'label' => esc_html__( 'Blog Posts', 'elementor' ),
27 | 			]
28 | 		);
29 | 		
30 | 
31 | 		$this->add_control(
32 | 			'some_text',
33 | 			[
34 | 				'label' => __( 'Text', 'elementor-custom-element' ),
35 | 				'type' => Controls_Manager::TEXT,
36 | 				'default' => '',
37 | 				'title' => __( 'Enter some text', 'elementor-custom-element' ),
38 | 			]
39 | 		);
40 | 
41 | 		$this->add_control(
42 | 			'posts_per_page',
43 | 			[
44 | 				'label' => __( 'Number of Posts', 'elementor-custom-element' ),
45 | 				'type' => Controls_Manager::SELECT,
46 | 				'default' => 5,
47 | 				'options' => [
48 | 					1 => __( 'One', 'elementor-custom-element' ),
49 | 					2 => __( 'Two', 'elementor-custom-element' ),
50 | 					5 => __( 'Five', 'elementor-custom-element' ),
51 | 					10 => __( 'Ten', 'elementor-custom-element' ),
52 | 				]
53 | 			]
54 | 		);
55 | 		
56 | 		$this->end_controls_section();
57 | 
58 | 	}
59 | 
60 | 	protected function render( $instance = [] ) {
61 | 
62 | 		// get our input from the widget settings.
63 | 
64 | 		$custom_text = ! empty( $instance['some_text'] ) ? $instance['some_text'] : ' (no text was entered ) ';
65 | 		$post_count = ! empty( $instance['posts_per_page'] ) ? (int)$instance['posts_per_page'] : 5;
66 | 
67 | 		?>
68 | 
69 | 		<h3>My Example Elementor Widget</h3>
70 | 		<p>My text was: <?php echo esc_html( $custom_text );?> </p>
71 | 		<h3>Some Recent Posts Here:</h3>
72 | 		<ul>
73 | 			<?php
74 | 			$args = array( 'numberposts' => $post_count );
75 | 			$recent_posts = wp_get_recent_posts( $args );
76 | 			foreach( $recent_posts as $recent ){
77 | 				echo '<li><a href="' . esc_url( get_permalink( $recent["ID"] ) ). '">' .   esc_html( $recent["post_title"] ).'</a> </li> ';
78 | 			}
79 | 			wp_reset_query();
80 | 			?>
81 | 		</ul>
82 | 
83 | 		<?php
84 | 
85 | 	}
86 | 
87 | 	protected function content_template() {}
88 | 
89 | 	public function render_plain_content( $instance = [] ) {}
90 | 
91 | }
92 | 
93 | 
94 | 


--------------------------------------------------------------------------------