Design Custom Headers & Footers With This Free Elementor Plugin (ok)

https://github.com/brainstormforce/header-footer-elementor

Link: https://github.com/brainstormforce/header-footer-elementor/wiki/Add-support-to-Header-Footer-Elementor-from-the-Child-Theme

C:\xampp\htdocs\wordpress2\wp-content\themes\twentytwentyone-child\header.php

<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<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(); ?>
=================== Start Header 1 ===================
<?php if ( function_exists( 'hfe_header_enabled' ) && true == hfe_header_enabled() ): ?>
<div id="page" class="site">
	<div id="content" class="site-content">
		<div id="primary" class="content-area">
			<main id="main" class="site-main" role="main">
	<?php echo hfe_render_header(); ?>
<?php else: ?>
=================== End Header 1 ===================
=================== Start Header 2 ===================
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'twentytwentyone' ); ?></a>

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

	<div id="content" class="site-content">
		<div id="primary" class="content-area">
			<main id="main" class="site-main" role="main">
<?php endif; ?>
=================== End Header 2 ===================

C:\xampp\htdocs\wordpress2\wp-content\themes\twentytwentyone-child\footer.php

=================== Start Header 1 ===================
<?php if ( function_exists( 'hfe_footer_enabled' ) && true == hfe_footer_enabled() ): ?>
	<?php echo hfe_render_footer(); ?>
				</main><!-- #main -->
			</div><!-- #primary -->
		</div><!-- #content -->
	</div><!-- #page -->
<?php else: ?>
=================== End Footer 1 ===================
=================== Start Footer 2 ===================
			</main><!-- #main -->
		</div><!-- #primary -->
	</div><!-- #content -->

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

	<footer id="colophon" class="site-footer" role="contentinfo">

		<?php if ( has_nav_menu( 'footer' ) ) : ?>
			<nav aria-label="<?php esc_attr_e( 'Secondary menu', 'twentytwentyone' ); ?>" class="footer-navigation">
				<ul class="footer-navigation-wrapper">
					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'footer',
							'items_wrap'     => '%3$s',
							'container'      => false,
							'depth'          => 1,
							'link_before'    => '<span>',
							'link_after'     => '</span>',
							'fallback_cb'    => false,
						)
					);
					?>
				</ul><!-- .footer-navigation-wrapper -->
			</nav><!-- .footer-navigation -->
		<?php endif; ?>
		<div class="site-info">
			<div class="site-name">
				<?php if ( has_custom_logo() ) : ?>
					<div class="site-logo"><?php the_custom_logo(); ?></div>
				<?php else : ?>
					<?php if ( get_bloginfo( 'name' ) && get_theme_mod( 'display_title_and_tagline', true ) ) : ?>
						<?php if ( is_front_page() && ! is_paged() ) : ?>
							<?php bloginfo( 'name' ); ?>
						<?php else : ?>
							<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
						<?php endif; ?>
					<?php endif; ?>
				<?php endif; ?>
			</div><!-- .site-name -->
			<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

		</div><!-- .site-info -->
	</footer><!-- #colophon -->

</div><!-- #page -->
<?php endif; ?>
=================== End Footer 2 ===================
<?php wp_footer(); ?>

</body>
</html>

C:\xampp\htdocs\wordpress2\wp-content\themes\twentytwentyone-child\functions.php

<?php
function twentyseventeen_header_footer_elementor_support() {
	add_theme_support( 'header-footer-elementor' );
}

add_action( 'after_setup_theme', 'twentyseventeen_header_footer_elementor_support' );
?>

Add support to Header Footer Elementor from the Child Theme

Nikhil edited this page on Sep 28, 2017 · 2 revisions

If your current theme is not supported by Header Footer Elementor, It is still recommended to contact your theme developer and see if they can add theme support from the theme. Just refer them the Developer Article they can follow to add support for the plugin.

If for some reason this is not possible you can follow along with this article to add support for Header Footer Elementor by yourself from the child theme.

In this example, I will explain adding support for the TwentySeventeen WordPress theme.

Make sure you make this changes in the child theme if you will be getting updates to your theme in future. Else a theme update will remove all the changes that you make.

Add Custom Header Support

Copy the header.php from your parent theme to your child theme, This will you will be overriding the header from your child theme.
The Header Footer Elementor Plugin provides the content in <header> tag for your website, So we will add conditions around the <header> in the header.php to check if the header is enabled from the plugin.

Just before the opening <header> tag in header add the condition to from the plugin to render its header -

<?php if ( function_exists( 'hfe_header_enabled' ) && true == hfe_header_enabled() ): ?>
	<?php echo hfe_render_header(); ?>
<?php else: ?>

Just after the </header> tag add the closing if condition -

<?php endif; ?>

Here is the modified header.php looks like for twenty seventeen theme - header.php

Add Custom Footer Support

Just like the header.php copy the footer.php from the parent theme to the child theme.
The process is exactly similar for the footer. The Header Footer Elementor Plugin provides the content inside <footer> tag for your website, So we will add conditions around the <footer> in the footer.php to check if the header is enabled from the plugin.

Just before the opening <footer> tag in header add the condition to from the plugin to render its footer -

<?php if ( function_exists( 'hfe_footer_enabled' ) && true == hfe_footer_enabled() ): ?>
	<?php echo hfe_render_footer(); ?>
<?php else: ?>

Just after the </footer> tag add the closing if condition -

<?php endif; ?>

Here is the how the modified footer.php looks like after you modify it - footer.php

Removing the Unsupported theme warning from the Admin

Now that the header and footer are supported you can disable the warning in the backend by adding theme support from your functions.php file in the child theme.

function twentyseventeen_header_footer_elementor_support() {
	add_theme_support( 'header-footer-elementor' );
}

add_action( 'after_setup_theme', 'twentyseventeen_header_footer_elementor_support' );

PreviousDisplay All Sticky Post Before Regular Post (ok)Nexthttps://wp-cli.org/package-index (HOT)

Last updated 4 years ago

Was this helpful?