How to Remove the Footer in Divi theme - The Right Way

June 21, 2019

Ever wanted to remove the footer in Divi? Many website designers do it the wrong way that causes SEO issues… Don’t let this happen! Though it’s possible to get rid of both the header and footer by using the Blank page template, sometimes you only want to get rid of the footer. Read on!

So what’s the mistake?

This is the easiest AND also the wrong way to “remove” the footer on your website. This little CSS code actually hides your footer. Google hates hidden text and links!

If you are using the code above to remove the footer, then stop doing it RIGHT NOW! Remove that code and read on to find out how to remove the footer - the right way! If you like getting penalized by Google then go on and continue using it… Please don’t!

Before starting

First of all, make sure you have a child theme that you can work on. Don’t touch the original files of Divi! If you do, you will lose the changes on update.

Don’t know what is a child theme and how to set up one? Click here!

Now, make sure you have access to the files on your server. Either use a plugin like File Manager (this is my favorite, you can uninstall it once we are done). Or use the file explorer provided by your hosting’s interface, which is usually CPanel. If you have FTP access, that works as well.

The Right Way

I’ll describe three different versions, each has its own purpose. Please select the one that fits your requirements:

  • If you want to remove the footer from everywhere on your site, then the Global version is the best for you: Click here!
  • If you want to remove the footer on certain pages (Page only so this doesn’t work with posts, woocommerce products, custom post types), then the Page Template version is the best for you: Click here!
  • If you are a web developer or have a web developer on your team, and you want to remove the footer based on special conditions, then the Developer Friendly version is the best for you: Click here!

The Right Way - Global

This version removes the footer from everywhere on your site.

Once opened up your preferred file explorer, navigate to your WordPress site directory. Then go to your child theme directory, usually wp-content/themes/Divi-Child. Now download the file below and upload it, or create a file called footer.php and copy the code below and paste it into the file.

<?php
/**
 * Fires after the main content, before the footer is output.
 *
 * @since 3.10
 */
do_action( 'et_after_main_content' );

if ( 'on' === et_get_option( 'divi_back_to_top', 'false' ) ) : ?>

	<span class="et_pb_scroll_top et-pb-icon"></span>

<?php endif;

if ( ! is_page_template( 'page-template-blank.php' ) ) : ?>
		</div> <!-- #et-main-area -->

<?php endif; // ! is_page_template( 'page-template-blank.php' ) ?>

	</div> <!-- #page-container -->

	<?php wp_footer(); ?>
</body>
</html>

That’s it! Now the footer should be gone on your whole site. The Right Way!

The Right Way - Page template

This version removes the footer only on certain pages. The one in question makes use of the page templates. It will add a new entry to your page templates dropdown and you can specify which page should use it.

Note: This only works on Pages and not on blog posts or other type of pages like Woocommerce products.

Once opened up your preferred file explorer, navigate to your WordPress site directory. Go to your child theme directory, usually wp-content/themes/Divi-Child. Now download the file below and upload it, or create a file called footer.php and copy the code below and paste it into the file.

<?php
/**
 * Fires after the main content, before the footer is output.
 *
 * @since 3.10
 */
do_action( 'et_after_main_content' );

if ( 'on' === et_get_option( 'divi_back_to_top', 'false' ) ) : ?>

	<span class="et_pb_scroll_top et-pb-icon"></span>

<?php endif;

if ( ! is_page_template( 'page-template-blank.php' ) ) : ?>

		<?php if ( ! is_page_template( 'page-template-no-footer.php' ) ) : ?>
			<footer id="main-footer">
				<?php get_sidebar( 'footer' ); ?>


		<?php
			if ( has_nav_menu( 'footer-menu' ) ) : ?>

				<div id="et-footer-nav">
					<div class="container">
						<?php
							wp_nav_menu( array(
								'theme_location' => 'footer-menu',
								'depth'          => '1',
								'menu_class'     => 'bottom-nav',
								'container'      => '',
								'fallback_cb'    => '',
							) );
						?>
					</div>
				</div> <!-- #et-footer-nav -->

			<?php endif; ?>

				<div id="footer-bottom">
					<div class="container clearfix">
				<?php
					if ( false !== et_get_option( 'show_footer_social_icons', true ) ) {
						get_template_part( 'includes/social_icons', 'footer' );
					}

					// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped
					echo et_core_fix_unclosed_html_tags( et_core_esc_previously( et_get_footer_credits() ) );
					// phpcs:enable
				?>
					</div>	<!-- .container -->
				</div>
			</footer> <!-- #main-footer -->
		<?php endif; // ! is_page_template( 'page-template-no-footer.php' ) ?>
		</div> <!-- #et-main-area -->

