Web - [Tutorial #13] Wordpress Footer File Detailed Explanation

Contents

Introduction
The Structure
Code Explanation

Line 1-11: Description
Line 14: WordPress Footer Function
Line 46-67: <Footer> section

Line 49: the container class for Bootstrap
Line 50,54,63: the Bootstrap column class
Line 51,52: Hyperlinked Font Awesome Social Icons
Line 55-61: Wordpress Menu Usage
Line 64: Copyright Statement

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

Line 144: Bootstrap Javascript File Inclusion Tag
Line 147: Internal Javascript File Inclusion Tag

Introduction

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:

<?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 Multitopics
 */
?>


<?php wp_footer(); ?>


<!-- SIGN UP SECTION
================================================== -->
<section id="signup" data-type="background" data-speed="6" class="section-bg" 
	style="
	background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('/wp-content/themes/multitopics/assets/img/wp_footer.jpg');
	background-repeat: repeat;
        background-position: center 0px;
	background-size: cover;
	"
>
        <div class="container">
                <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">
				<button class="btn btn-success btn-lg btn-block btn-footer" data-toggle="modal" data-target="#myModal">

				<?php if(get_locale() == 'zh_TW') : ?>
					訂閱我的電子報
				<?php else : ?>	
                                        Subscribe My Newsletter
				<?php endif; ?>


                                </button>
                        </div><!-- end col -->
                </div><!-- row -->
        </div><!-- container -->
</section><!-- signup -->


<!-- FOOTER
================================================== -->
<footer>
        <div class="container">
                <div class="col-sm-3">
			<a href="https://github.com/yaulaannl" class="fa fa-lg fa-github"></a>
			<a href="https://www.facebook.com/modernblackhand/" class="fa fa-lg fa-facebook"></a>
                </div><!-- end col -->
                <div class="col-sm-6">
                        <?php
                                wp_nav_menu( array(
                                        'theme_location'        => 'footer',
                                        'container'                     => 'nav',
                                        'menu_class'            => 'list-unstyled list-inline'
                                ) );
                        ?>
                </div><!-- end col -->
                <div class="col-sm-3">
                        <p class="pull-right"> &copy; <?php echo date('Y'); ?>  <?php bloginfo('name'); ?></p>
                </div><!-- end col -->
        </div><!-- container -->
</footer>


<!-- modal: search
================================================== -->
<div class="modal fade modal-footer" id="mySearch">
  <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-sm">
                <div class="modal-content">
			<?php get_search_form(); ?>	
                </div><!-- modal-content -->
        </div><!-- modal-dialog -->
  </div>
</div><!-- modal -->


<!-- modal: subscribe
================================================== -->
<div class="modal fade modal-footer" id="myModal">
        <div class="modal-dialog modal-sm">
                <div class="modal-content">

                        <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title" id="myModalLabel">
				<?php if(get_locale() == 'zh_TW') : ?>
					只需輸入您的姓名和電子郵件就可接收我們的最新文章：	
				<?php else : ?>	
					Simply enter your name and email to receive our latest posts:
				<?php endif; ?>
				</h4>
                        </div><!-- modal-header -->

                        <div class="modal-body">

				<!--==================== Form Location ========================= -->
				<?php echo do_shortcode('[mc4wp_form id="33"]'); ?>
				<!--==================== Form Location ========================= -->

                        </div><!-- modal-body -->

                                <hr>

                                <p class="modal-disclaim">
				<?php if(get_locale() == 'zh_TW') : ?>
				通過提供您的電子郵件，你同意接受不定期的推薦郵件和電子報。我們沒有垃圾郵件。只有好東西。我們尊重您的隱私權, 你可以隨時取消訂閱。	
				<?php else : ?>	
By providing your email you consent to receiving occasional promotional emails &amp; newsletters. No Spam. Just good stuff. We respect your privacy &amp; you may unsubscribe at any time.
				<?php endif; ?>
				</p>

                </div><!-- modal-content -->
        </div><!-- modal-dialog -->
</div><!-- modal -->

<!-- MODAL for post popup  --> 

<div class="modal fade" id="postModal"> 
  <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
    </div> <!-- modal content --> 
  </div> <!-- modal dialog -->
</div>





<!-- BOOTSTRAP CORE JAVASCRIPT
         Placed at the end of the document so the pages
         load faster!
================================================== -->


<!-- jQuery library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- main javascript theme file -->
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>




</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

<?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 Multitopics

<?php wp_footer(); ?>

<!-- SIGN UP SECTION

================================================== -->

<section id="signup" data-type="background" data-speed="6" class="section-bg"

style="

background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('/wp-content/themes/multitopics/assets/img/wp_footer.jpg');

background-repeat: repeat;

background-position: center 0px;

background-size: cover;

<?php if(get_locale() == 'zh_TW') : ?>

訂閱我的電子報

<?php else : ?>

Subscribe My Newsletter

<?php endif; ?>

</button>

</div>

</div>

</div>

</section>

<!-- FOOTER

================================================== -->

</div>

<?php

wp_nav_menu( array(

'theme_location' => 'footer',

'container' => 'nav',

'menu_class' => 'list-unstyled list-inline'

) );

</div>

</div>

</div>

</footer>

<!-- modal: search

================================================== -->

<?php get_search_form(); ?>

</div>

</div>

</div>

</div>

<!-- modal: subscribe

================================================== -->

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

<?php if(get_locale() == 'zh_TW') : ?>

只需輸入您的姓名和電子郵件就可接收我們的最新文章：

<?php else : ?>

Simply enter your name and email to receive our latest posts:

<?php endif; ?>

</h4>

</div>

<?php echo do_shortcode('[mc4wp_form id="33"]'); ?>

</div>

<hr>

<?php if(get_locale() == 'zh_TW') : ?>

通過提供您的電子郵件，你同意接受不定期的推薦郵件和電子報。我們沒有垃圾郵件。只有好東西。我們尊重您的隱私權, 你可以隨時取消訂閱。

<?php else : ?>

By providing your email you consent to receiving occasional promotional emails & newsletters. No Spam. Just good stuff. We respect your privacy & you may unsubscribe at any time.

<?php endif; ?>

</p>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- BOOTSTRAP CORE JAVASCRIPT

Placed at the end of the document so the pages

load faster!

================================================== -->

</body>

</html>

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

<?php
/**
 * File description here
 * @package Multitopics
 */
?>

<!-- function that adds wordpress footer content -->
<?php wp_footer(); ?>


<!-- SIGN UP SECTION : will describe later
================================================== -->
<section id="signup" ..>
..
</section><!-- signup -->


<!-- FOOTER
================================================== -->
<footer>
        <div class="container">
                <!-- Bootstrap columns. Divided as 3:6:3 -->
                <div class="col-sm-3">
                        <!-- hyperlinked Font Awesome icons -->
			<a href="https://github.com/yaulaannl" class="fa fa-lg fa-github"></a>
			...
                </div><!-- end col -->
                <div class="col-sm-6">
                        <!-- wordpress footer menu --> 
                        <?php
                                wp_nav_menu(...);
                        ?>
                </div><!-- end col -->
                <div class="col-sm-3">
                        <!-- copyright statement -->
                        <p class="pull-right"> &copy; <?php echo date('Y'); ?>  <?php bloginfo('name'); ?></p>
                </div><!-- end col -->
        </div><!-- container -->
</footer>


<!-- modal: search : will describe this later
================================================== -->
<div class="modal" ...>
...
</div><!-- modal -->


<!-- modal: subscribe : will describe this later
================================================== -->
<div class="modal" ...>
...
</div><!-- modal -->

<!-- MODAL for post popup. Will describe this later  --> 
<div class="modal" ...> 
  ...
</div>





<!-- BOOTSTRAP CORE JAVASCRIPT
         Placed at the end of the document so the pages
         load faster!
================================================== -->


<!-- jQuery library -->
<script type="text/javascript" ...></script>


</body>
</html>

<?php

/**

* File description here

* @package Multitopics

<?php wp_footer(); ?>

<!-- SIGN UP SECTION : will describe later

================================================== -->

</section>

<!-- FOOTER

================================================== -->

...

</div>

<?php

wp_nav_menu(...);

</div>

</div>

</div>

</footer>

<!-- modal: search : will describe this later

================================================== -->

...

</div>

<!-- modal: subscribe : will describe this later

================================================== -->

...

</div>

...

</div>

<!-- BOOTSTRAP CORE JAVASCRIPT

Placed at the end of the document so the pages

load faster!

================================================== -->

</body>

</html>

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’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:

HTML &copy prints out the special copyright symbol. See this page for the complete HTML symbol list.
PHP function date('Y') prints out the current date. The 'Y' parameter tells the function to only return year.
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.

[Tutorial #13] WordPress Footer File Detailed Explanation

Introduction

The Structure

Code Explanation

Line 1-11: Description

Line 14: WordPress Footer Function

Line 46-67: <Footer> section

Line 49: the container class for Bootstrap

Line 50,54,63: the Bootstrap column class

Line 51,52: Hyperlinked Font Awesome Social Icons

Font Awesome’s Github icon page.

Line 55-61: Wordpress Menu Usage

Line 64: Copyright Statement

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

Line 144: Bootstrap Javascript File Inclusion Tag

Line 147: Internal Javascript File Inclusion Tag

Subscribe My Newsletter

Simply enter your name and email to receive our latest posts: