plant gifts delivered melbourne nz online christmas gifts dial liquid body wash coupons carpe viam coupon garden gift ideas for him giftology rvc

Learn The Best WordPress Page Builder Elementor Pro Easily

- Advertisement -
- Advertisement -

WordPress bring new page builder Guttenburg, it comes with WordPress by default. But it is not popular as current page builders like as Visual Composer, King Composer, Divi Builder, Fusion Builder, Elementor Pro etc.

I’ve worked with above all page builders and recently I’m fond of Elementor Pro, although the plugin created almost 3 years ago. It has many excellent features and functionalities which will help you develop a website as you want and will give you flexibility than other page builders.

Before starting the tutorial you should have basic WordPress theme and plugin development knowledge, page builder experience, familiar with WordPress coding style etc.

I’ll use very easy 7 steps to present Elementor.

Step 1: Install WordPress
Step 2: Install Elementor Pro from the WordPress plugin store and activate it
Step 3: Create a plugin for Elementor Pro and activate it
Step 4: Create a page from the /wp-admin and click ‘Edit with Elementor’
Step 5: Create controls and apply it
Step 6: Advanced work with Elementor Pro
Step 7: Final notes

Now I’ll discuss on those step. It’ll very easy. Hope that you will enjoy 🙂 Let’s start.

Step 1: Install WordPress

Actually no need to discuss the step, every WordPress lover should know the step. But I’ve listed because it’s the essential step to practice Elementor Pro.

Step 2: Install Elementor Pro from the WordPress plugin store and activate it

Install the Elementor Page Builder as another plugin and activate it. No hassle. When I’m writing the post the plugin version is: 2.5.11 with latest WP version: 5.1.1

Step 3: Create a plugin for Elementor Pro and activate it

The step as usual like as a way to create a simple WordPress plugin. But you can go Elementor Developer Guide. By default, Elementor has many widgets template. But we will create a widget like as we want or like as a PSD section.

So we need to Creating a New Widget. Create a folder in your plugin directory name ‘spoilcoconut‘, into the plugin create an ‘index.php‘ file. Paste the code into the ‘index.php’.

<?php
/**
 * Plugin Name: SpoilCoconut Test Plugin
 * Description: Custom Elementor extension for learning Elementor controls.
 * Plugin URI:  http://spoilcoconut.com/
 * Version:     1.0.0
 * Author:      SpoilCoconut
 * Author URI:  http://mofizul.com/
 * Text Domain: spoilcoconut-test-extension
 */

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

final class SpoilCoconut_Test_Plugin {
	const VERSION = '1.0.0';
	const MINIMUM_ELEMENTOR_VERSION = '2.0.0';
	const MINIMUM_PHP_VERSION = '5.6';
	private static $_instance = null;
	
	public static function instance() {
		if ( is_null( self::$_instance ) ) {
			self::$_instance = new self();
		}
		return self::$_instance;
	}

	public function __construct() {
		add_action( 'init', [ $this, 'i18n' ] );
		add_action( 'plugins_loaded', [ $this, 'init' ] );
	}

	public function i18n() {
		load_plugin_textdomain( 'elementor-test-extension' );
	}

	public function init() {
		if ( ! did_action( 'elementor/loaded' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
			return;
		}

		if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
			return;
		}

		if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
			return;
		}

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

	public function admin_notice_missing_main_plugin() {

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

		$message = sprintf(
			/* translators: 1: Plugin name 2: Elementor */
			esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'elementor-test-extension' ),
			'<strong>' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '</strong>',
			'<strong>' . esc_html__( 'Elementor', 'elementor-test-extension' ) . '</strong>'
		);

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

	public function admin_notice_minimum_elementor_version() {

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

		$message = sprintf(
			/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version */
			esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'elementor-test-extension' ),
			'<strong>' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '</strong>',
			'<strong>' . esc_html__( 'Elementor', 'elementor-test-extension' ) . '</strong>',
			 self::MINIMUM_ELEMENTOR_VERSION
		);

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

	public function admin_notice_minimum_php_version() {
		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

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

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

	public function init_widgets() {
		require_once( __DIR__ . '/widgets/spoilcoconut_widgets.php' );

		\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \SpoilCoconutTestTitle() );
	}

	public function init_controls() {

		// Include Control files
		// require_once( __DIR__ . '/controls/test-control.php' );

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

It’s a simple code for creating an Elementor widget. Here notice is I’ve written const MINIMUM_PHP_VERSION = ‘5.6’;

Create another folder into the ‘spoilcoconut’ name will be ‘widgets’ /spoilcoconut/widgets. Into the ‘widgets’ folder create a PHP filespoilcoconut_widgets.php‘. In the file paste the below code-

<?php

class SpoilCoconutTestTitle extends \Elementor\Widget_Base {

	public function get_name() {
		return 'title';
	}

	public function get_title() {
		return __( 'SpoilCoconut Title', 'plugin-name' );
	}

	public function get_icon() {
		return 'fa fa-code';
	}

	public function get_categories() {
		return [ 'general' ];
	}

	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Title Box', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'scc_title',
			[
				'label' => __( 'Title', 'plugin-name' ),
				'type' => \Elementor\Controls_Manager::TEXT,
			]
		);

		$this->end_controls_section();

	}

	protected function render() {

		$settings = $this->get_settings_for_display();

		echo '<div class="spoilcoconut_test_title"><h2>'.$settings['scc_title'].'</h2></div>';

	}

}
?>

Now again open the ‘index.php’ and assign the widget like as-

public function init_widgets() {
	require_once( __DIR__ . '/widgets/spoilcoconut_widgets.php' );

	\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \SpoilCoconutTestTitle() );
}

Step 4: Create a page from the /wp-admin and click ‘Edit with Elementor’

If have any questions or confusions, don’t forget to keep a comment below. Now your plugin is ready for use. Go to the /wp-admin area and activate the plugin. Go to create a new page and click on the button ‘Edit with Elementor’.

new-page

The Elementor page builder will open. Scroll down the widget gallery and in the bottom line, you will see our newly created widget. Drag the widget into the page section.

new-widget

The widget function will activate and write your title. Update the editor page and visit the page, it’ll display in the page area.

Basically, it was the process of creating a widget with Elementor.

Step 5: Create controls and apply it

Now we’ll add more functionalities and see the usage of Elementor controls. Easily you can copy the code example from Elementor controls page see how to it works. I’m going to make a simple blog thumbnail with Elementor.

Again open the ‘spoilcoconut_widgets.php’ and replace the code into the file-

<?php

class SpoilCoconutTestTitle extends \Elementor\Widget_Base {

	public function get_name() {
		return 'title';
	}

	public function get_title() {
		return __( 'SpoilCoconut Title', 'plugin-name' );
	}

	public function get_icon() {
		return 'fa fa-code';
	}

	public function get_categories() {
		return [ 'general' ];
	}

	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Title Box', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'scc_title',
			[
				'label' => __( 'Title', 'plugin-name' ),
				'type' => \Elementor\Controls_Manager::TEXT,
			]
		);

		$this->add_control(
			'image',
			[
				'label' => __( 'Choose Image', 'plugin-domain' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

		$this->add_control(
			'item_description',
			[
				'label' => __( 'Description', 'plugin-domain' ),
				'type' => \Elementor\Controls_Manager::WYSIWYG,
				'default' => __( 'Default description', 'plugin-domain' ),
				'placeholder' => __( 'Type your description here', 'plugin-domain' ),
			]
		);

		$this->add_control(
			'btn_link',
			[
				'label' => __( 'Button link', 'plugin-name' ),
				'type' => \Elementor\Controls_Manager::TEXT,
			]
		);

		$this->end_controls_section();

	}

	protected function render() {

		$settings = $this->get_settings_for_display();

		echo '<div class="spoilcoconut_test_title">

			<img src="'.$settings['image']['url'].'">
			<h2>'.$settings['scc_title'].'</h2>
			<p class="description">'.$settings['item_description'].'</p>
			<a class="btn_style" href="'.$settings['btn_link'].'">Read More</a>

		</div>';

	}

}

Refresh backend and you will see your desired fields. It’ll display like as-

blog-layout

Step 6: Advanced work with Elementor Pro

Now we’ll create a slider with Elementor by using the repeater control. Here I’m not explaining every code. If have questions you can leave a comment. If you understand the above code example, you should also understand the part. In the final step, I’ll say 3 main points to create a widget quickly.

So for creating a slider, we will use Slick Slider. In the slider have many options like as- loop, fade effects, auto-play, sliding speed etc. We will apply those options with the Elementor. At first, integrate CSS and JS files for the plugin in the ‘index.php’-

public function widget_styles() {
	wp_enqueue_style( 'slick-css', '//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css' );
	wp_enqueue_style( 'slick-theme-css', '//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css' );
	wp_enqueue_script( 'slick-js', '//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js', array('jquery'), '20151215', true );
}

Then create another PHP file into the ‘widgets’ folder my_slider.php. Integrate the PHP file into ‘index.php’ file-

public function init_widgets() {
	require_once( __DIR__ . '/widgets/spoilcoconut_widgets.php' );
	require_once( __DIR__ . '/widgets/my_slider.php' );

	\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \SpoilCoconutTestTitle() );
	\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \My_Slider_Widget() );
}

The article going to long, so I’m pasting the my_slider.php in PasteBin.Com

Now refresh backend, you’ll see all options for the slider. See here- Slider Content and Slider Settings

You can add CSS and style as you want with the slider classes.

Step 7: Final notes

In the meantime, you have gathered lots of experience Elementor and complete practice on all controls. What is the easiest way to make a widget in Elementor?

Step 1: Create a widget and assign the widget name in ‘index.php’
Step 2: Add control into the widget
Step 3: Integrate the control in the render() function

Done 🙂 now use the widget where you want.

The Tutorial is written on the free version of Elementor. In the next tutorial, I’ll discuss on Elementor Pro. Stay tuned 🙂

- Advertisement -
Mofizulhttp://mofizul.com
Web Developer & Front-end Expert

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

35,800FansLike
75,435FollowersFollow
6,048,675SubscribersSubscribe
- Advertisement -

Latest Articles