[Tutorial #13] WordPress Footer File Detailed Explanation

[Tutorial #13] WordPress Footer File Detailed Explanation


In last tutorial we explained the theme header file. Now we will look at the footer file footer.php. We will skip some sections in the footer file, and get back to them when we discuss pop-ups.

The Structure

This is the footer.php code. You can download the source file from here in Github:

To show the structure, here we repeat the file without showing the details:

Code Explanation

Here we will explain the footer code. Some of the code segments will not be explained: we will revisit them in later topics.

Line 1-11: Description

The description here between <?php and ?> is for documentation. You can find the standard specification in wordpress Codex page here.

Line 14: WordPress Footer Function

The function wp_footer() here inserts wordpress’ own footer code.

Line 46-67: <Footer> section

This is where the visible footer section located. Similar to a header, the footer section contains links and other statements.

Line 49: the container class for Bootstrap

The container for Bootstrap components.

Line 50,54,63: the Bootstrap column class

These “col-sm-x” classes specifie the footer into three columns, with the width ratio as 3:6:3 (See this post if you need to review using them). They are not included in the <div> tag with “row” class because there is one only row, and thus not necessary.

Also don’t forget the closing tag </div>.

Line 51,52: Hyperlinked Font Awesome Social Icons

We introduced Font Awesome in the header post as a great vector icon library. We talked about including the library in header.php. Now we see how we use them.

One of Font Awesome’s icon categories is the social media icons. To use them we specify the class for the hyperlink tag <a>:

class = "fa fa-lg fa-github"

  • “fa” means to use Font Awesome.
  • “fa-lg” means to use a large size icon (33% larger than font size).
  •  “fa-github” means to use the Github icon.

You can go to Font Awesome website and find other icons you want, along with sample HTML codes.

Font Awesome icon example page

Font Awesome’s Github icon page.

Line 55-61: Wordpress Menu Usage

This is one of the tricky part of using wordpress and Bootstrap together.

Since in wordpress we assign menus from the admin panel, we must use wordpress’ function to insert the menu into Bootstrap’s navbar. Hence the function wp_nav_menu(...).

We will explain the setting in more details when we add menus. For now it’s informative to know the paramaters of wp_nav_menu:

  • theme_location: specify the menu location in the theme (will expalin what this means later).
  • container: the HTML tag that contains the menu.
  • container class: the classes of the above mentioned HTML tag.
  • menu_class:  The menu is represented by the list <ul> tag, thus menu_class specifies the classes for the <ul> tag.

Line 64: Copyright Statement

Here we use the following special functions:

  1. HTML &copy prints out the special copyright symbol. See this page for the complete HTML symbol list.
  2. PHP function date('Y') prints out the current date. The 'Y'  parameter tells the function to only return year.
  3. WordPress function bloginfo('name') prints out the website’s name. See its Codex page for printing other information of your wordpress site. 

(IMPORTANT) Line 135-147: Including Javascript Libraries (Both Internal and External)

At the end of the footer (before we close the <body> tag) is where we specify the internal/external Javascript libraries. The reason to put it here in the end is to speed up page loading.

We use the HTML tag <script> to load a Javascript library . If the library’s “source” is in our site, we specify the “src” attribute to the file’s path like src="<?php bloginfo('template_directory'); ?>/assets/js/main.js" 

The wordpress function bloginfo('template_directory') returns the template’s path, which when combined with /assets/js/main.js forms the complete Javascript file location on the server.

If the source is external, we specify the “src” attribute to the external url like src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"

Line 144: Bootstrap Javascript File Inclusion Tag

This script file is necessary for using Bootstrap. It works together with the Bootstrap <link> CSS file inclusion tag in wordpress header file.

Line 147: Internal Javascript File Inclusion Tag

If you want to use your own Javascript files for custom user interactions, be sure to include them here.