Extending the Elementor Pro Navigation Menu in WordPress

Extending the Elementor Pro Navigation Menu in WordPress

Elementor is a popular web page builder used by WordPress users for building websites with a drag and drop view. Its success has encouraged many theme developers to come up with Elementor compatible themes for users.

In this article, we’ll be looking at how to extend the Elementor Pro Navigation Menu by adding new menu options that don’t exist by default.

We start off first by declaring a class extending the Elementor widget base class like so:

class menu_extension extends \Elementor\Widget_Base {  
public function __construct() {
parent::__construct();
$this->init_control();
}
}

Next, we add the init_control method (this method hooks the register_controls and before_render_element methods to the Elementor Pro Navigation Menu) like so:

class menu_extension extends \Elementor\Widget_Base {  
public function __construct() {
parent::__construct();
$this->init_control();
}

protected function init_control() {
add_action( 'elementor/frontend/widget/before_render', [ $this, 'before_render_element' ], 10, 1 );
add_action( 'elementor/element/nav-menu/style_toggle/after_section_end', [ $this, 'register_controls' ], 10, 2 );

}
}

Next, we define the register_controls method (this defines the menu extension options shown on the Elementor Pro Nav Menu, here you can add color, switcher, and slider controls):

class menu_extension extends \Elementor\Widget_Base {  
public function __construct() {
parent::__construct();
$this->init_control();
}

protected function init_control() {
add_action( 'elementor/frontend/widget/before_render', [ $this, 'before_render_element' ], 10, 1 );
add_action( 'elementor/element/nav-menu/style_toggle/after_section_end', [ $this, 'register_controls' ], 10, 2 );
}
public function register_controls( $element, $args ) {
$element->start_controls_section(
'menu-extension-section',
[
'label' => __( 'Menu Extionsion Options', 'ext' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$element->add_control(
'menu-extension-border-color',
[
'label' => __( 'Parent Menu Border Color', 'ext' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' =>
[
'{{WRAPPER}} ul.elementor-nav-menu li a' => 'border-bottom-color: {{VALUE}} !important;',
],
]
);
$element->add_control(
'menu-extension-fullscreen',
[
'label' => __( 'Menu FullScreen (Yes/No)', 'ext' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'default' => '',
'label_on' => 'Yes',
'label_off' => 'No',
'return_value' => '100vh',
'selectors' =>
[
'{{WRAPPER}} nav.elementor-nav-menu__container' => 'height: {{VALUE}}',
],
]
);
$element->add_control(
'menu-extension-border-width',
[
'label' => __( 'Parent Menu Border Width', 'ext' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'range' => [
'px' =>
[
'min' => 0,
],
],
'selectors' =>
[
'{{WRAPPER}} ul.elementor-nav-menu li a' => 'border-bottom-width: {{SIZE}}{{UNIT}} !important;',
],
]
);
$element->end_controls_section();
}
}

In the above section, we have added color control, switcher control, and slider control. With this, users can now specify the menu border color, full screen, and width of the menu.

And finally, we create the before_render_element (this helps us effectively apply changes from the extensions to the menu before it is rendered to the page).

public function before_render_element($element) {  
$settings = $element->get_settings();
}

And there you have it… A simple extension of the Elementor Pro Nav Menu with extra options.

--

--

--

Full Stack Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Redis and RedisJSON with Node.js

An Oxymoron : Static Analysis of a Dynamic Language (Part 4)

Exploring the CSS Paint API

React explaining, explained

GraphQL Fragments are the Best Match for UI Components

Git Basics: Renaming a Local and Remote Branch

Quick Tips: creating simple accordion with React hooks

The this Keyword in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chigozie Orunta

Chigozie Orunta

Full Stack Engineer

More from Medium

10 hours of Travelling ||First Traffic Jam Ever||

“The Tattooist Of Auschwitz”

Week 13: [Project Part 2] SIMD Usages within FFMPEG

Best Indian Food Restaurant In Louisville, KY 40220

Best Indian Food Restaurant In Louisville, KY 40220