Episode 18 of 32
The footer.php File
Create the footer.php template — convert the static footer HTML into a dynamic WordPress template part.
The footer.php File
Just like the header, the footer lives in its own file — footer.php. Every template includes it using get_footer().
Creating footer.php
<footer id="main-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h4>About Us</h4>
<p><?php bloginfo('description'); ?></p>
</div>
<div class="footer-col">
<h4>Quick Links</h4>
<?php wp_nav_menu(array(
'theme_location' => 'footer',
'container' => false,
'fallback_cb' => false,
)); ?>
</div>
<div class="footer-col">
<h4>Contact</h4>
<ul class="contact-list">
<li>📍 42 Code Avenue, Dev City</li>
<li>📞 (555) 987-6543</li>
<li>✉️ hello@devcoffee.com</li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<a href="#">Twitter</a>
<a href="#">GitHub</a>
<a href="#">YouTube</a>
<a href="#">LinkedIn</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© <?php echo date('Y'); ?>
<?php bloginfo('name'); ?>. All rights reserved.</p>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
What Changed from Static HTML
| Static | WordPress |
|---|---|
| Hardcoded description text | <?php bloginfo('description'); ?> |
| Hardcoded copyright year | <?php echo date('Y'); ?> |
| Hardcoded site name | <?php bloginfo('name'); ?> |
| Hardcoded footer links | <?php wp_nav_menu(...); ?> |
Nothing before </body> | <?php wp_footer(); ?> |
Registering the Footer Menu
Update functions.php to register a footer menu location:
function developer_coffee_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
register_nav_menus(array(
'primary' => __('Primary Menu', 'developer-coffee'),
'footer' => __('Footer Menu', 'developer-coffee'),
));
}
add_action('after_setup_theme', 'developer_coffee_setup');
Why wp_footer() Is Required
wp_footer() must be placed just before the closing </body> tag. It:
- Loads JavaScript files enqueued with
wp_enqueue_script() - Outputs the WordPress admin toolbar (when logged in)
- Lets plugins add tracking scripts, analytics, pop-ups, etc.
- Without it, many plugins will not work
The Complete Template Pattern
Every page template follows this structure:
<?php get_header(); ?>
<!-- Page-specific content -->
<?php get_footer(); ?>
Key Takeaways
footer.phpcontains the footer markup pluswp_footer()and closing HTML tagswp_footer()is required — place it before</body>- Use
bloginfo('description')andbloginfo('name')to dynamically pull site info - Use
date('Y')to auto-update the copyright year - Register footer menus in
functions.phpand output them withwp_nav_menu()