Create a Dynamic Footer Template in WordPress

Create a Dynamic Footer Template in WordPress — a practical guide to Create a Dynamic Footer Template in WordPress themes tutoria with clear examples you can reuse in real projects.

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>