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() {

WordPress accounts for almost 30% of all websites on the Internet and is one of the most popular CMS (Content Management Systems) used by content creators and site owners.

Unfortunately due to its ease of use and popularity, it is also prone to hackers and site attacks and has been notorious for breaking in production due to faulty security measures.

The following points would help you safeguard your website to avoid running into problems once your site is live:

React + CSS

So you’ve built your first React Component but don’t know how to style it. Well, here are 4 quick ways to style your Component and get things running up quickly:

import "./mystyles.css";
import React from "react";
import "./mystyles.css";
const MyReactComponent = () => (
<h1 className="beginner">My React Component</h1>

So you’ve got this great idea for a plugin you’d like to build that could potentially impact your WP project or the WordPress global community, but then you quickly realize you need to do some boilerplate set-up before you can start.

As with most new plugin setups, you might find yourself creating a folder, PHP files and associated asset folders to go along with. …

When I started learning how to use the Tailwind CSS library, I really didn’t know what to expect and wasn’t quite sure how I’d fare with the library. It turns out, TailWind’s a whole lot easier to use than I thought and makes designing a landing page a breeze.

One remarkable feature I noticed was the ease with which I could define classes for various responsive breakpoints without writing a single line of CSS media queries. That for me was awesome!

For this tutorial, I’ll assume you have a Tailwind project set up, if you don’t you can grab one…

Getting the default home page for Laravel to come up as shown above for a Laravel installation on a Cpanel shared hosting might be surprisingly difficult.

This is because the default installation that comes with Cpanel’s Softaculous Laravel package ships with an index.php file that redirects you to the public folder rather than the root folder of your Laravel installation.

For a newly installed Laravel package using Softaculous, you typically see the following screen by default:

When I started working on Gatsby Projects, I took me a while to figure out how to handle Bootstrap & Google font inclusion to various types of projects. It turns out, it wasn’t as difficult as I thought. So here are the few basic steps to get you going:

For Bootstrap

1) Install Bootstrap Module via NPM

Start by installing bootstrap and react-bootstrap via the CLI like so (this should be done in your Gatsby project’s root directory:

npm i react-bootstrap bootstrap

Create a gatsby-browser.js file (if you don’t have that already). …

Welcome to yet another era of class renaming and styling conventions. In the past one week, the Bootstrap team announced its official release of the alpha version of Bootstrap 5, you can get it here: v5.getboostrap.com.

I was particularly excited about this announcement, perhaps because I’ve been a fan of the CSS framework for such a long time. I basically use it in a lot of professional and personal side projects of mine and can’t see any reason why not to.

Bootstrap 5 definitely is a significant improvement from v4 and takes web development to a whole new level with…

When I started building websites with React, I also wondered how I was going to build a navigation that changed dynamically on a user scroll activity.

It turns out that it was a lot easier than I thought. Let’s take a look at how to achieve this.

import React from "react";const Navigation = () => {
return (

Usually when working on large web projects as a React or Angular front-end developer, you may often come across scenarios where you use the same class name, multiple times in different CSS files for styling different components.

In such cases (as is typical of CSS), the latest class definition overrides the previous class and most times, this might lead to a conflict in your styling presentation for various components.

One way of solving this problem would be to use appropriate naming convention for the classes so that no two class names are identical. …

Chigozie Orunta

Full Stack Engineer

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