<?php endif; // ! is_page_template( 'page-template-blank.php' ) ?>

	</div> <!-- #page-container -->

	<?php wp_footer(); ?>
</body>
</html>

Download the file below and upload it, or create a file called page-template-no-footer.php and copy the code below and paste it into the file.

<?php
/*
Template Name: No Footer Page
*/

if (file_exists(get_stylesheet_directory() . '/page.php')) {
	include get_stylesheet_directory() . '/page.php';
} else if (get_template_directory() . '/page.php') {
	include get_template_directory() . '/page.php';
}

Now you need to enable this page template on one of your pages to take effect. Open up your pages, edit the page where you want to remove the footer, then select the No Footer Page page template.

choosing the no footer page page template in wordpress page editor

The Right Way - Developer friendly

If you are a web developer or have a web developer on your team and you need a more sophisticated way to remove footers from certain pages, then this is the best version for you. This version allows you to remove the footer on any post, page, woocommerce product or anything else! You just need a snippet of code.

Once opened up your preferred file explorer, navigate to your WordPress site directory. Go to your child theme directory, usually wp-content/themes/Divi-Child. Now download the file below and upload it, or create a file called footer.php and copy the code below and paste it into the file.

<?php
/**
 * Fires after the main content, before the footer is output.
 *
 * @since 3.10
 */
do_action( 'et_after_main_content' );

if ( 'on' === et_get_option( 'divi_back_to_top', 'false' ) ) : ?>

	<span class="et_pb_scroll_top et-pb-icon"></span>

<?php endif;

if ( ! is_page_template( 'page-template-blank.php' ) ) :
if ( apply_filters( 'et_render_footer', true ) ) : ?>
			<footer id="main-footer">
				<?php get_sidebar( 'footer' ); ?>


		<?php
			if ( has_nav_menu( 'footer-menu' ) ) : ?>

				<div id="et-footer-nav">
					<div class="container">
						<?php
							wp_nav_menu( array(
								'theme_location' => 'footer-menu',
								'depth'          => '1',
								'menu_class'     => 'bottom-nav',
								'container'      => '',
								'fallback_cb'    => '',
							) );
						?>
					</div>
				</div> <!-- #et-footer-nav -->

			<?php endif; ?>

				<div id="footer-bottom">
					<div class="container clearfix">
				<?php
					if ( false !== et_get_option( 'show_footer_social_icons', true ) ) {
						get_template_part( 'includes/social_icons', 'footer' );
					}

					// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped
					echo et_core_fix_unclosed_html_tags( et_core_esc_previously( et_get_footer_credits() ) );
					// phpcs:enable
				?>
					</div>	<!-- .container -->
				</div>
			</footer> <!-- #main-footer -->
		</div> <!-- #et-main-area -->
<?php endif; // apply_filters( 'et_render_footer', true ) ?>
<?php endif; // ! is_page_template( 'page-template-blank.php' ) ?>

	</div> <!-- #page-container -->

	<?php wp_footer(); ?>
</body>
</html>

This modified footer.php adds a new filter hook called et_render_footer. If the value is truthy, then it is going to render the footer otherwise it isn’t. This allows us to very easily hook into this and use any kind of logic to remove the footer. Or vica-versa.

Using this hook you can remove the footer globally by adding this little snippet into your functions.php.

add_filter( 'et_render_footer', '__return_false' );

That’s it

Hopefully this short article helped to resolve your problem. Divi theme (theme, not the page builder plugin) is a very good starter theme, but it lacks a lot of simple things that could make the developer’s life easier, or in other words, make the theme more extensible.


Got any questions? Need help? Feel free to reach out to me on Facebook or Twitter.


David Szabo
Web Wizard

Hey, David here. Hope you enjoyed reading this article. I don't have many posts here yet, but keep tuned! Thanks for reading, have a nice day!

Follow me on Facebook and Twitter!

You might love these posts too

Google Analytics Best Practices That'll Save You From Mess

Google Analytics is a really powerful tool. But such power comes with many-many configurable options and features. It’s easy to mess up your data and you won’t notice it until you want to take a look at the reports. But that’s too late… Prevent the mess with these best practices. Don’t worry, they are simple and easy!
David Szabo
Jun 27, 2019