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.
Elementor locations are organize into five groups:
- Header – template header replaces the theme
- Footer – template footer replaces the theme
- Single – template content replaces the theme
- Archive – template archive replaces the theme
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.
To prevent compatibility issues, your theme should follow those guidelines:
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
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.
Now let’s dive in to the code: