Question posted in 
I want to create a elementor widget and add it to basic elementor menu. I find and do this according to this tutorial but it s not working(not appear in basic menu): https://develowp.com/build-a-custom-elementor-widget/.
Can anybody help me fix this problem or anybody have other code run correctly?
function.php
/**
* Plugin Name: Deo Elementor Extension
* Description: Custom Elementor extension.
* Plugin URI: https://elementor.com/
* Version: 1.0.0
* Author: DeoThemes
* Author URI: https://elementor.com/
* Text Domain: deo-elementor-extension
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Main Elementor Test Extension Class
*
* The main class that initiates and runs the plugin.
*
* @since 1.0.0
*/
final class Elementor_Test_Extension {
/**
* Plugin Version
*
* @since 1.0.0
*
* @var string The plugin version.
*/
const VERSION = '1.0.0';
/**
* Minimum Elementor Version
*
* @since 1.0.0
*
* @var string Minimum Elementor version required to run the plugin.
*/
const MINIMUM_ELEMENTOR_VERSION = '2.0.0';
/**
* Minimum PHP Version
*
* @since 1.0.0
*
* @var string Minimum PHP version required to run the plugin.
*/
const MINIMUM_PHP_VERSION = '7.0';
/**
* Instance
*
* @since 1.0.0
*
* @access private
* @static
*
* @var Elementor_Test_Extension The single instance of the class.
*/
private static $_instance = null;
/**
* Instance
*
* Ensures only one instance of the class is loaded or can be loaded.
*
* @since 1.0.0
*
* @access public
* @static
*
* @return Elementor_Test_Extension An instance of the class.
*/
public static function instance() {
if ( is_null( self::$_instance ) ) {
self::$_instance = new self();
}
return self::$_instance;
}
/**
* Constructor
*
* @since 1.0.0
*
* @access public
*/
public function __construct() {
add_action( 'init', [ $this, 'i18n' ] );
add_action( 'plugins_loaded', [ $this, 'init' ] );
}
/**
* Load Textdomain
*
* Load plugin localization files.
*
* Fired by `init` action hook.
*
* @since 1.0.0
*
* @access public
*/
public function i18n() {
load_plugin_textdomain( 'elementor-test-extension' );
}
/**
* Initialize the plugin
*
* Load the plugin only after Elementor (and other plugins) are loaded.
* Checks for basic plugin requirements, if one check fail don't continue,
* if all check have passed load the files required to run the plugin.
*
* Fired by `plugins_loaded` action hook.
*
* @since 1.0.0
*
* @access public
*/
public function init() {
// Check if Elementor installed and activated
if ( ! did_action( 'elementor/loaded' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
return;
}
// Check for required Elementor version
if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
return;
}
// Check for required PHP version
if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
return;
}
// Register widgets
add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_widgets' ] );
}
/**
* Admin notice
*
* Warning when the site doesn't have Elementor installed or activated.
*
* @since 1.0.0
*
* @access public
*/
public function admin_notice_missing_main_plugin() {
if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: Elementor */
esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'elementor-test-extension' ),
'<strong>' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '</strong>',
'<strong>' . esc_html__( 'Elementor', 'elementor-test-extension' ) . '</strong>'
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
/**
* Admin notice
*
* Warning when the site doesn't have a minimum required Elementor version.
*
* @since 1.0.0
*
* @access public
*/
public function admin_notice_minimum_elementor_version() {
if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version */
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'elementor-test-extension' ),
'<strong>' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '</strong>',
'<strong>' . esc_html__( 'Elementor', 'elementor-test-extension' ) . '</strong>',
self::MINIMUM_ELEMENTOR_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
/**
* Admin notice
*
* Warning when the site doesn't have a minimum required PHP version.
*
* @since 1.0.0
*
* @access public
*/
public function admin_notice_minimum_php_version() {
if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: PHP 3: Required PHP version */
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'elementor-test-extension' ),
'<strong>' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '</strong>',
'<strong>' . esc_html__( 'PHP', 'elementor-test-extension' ) . '</strong>',
self::MINIMUM_PHP_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
/**
* Include Files
*
* Load required plugin core files.
*
* @since 1.0.0
*
* @access public
*/
public function includes() {
require_once( __DIR__ . '/widgets/test-widget.php' );
//require_once( __DIR__ . '/controls/test-control.php' );
}
public function register_widgets() {
// Include plugin files
$this->includes();
ElementorPlugin::instance()->widgets_manager->register_widget_type( new Elementor_oEmbed_Widget() );
}
}
Elementor_Test_Extension::instance();
test-wideget.php
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
class Elementor_oEmbed_Widget extends ElementorWidget_Base {
/**
* Get widget name.
*
* Retrieve oEmbed widget name.
*
* @since 1.0.0
* @access public
*
* @return string Widget name.
*/
public function get_name() {
return 'oembed';
}
/**
* Get widget title.
*
* Retrieve oEmbed widget title.
*
* @since 1.0.0
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return __( 'oEmbed', 'plugin-name' );
}
/**
* Get widget icon.
*
* Retrieve oEmbed widget icon.
*
* @since 1.0.0
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return 'fa fa-code';
}
/**
* Get widget categories.
*
* Retrieve the list of categories the oEmbed widget belongs to.
*
* @since 1.0.0
* @access public
*
* @return array Widget categories.
*/
public function get_categories() {
return [ 'general' ];
}
/**
* Register oEmbed widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
* @access protected
*/
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'url',
[
'label' => __( 'URL to embed', 'plugin-name' ),
'type' => ElementorControls_Manager::TEXT,
'input_type' => 'url',
'placeholder' => __( 'https://your-link.com', 'plugin-name' ),
]
);
$this->end_controls_section();
}
/**
* Render oEmbed widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
* @access protected
*/
protected function render() {
$settings = $this->get_settings_for_display();
$html = wp_oembed_get( $settings['url'] );
echo '<div class="oembed-elementor-widget">';
echo ( $html ) ? $html : $settings['url'];
echo '</div>';
}
}
3
Answers
The original code works for me.
Your problem might be cause because you don’t have the files in the correct path. In that case you have to put It’s in the child theme.
I had the same issue. Probably you did not activate your plugin.
Elementor Test Extension: I made a demo with a short video to demonstrate test addon and how it works. Github repo: https://github.com/robinwpdeveloper/elementor-test-extension-robin
Elementor Doc: Here is a documentation link from elementor on how to create your own elementor addon (as a Plugin): https://developers.elementor.com/docs/getting-started/first-addon/
In your code: Make sure test-widget.php is placed in the correct path: Plugin directory => widgets folder => test-widget.php
(Since you require this file like this:
require_once( __DIR__ . '/widgets/test-widget.php' );)Note: Plugin development handbook – https://developer.wordpress.org/plugins/plugin-basics/header-requirements/