The footer.php WordPress Theme Development

Moving right along in our eighth installment of the Let’s Build A WordPress Theme From Scratch tutorial series, we are going to be learning about the footer.php template file. This is a very important file, much like it’s counterpart header.php, because it repeats on every page. Plus it is the end of your document and the final thing viewers will see when they scroll to reach the bottom of the page. This is the last impression of your website to your audience so it is crucial that you put some good cross marketing, social media links, or additional calls to action so that people don’t just leave your website at that point. For example in my footer I have a subscription area because I would like people to subscribe if they have enjoyed the content (hint hint). Then I have some additional information and links to contact me. Other than what you see on the surface, the footer.php file will hold some really important functionality that we need to discuss. Let’s get to it!

This is the eighth article in the Let’s Build A WordPress Theme From Scratch Series.

Footer.php

We are going to dive right into the code from the WordPress theme I have been using for examples. In this code there is going to be another example of a widgetized area, a copyright area, a few scripts, and a really important function we MUST have.

<div class="footer">
    
    <div class="wrap_1280">
        
        <?php
        
            if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer_widget')):

            endif; 
        ?>

    <div class="clearfix"></div>

    <div class="copyright">

        <p>© Copyright <?php echo date("Y"); ?> | WordPress Dev Solutions. All Rights Reserved. | <a href="https://wpdevsolutions.mystagingwebsite.com/post-sitemap.xml">Sitemap</a> | <a href="/privacy-policy">Privacy Policy</a> |<a href="http://wambition.com/">Wordpress Design & Development</a> by Wambition</p>

    </div>

    <div class="clearfix"></div>

    </div>
    
    </div>

    <script type="text/javascript">
        
    jQuery(window).load(function() {
        
        var $container = jQuery('#ms-container');
        
            $container.imagesLoaded(function() {
                
                $container.masonry({
                    
                    columnWidth: '.ms-item',
                    
                    itemSelector: '.ms-item'
                    
                });
                
            });
            
    });
      
    </script>

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

</html>

Let’s break the code down an bit:

  • The first function you see should be familiar. We discussed widgetizing sidebars in a previous lesson and this is the same code, same method to widgetize your footer.
  • Next we have a copyright statement which most clients either request, if not require. You will see a bit of php echoed out right after the word Copyright which is a simply way to display the current year. This can be really helpful in many places on your site but here we just want the year to stay current so we don’t have to remember to come back and change it every year. Another tip is to put the year you began, lets say 2000 then put a dash and include the echoed date so that you will get the range your company has been in business. It would look like 2000-2014, each year the last listed year would increase. Pretty sweet right!
  • After the copyright statement we have a little jQuery. Most professionals recommend that you put scripts in the footer or at the bottom of the page that it pertains to. For example, if you will be using a specific script to accomplish something on every page you would want to put it in the footer. If you only need it to apply to a few pages then you would want to just put it at the end of the template file that corresponds with those pages. Make sure that in that case you put the script before the function that calls the footer.
  • The next function is very very important! It is the wp_footer() function and this function is what WordPress uses to pass in not only script files that they need to run properly, but plugins, css files, and anything else that might be enqueued. If you don’t put this into your WordPress theme you might see some things broken.
  • Something else I wanted to mention was that you can tell your stylesheets and scripts to load in the footer or bottom of the page instead of in the head of the document. I will be giving you more details on this in our next lesson about the functions.php file. I wanted to mention this now because if you happen to enqueue jQuery in the footer and then you need to write a jQuery script, you want to make sure that you put the script below the wp_footer() function. This is because you can’t use jQuery before it has been activated. So if you put the script before the wp_footer() function it will basically say that jQuery cannot be found and your functionality won’t work.
  • Last, but certainly not least, make sure that you end the page with a closing body tag and a closing html tag.

The Conclusion

There are a lot of really advanced things you can accomplish with the footer.php template file but I really just wanted to give you the basic necessities. Your WordPress theme is nothing with out a footer so make sure you get this information down solid. Please contact me if you need any assistance or have a question or two. Next week is a big week where I will be finally uploading the functions.php tutorial and it is going to be jam packed!

Team Treehouse – Learn PHP for WordPress

If you are serious about learning to develop custom themes in WordPress, I highly recommend you join Team Treehouse. They have a full video course on everything WordPress development, including a course on specifically writing PHP for WordPress.