diff --git a/src/addons/initialization.md b/src/addons/initialization.md index 1a0236d..fc96212 100644 --- a/src/addons/initialization.md +++ b/src/addons/initialization.md @@ -22,32 +22,33 @@ final class Plugin { * @access public */ public function init(): void { + add_action( 'elementor/frontend/after_register_styles', [ $this, 'register_frontend_styles' ] ); + add_action( 'elementor/frontend/after_register_scripts', [ $this, 'register_frontend_scripts' ] ); - add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'frontend_styles' ] ); - add_action( 'elementor/frontend/after_register_scripts', [ $this, 'frontend_scripts' ] ); - + add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_frontend_styles' ] ); + add_action( 'elementor/frontend/after_enqueue_scripts', [ $this, 'enqueue_frontend_scripts' ] ); } - public function frontend_styles(): void { - + public function register_frontend_styles(): void { wp_register_style( 'frontend-style-1', plugins_url( 'assets/css/frontend-style-1.css', __FILE__ ) ); wp_register_style( 'frontend-style-2', plugins_url( 'assets/css/frontend-style-2.css', __FILE__ ), [ 'external-framework' ] ); wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); - - wp_enqueue_style( 'frontend-style-1' ); - wp_enqueue_style( 'frontend-style-2' ); - } - public function frontend_scripts(): void { - + public function register_frontend_scripts(): void { wp_register_script( 'frontend-script-1', plugins_url( 'assets/js/frontend-script-1.js', __FILE__ ) ); wp_register_script( 'frontend-script-2', plugins_url( 'assets/js/frontend-script-2.js', __FILE__ ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); + } + + public function enqueue_frontend_styles(): void { + wp_enqueue_style( 'frontend-style-1' ); + wp_enqueue_style( 'frontend-style-2' ); + } + public function enqueue_frontend_scripts(): void { wp_enqueue_script( 'frontend-script-1' ); wp_enqueue_script( 'frontend-script-2' ); - } } diff --git a/src/scripts-styles/control-scripts.md b/src/scripts-styles/control-scripts.md index ceccdff..75c318f 100644 --- a/src/scripts-styles/control-scripts.md +++ b/src/scripts-styles/control-scripts.md @@ -6,20 +6,25 @@ When you create new [Elementor controls](./../controls/) and need to register cu ## Registering Control Scripts -In the example below, we'll register scripts and enqueue them when creating new controls: +In the example below, we'll register scripts when creating new controls: -```php -class Elementor_Test_Control extends \Elementor\Base_Control { +```php {6} +function my_plugin_register_control_scripts() { + wp_register_script( 'control-script-1', plugins_url( 'assets/js/control-script-1.js', __FILE__ ) ); + wp_register_script( 'control-script-2', plugins_url( 'assets/js/control-script-2.js', __FILE__ ), [ 'external-library' ] ); + wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); +} +add_action( 'wp_enqueue_scripts', 'my_plugin_register_control_scripts' ); +``` - protected function enqueue(): void { +Then, the control class will enqueue the scripts: - wp_register_script( 'control-script-1', plugins_url( 'assets/js/control-script-1.js', __FILE__ ) ); - wp_register_script( 'control-script-2', plugins_url( 'assets/js/control-script-2.js', __FILE__ ), [ 'external-library' ] ); - wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); +```php {3} +class Elementor_Test_Control extends \Elementor\Base_Control { + protected function enqueue(): void { wp_enqueue_script( 'control-script-1' ); wp_enqueue_script( 'control-script-2' ); - } } diff --git a/src/scripts-styles/control-styles.md b/src/scripts-styles/control-styles.md index dfb5f20..dbdfa78 100644 --- a/src/scripts-styles/control-styles.md +++ b/src/scripts-styles/control-styles.md @@ -6,20 +6,25 @@ When you create new [Elementor controls](./../controls/) and need to register cu ## Registering Control Styles -In the example below, we'll register stylesheets and enqueue them when creating new controls: +In the example below, we'll register stylesheets when creating new controls: -```php -class Elementor_Test_Control extends \Elementor\Base_Control { +```php {6} +function my_plugin_register_control_styles() { + wp_register_style( 'control-style-1', plugins_url( 'assets/css/control-style-1.css', __FILE__ ) ); + wp_register_style( 'control-style-2', plugins_url( 'assets/css/control-style-2.css', __FILE__ ), [ 'external-framework' ] ); + wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); +} +add_action( 'wp_enqueue_scripts', 'my_plugin_register_control_styles' ); +``` - protected function enqueue(): void { +Then, the control class will enqueue the styles: - wp_register_style( 'control-style-1', plugins_url( 'assets/css/control-style-1.css', __FILE__ ) ); - wp_register_style( 'control-style-2', plugins_url( 'assets/css/control-style-2.css', __FILE__ ), [ 'external-framework' ] ); - wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); +```php {3} +class Elementor_Test_Control extends \Elementor\Base_Control { + protected function enqueue(): void { wp_enqueue_style( 'control-style-1' ); wp_enqueue_style( 'control-style-2' ); - } } diff --git a/src/scripts-styles/editor-scripts.md b/src/scripts-styles/editor-scripts.md index 3536b37..91646b9 100644 --- a/src/scripts-styles/editor-scripts.md +++ b/src/scripts-styles/editor-scripts.md @@ -2,38 +2,40 @@ -When you develop addons that extend [Elementor Editor](./../editor/) and you have your own custom scripts, use `elementor/editor/before_enqueue_scripts` or `elementor/editor/after_enqueue_scripts` action hooks, which are fired when editor scripts are registered and enqueued. +When you develop addons that extend [Elementor Editor](./../editor/) and you have custom scripts, use `elementor/editor/before_enqueue_scripts` or `elementor/editor/after_enqueue_scripts` action hooks, which are fired when editor scripts are registered and enqueued. ## Registering Editor Scripts In the example below, we'll register and enqueue custom scripts **before** Elementor scripts are registered and enqueued: -```php {11} -function my_plugin_editor_scripts() { - +```php {6,12} +function my_plugin_register_editor_scripts() { wp_register_script( 'editor-script-1', plugins_url( 'assets/js/editor-script-1.js', __FILE__ ) ); wp_register_script( 'editor-script-2', plugins_url( 'assets/js/editor-script-2.js', __FILE__ ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); +} +add_action( 'wp_enqueue_scripts', 'my_plugin_register_editor_scripts' ); +function my_plugin_enqueue_editor_scripts() { wp_enqueue_script( 'editor-script-1' ); wp_enqueue_script( 'editor-script-2' ); - } -add_action( 'elementor/editor/before_enqueue_scripts', 'my_plugin_editor_scripts' ); +add_action( 'elementor/editor/before_enqueue_scripts', 'my_plugin_enqueue_editor_scripts' ); ``` Now we'll register and enqueue custom scripts **after** Elementor scripts are registered and enqueued: -```php {11} -function my_plugin_editor_scripts() { - +```php {6,12} +function my_plugin_register_editor_scripts() { wp_register_script( 'editor-script-1', plugins_url( 'assets/js/editor-script-1.js', __FILE__ ) ); wp_register_script( 'editor-script-2', plugins_url( 'assets/js/editor-script-2.js', __FILE__ ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); +} +add_action( 'wp_enqueue_scripts', 'my_plugin_register_editor_scripts' ); +function my_plugin_enqueue_editor_scripts() { wp_enqueue_script( 'editor-script-1' ); wp_enqueue_script( 'editor-script-2' ); - } -add_action( 'elementor/editor/after_enqueue_scripts', 'my_plugin_editor_scripts' ); +add_action( 'elementor/editor/after_enqueue_scripts', 'my_plugin_enqueue_editor_scripts' ); ``` diff --git a/src/scripts-styles/editor-styles.md b/src/scripts-styles/editor-styles.md index a454bfb..509a662 100644 --- a/src/scripts-styles/editor-styles.md +++ b/src/scripts-styles/editor-styles.md @@ -2,38 +2,40 @@ -When you develop addons that extend [Elementor Editor](./../editor/) and you are using your own custom stylesheets, use `elementor/editor/before_enqueue_styles` or `elementor/editor/after_enqueue_scripts` action hooks, which are fired when editor styles are registered and enqueued. +When you develop addons that extend [Elementor Editor](./../editor/) and you have custom stylesheets, use `elementor/editor/before_enqueue_styles` or `elementor/editor/after_enqueue_scripts` action hooks, which are fired when editor styles are registered and enqueued. ## Registering Editor Styles In the example below, we'll register and enqueue custom stylesheets **before** Elementor styles are registered and enqueued: -```php {11} -function my_plugin_editor_styles() { - +```php {6,12} +function my_plugin_register_editor_styles() { wp_register_style( 'editor-style-1', plugins_url( 'assets/css/editor-style-1.css', __FILE__ ) ); wp_register_style( 'editor-style-2', plugins_url( 'assets/css/editor-style-2.css', __FILE__ ), [ 'external-framework' ] ); wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); +} +add_action( 'elementor/editor/before_register_styles', 'my_plugin_register_editor_styles' ); +function my_plugin_enqueue_editor_styles() { wp_enqueue_style( 'editor-style-1' ); wp_enqueue_style( 'editor-style-2' ); - } -add_action( 'elementor/editor/before_enqueue_styles', 'my_plugin_editor_styles' ); +add_action( 'elementor/editor/before_enqueue_styles', 'my_plugin_enqueue_editor_styles' ); ``` Now we'll register and enqueue custom stylesheets **after** Elementor styles are registered and enqueued: -```php {11} -function my_plugin_editor_styles() { - +```php {6,12} +function my_plugin_register_editor_styles() { wp_register_style( 'editor-style-1', plugins_url( 'assets/css/editor-style-1.css', __FILE__ ) ); wp_register_style( 'editor-style-2', plugins_url( 'assets/css/editor-style-2.css', __FILE__ ), [ 'external-framework' ] ); wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); +} +add_action( 'elementor/editor/after_register_styles', 'my_plugin_register_editor_styles' ); +function my_plugin_enqueue_editor_styles() { wp_enqueue_style( 'editor-style-1' ); wp_enqueue_style( 'editor-style-2' ); - } -add_action( 'elementor/editor/after_enqueue_styles', 'my_plugin_editor_styles' ); +add_action( 'elementor/editor/after_enqueue_styles', 'my_plugin_enqueue_editor_styles' ); ``` diff --git a/src/scripts-styles/frontend-scripts.md b/src/scripts-styles/frontend-scripts.md index aaded7f..b4c9b83 100644 --- a/src/scripts-styles/frontend-scripts.md +++ b/src/scripts-styles/frontend-scripts.md @@ -2,40 +2,42 @@ -Some addons have custom frontend scripts loaded to the client side on pages built with Elementor. In these cases, use `elementor/frontend/before_register_scripts` or `elementor/frontend/after_register_scripts` action hooks, which are fired when Elementor frontend scripts are registered and enqueued. +Some addons have custom frontend scripts loaded on pages built with Elementor. Use `elementor/frontend/before_enqueue_scripts` or `elementor/frontend/after_enqueue_scripts` action hooks, which are fired when Elementor frontend scripts are registered and enqueued. ## Registering Frontend Scripts In the example below, we'll register and enqueue custom scripts **before** Elementor frontend scripts are registered and enqueued: -```php {11} -function my_plugin_frontend_scripts() { - +```php {6,12} +function my_plugin_register_frontend_scripts() { wp_register_script( 'frontend-script-1', plugins_url( 'assets/js/frontend-script-1.js', __FILE__ ) ); wp_register_script( 'frontend-script-2', plugins_url( 'assets/js/frontend-script-2.js', __FILE__ ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); +} +add_action( 'elementor/frontend/before_register_scripts', 'my_plugin_register_frontend_scripts' ); +function my_plugin_enqueue_frontend_scripts() { wp_enqueue_script( 'frontend-script-1' ); wp_enqueue_script( 'frontend-script-2' ); - } -add_action( 'elementor/frontend/before_register_scripts', 'my_plugin_frontend_scripts' ); +add_action( 'elementor/frontend/before_enqueue_scripts', 'my_plugin_enqueue_frontend_scripts' ); ``` Now we'll register and enqueue custom scripts **after** Elementor frontend scripts are registered and enqueued: -```php {11} -function my_plugin_frontend_scripts() { - +```php {6,12} +function my_plugin_register_frontend_scripts() { wp_register_script( 'frontend-script-1', plugins_url( 'assets/js/frontend-script-1.js', __FILE__ ) ); wp_register_script( 'frontend-script-2', plugins_url( 'assets/js/frontend-script-2.js', __FILE__ ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); +} +add_action( 'elementor/frontend/after_register_scripts', 'my_plugin_register_frontend_scripts' ); +function my_plugin_enqueue_frontend_scripts() { wp_enqueue_script( 'frontend-script-1' ); wp_enqueue_script( 'frontend-script-2' ); - } -add_action( 'elementor/frontend/after_register_scripts', 'my_plugin_frontend_scripts' ); +add_action( 'elementor/frontend/after_enqueue_scripts', 'my_plugin_enqueue_frontend_scripts' ); ``` ::: warning Please Note diff --git a/src/scripts-styles/frontend-styles.md b/src/scripts-styles/frontend-styles.md index 5ed54c0..85db5b5 100644 --- a/src/scripts-styles/frontend-styles.md +++ b/src/scripts-styles/frontend-styles.md @@ -8,34 +8,36 @@ When using custom stylesheets, they must be registered to all pages using Elemen In the example below, we'll register and enqueue custom stylesheets **before** Elementor frontend styles are registered and enqueued: -```php {11} -function my_plugin_frontend_stylesheets() { - +```php {6,12} +function my_plugin_register_frontend_styles() { wp_register_style( 'frontend-style-1', plugins_url( 'assets/css/frontend-style-1.css', __FILE__ ) ); wp_register_style( 'frontend-style-2', plugins_url( 'assets/css/frontend-style-2.css', __FILE__ ), [ 'external-framework' ] ); wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); +} +add_action( 'elementor/frontend/before_register_styles', 'my_plugin_register_frontend_styles' ); +function my_plugin_enqueue_frontend_styles() { wp_enqueue_style( 'frontend-style-1' ); wp_enqueue_style( 'frontend-style-2' ); - } -add_action( 'elementor/frontend/before_enqueue_styles', 'my_plugin_frontend_stylesheets' ); +add_action( 'elementor/frontend/before_enqueue_styles', 'my_plugin_enqueue_frontend_styles' ); ``` Now we'll register and enqueue custom stylesheets **after** Elementor frontend styles are registered and enqueued: -```php {11} -function my_plugin_frontend_stylesheets() { - +```php {6,12} +function my_plugin_register_frontend_stylesheets() { wp_register_style( 'frontend-style-1', plugins_url( 'assets/css/frontend-style-1.css', __FILE__ ) ); wp_register_style( 'frontend-style-2', plugins_url( 'assets/css/frontend-style-2.css', __FILE__ ), [ 'external-framework' ] ); wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); +} +add_action( 'elementor/frontend/after_register_styles', 'my_plugin_register_frontend_stylesheets' ); +function my_plugin_enqueue_frontend_stylesheets() { wp_enqueue_style( 'frontend-style-1' ); wp_enqueue_style( 'frontend-style-2' ); - } -add_action( 'elementor/frontend/after_enqueue_styles', 'my_plugin_frontend_stylesheets' ); +add_action( 'elementor/frontend/after_enqueue_styles', 'my_plugin_enqueue_frontend_stylesheets' ); ``` ::: warning Please Note diff --git a/src/scripts-styles/preview-scripts.md b/src/scripts-styles/preview-scripts.md index 92b121d..f4beea8 100644 --- a/src/scripts-styles/preview-scripts.md +++ b/src/scripts-styles/preview-scripts.md @@ -8,16 +8,17 @@ When you develop addons that extend [Elementor preview](./../editor/elementor-pr In the example below, we'll register and enqueue custom scripts after Elementor scripts are registered and enqueued: -```php {11} -function my_plugin_preview_scripts() { - +```php {6,12} +function my_plugin_register_preview_scripts() { wp_register_script( 'preview-script-1', plugins_url( 'assets/js/preview-script-1.js', __FILE__ ) ); wp_register_script( 'preview-script-2', plugins_url( 'assets/js/preview-script-2.js', __FILE__ ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); +} +add_action( 'wp_enqueue_scripts', 'my_plugin_register_preview_scripts' ); +function my_plugin_enqueue_preview_scripts() { wp_enqueue_script( 'preview-script-1' ); wp_enqueue_script( 'preview-script-2' ); - } -add_action( 'elementor/preview/enqueue_scripts', 'my_plugin_preview_scripts' ); +add_action( 'elementor/preview/enqueue_scripts', 'my_plugin_enqueue_preview_scripts' ); ``` diff --git a/src/scripts-styles/preview-styles.md b/src/scripts-styles/preview-styles.md index 7ef0f2a..453ea6e 100644 --- a/src/scripts-styles/preview-styles.md +++ b/src/scripts-styles/preview-styles.md @@ -8,16 +8,17 @@ When you develop addons that extend [Elementor preview](./../editor/elementor-pr In the example below, we'll register and enqueue custom stylesheets after Elementor preview styles are registered and enqueued: -```php {11} -function my_plugin_preview_styles() { - +```php {6,12} +function my_plugin_register_preview_styles() { wp_register_style( 'preview-style-1', plugins_url( 'assets/css/preview-style-1.css', __FILE__ ) ); wp_register_style( 'preview-style-2', plugins_url( 'assets/css/preview-style-2.css', __FILE__ ), [ 'external-framework' ] ); wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); +} +add_action( 'wp_enqueue_scripts', 'my_plugin_register_preview_styles' ); +function my_plugin_enqueue_preview_styles() { wp_enqueue_style( 'preview-style-1' ); wp_enqueue_style( 'preview-style-2' ); - } -add_action( 'elementor/preview/enqueue_styles', 'my_plugin_preview_styles' ); +add_action( 'elementor/preview/enqueue_styles', 'my_plugin_enqueue_preview_styles' ); ``` diff --git a/src/scripts-styles/widget-scripts.md b/src/scripts-styles/widget-scripts.md index c580654..25a7328 100644 --- a/src/scripts-styles/widget-scripts.md +++ b/src/scripts-styles/widget-scripts.md @@ -8,18 +8,18 @@ When you develop new [Elementor widgets](./../widgets/) and need to [register cu In the example below, we'll register the required scripts in the main file: -```php -function register_widget_scripts() { +```php {6} +function my_plugin_register_widget_scripts() { wp_register_script( 'widget-script-1', plugins_url( 'assets/js/widget-script-1.js', __FILE__ ) ); wp_register_script( 'widget-script-2', plugins_url( 'assets/js/widget-script-2.js', __FILE__ ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) ); } -add_action( 'wp_enqueue_scripts', 'register_widget_scripts' ); +add_action( 'wp_enqueue_scripts', 'my_plugin_register_widget_scripts' ); ``` Then, the widget class will set the JS dependencies: -```php +```php {3} class Elementor_Test_Widget extends \Elementor\Widget_Base { public function get_script_depends(): array { diff --git a/src/scripts-styles/widget-styles.md b/src/scripts-styles/widget-styles.md index cafbffe..e471e9f 100644 --- a/src/scripts-styles/widget-styles.md +++ b/src/scripts-styles/widget-styles.md @@ -8,18 +8,18 @@ When you develop new [Elementor widgets](./../widgets/) and need to [register cu In the example below, we'll register the required stylesheets in the main file: -```php -function register_widget_styles() { +```php {6} +function my_plugin_register_widget_styles() { wp_register_style( 'widget-style-1', plugins_url( 'assets/css/widget-style-1.css', __FILE__ ) ); wp_register_style( 'widget-style-2', plugins_url( 'assets/css/widget-style-2.css', __FILE__ ), [ 'external-framework' ] ); wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) ); } -add_action( 'wp_enqueue_scripts', 'register_widget_styles' ); +add_action( 'wp_enqueue_scripts', 'my_plugin_register_widget_styles' ); ``` Then, the widget class will set the CSS dependencies: -```php +```php {3} class Elementor_Test_Widget extends \Elementor\Widget_Base { public function get_style_depends(): array { diff --git a/src/widgets/widget-dependencies.md b/src/widgets/widget-dependencies.md index f09b79a..dc10581 100644 --- a/src/widgets/widget-dependencies.md +++ b/src/widgets/widget-dependencies.md @@ -2,11 +2,11 @@ -Some widgets are dependent on custom scripts for functionality and custom styles for look and feel. Widgets can use external JS libraries, CSS frameworks, or custom JS handlers. Let's see how to register them. +Some widgets are dependent on custom scripts for functionality and custom styles for look and feel. Widgets can use external JS libraries, CSS frameworks, or custom JS handlers. Let's see how to use them. ## Defining Dependencies -Inside the widget class we can deffine the required JS and CSS dependencies the following way: +Inside the widget class we can define the required JS and CSS dependencies the following way: ```php class Elementor_Test_Widget extends \Elementor\Widget_Base {