How I Build Great WordPress Themes (Elementor Compatible)

Hello, fellow WordPress enthusiasts! Many of you know that I’ve been immersed in the world of WordPress programming since 2019, and over the years, I’ve developed my skills in designing and developing WordPress projects. As the digital world evolves, so do our approaches to web development. 

I truly believe that creating WordPress themes for clients is not just about coding and design but also about understanding their needs and delivering a product that exceeds their expectations.

Today, I’m excited to walk you through the strategies we’ve been using to create WordPress themes that integrate perfectly with the Elementor page builder and some tips on how to make your client happy..

Step 1: Gathering Information

The first step in creating WordPress themes for my clients is identifying their needs and goals. This involves getting to know their ideal client, understanding their brand identity, and aligning the design elements accordingly. When I understand who they are targeting, then I can tailor the theme to meet their specific needs and preferences. This allows me to create a website that resonates with the target audience and helps our clients achieve their goals. Which means, happy client (:

Step 2. Getting Started

To begin developing, I recommend starting with a trusted starter theme, such as Underscores. It is not only supported by WordPress.org but also by ThemeForest and various other marketplaces.

Underscores quickly generates all the essential files we will need, such as index, 404, template parts, and the vital folders and files that are essential for a standard WordPress theme.

We will also need to follow the conventional rules and recommendations set forth by the official WordPress Theme Review Team. After that we can import theme unit test data to verify that all elements work as expected, and lastly we have to run a comprehensive check on our theme using the Theme Check plugin. This will ensure that our creation aligns with best practices, provides a stable user experience and it is also robust and secure.

Step 3:  Enabling Elementor Compatibility:

At this point, we can get another cup of coffee and continue. In order to integrate our theme with Elementor we need to have some careful considerations. Let’s take a look:

• A Container Dilemma: Handle with Care

Many themes often rely on a container class for structuring their content. However, when our theme interacts with an Elementor template, it’s essential to make adjustments. We have to ensure that the container is  included only when the template is not an Elementor template.

Here’s a snippet of code that shows this transition:

<?php if(!is_page_template('elementor_header_footer')) }{ ?> <div class="container"> <?php } ?>

Easy, right?

• Embrace Padding Effectiveness

Usually, when dealing with Elementor templates, it’s wise to revisit our approach to paddings. If a page is using an Elementor template, we need to consider removing content padding for a better fit.

In our  theme’s style.css file, we will add a bit of CSS magic as shown below:

.elementor-template-full-width #content{ padding: 0; }

This helps ensure that our theme’s content aligns beautifully with Elementor’s interface.

Step 4. Flexibility in Styling: A Golden Rule

We know that making our theme’s styles adaptable and easily overridden by Elementor’s styles is a game-changer. So, we need to avoid the use of the !important declaration in our theme’s CSS. Let our styles gracefully coexist with Elementor’s aesthetics.

For example, instead of doing this:

#content p{ font-size: 16px !important; }

We can just opt for a more flexible approach:

p{ font-size: 16px; }

In Closing: Harmonizing WordPress and Elementor

Keep in mind that while these strategies have proven effective for me, they might only suit some scenarios. If you’re seeking assistance with your existing theme for Elementor compatibility or wish to create a new theme from scratch, don’t hesitate to reach out to us.