Theme Locations API

Elementor Pro 2.0 introduced the Theme Locations API that allows theme developers to create custom locations and edit them with Elementor. It means that you can edit any layout component using Elementor.

The basic Elementor page builder works only with areas inside the_content(). Up until now you couldn’t really use Elementor to edit your sidebar, set custom headers/footers or even create your custom locations outside the content area and edit them with Elementor.

The Theme Locations API do just that, it allows you to customize your theme to set site-wide areas like the theme header and footer, design custom archive pages, custom single pages and much more! With the Theme Locations API you can control not only the page content but also the theme layout.

In other words, Elementor locations are basically like WordPress template parts but they are different in a way that they are used to insert custom Elementor templates in to those locations.

Default Locations

Elementor locations are organize into five groups:

• Header – template header replaces the theme header.php file.
• Footer – template footer replaces the theme footer.php file.
• Single – template content replaces the theme singular.php, single.php, page.php, attachment.php and 404.php files.
• Archive – template archive replaces the theme archive.php, taxonomy.php, author.php, date.php and search.php files.

Theme Support

Themes can have 3 types of support in Elementor locations:

• Unsupported – Themes that don’t support Elementor locations.
• Partial Support – Themes that support only header and footer locations.
• Full Support – Themes that support all core locations.

Best Practice

To prevent compatibility issues, your theme should follow those guidelines:

1. Use wp_head and wp_footer action hooks to add custom code to the theme.

Themes that don’t support header / footer locations are defined by Elementor as “unsupported” themes because of the way Elementor works. With unsupported themes Elementor will replace the entire header.php and footer.php files. This can cause issues with themes that add custom code to the theme files instead of using the wp_head and wp_footer action hooks.

2. Use header and footer locations together.

We require both header and footer to be implemented together, because most themes have an opening DIV tag in the header.php file and a closing tag in the footer.php file. If Elementor will replace the original footer file without the header, some DIV tags will remain open causing UI issues.

What’s Next?

Now let’s dive in to the code:

• Registering Locations – Learn how to register core Elementor locations or create your own.
• Displaying Locations – How to display in your theme the template assigned to the location.
• Migrating Themes – See how you can update your theme code to support Elementor locations.