Migrating Themes

Now lets see how you can update your theme code to support Elementor Locations. To simplify the process we will strip all the custom code from the theme (including the WordPress loop), and move it to the /template-parts/ folder. This way the code snippets will be much shorter and simpler to understand.

There are two ways to support Elementor locations, you can either use custom Elementor functions or hook to your existing actions. Both ways will work. Just follow the code examples.

Original Theme

Original header.php file:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php get_template_part( 'template-parts/header' ); ?>

 

Original footer.php file:

<?php get_template_part( 'template-parts/footer' ); ?>

</body>
</html>

 

Original index.php file:

<?php
get_header();

if ( is_archive() || is_home() || is_search() ) {
	get_template_part( 'template-parts/archive' );
} elseif ( is_singular() ) {
	get_template_part( 'template-parts/single' );
} else {
	get_template_part( 'template-parts/404' );
}

get_footer();

 

Original archive.php file:

<?php
get_header();

get_template_part( 'template-parts/archive' );

get_footer();

 

Original single.php file:

<?php
get_header();

get_template_part( 'template-parts/single' );

get_footer();

 

Original 404.php file:

<?php
get_header();

get_template_part( 'template-parts/404' );

get_footer();

 

Theme Locations with Functions

The new function.php file:

<?php
function theme_prefix_register_elementor_locations( $elementor_theme_manager ) {

	$elementor_theme_manager->register_all_core_location();

}
add_action( 'elementor/theme/register_locations', 'theme_prefix_register_elementor_locations' );

 

The new header.php file:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php
// Elementor `header` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) {
	get_template_part( 'template-parts/header' );
}

 

The new footer.php file:

<?php
// Elementor `footer` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'footer' ) ) {
	get_template_part( 'template-parts/footer' );
}

wp_footer();
?>

</body>
</html>

 

The new index.php file:

<?php
get_header();

if ( is_archive() || is_home() || is_search() ) {
	// Elementor `archive` location
	if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'archive' ) ) {
		get_template_part( 'template-parts/archive' );
	}
} else ( is_singular() ) {
	// Elementor `single` location
	if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'single' ) ) {
		get_template_part( 'template-parts/single' );
	}
} else {
	// Elementor `404` location
	if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'single' ) ) {
		get_template_part( 'template-parts/404' );
	}
}

get_footer();

 

The new archive.php file:

<?php
get_header();

// Elementor `archive` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'archive' ) ) {
	get_template_part( 'template-parts/archive' );
}

get_footer();

 

The new single.php file:

<?php
get_header();

// Elementor `single` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'single' ) ) {
	get_template_part( 'template-parts/single' );
}

get_footer();

 

The new 404.php file:

<?php
get_header();

// Elementor `404` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'single' ) ) {
	get_template_part( 'template-parts/404' );
}

get_footer();

Theme Locations with Hooks

The function.php file:

<?php
// Register Elementor locations
function theme_prefix_register_elementor_locations( $elementor_theme_manager ) {
	$elementor_theme_manager->register_location(
		'header',
		[
			'hook' => 'theme_prefix_header',
			'remove_hooks' => [ 'theme_prefix_print_elementor_header' ],
		]
	);
	$elementor_theme_manager->register_location(
		'footer',
		[
			'hook' => 'theme_prefix_footer',
			'remove_hooks' => [ 'theme_prefix_print_elementor_footer' ],
		]
	);
	$elementor_theme_manager->register_location(
		'single',
		[
			'hook' => 'theme_prefix_single',
			'remove_hooks' => [ 'theme_prefix_print_elementor_single' ],
		]
	);
	$elementor_theme_manager->register_location(
		'archive',
		[
			'hook' => 'theme_prefix_archive',
			'remove_hooks' => [ 'theme_prefix_print_elementor_archive' ],
		]
	);
}
add_action( 'elementor/theme/register_locations', 'theme_prefix_register_elementor_locations' );

// The header
function theme_prefix_print_elementor_header() {
	get_template_part( 'templates-parts/header' );
}
add_action( 'theme_prefix_header', 'theme_prefix_print_elementor_header' );

// The footer
function theme_prefix_print_elementor_footer() {
	get_template_part( 'templates-parts/footer' );
}
add_action( 'theme_prefix_footer', 'theme_prefix_print_elementor_footer' );

// The single
function theme_prefix_print_elementor_single() {
	get_template_part( 'templates-parts/single' );
}
add_action( 'theme_prefix_single', 'theme_prefix_print_elementor_single' );

// The archive
function theme_prefix_print_elementor_archive() {
	get_template_part( 'templates-parts/archive' );
}
add_action( 'theme_prefix_archive', 'theme_prefix_print_elementor_archive' );

 

The header.php file:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php do_action( 'theme_prefix_header' ); ?>

 

The footer.php file:

<?php do_action( 'theme_prefix_footer' ); ?>

<?php wp_footer(); ?>

</body>
</html>

 

The archive.php file:

<?php
get_header();

do_action( 'theme_prefix_archive' );

get_footer();

 

The single.php file:

<?php
get_header();

do_action( 'theme_prefix_single' );

get_footer();

Elementor Hello Theme

We prepared a simple theme in our GitHub repository to show how a basic theme will look like. Check out our Elementor Hello Themefor more information.

Get The Latest Updates

We have a lot more where that came from! Join 828,441 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.