Elementor Page Template Update
February 11, 2025 · AI Conversations
### Steps:
1. **Check if Elementor is Active** – This ensures the template respects Elementor’s structure.
2. **Use `the_content()`** – Elementor replaces this with its content.
3. **Ensure `get_header()` and `get_footer()` are used properly**.
### Modified `page.php`:
<?php
/**
* The template for displaying pages (Elementor Compatible)
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/
get_header(); ?>
<main id="main" class="site-main">
<?php
while ( have_posts() ) :
the_post();
// Check if the page is built with Elementor
if ( function_exists( 'elementor_theme_do_location' ) && elementor_theme_do_location( 'single' ) ) {
elementor_theme_do_location( 'single' );
} else {
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php
}
endwhile;
?>
</main>
<?php get_footer(); ?>
### Explanation:
– **`elementor_theme_do_location('single')`** – This checks if Elementor has overridden the page template and renders it accordingly.
– **Fallback to `the_content()`** – If Elementor is not used, the default content is displayed.
– **Ensures the full compatibility** – This will work whether a page is built with Elementor or not.
Now, your `page.php` is fully Elementor-compatible! 🚀
—
## **1. Modify `header.php` for Elementor Compatibility**
<?php
/**
* The template for displaying the header (Elementor Compatible)
*
* @package WordPress
* @subpackage Twenty_Fifteen
*/
if ( function_exists( 'elementor_theme_do_location' ) && elementor_theme_do_location( 'header' ) ) {
// Elementor header will be displayed if it exists
return;
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
</a>
</div>
<nav id="site-navigation" class="main-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</header>
—
## **2. Modify `footer.php` for Elementor Compatibility**
<?php
/**
* The template for displaying the footer (Elementor Compatible)
*
* @package WordPress
* @subpackage Twenty_Fifteen
*/
if ( function_exists( 'elementor_theme_do_location' ) && elementor_theme_do_location( 'footer' ) ) {
// Elementor footer will be displayed if it exists
return;
}
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<p>© <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?>. All Rights Reserved.</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
—
## **3. Update `page.php` to Use Elementor-Compatible Header & Footer**
<?php
/**
* The template for displaying pages (Elementor Compatible)
*
* @package WordPress
* @subpackage Twenty_Fifteen
*/
get_header(); ?>
<main id="main" class="site-main">
<?php
while ( have_posts() ) :
the_post();
// Check if the page is built with Elementor
if ( function_exists( 'elementor_theme_do_location' ) && elementor_theme_do_location( 'single' ) ) {
elementor_theme_do_location( 'single' );
} else {
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php
}
endwhile;
?>
</main>
<?php get_footer(); ?>
—
### ✅ **How This Works**
– **Header/Footer Compatibility:** If Elementor has custom templates for the header or footer, those will be used automatically.
– **Fallbacks:** If no Elementor template is set, the default `header.php` and `footer.php` files will be used.
– **Supports All Page Types:** Works whether a page is built with Elementor or not.
This setup ensures **full Elementor compatibility** while maintaining WordPress' default behavior! 🚀🎨
—
### **Modified `page.php` (Elementor Compatible)**
<?php
/**
* The template for displaying pages (Elementor Compatible)
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/
get_header(); ?>
<main id="main" class="site-main">
<?php
while ( have_posts() ) :
the_post();
// Check if Elementor has a custom template for this page
if ( function_exists( 'elementor_theme_do_location' ) && elementor_theme_do_location( 'single' ) ) {
elementor_theme_do_location( 'single' );
} else {
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php
}
endwhile;
?>
</main>
<?php get_footer(); ?>
—
### **What This Update Does**
✅ **Checks for Elementor Template** – If Elementor is set for this page, it uses `elementor_theme_do_location('single')`.
✅ **Uses Default Content as Fallback** – If the page is not built with Elementor, it falls back to `the_content()`.
✅ **Ensures Elementor Compatibility** – Works with both Elementor and non-Elementor pages.
Now, your `page.php` is **fully Elementor-compatible** while maintaining default WordPress functionality! 🚀🎨