Extend Elementor like a pro: Creating a New Widget

Creating a New Widget Featured Image

Elementor is packed with various elements or widgets. Widgets allow us to build websites and display appropriate content. But sometimes we need specific functionality for our website. And to do this, we need to create a new widget or element.

What is a widget?

A widget or element is a section in the Graphical User Interface (GUI) that lets us display the information we want to showcase to users.

The Elementor widget is a combination of PHP, JavaScript, HTML and CSS codes that generate a custom output for us. We suggest visiting this link before reading this article.

Elementor Widgets

Each widget has custom controls like input, fields, buttons and more. With these controls, we can set our custom settings and see a live preview in the editor and render the final HTML in frontend.

Widget Structure

In order to create a new widget, we must extend the Widget_Base abstract class. This class has several methods that we first need to override.

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

    public function get_name() {}

    public function get_title() {}

    public function get_icon() {}

    public function get_categories() {}

    protected function _register_controls() {}

    protected function render() {}

    protected function _content_template() {}
}

Widget Name

With the get_name() method, we can set the name of a widget and return the name of the widget.

public function get_name() {
    return 'Widget Name';
}

Widget Title

With the get_title() method, we can set the label of the widget.

public function get_title() {
    return __( 'Widget Title', 'Plugin Name' );
}

Widget Icon

The get_icon() method set the icon for our widget that displayed in the panel.

public function get_icon() {
    return 'eicon-gallery-grid';
}

Widget Categories

The get_categories() method set the category that our widget must be placed on the panel’s categories. In default, there are several categories including the following:

  • Basic
  • Pro-elements
  • General
  • Woocommerce-elements
  • WordPress
  • And so on.
public function get_categories() {
    return [ 'basic' ];
}

We can also create custom categories with the elementor/elements/categories_registered action.

<?php
function create_custom_categories( $elements_manager ) {

    $elements_manager->add_category(
        'custom-category',
        [
         'title' => __( 'Custom Category', 'plugin-name' ),
         'icon' => 'fa fa-plug',
        ]
    );
}
add_action( 'elementor/elements/categories_registered', 'create_custom_categories' );

Widget Controls

With the _register_controls() method, we can set essential sections and controls for the widget.

There are several controls that we can use for widget settings, such as the following:

  1. UI Controls
    • Button
    • Divider
    • Heading
    • Raw Html
  2. Data Controls
    • Text
    • Select
    • Choose
    • Gallery
    • Slider
    • Typography
    • And so on.
  3. Multiple Controls
    • Url
    • Media
    • Image Dimensions
  4. Unit Controls
    • Slider
    • Dimensions
  5. Group Controls
    • Typography
    • Text Shadow
    • Box Shadow
    • Border
    • Background

For more information on Elementor controls, you can check out this link.

Widget Template

The render() method allows creating a frontend HTML code with the PHP.

The _content_template() method generates a live preview for the widget in the editor by using the Backbone JavaScript library.

How to add controls to our widget

In default, there are three tabs in the Elementor panel, which are the Content Tab, Style Tab, and Advanced Tab. To add controls to our widget, we should first create a section and assign it to one of the tabs. Then we can add our favorite controls to the section. As mentioned above, we must put our code in the _register_controls() method.

Creating a Section

To create a section, we need to set the following essential parameters:

  • Section Name
  • Section Settings(label ,tab)
$this->start_controls_section(
     'section_name',//set unique name

          //set setting of section
        [
         'label' => __( 'Section Label', 'plugin-name' ),
         'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
 );

  //THE CONTROLS COME HERE

$this->end_controls_section();

We must set the following parameters for each control as seen below:

  • Control Name
  • Control Setting(label,type)

Adding a normal control

Use the following control to add a normal control.

$this->add_control(
    'control_name',//set unique name for control

           //set essential settings
         [
        'label' => __( 'Control Label', 'plugin-name' ),

            //CONTROL_TYPE can be TEXT, SLIDER, ...
        'type' => \Elementor\Controls_Manager::CONTROL_TYPE,
         ]
    );

Adding a responsive control

This control type includes different settings value for desktop, tablet, and mobile devices.

$this->add_responsive_control(
     'control_name',
       [
        'label' => __( 'Control Name', 'plugin-name' ),
           //CONTROL_TYPE can be TEXT, SLIDER, …

         type' => \Elementor\Controls_Manager::CONTROL_TYPE,
           //SET FAVORITE RANGE LIKE PX, %, EM

         'range' => [
                 'px' => [
                        'min' => 0,
                        'max' => 100,
                       ],
                ],
            // SET FAVORITE DEVICES
          'devices' => [ 'desktop', 'tablet', 'mobile' ],
        'desktop_default' => [
                        'size' => 30,
                        'unit' => 'px',
                         ],
          'tablet_default' =>  [
                        'size' => 20,
                        'unit' => 'px',
                         ],
          'mobile_default' =>  [
                        'size' => 10,
                        'unit' => 'px',
                         ],
                
                ],
            ]
        );

Adding a group control

This control groups several normal controls in one control such as typography.

$this->add_group_control(
//Group_Control_Class can be       Group_Control_Typography,Group_Control_Border or other group controls

  Group_Control_Class::get_type(),
  [
   'name' => 'control_name',
   'label' => __( 'control Label', 'plugin-name' ),
  ]
);

Adding control tabs

Create a tab area to add various controls.

//start tabs area container
$this->start_controls_tabs();

  // create first tab area
  $this->start_controls_tab();

    $this->add_control();

      $this->end_controls_tab();

     // create second tab area
      $this->start_controls_tab();

    $this->add_control();

      $this->end_controls_tab();

$this->end_controls_tabs();
//end tabs area container

Adding control popovers

Create a popover window will allow you to display various controls.

$this->add_control(
   'control_name',
    [
     'label' => __( 'Control Label', 'plugin-name' ),
     'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
     'label_off' => __( 'Default', 'plugin-name' ),
     'label_on' => __( 'Custom', 'plugin-name' ),
     'return_value' => 'yes',
    ]
  );

    $this->start_popover();

    $this->add_control();

    $this->add_control();

    $this->end_popover();

How to Display or Hide Sections and Controls in Widgets

At times, you might want to hide some sections or controls in your widget, but using if / else in the code is a hassle. Fortunately, now you can do this conveniently with the condition in the settings for sections or controls.

$this->start_controls_section(
  'my_section',
   [
    'label' => __( 'My Section', 'plugin-name' ),
    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
    'condition' => [
                       'Name' => 'Value',
                      ]
      //name must be unique name of one control
      //Value must be the return value of control
   ]
);

Let’s say that we have one control named Choose_ Layout with two values first and second. After adding the code found below code to any section or control, our section or control will be displayed if the return value of the Choose_ Layout control is equal to first. And it will be hidden if the return value of Choose_ Layout control is equal to the second.

'condition' => [
                'Choose_ Layout' => 'first',
               ]

How to Change Widget Output Style Automatically from the Control Settings

One of Elementor’s amazing features is the ability to easily change the style of widget output with CSS code and selectors. For example, if we want to change the height of images in output, first we must assign a class attribute to our HTML tag. Then use this class with the selector in settings of control.

<img class="test-img">

$this->add_control(
          'test_height',
            [
             'label' => __( 'Height', 'Spicy-extension' ),
             'type' => \Elementor\Controls_Manager::SLIDER,
             'separator' => 'after',
             'show_label' => true,
             'selectors' => [
                '{{WRAPPER}} .test-img' => 'height: {{SIZE}}{{UNIT}};',
              ],
            ]
        );

How to Get Widget Settings

To create the final Html code in the render() method and live preview in the _content_template() we’ll need input the parameter from the widget controls like height, width, font-size and more. In Elementor, the input parameter is called Settings. We can arrange settings in render() using this method.

$widget_settings= $this->get_settings_for_display();
$widget_settings['control_name'];

For the _content_template() method the Elementor store setting in the settings variable.

settings.control_name

One important note that we must consider is the settings are saved in a multidimensional array. We can get an inner setting with the following code.

$widget_settings['control_name ']['option'];

settings.control_name.option 

Creating a Sample Widget

Below, we have illustrated how to build a gallery widget step-by-step so you can better understand how to cover the topics mentioned above and create an Elementor widget.

Our gallery widget is registered in the Spicy plugin and the root directory of the gallery widget is:

-Css
-gallery.css
-index.php
-widgets
-gallery.php
-index.php
-spicy.php
-index.php

Index.php file is an empty file that prevents a malicious hacker from directly accessing the plugin.
Spicy.php file is the main plugin file that we register our widget with.
Gallery.css file is a CSS file that sets the default style of a gallery widget.
Gallery.php is the main file that defines the functionality of a gallery widget.

Download the Source Code here.

Our gallery widget is based on the grid and has two layouts, which are classic and pro. Both layouts have the following controls:

  • Skin
  • Column gap
  • Row gap
  • Columns
  • Hover Animation
  • Box Shadow

The classic layout has a gallery control, and the image section contains the below controls:

  • Height
  • Image size behavior
  • Border type
  • Border radius

Also, the pro layout has an image repeater control with several sections such as the following:

  • Item section contains Border Type, Width, Color, and Border Radius controls.
  • Image section contains Height and Image Size behavior controls.
  • Text section contains Color, Typography, Alignment, and Spacing controls.
  • Avatar section contains Height, Width, Alignment, and Spacing controls.
  • Textarea section contains Color, Typography, Alignment, and Spacing controls.

Extending the Widget_Base Abstract Class

The main class of the gallery widget is similar to the code found below.

gallery.php
<?php
class Spicy_Gallery_Widget extends \Elementor\Widget_Base {
public function get_name() {
   return 'Gallery';
   }
public function get_title() {
    return __( 'Gallery', 'Spicy-extension' );
    }
public function get_icon() {
    return 'eicon-gallery-grid';
    }
public function get_categories() {
    return [ 'basic' ];
    }
protected function _register_controls() {

    //  start Content tab
        $this->start_controls_section(
            'content_section',
            [
             'label' => __( 'Content', 'Spicy-extension' ),
             'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        //add skin control
        $this->register_controls_skin();

        //add repeater for pro skin
        $this->register_controls_pro_repeater();

        //add gallery control
        $this->register_controls_Classic_gallery();

        //add column-gap slider
        $this->register_controls_column_gap();

        //add row-gap slider
        $this->register_controls_row_gap();


       
     
 //add columns number list
        $this->register_controls_column_number();

        $this->end_controls_section();
        // end content tab

        //start Style tab
        $this->register_controls_classic_style_image();

        //create pro item section
        $this->register_controls_pro_item();

      //create pro style section-image
        $this->register_controls_pro_style_image();

      //create pro style section-text
        $this->register_controls_pro_style_text();

      //create pro style section-avatar
        $this->register_controls_pro_style_avatar();

      //create pro style section-textarea
        $this->register_controls_pro_style_textarea();

      //Box Shadow
        $this->register_controls_pro_style_boxshadow();

        //hover animation
        $this->register_controls_pro_style_hoveranimation();
      //end style tab
    }

protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="spicy-gallery" width="100%">
        <?php
   
        if($settings['spicy_skin']=='classic'){
            $this->classic_render($settings);
        }else{
            $this->pro_render($settings);
  
                 }
        ?>
        </div>
        
        <?php
    }   

protected function _content_template() {
        ?>
        <div class="spicy-gallery">
        <#
         if(settings.spicy_skin=='classic'){
         _.each( settings.spicy_images, function( image ) {
        #>
        <div class="spicy-item elementor-animation-{{settings.spicyhover}}">
         <img  class="spicy-img" id="{{image.id}}" src="{{image.url}}"/>
        </div>
        <# }); } else{
         _.each( settings.spicy_image_list, function( image ) {
        #>
        <div class="spicy-item elementor-animation-{{settings.spicyhover}}">    
          <div class="spicy-pro-container">
            <img class="spicy-pro-img" src="{{image.spicy_pro_image.url}}" >
          </div>
          <p class="spicy-pro-text">{{image.spicy_pro_text}}</p>
          <div class="spicy-avatar-wrapper">
           <img class="spicy-avatar" src="{{image.spicy_pro_avatar.url}}" alt="Avatar">
          </div>
          <p class="spicy-pro-description">{{image.spicy_pro_description}}</p>
         </div>
        <# }); }#>
        </div>
     <?php
    }
?>

Creating Controls for a Gallery Widget

In the above code, you’ll see several functions in _register_controls() and render() functions.In fact, these methods assign sections and controls for the gallery widget. We can create these functions only for grouping codes and simplicity.

Common Controls

1. Skin control: This control’s type is Select with two options set as classic and pro. With this control, we have the ability to change the layout of the gallery widget.

protected function register_controls_skin(){
        $this->add_control(
               'spicy_skin',
               [
                'label' => __( 'Skin', 'spicy' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => [
                'classic' => __( 'Classic', 'Spicy-extension' ),
                'pro' => __( 'Pro', 'spicy' ),
               ],
                'default' => 'classic',   
            ]
       );
}

2. Column Gap: This type of control is Slider, which allows us to change the space between columns of the gallery widget.

protected function register_controls_column_gap(){
        $this->add_responsive_control(
               'spicy_column_gap',
               [
                'label' => __( 'Column Gap', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ '%','em', 'px' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                        'step' => 1,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 0.5,
                ],
                'show_label' => true,
                'selectors' => [
                    '{{WRAPPER}} .spicy-gallery' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
    }

3. Row Gap: This type of control is Slider, which we can use to change the space between rows of the gallery widget.

protected function register_controls_row_gap(){
        $this->add_responsive_control(
               'spicy_row_gap',
               [
                'label' => __( 'row Gap', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','em','%' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                        'step' => 1,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 5,
                ],
                'show_label' => true,
                'selectors' => [
                  '{{WRAPPER}} .spicy-gallery' => ' grid-row-gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
    }

4. Columns: The type of control is Select, which lets us alter the number of columns of the gallery widget.

protected function register_controls_column_number(){
        $this->add_responsive_control(
               'spicy_columns',
               [
                'label' => __( 'Columns', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 3,
                'options' => ['1'=>1,'1'=>1,'2'=>2,'3'=>3,'4'=>4,'5'=>5,'6'=>6,'7'=>7,'8'=>8,'9'=>9,'10'=>10],
                'devices' => [ 'desktop', 'tablet', 'mobile' ],
                'desktop_default' => [
                    'size' => '',
                ],
                'tablet_default' => [
                    'size' => '',
                ],
                'mobile_default' => [
                    'size' => '',
                ],
                'selectors' => [
                  '{{WRAPPER}} .spicy-gallery' => 'grid-template-columns: repeat({{SIZE}},1fr);',
                ],
            ]
            
       );
    }

5. Box Shadow: This section is used to add a box shadow effect to gallery items.

protected function register_controls_style_boxshadow(){
        $this->start_controls_section(
               'spicy_box_shadow',
               [
                'label' => __( 'Box Shadow', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
               ]
        );
        $this->add_group_control(
               Elementor\Group_Control_Box_Shadow::get_type(),
               [
                'name' => 'box_shadow',
                'label' => __( 'Box Shadow', 'Spicy-extension' ),
                'selector' => '{{WRAPPER}} .spicy-item',
               ]
        );
        $this->end_controls_section();
 }

6. Hover Animation: This section adds an animation effect to the gallery item.

protected function register_controls_style_hoveranimation(){
        $this->start_controls_section(
               'spicy_hover',
               [
                'label' => __( 'Hover Animation', 'Spicy-extension' ),
               'tab' => \Elementor\Controls_Manager::TAB_STYLE,
             ]
        );
        $this->add_control(
               'spicyhover',
               [
                'label' => __( 'Hover Animation', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::HOVER_ANIMATION,
                'default'=>'',
               ]
            
        );
        $this->end_controls_section();
    }

Classic Layout

The following controls or sections are only displayed in the classic layout.

1. Gallery Control: used to select multiple images for the gallery and displayed in the Content Tab.

protected function register_controls_Classic_gallery(){
        $this->add_control(
               'spicy_images',
              [
                'label' => __( 'Add Images', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::GALLERY,
                'separator' => 'default',
                'show_label' => false,
                'condition' => [
                                'spicy_skin' => 'classic',
                               ],
                'dynamic' => [
                              'active' => true,
                             ]
              ]
        );
 }

2. Image sections: This is displayed in the Style Tab to change the style of the image.

protected function register_controls_classic_style_image(){
        $this->start_controls_section(
               'style_section',
               [
                'label' => __( 'Image', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                              'spicy_skin' => 'classic'
                             ]
               ]
        );
        //classic height image control
        $this->add_responsive_control(
               'spicy_height',
               [
                'label' => __( 'Height', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'separator' => 'after',
                'size_units' => [ 'px','vw'],
                'range' => [
                            'px' => [
                                     'min' => 0,
                                     'max' => 500,
                                     'step' => 1,
                                    ],
                            'vw' => [
                                     'min' => 0,
                                     'max' => 100,
                                     'step' => 1,
                                    ],
                           ],
                'default' => [
                              'unit' => 'px',
                              'size' => 150,
                             ],
                'show_label' => true,
                'selectors' => [
                    '{{WRAPPER}} .spicy-img' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        //image fitness classic
        $this->add_responsive_control(
               'spicy_image_fitness',
               [
                'label' => __( 'Image Size Behavior', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => ['cover'=> __( 'Cover', 'Spicy-extension' ),'fill'=>__( 'Fit', 'Spicy-extension' ),'contain'=>__( 'Contain', 'Spicy-extension' ),'scale-down'=>__( 'Scale Down', 'Spicy-extension' ),'none'=>__( 'None', 'Spicy-extension' )],
                'devices' => [ 'desktop', 'tablet', 'mobile' ],
                'desktop_default' => [
                                      'val' => '',
                                     ],
                'tablet_default' => [
                                      'val' => '',
                                    ],
                'mobile_default' => [
                                     'val' => '',
                                    ],
                'default' => 'cover',
                'selectors' => [
                    '{{WRAPPER}} .spicy-img' => 'object-fit: {{val}};',
                 ],
               ]
            
            );
        //border classic    
        $this->add_group_control(
               Elementor\Group_Control_Border::get_type(),
               [
                'name' => 'spicy_border',
                'label' => __( 'Border', 'Spicy-extension' ),
                'selector' => '{{WRAPPER}} .spicy-img',
               ]
        );
        //border radius classic
        $this->add_responsive_control(
               'spicy_image_border_radius',
               [
                'label' => __( 'Border Radius', 'Spicy-extension' ),
                'type' => Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
    }

Pro Layout

The following controls or sections are only displayed in the pro layout.

1. Repeater Section: This section has four controls, which are Image, Text, Avatar, and Textarea. It’s used for adding images individually and is displayed in the Content Tab.

protected function register_controls_pro_repeater(){
        $repeater = new \Elementor\Repeater();
        //add pro image control
        $repeater->add_control(
                   'spicy_pro_image',
                   [
                    'label' => __( 'Choose Image', 'Spicy-extension' ),
                    'type' => \Elementor\Controls_Manager::MEDIA,
                    'dynamic' => [
                                  'active' => true,
                                 ],
                    'default' => [
                     'url' => \Elementor\Utils::get_placeholder_image_src(),
                    ],
                  ]
        );
        //add pro text control
        $repeater->add_control(
                   'spicy_pro_text',
               [
                'label' => __( 'Text', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'label_block' => true,
                'placeholder' => __( 'Your Text', 'Spicy-extension' ),
                'default' => __( '', 'Spicy-extension' ),
                'dynamic' => [
                              'active' => true,
                             ],
               ]
        );
        //add avatar image control
        $repeater->add_control(
            'spicy_pro_avatar',
            [
                'label' => __( 'Choose Avatar', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'dynamic' => [
                    'active' => true,
                ],
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
     );
        //pro textarea control
        $repeater->add_control(
               'spicy_pro_description',
               [
                'label' => __( 'Description', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'rows' => 5,
                'default' => __( '', 'Spicy-extension' ),
                'placeholder' => __( 'Type your description here', 'spicy' ),
               ]
        );

        //add repeater control
        $this->add_control(
               'spicy_image_list',
               [
                'label' => __('Images','Spicy-extension'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'label_block' => true,
                'separator' => 'default',
                'fields' => $repeater->get_controls(),
                'title_field' => '{{{spicy_pro_text }}}',
                'condition' => [
                                'spicy_skin' => 'pro',
                            ],
             ]
        );
    }

2. Item Section: This is displayed in the Style Tab to change the border style of the gallery item.

protected function register_controls_pro_item(){
     $this->start_controls_section(
               'spicy_pro_item',
               [
                'label' => __( 'Item', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                              'spicy_skin' => 'pro'
                             ]
              ]
        );
        // pro item border
        $this->add_group_control(
               \Elementor\Group_Control_Border::get_type(),
               [
                'name' => 'spicy_item_border',
                'label' => __( 'Border', 'Spicy-extension' ),
                'selector' => '{{WRAPPER}} .spicy-item',
               ]
        );  
        //pro item border radius
        $this->add_responsive_control(
               'spicy_pro_item_border_radius',
               [
                'label' => __( 'Border Radius', 'Spicy-extension' ),
                'type' => Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
               ]
        );
        $this->end_controls_section();
    }

3. Image Section: This is displayed in the Style Tab to change the image size.

protected function register_controls_pro_style_image(){
        $this->start_controls_section(
               'spicy_pro_style_image',
               [
                'label' => __( 'Image', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                              'spicy_skin' => 'pro'
                             ]
               ]
        );
        //pro image size
        $this->add_responsive_control(
               'spicy_pro_image_height',
               [
                'label' => __( 'height', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','em','vh' ],
                'range' => [
                            'px' => [
                                     'min' => 0,
                                     'max' => 800,
                                     'step' => 1,
                                    ],
                            'vh' => [
                                     'min' => 0,
                                     'max' => 100,
                                     'step' => 1,
                                    ],
                            'em' => [
                                     'min' => 0,
                                     'max' => 10,
                                     'step' => 0.1,
                                    ],
                          ],
                'default' => [
                              'unit' => 'px',
                              'size' => 150,
                             ],
                'show_label' => true,
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-img' => ' height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        //pro image fitness
        $this->add_responsive_control(
            'spicy_pro_image_fitness',
            [
                'label' => __( 'Image Size Behavior', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => ['cover'=> __( 'Cover', 'Spicy-extension' ),'fill'=>__( 'Fill', 'Spicy-extension' ),'contain'=>__( 'Contain', 'Spicy-extension' ),'scale-down'=>__( 'Scale Down', 'Spicy-extension' ),'none'=>__( 'None', 'Spicy-extension' )],
                'devices' => [ 'desktop', 'tablet', 'mobile' ],
                'desktop_default' => [
                                      'val' => '',
                                     ],
                'tablet_default' => [
                                     'val' => '',
                                    ],
                'mobile_default' => [
                                     'val' => '',
                                    ],
                'default' => 'cover',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-img' => 'object-fit: {{val}};',
                ],
            ]
            
      );
        $this->end_controls_section();

4. Text Section: This is displayed in the Style Tab to change the style of the text item.

protected function register_controls_pro_style_text(){
        $this->start_controls_section(
                'spicy_pro_style_text',
                [
                 'label' => __( 'Text', 'Spicy-extension' ),
                 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                 'condition'=>[
                    'spicy_skin' => 'pro'
                ]
            ]
        );

        //pro text color control
        $this->add_control(
               'spicy_pro_text_color',
               [
                'label' => __( 'Color', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-text' => 'color: {{VALUE}};',
                 ],
                'scheme' => [
                             'type' => \Elementor\Scheme_Color::get_type(),
                             'value' => \Elementor\Scheme_Color::COLOR_1,
                            ],
               ]
        );

        //pro text typography
        $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                 'name' => 'spicy_pro_text_typography',
                 'selector' => '{{WRAPPER}} .spicy-pro-text',
                 'scheme' => \Elementor\Scheme_Typography::TYPOGRAPHY_1,
                ]
        );

        //pro text alignment
        $this->add_responsive_control(
               'spicy_pro_text-_align',
               [
                'label' => __( 'Alignment', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                              'left' => [
                                          'title' => __( 'Left','Spicy-extension'),
                                          'icon' => 'fa fa-align-left',
                                        ],
                              'center' => [
                                            'title' => __( 'Center', 'Spicy-extension' ),
                                            'icon' => 'fa fa-align-center',
                                           ],
                              'right' => [
                                          'title' => __( 'Right', 'Spicy-extension' ),
                                          'icon' => 'fa fa-align-right',
                                         ],
                              'justify' => [
                                            'title' => __( 'Justified', 'Spicy-extension' ),
                                            'icon' => 'fa fa-align-justify',
                                           ],
                             ],
                'default' =>'',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-text' => 'text-align: {{VALUE}};',
                ],
            ]
        );
        //pro text spacing control
        $this->add_responsive_control(
               'spicy_text_margin',
               [
                'label' => __( 'Spacing', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
              ]
        );

        $this->end_controls_section();
    } 

5. Avatar Section: This is displayed in the Style Tab to change the style of the avatar.

protected function register_controls_pro_style_avatar(){
        $this->start_controls_section(
            'spicy_pro_style_avatar',
            [
                'label' => __( 'Avatar', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                    'spicy_skin' => 'pro'
                ]
            ]
        );
        //pro avatar height
        $this->add_responsive_control(
            'spicy_avatar_height',
             [
                'label' => __( 'height', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','em','vh' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'vh' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'show_label' => true,
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar' => ' height: {{SIZE}}{{UNIT}};',
                ],
             ]
        );
        //pro avatar width
        $this->add_responsive_control(
            'spicy_avatar_width',
            [
                'label' => __( 'Width', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px','em','vh' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'vh' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'show_label' => true,
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar' => ' width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        //pro avatar align control
        $this->add_responsive_control(
            'spicy_avatar_align',
            [
                'label' => __( 'Alignment', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __( 'Left', 'Spicy-extension' ),
                        'icon' => 'eicon-h-align-left',
                    ],
                    'center' => [
                        'title' => __( 'Center', 'Spicy-extension' ),
                        'icon' => 'eicon-h-align-center',
                    ],
                    'right' => [
                        'title' => __( 'Right', 'Spicy-extension' ),
                        'icon' => 'eicon-h-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar-wrapper' => ' text-align: {{VALUE}};',
                ],
            ]
        );
        //pro avatar spacing control
        $this->add_responsive_control(
            'spicy_avatar_spacing',
            [
                'label' => __( 'Spacing', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        //pro border avatar
        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'spicy_avatar_border',
                'label' => __( 'Border', 'Spicy-extension' ),
                'selector' => '{{WRAPPER}} .spicy-avatar',
            ]
        );
        //pro border radius
        $this->add_responsive_control(
            'spicy_pro_border_radius',
            [
                'label' => __( 'Border Radius', 'Spicy-extension' ),
                'type' => Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors' => [
                    '{{WRAPPER}} .spicy-avatar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
    }

5. Textarea Section: This is displayed in the Style Tab to change the style of Textarea.

protected function register_controls_pro_style_textarea(){
        $this->start_controls_section(
               'spicy_pro_style_textarea',
               [
                'label' => __( 'Textarea', 'Spicy-extension' ),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition'=>[
                  'spicy_skin' => 'pro'
                ]
              ]
        );
        //pro textarea color control
        $this->add_control(
               'spicy_pro_textarea-color',
               [
                'label' => __( 'Color', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-description' => 'color: {{VALUE}};',
                ],
                'scheme' => [
                  'type' => \Elementor\Scheme_Color::get_type(),
                  'value' => \Elementor\Scheme_Color::COLOR_1,
                ],
               ]
        );
        //pro textarea typography control
        $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                 'name' => 'spicy_pro_textarea_typography',
                 'selector' => '{{WRAPPER}} .spicy-pro-description',
                 'scheme' => \Elementor\Scheme_Typography::TYPOGRAPHY_1,
             ]
        );
        //pro textarea align control
        $this->add_responsive_control(
               'spicy_pro_textarea-align',
                [
                 'label' => __( 'Alignment', 'Spicy-extension' ),
                 'type' => \Elementor\Controls_Manager::CHOOSE,
                 'options' => [
                               'left' => [
                                          'title' => __( 'Left','Spicy-extension' ),
                                          'icon' => 'fa fa-align-left',
                                         ],
                               'center' =>[
                                           'title'=>__('Center','Spicy-extension' ),
                                           'icon' => 'fa fa-align-center',
                                          ],
                               'right' =>[
                                          'title' => __( 'Right','Spicy-extension'),
                                          'icon' => 'fa fa-align-right',
                                         ],
                               'justify'=>[
                                           'title' => __( 'Justified','Spicy-extension'),
                                           'icon' => 'fa fa-align-justify',
                                          ],
                              ],
                'default' =>'',
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-description' => 'text-align: {{VALUE}};',
                ],
            ]
        );
        //pro textarea spacing control
        $this->add_responsive_control(
               'spicy_textarea_spacing',
               [
                'label' => __( 'Spacing', 'Spicy-extension' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                  '{{WRAPPER}} .spicy-pro-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();
    } 

Create Final Html Output

To render our gallery output in the frontend, we must create the render function as the following:

protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="spicy-gallery" width="100%">
        <?php
   
        if($settings['spicy_skin']=='classic'){
            $this->classic_render($settings);
        }
         else{
          $this->pro_render($settings);
         }
        ?>
        </div>        
        <?php
    }
protected function classic_render($settings){
        if($settings['spicy_images']){
            foreach ( $settings['spicy_images'] as $image ) {
            echo '<div class="spicy-item elementor-animation-'. $settings['spicyhover'] .' ">';
               echo '<img id="'. $image['id'].'" class="spicy-img" src="' . $image['url'] . '">';
               echo '</div>';
            }
      }  
    }
protected function pro_render($settings){
        if($settings['spicy_image_list']){
            foreach ( $settings['spicy_image_list'] as $image ) {
                    echo '<div class="spicy-item elementor-animation-'. $settings['spicyhover'] .' ">';
                    echo '<div class="spicy-pro-container">';   
                        echo '<img class="spicy-pro-img" src="'.$image['spicy_pro_image']['url'].'" >';     
                    echo '</div>';  
                    echo '<p class="spicy-pro-text">'.$image['spicy_pro_text'].'</p>';
                    echo'<div class="spicy-avatar-wrapper">';
                        echo '<img class="spicy-avatar" src="'.$image['spicy_pro_avatar']['url'].'" alt="Avatar">';
                    echo'</div>';
                    echo '<p class="spicy-pro-description">'.$image['spicy_pro_description'].'</p>';
                    
                    
                echo '</div>';
            }
        }
    }

Create Live Preview in Editor

To generate a live preview of the gallery output, we must create the _content_template() method by using Javascript:

protected function _content_template() {
       ?>
        <div class="spicy-gallery">
        <#
         if(settings.spicy_skin=='classic'){
         _.each( settings.spicy_images, function( image ) {
        #>
        <div class="spicy-item elementor-animation-{{settings.spicyhover}}">
         <img  class="spicy-img" id="{{image.id}}" src="{{image.url}}"/>
        </div>
        <# }); } else{
            _.each( settings.spicy_image_list, function( image ) {
        #>
            <div class="spicy-item elementor-animation-{{settings.spicyhover}}">    
             <div class="spicy-pro-container">
                <img class="spicy-pro-img" src="{{image.spicy_pro_image.url}}" >
           </div>
              <p class="spicy-pro-text">{{image.spicy_pro_text}}</p>
                <div class="spicy-avatar-wrapper">
                 <img class="spicy-avatar" src="{{image.spicy_pro_avatar.url}}" alt="Avatar">
                </div>
                <p class="spicy-pro-description">{{image.spicy_pro_description}}</p>
            </div>
        <# }); }#>
        </div>
      <?php
    }

How to Register CSS Style to Widget

After creating a gallery widget, we need to register essential CSS style to our widget. To do this, we need to first create a CSS file, then register it in Spicy.php.

Gallery.css
.spicy-gallery{
 display:grid;
 grid-template-rows: auto;
 }
.spicy-gallery .spicy-img{
 width: 100%;
 object-fit: cover;
 margin: 0 auto;
 }

.spicy-gallery .spicy-pro-container{
 width:100%; 
 }
.spicy-gallery .spicy-pro-text{
 text-align:center;
 margin-top:-70px;
 margin-bottom: 10px;
 }
.spicy-gallery .spicy-pro-description{
 width:100%;
 text-align: center;
 padding-left: 10px;
 padding-right: 10px;
        
 }
.spicy-gallery .spicy-pro-img{
 width: 100%;
 }
.spicy-gallery .spicy-avatar{
 display:inline-block;
 margin-left:10px;
 margin-bottom: 20px;
 border-radius: 12px;
 }
.spicy-gallery .spicy-avatar.wrapper{
 display: block;
 }

In order to register our CSS file, we need to add below code to Spicy.php

// Register Widget Styles
add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'widget_styles' ] );
public function widget_styles() {
 wp_enqueue_style( 'spicyPluginStylesheet', plugins_url( '/css/gallery.css', __FILE__ ) );
}

Classic layout output

Creating a New Widget Classic Layout Output

Pro layout output

Creating a New Widget Pro Layout Output

Conclusion

In this blog post, we described how to extend Elementor like a pro in detail and explained the structure of an Elementor widget. We also illustrated how to create a section and control, how to display/hide a section or control, how to change the widget style from controls, how to get settings and how to render the final output in frontend and Elementor editor.

Finally, we walked you through the steps of developing a gallery widget. Feel free to share your ideas and experiences in the comments section below.

Creating A Brief For Your WordPress Developer: 8 Things To Remember

Creating a brief for your WordPress developer Featured Image

Writing a brief for your WordPress developer is something you must never overlook or discard as unnecessary. If you want to get a high-quality end product, you must be ready to put in some effort to phrase what you want this product to be. Here are the things to keep in mind when creating a brief for your WordPress developer.

Why Is It Important?

A brief for your WordPress developer is important for four main reasons:

  • It provides key details about what you want the developer to do and what you want the result to be.
  • It sets the tone of your project and gives a general idea of what it is that you have in mind.
  • It sets the timeframes and deadlines for the project describing when and what should be completed.
  • It specifies the requirements and additional features you might decide to add later on.

If your brief achieves all of these, then your WordPress developer will definitely know what you want from them and what they must do to get the results you need. Now, let’s get into the step-by-step guide.

1. General Project Information

The first section of your brief contains general project information. It functions as a kind of introduction to your document that aims to provide some of the key data about the client and the project.

First, include your personal details such as your full name, contact information, the company or organization you are representing, and so on. Anything that you consider necessary can be added. If you are not the client, then include the details of the person who you are working for and who will be the client.

Second, include the basic details about the project such as the project’s name, timeframes, and so on. Don’t go into much detail about any particular piece of information in this section as these will be discussed later on in your brief.

2. Goals & Estimates

The next section of your brief must contain the goals and estimates for your project. Think of what you want to achieve with this particular endeavor and then also include what your personal goals are if you are in charge of it.

Photo by Isaac Smith on Unsplash

In addition to that, talk about the problems that the project will solve. These can be both big and small, but make sure to include at least one problem. Also, include estimates for your project and what you think it will achieve that is not connected to solving problems.

If you haven’t set your goals yet, it’s a good idea to use a goal tracking app such as Aha! to do this and keep your aims in front of you at all times as well as check progress.

3. Target Audience

Creating a Brief for your WordPress Developer Target Audience
Photo by Austin Distel on Unsplash

The third section of your brief must contain the details about your target audience. If you haven’t researched this yet, then make sure to do it as soon as possible as this is a very important component of every successful project.

Describe such characteristics of your audience as its gender, age, occupation, location, interests, habits, and so on. Any relevant information will only be useful rather than a burden, so don’t be afraid to add something on top of that.

However, keep in mind that your audience may vary a lot and you may need to construct several customer personas. As long as you do this, you will be heading in the right direction with your project.

4. Detailed Project Description

This is the biggest section of your brief which goes into detail about every aspect of your project. Look back at your first section and elaborate on the points you made in it. You must be as precise and clear as possible. Otherwise, your developer won’t have a concrete picture of what you want and need.

If you don’t want to write your brief yourself, you can hire a professional from an online writing service such as Studicus to do this for you. Alternatively, you can ask only for this biggest part to be written for you and work on everything else yourself. If you decide to write your brief entirely on your own, make sure to check its grammar, spelling, and punctuation with the help of Grammarly.

5. Project Requirements

Right after the detailed project description, outline the project requirements. These include both functional and secondary requirements. Any tools, as well as resources, can also be added here in case you require those. Functional requirements are the ones that the project absolutely needs in order to be what you want it to be.

These include different features you want to be added and such. Secondary requirements are the ones that are not necessary right away and can be considered if there is enough time or resources for them. They serve as an additional advantage that your project may have in the future.

6. Timeline & Deadlines

Creating a Brief for your WordPress Developer Timeline and Deadlines
Photo by Alvaro Reyes on Unsplash

This section must include a timeline with all of the deadlines for your project. Even though you included a start and end date in the very first section of your brief, you must elaborate on it here and outline other dates. Make sure that you write about deadlines and timeframes for each stage of development. This will guarantee that the progress is steady and you can check back on how your developer is doing every once in a while.

Alternatively, you may want to ask your developer to report back on certain dates. You can also outline another timeline that can be used in case the first one fails due to an unexpected turn of events. This will work as a kind of a Plan B, so you don’t necessarily have to include it into the brief and can simply keep it for yourself.

7. Budget & Expenses

Creating a Brief for your WordPress Developer Budget and Expenses
Screenshot taken from Mint

The budget and expenses are always a sensitive topic for both sides. This is why you must treat this section with caution and make sure that all of the data you include here is as accurate as possible. Think of all the expenses you will have. If there are any additional ones that can happen out of the blue, describe them too as you wouldn’t want any surprises. You can use different apps such as Mint to help you keep track of your budget and manage your bank accounts at the same time.

8. Measures of Success

Creating a Brief for your WordPress Developer Measures of Success
Photo by Carlos Muza on Unsplash

The last section should include your measures of success. To put it simply, these are the standards that you will be comparing the result in order to check the project’s success. You must make them as realistic as possible, but not too high or too low at the same time.

You could say that these are similar to the second section of your brief where you mentioned your estimates. But unlike that section, this one should have more exact and concrete standards that you will stick to more seriously.

Final Thoughts on Creating a Brief for your WordPress Developer

In conclusion, writing a brief for your WordPress developer is definitely not as difficult once you know what it must include. Proper communication with your developer will ensure that both of you are aware of each other’s thoughts and intentions, so don’t hesitate to contact them if there is something you’d like to specify.

Google Maps Alternatives: Good or Bad?

Google Maps Alternatives Featured Image

Many websites created by Jupiter users include a Google Map element. They’re particularly helpful for businesses who have a set location that they would like their visitors to know about and visit. But in using Google Maps, you might run into difficulties such as error messages as seen in the image below. In the next paragraph, we’ll explain in detail why you’ve received this message and how you can begin using alternatives to Google Maps!

The launch of Google Maps Platform

As of 11 June 2018, Google Maps changed its name to Google Maps Platform. With this change, any site that uses Google Maps is required to have a valid API key and a Google Cloud Platform billing account. Featuring Google Maps on your website is still possible, but you’ll have to make some modifications to how it is set up, including giving Google your credit card.

You can read more about the restructuring of Google Maps here.

Without an API key, sites with Google Maps will no longer be supported, and any Maps requests will now show only low-resolution maps watermarked with “for development purposes only” unless a credit card is associated with it.

If you are unwilling to create a billing account with Google, you can still find some Google Maps alternatives. We’ll list some of them.

Open Street Maps as a Google Maps Alternative

Tons of sites all around the world are working on OSM. The WP OSM Plugin is an open-source plugin with a free license and without any pro version or a business plan.

Features of the WP OSM Plugin include:

  • Add geolocation to a post or a page
  • Add GPX and KML files or just a single marker to a map
  • Add maps as shortcode or widget to a post/page
  • Fullscreen map, maps with markers linked to post/page with geolocation
  • OpenStreetMap, OpenSeaMap, Stamen maps, basemap, etc.
Google Maps Alternatives Features

You can read their FAQ and documentation on their official site.
Read the “Display a simple map” article to find out how to add a map to your WordPress site.

MapBox

Another alternative to Google Maps is MapBox. Mapbox is an online mapping service that allows users to customize maps – much more than Google Maps ever did. You can change backgrounds, road colors, and a lot more directly with a simple interface.

WP Mapbox GL JS Maps is the only plugin that enables you to make highly customized maps with 3D features, custom icons, zooming, custom filters, among many more options. It has a free and an inexpensive premium version, which adds custom markers, better control over directions, and more advanced control over marker and popup behavior.

To get started with MapBox, visit http://mapbox.com/ and click “Sign Up.” There are different pricing options you can select when signing up for MapBox. For now, go ahead and sign up for a free account, which comes with more than enough to get started. Read more here on how to use it.

The plugin provides you with a live preview while building the map, so you’ll always be able to see what the map will be before it’s published onto the main site. You can embed your map with a shortcode or publish it directly!

We’ll now show you how to use these alternatives to Google Maps on the Jupiter X site and describe the Open Street Map.

How to use Open Street Maps on Jupiter X

You’ll first need to install the OSM plugin in your WordPress dashboard via Plugins > Add New as described in this Jupiter X article.

Then follow the instructions from the OSM article:

1. Create a page or a post where you want to show a map and open it to edit.

2. Find the “WP OSM Plugin shortcode generator” section in the page editor and customize the map to your liking.

3. Below, you’ll see a map that you’ll need to adjust. Click on the place where you want to show a marker on the map. It will generate the map latitude and longitude based on where you placed the marker.

4. The last step is saving your marker and generating the shortcode.

Google Maps Alternatives Last Step

5. You’ll see a shortcode above the button.

6. Copy it to be able to add it to the page in the Elementor editor.

7. Once you’ve copied the shortcode, you can go and edit the page with Elementor.

8. Look for the “Shortcode” widget in the Elementor editor.

Google Maps Alternatives Elementor Editor

9. Drag it to the page and paste the OSM shortcode you copied in the previous step.

10. You’ll see the map as you styled it. Here is the result you’ll see on the frontend:

Google Maps Alternatives Result

Wrapping Up

Open Street Maps and MapBox are fantastic free plugins for placing detailed, interactive maps on your website. If you take the time to read the instructions for the plugins, you’ll find that they are a useful way of enhancing any post or page.

Extend Elementor like a pro: Creating a new extension in Elementor

Creating a New Extension Featured Image

Elementor is a powerful drag and drop page builder that allows us to create pages conveniently. One of Elementor’s greatest features is extendibility. With this feature, we can build custom widgets/controls via creating a new extension in Elementor.

This extension implements object-oriented programming in which a main class and extra classes for smaller parts like custom Elementor Widgets or any other components are used.

Plugin Structure

The main plugin should have basic information about the extensions, to check basic requirements and to load the required files to activate the plugin functionality. In the following sections, we’ll take a deep dive into each part of the plugin.

Defining Variable

Variables are used to store information to be referenced and manipulated in a computer program.

In the main class, we must define three constants like:

  • VERSION: store the version of our plugin.
  • MINIMUM_ELEMENTOR_VERSION: store the essential version of Elementor.
  • MINIMUM_PHP_VERSION: store the PHP version used in the plugin.
const VERSION;
const MINIMUM_ELEMENTOR_VERSION;
const MINIMUM_PHP_VERSION;

Single Instance

The singleton pattern is used to restrict the instantiation of a class to a single object, which can be useful when only one object is required across the system.

When creating a new extension in Elementor, we can only have one instance of the main class. To do this, we use a singleton pattern. In this pattern, we must define a private static variable and public static function.

private static $_instance = null;

	public static function instance() {
            //check $_instance is null or not
		if ( is_null( self::$_instance ) ) {
			self::$_instance = new self();
		}
		return self::$_instance;

	}

Constructor

The Constructor or magic function is a special type of function that is automatically executed after a class is created or instantiated. Usually, the constructor starts with two underscore characters.

In the main class, the role of the constructor is to load localization functionality and initiate the plugin.

public function __construct() {

		add_action( 'init', [ $this, 'i18n' ] );
		add_action( 'plugins_loaded', [ $this, 'init' ] );

	}
public function i18n() {
		load_plugin_textdomain( 'our-plugin-name' );
	}
public function init() {
		// Plugin logic here...
	}

Check if Elementor is Installed

As the plugin extends Elementor functionality, you should first check whether Elementor is installed and activated before the main class loads.

If Elementor is activated, the main class will load. If it’s not activated, an admin notice will be displayed and the functionality won’t continue loading. This check must be done in the initialization stage of the main class.

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;
		}

	}

	public function admin_notice_missing_main_plugin() {

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Our plugin name 2: Elementor */
			esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'our-plugin-name' ),
			'<strong>' . esc_html__( 'Elementor our-plugin-name', 'our-plugin-name' ) . '</strong>',
			'<strong>' . esc_html__( 'Elementor', 'our-plugin-name' ) . '</strong>'
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

Check the Version of Elementor

After checking whether or not Elementor is installed, we must check the Elementor version for backward compatibility with older Elementor versions. If the defined minimum version of our plugin is not compatible with the installed version of Elementor, then the admin message will be displayed, and functionality will not be able to load.
This check is done in the initialisation stage of the main class.

const MINIMUM_ELEMENTOR_VERSION = '2.5.11';

	public function init() {

		// 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;
		}

	}

	public function admin_notice_minimum_elementor_version() {

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Our plugin name 2: Elementor 3: Required Elementor version */
			esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'our-plugin-name' ),
			'<strong>' . esc_html__( 'Elementor our-plugin-name', 'our-plugin-name' ) . '</strong>',
			'<strong>' . esc_html__( 'Elementor', 'our-plugin-name' ) . '</strong>',
			 self::MINIMUM_ELEMENTOR_VERSION
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

Check for the PHP Version

Finally, we must check our extension’s minimum PHP version, which . must be newer than the PHP version of the Elementor plugin. If there’s an older version, then the admin message will be displayed, and the functionality won’t load.

const MINIMUM_PHP_VERSION = '7.0';

	public function init() {

		// 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;
		}

	}

	public function admin_notice_minimum_php_version() {

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Our plugin name 2: PHP 3: Required PHP version */
			esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'our-plugin-name' ),
			'<strong>' . esc_html__( 'Elementor our-plugin-name', 'extension-name' ) . '</strong>',
			'<strong>' . esc_html__( 'PHP', 'our-plugin-name' ) . '</strong>',
			 self::MINIMUM_PHP_VERSION
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

Including Essential Files to Correctly Create a New Extension

After completing all checks, the extension must load essential files like widgets and controls in order for it to run correctly.

public function init() {

		// Add Plugin actions
		add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
		add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] );
	}

	public function init_widgets() {

		// Include Widget files
		require_once( __DIR__ . '/widgets/our-plugin-name-widget.php' );

		// Register widget
		\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor_extension_Widget() );

	}

	public function init_controls() {

		// Include Control files
		require_once( __DIR__ . '/controls/our-plugin-name-control.php' );

		// Register control
		\Elementor\Plugin::$instance->controls_manager->register_control( 'control-type-', new \extension_Control() );

	}

Workflow Diagram

Create a New Extension - Workflow Diagram

In the end, if we want to create our extension named Spicy, we must have the following code in its entirety.

<?php
 /**
 * Plugin Name: Spicy Extension
 * Description: Custom Elementor extension.
 * Plugin URI:  https://spicy.test/
 * Version:     1.0.0
 * Author:      Spicy
 * Author URI:  https://spicy.test/
 * Text Domain: spicy-extension
 */

	if ( ! defined( 'ABSPATH' ) ) {
		exit; // Exit if accessed directly.
	}

	/**
	 * Main Spicy Extension Class
	 *
	 * The main class that initiates and runs the plugin.
	 *
	 * @since 1.0.0
	 */
	final class Spicy_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.5.11';

		/**
		 * Minimum PHP Version
		 *
		 * @since 1.0.0
		 *
		 * @var string Minimum PHP version required to run the plugin.
		*/
		const MINIMUM_PHP_VERSION = '6.0';

		/**
		 * Instance
		 *
		 * @since 1.0.0
		 *
		 * @access private
		 * @static
		 *
		 * @var Spicy_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 Spicy_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(){}

		/**
		 * 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;
			}

			// Add Plugin actions
			add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
			add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] );
			
			// Register Widget Styles
			add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'widget_styles' ] );

		}

		public function widget_styles() {
			//For Example
			//wp_enqueue_style( 'spicyPluginStylesheet', plugins_url( '/css/gallery.css', __FILE__ ) );
		}

		/**
		 * 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.', 'Spicy-extension' ),
				'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
				'<strong>' . esc_html__( 'Elementor', 'Spicy-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.', 'Spicy-extension' ),
				'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
				'<strong>' . esc_html__( 'Elementor', 'Spicy-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.', 'Spicy-extension' ),
				'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
				'<strong>' . esc_html__( 'PHP', 'Spicy-extension' ) . '</strong>',
				self::MINIMUM_PHP_VERSION
			);

			printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

		}

		/**
		 * Init Widgets
		 *
		 * Include widgets files and register them
		 *
		 * @since 1.0.0
		 *
		 * @access public
		 */
		public function init_widgets() {
			 // For Example
			// Include Widget files
			//require_once( __DIR__ . '/widgets/gallery.php' );

			// Register widget
			//\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \spicy_oEmbed_Widget() );
			//\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \spicy_gallery_Widget() );

		}

		/*
		 * Init Controls
		 *
		 * Include controls files and register them
		 *
		 * @since 1.0.0				
		 *
		 * @access public
		*/
		public function init_controls() {
			//For example
			
			//Include Control files
			//require_once( __DIR__ . '/controls/multi-unit.php' );

			// Register control
		    //\Elementor\Plugin::$instance->controls_manager->register_control( 'spicy-multi-unit-control', new spicy_multi_unit());

		}

    }

spicy_Extension::instance();

Also, you can download the entire code by clicking on this link.

Conclusion

In this article, we went into depth to illustrate the basic structure of the plugin that extends the functionality of Elementor. Also, we explained each essential part of the plugin code like Variable, Single Instance, Constructor, Checking steps and Include files. Finally, we included the entire code for the Spicy plugin.

We’d love to hear from you! Feel free to drop us a comment to share your experiences and ideas.

Create a scrollable tab like the WebFlow website using Jupiter X

Scrollable Tabs Post Featured Image

One way to provide visitors to your website with a seamless experience is through creating a scrollable parallax tab similar to the WebFlow.io homepage. Creating a scrollable parallax tab will allow users to access much of your site’s content as soon as they land on your homepage.

Many of our users asked about how to go about building a scrollable tab, and we’re here to answer! And what’s even better is that the Jupiter X theme has endless possibilities that can help you create a similar tab (as seen below) by using a simple trick. If you’re also curious about how you can build this amazing tab using Jupiter X, read this article to the end.

WebFlow sample scrollable tab.

What we need to create a scrollable tab:

  • Jupiter X Pro theme and its Elementor page builder
  • Jet Tricks from the Jupiter X bundled plugins
  • Raven, an exclusive Artbees plugin to extend the functionality of Elementor

First of all, allow me to briefly explain the whole process. We won’t use any tab elements to represent this. Instead, we’ll use the Raven Navigation Menu element and anchor links (#tab1, #tab2 …) as the tab titles. Then, we’ll use multiple sections that have the same ID as the anchor links (so when you click on the menu items, scroll to those sections).

And in the end, we’ll add the Sticky effect to the column container of the menu navigation element using the Jet Tricks plugin. Then, we’ll proceed to write a custom CSS snippet to add a transition to the menu items and make them bigger when they are active. Before starting, make sure you’ve already activated the above plugins from Jupiter X -> Control Panel -> plugins.

So, let’s start by building our menus. Navigate to Appearance -> Menus and create a new menu. Then add your Custom Link items. Remember to use the anchor links like #tab1, #tab2 … as the menu item link.

Add menu items with anchor link hashtags to be considered as Tab titles.

We are now done with this part of the process. Let’s create a page, and do the rest. From the Pages -> Add New, create a new page and start editing with Elementor.

Edit the page with Elementor.

In Elementor, drop a Section into your page, and divide it into two columns. Then drop a Navigation menu to your left column, and add a CSS class to the navigation menu.

Scrollable Tab Screenshot 3 - Add a CSS class to the menu in order to avoid conflict while wiring CSS snippets.
Add a CSS class to the menu in order to avoid conflict while wiring CSS snippets.

The next step is to add a custom CSS to make each menu stay in one line and also to enlarge them when they are active. So, from the page settings (bottom left corner of the page), choose the Advanced tab and then add the following CSS snippet in the Custom CSS section (JX).

/* Add Transition to the items */
.custom_tab_titles li a {transition: 0.2s all;}

/*make the items bigger when they are active while having transitions */
.custom_tab_titles li .raven-menu-item-active {transition: 0.2s all;
    transform: scale(1.3); margin-left: 0.8em;}
    
/* put each menu in one line */
.custom_tab_titles li {clear: both; display: block; width: 100%;}
Scrollable Tab Screenshot 4 - Add CSS snippet to make the menu items vertically aligned and add transition to them on mouse hover.
Add CSS snippet to make the menu items vertically aligned and add transition to them on mouse hover.

Now add some Inner Section elements to your other column. We need to assign an ID equivalent to the menu anchors in order to make them scrollable when clicked.

Scrollable Tab Screenshot 5 - Add a different ID to each inner section equivalent to each anchor link hashtag
Add a different ID to each inner section equivalent to each anchor link hashtag.

Add as much of your content as you want to your scrollable tabs. Here, I kept it empty in order to make it more understandable. I also added a min-height 400px to each inner section. You can avoid it or add more height. The styling part completely customizable, and you can do what you want with it.

The last step is selecting the Column container of the Navigation menu and adding the Sticky behavior to it.

Scrollable Tab Screenshot 6 -
Follow the steps in order to enable the sticky option for the navigation menu. It will be considered as the Tab titles later on.

I also added some typography settings and color changes to the navigation menu in order to make the scrollable tab more eye-catching. Take a look at what we have now:

Scrollable Tab Gif 2 - The scrollable tab made by Jupiter X and Elementor.
The scrollable tab made by Jupiter X and Elementor.

One of the great things about using Jupiter X to create a scrollable tab is that you have the flexibility to create a tab exactly to your liking. You have the option of adjusting the margins and paddings to fine tune the tab, as well as to style every corner of your new tab.

Additionally, you’re not limited by how many tabs you can have: you are free to add more and style them in any way you see fit. Don’t worry about getting carried away in adding too many new elements as this has been tested on all modern browsers, and it’s compatible with all of them.

In this blog post, we’ve provided you with the details on how to create a tailor-made scrollable parallax tab, similar to what can be seen on the WebFlow home. We also illustrated how to create this awesome tab with Jupiter X Pro (and the Elementor page builder), Jet Tricks and Raven.

Do not hesitate to ask any questions you may have in the comments below.

Different Ways to Add Custom Code Snippets in WordPress

Custom Code Snippets in WordPress Featured Image

Used by more than 60 million websites, WordPress is a popular, powerful and flexible Content Management System (CMS). One of WordPress’ valuable features is its extensibility architecture that allows users to expand WordPress features via plugins. In many cases, site owners need custom codes to improve the functionality of their website. In this way, custom code snippets plugins in WordPress can be a handy tool.

Sometimes when surfing the internet, we come across articles that explain how to add custom code snippets to the template files like index.php, footer.php or edit function.php files. These methods aren’t safe or recommended.

There are only two safe methods to add custom code snippets in WordPress:

  • Using plugins
  • Using the child theme

Adding Custom Code Snippets in WordPress Using Plugins

There are some plugins that allow you to add custom PHP, HTML, CSS and JavaScript codes in WordPress. In this article, we try to cover some of them with examples. Some of the plugins are listed below.

Insert the PHP Code Snippets Plugin

Custom Code Snippets in WordPress - Insert PHP Code Snippet

Using this plugin, we can add our PHP code conveniently to our pages, posts and widgets.

Features

  • Convert PHP snippets to shortcodes.
  • Insert PHP code easily using a shortcode.
  • Support for PHP snippet shortcodes in widgets.
  • Dropdown menu in TinyMCE editor to easily select snippet shortcodes.

Example

In this example, we want to display the number of content words in a post/page after a post or page.

1. After installing this plugin, click on PHPCode Snippet from the left sidebar of the admin page.

Custom Code Snippets in WordPress - PHP Code Snippets

2. On the new screen, click on the Add New PHP Code Snippet button.

Custom Code Snippets in WordPress - PHP Code Snippets 2

3. Set

  • Tracking Name: words-count
  • PHP code (this code displays the words count for a page or content post)
<?php

  function word_count() {
       $content = get_post_field( 'post_content', get_the_ID());
       $word_count = str_word_count( strip_tags( $content ) );
       return $word_count;
    }

  echo 'Words:', '  ' , word_count();

?>
Custom Code Snippets in WordPress - PHP Code Snippets 3

4. Click on the Create/Update button.

5. The plugin generates a shortcode as [xyz-ips snippet=”words-count”].

Custom Code Snippets in WordPress - PHP Code Snippets 4

6. Go to Posts > Add New. At the end of the text, insert the above shortcode.

Custom Code Snippets in WordPress - PHP Code Snippets 5

7. After publishing the post, we can see the number of words in the post.

Insert the HTML Snippet Plugin

custom code snippets in WordPress - Insert HTML Snippet

Inserting the HTML Snippet allows us to create shortcodes corresponding to HTML snippets. We can create a shortcode corresponding to any random HTML code such as JavaScript codes, video embedding codes, CSS codes, among others and use the same in posts, pages or widgets.

Features

  • Convert HTML snippets to shortcodes.
  • Convert Javascript codes to shortcodes.
  • Convert CSS codes to shortcodes.
  • Support for snippet shortcodes in widgets.
  • Dropdown menu in TinyMCE editor to pick snippet shortcodes easily.
  • Insert Adsense or any add codes.
  • Insert flash, videos, etc. to your posts, pages, and widgets.

Example

In this example, we want to generate a Google Translate button after our post.

1. Install the plugin, and go to XYZ HTML > HTML Snippets.

Custom Code Snippets in WordPress - HTML Code Snippets 1

2. On the new screen, click on the Add new HTML Snippet button.

Custom Code Snippets in WordPress - HTML Code Snippets 2

3. Set

  • Tracking Name: translate
  • HTML Code (this code generates the Google Translate button)
<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

4. Click on the Create button.

Custom Code Snippets in WordPress - HTML Code Snippets 3

5. The plugin will generate the shortcode as [xyz-ihs snippet=”translate”].

Custom Code Snippets in WordPress - HTML Code Snippets 4

6. Go to Posts > Add New. Set the title and content the add [xyz-ihs snippet=”translate”] at the end of the post.

Custom Code Snippets in WordPress - HTML Code Snippets 5

7. Publish the post, and you will be able to see the Google Translate button after the post.

Custom Code Snippets in WordPress - HTML Code Snippets 6

Simple Custom CSS and JS Plugin

Custom code snippets in WordPress - Custom Css

Customizing your WordPress site’s appearance can easily be done by adding custom CSS and JS code without modifying the theme or plugin files.

Features

  • Text editor with syntax highlighting.
  • Print the code inline or include it into an external file.
  • Print the code in the header or the footer.
  • Add CSS or JS to the frontend or the admin side.
  • Add as many codes as you want.
  • Keep your changes when you change the theme.

Example

In this example, we want to change the background color of the admin bar with the CSS snippet.

1. Install the plugin and go to Custom CSS & JS > Add Custom CSS.

Custom Code Snippets - Custom CSS 1

2. On the new screen, in the options section, check the Internal, Header, In Admin radio button and set the following:

  • Title : admin-bar-background-color
  • Code (code change background color of admin bar in the admin page)
#wpadminbar {
    background-color: rebeccapurple;
}
Custom Code Snippets in WordPress - Custom CSS 2

3. Click on the Publish button. You’ll be able to see that the admin bar background menu changed.

Custom Code Snippets in WordPress - Custom CSS 3

Code Snippets Plugin

Custom Code Snippets in WordPress - Code Snippets Plugin Banner

This is a powerful, simple and handy plugin that lets us add our PHP, HTML, CSS and JavaScript snippets to our websites.

Features

  • Providing a GUI interface.
  • Snippets can be activated and deactivated.
  • Categorize snippets with tags.
  • Snippets can be exported for transfer to another site.
  • Full-featured code editor.

Example #1

In this example, we want to disable standard widgets like Archives, Recent Posts, Recent Comments with the simple PHP snippet. The default page is similar to the image below:

Custom Code Snippets in WordPress - Code Snippets Plugin 1

1. Install the plugin, and go to Snippets > Add New.

Custom Code Snippets in WordPress - Code Snippets Plugin 2

2. On the new screen, set:

  • Title: Remove standard widget
  • Code (Remove Archives, Recent Posts, Recent Comments from the right sidebar of the homepage).
function unregister_default_wp_widgets() { 

    unregister_widget('WP_Widget_Archives'); 
    unregister_widget('WP_Widget_Recent_Posts'); 
    unregister_widget('WP_Widget_Recent_Comments'); 
}

add_action( 'widgets_init', 'unregister_default_wp_widgets', 1 ); 

3. Save and activate the snippet.

Custom Code Snippets in WordPress - Code Snippets Plugin 3

4. After reloading the homepage, you’ll be able to see that the Archives, Recent Posts, Recent Comments have been removed.

Custom Code Snippets in WordPress - Code Snippets Plugin 4

Example #2

In this example, we want to change the font size of the post with the JavaScript code.

1. Go to Snippets > Add New.

2. Set

  • Title: change the font size
  • Code ( Increase the font size when clicking on the post text and decrease font size when holding down the SHIFT key and clicking.)
add_action( 'wp_head', function () { ?>

<script        src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>

    <script>	
    $(document).ready(function(){
    $(".jupiterx-post-content").click(function(){
        if (event.shiftKey) {
            $(this).css({"font-size": "-=10%"});  
        } else {
            $(this).css({"font-size": "+=10%"});
        }
    });

  });

  </script>

<?php } );

3. Check the Only run on site front-end radio button and save it.

Custom Code Snippets in WordPress - Code Snippets Plugin 5

At the end, when clicking on the post text, the font size will have been changed.

Custom Code Snippets in WordPress - Code Snippets Plugin 6

Adding Custom Code Snippets in WordPress Using Child Theme

In WordPress, a child theme is a sub-theme that inherits all the functionality, style and features from the parent theme. The child theme is a safe way to change or modify the parent theme without modifying parent theme files.

Example

Let’s add our default content to the WordPress editor.

Our default content: “This is some custom content. I’m adding it to the post editor because I hate re-typing it.”

1. Active the child theme on your site (for more information, read this article.)

2. Go to Appearance > Editor.

Custom Code Snippets in WordPress - Child Theme 1

3. Open the functions.php file.

Custom Code Snippets in WordPress - Child Theme 2

4. Add the below code at the end of functions.php, then update it.

add_filter( 'default_content', 'my_editor_content' ); 

  function my_editor_content( $content ) { 
    $content = "This is some custom content I'm adding to the post editor  because I hate re-typing it."; 
 
    return $content;
}
Custom Code Snippets in WordPress - Child Theme 3

5. After modifying functions.php, go to Posts > Add New or Pages > Add New. You’ll be able to see that our default text has been added to the editor.

Custom Code Snippets in WordPress - Child Theme 4

Conclusion

In this article, we first introduced several plugins for adding custom code snippets in WordPress. We also included some examples on how to use HTML, CSS, JavaScript and PHP snippets using the plugins.

Finally, we showed how to add custom code snippets in WordPress with the child theme. Feel free to share your experience with us in the comments.

More Than a Block Editor: Pros and Cons of WordPress 5.0

The new version of WordPress was already released in the market on the 27th of November 2018 and advanced editor for the CMS system called Gutenberg was also published on the same day. The newly released WordPress 5.0 is given the name ‘Bebo’ after the Cuban jazz composer Bebo Valdes.

Here, you will get to know about the pros and cons of WordPress 5.0 block editor. While recognizing the leading pros and cons of WordPress 5.0 block editor, you will be able to use the CMS more conveniently. As WordPress is one of the leading CMS platforms in the world, it is remarkable how the new version can be more attractive to users.

When it comes to the statistics, WordPress is backed by a prominent position. In a report by the W3 techs, WordPress holds a significant market share of 58.55%. This market share is much more significant than other CMS systems like Joomla and Drupal combined.

Meanwhile, Netcraft published a recent report which shows that WordPress dominates over nearly 27% of the entire internet. This data implies that over 20% of websites present on the internet in self-hosted style are built with WordPress.

In such a scenario, you can be sure that the latest update can help a large number of web developers. With the latest WordPress features, you can comfortably carry out the necessary tasks related to the web building process.

The Pros and Cons of WordPress 5.0 with the Gutenberg Block Editor

Pros

  • Better visualization for faster work

As we all know, Gutenberg is a block editor; thus, it can provide a more convenient display to the users. As a user, you can prominently use your creativity. You need not worry about the functionality of the site much while creating the web pages.

Pros and Cons of WordPress 5.0 Pro 1
  • The minimized dependency of TinyMCE

The new WordPress 5.0 version beside the block editor has a much lesser dependence on the TinyMCE. The TinyMCE is one of the online rich-text editors through which the earlier WordPress editor used to convert the HTML. In WordPress 5.0, the block editor is meant to deliver better integration of the plug-in’s cores and themes.

With the new Gutenberg editor, you can get a speedy editing experience as there is less need to visit the TinyMCE. As a result, there is a distinct chance of completing the work related to the page makeup faster.

  • All the benefits of Medium Editor are present

There is good news for most web developers who have earlier used the Medium Editor and worked conveniently in the WordPress. The Gutenberg editor contains similar benefits as the Medium Editor and gives the user a chance to create any content easily.

Thus, by the Bebo version of WordPress, the users can have full control over the content they are creating. One can also get total access to third-party tools whenever necessary.

  • Gadget-Friendly

While discussing the pros and cons of the WordPress 5.0 Gutenberg Editor, the central positive fact we came across is its gadget-friendliness. The interface you get is efficiently gadget-friendly. You can quickly work with this interface in tablets, smartphones, or laptops, as well as the traditional desktops.

Pros and Cons of WordPress 5.0 Pro Gadget
  • Friendly to the Users

You should be aware that user-friendliness is one of the leading pros that older versions of WordPress have forever possessed. Now, the latest version with the WordPress 5.0 Gutenberg Editor is easier to use. So, you should always consider the fact that the new version has better usability along with the Block Editor.

Cons

  • Compatibility Issues

As WordPress provides the benefits of working with numerous plug-ins, it is essential for the editing system to be compatible with them. The main con of the WordPress Bebo version is that it might not work well with several themes and plug-ins.

Moreover, the Gutenberg editor demands more work from the end of the developer. This happens due to the decreased use of TinyMCE. However, all the updates that will be made later can improve the backward situation of the compatibility of the editor.

  • No Full Meta Box Support

In the case of the Beta version of the Gutenberg, you cannot get many essential components of the Meta box. This is another con which might ruin your convenience of working with the WordPress 5.0 version. The only good thing that the Gutenberg editing system has is the Yoast SEO support. There is a prominent expectation that other Meta boxes might work efficiently with Gutenberg in the future.

Pros and Cons of WordPress 5.0 Con 1
  • No Markdown Support

However, working with WordPress is beneficial in many ways; the Gutenberg review might spoil the markdown support. The WordPress Bebo beside that block editor has a prominent con as Markdown is absent. It is a markup language of the lightweight with the ugly test syntax.

If you are the one who has so far used the Markdown language, there might be some problems in getting accustomed to the Gutenberg editor. You should nevertheless expect that the compatibility to the Markdown language will be added shortly.

  • Bad Accessibility

You must be aware that the Gutenberg Editor that comes with the WordPress Bebo is hard to access. In this editor, you cannot find the API that the CRM earlier used to rely upon for building the plug-ins as well as the themes.

So, these are some of the pros and cons of WordPress 5.0 along with the Gutenberg editor. You should always incorporate it only after thoroughly researching the worthiness of the WordPress Bebo. In case you have lighter jobs to do, and you are a beginner, the 5.0 version is best for you.

Verdict

In spite of all its shortcomings, you should be aware that the latest WordPress is the future. The CRM developers are trying their best to make the WordPress Bebo the best among all the versions available so far. You should also expect a quick road to perfection given the position which WordPress holds in the CRM market.

Master WordPress Language Translation: How To Translate your Jupiter X Website with WeGlot

With almost 75% of the Internet’s 4.1 billion users 4.1 billion users speaking a language other than English, WordPress language translation is a great way to expand your website’s reach and help you connect with your site’s visitors. But when it comes to creating a multilingual WordPress site, it can be difficult to know where to start.

Continue reading

10 Crucial WordPress Maintenance Tasks To Keep Your Site Running Smoothly

If you’re a WordPress beginner who would rather manage your own site than to outsource it to a developer, then this article is for you. We’ll give you preventative measures to help you keep your website from crashing or bugging up. Preventative care in web design is similar to preventative care in health, in that it requires regularity and responsibility, and can save you big bucks in the long run.

Continue reading