- 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)
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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; " > <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"> © <?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">×</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 & newsletters. No Spam. Just good stuff. We respect your privacy & 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> |
To show the structure, here we repeat the file without showing the details:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<?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"> © <?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> |
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, thusmenu_class
specifies the classes for the<ul>
tag.
Line 64: Copyright Statement
Here we use the following special functions:
HTML ©
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.