Create a Dynamic Footer Template in WordPress

The footer.php file is responsible for displaying the footer section of your WordPress theme and loading essential scripts using wp_footer(). It typically contains copyright information, navigation menus, social media links, newsletter forms, and other site-wide footer content.

In this example, the footer template dynamically loads the footer logo, headings, social media links, and a call-to-action button using Advanced Custom Fields (ACF). It also displays a Mailchimp newsletter subscription form using a shortcode and renders a custom footer navigation menu with wp_nav_menu(). Finally, the template calls wp_footer() to ensure WordPress and plugins can enqueue scripts before the closing </body> tag.

Add the following code to your theme’s footer.php file to create a fully dynamic and customizable footer.

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package qrs
 */
$footer_logo=get_field('footer_logo','option');
$footer_title=get_field('footer_title','option');
$footer_form_title=get_field('footer_form_title','option');
$footer_button=get_field('footer_button','option');
$facebook_url=get_field('facebook_url','option');
$linkedin_url=get_field('linkedin_url','option');
$twitter_url=get_field('twitter_url','option');
$instagram_url=get_field('instagram_url','option');
?>
</div>
<footer id="colophon" class="site-footer">
    <!-- .site-info -->
    <div class="footer-container">
        <div class="footer-left">
            <div class="footer-logo">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                  <?php if (!empty($footer_logo)) {
                    echo '<img src="' . esc_url( $footer_logo['url'] ) . '" alt="' . $footer_logo['alt'] . '">';
                    } ?>
                </a>
            </div>
        </div>
        <div class="footer-right">
            <div class="newsletter">
                <?php 
                if(!empty($footer_title)) { ?>
                    <h3><?php echo $footer_title; ?></h3>
                <?php } if(!empty($footer_form_title)) { ?>
                    <h4><?php echo $footer_form_title;?></h4>
                <?php } 
                echo do_shortcode('[mc4wp_form id="754"]');
                if($facebook_url || $linkedin_url || $twitter_url || $instagram_url) {
                    ?>
                    <div class="footer-social-icon">
                        <ul>
                            <?php if(!empty($facebook_url)) { ?>
                                <li><a href="<?php echo $facebook_url;?>" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
                            <?php } if(!empty($linkedin_url)) { ?>
                                <li><a href="<?php echo $linkedin_url;?>" target="_blank"><i class="fab fa-linkedin"></i></a></li>
                            <?php } if(!empty($twitter_url)) { ?>
                                <li><a href="<?php echo $twitter_url;?>" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
                            <?php } if(!empty($instagram_url)) { ?>
                                <li><a href="<?php echo $instagram_url;?>" target="_blank"><i class="fab fa-instagram-square"></i></a></li>
                            <?php } ?>
                        </ul>
                    </div>
                <?php } ?>
            </div>
            
            <div class="footer-menu">
                <div class="btn-contact">
                    <?php echo button_group($footer_button);?>
                </div>
                <?php
                    wp_nav_menu(
                        array(

                            'menu'  => 'footer menu',
                        )
                    );
                ?>
            </div>
        </div>
    </div>
</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>

</html>