Sign in


Sign up


Footer

by Dawid Adach,

Final result preview
Live preview

In this, we will add a footer and include three menus like we did with navbar menu (so that we could control them from WP admin panel). Let's add the following code to footer.php file at the beginning of the file:


<!--Footer-->
<footer class="page-footer light-blue accent-4 center-on-small-only">
       <!--Footer Links-->
    <div class="container-fluid">
        <div class="row">
            <!--First column-->
            <div class="col-lg-3 col-md-6 ml-auto">
                <h5 class="title mb-3">Footer Content</h5>
                <p>Here you can use rows and columns here to organize your footer content.</p>
            </div>
            <!--/.First column-->

                <hr class="w-100 clearfix d-sm-none">

            <!--Second column-->
            <div class="col-lg-2 col-md-6 ml-auto">
                <h5 class="title mb-3">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Second column-->

            <hr class="hidden-md-up">

            <!--Third column-->
            <div class="col-lg-2 col-md-6 ml-auto">
                <h5 class="title mb-3">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Third column-->

            <hr class="hidden-md-up">

            <!--Fourth column-->
            <div class="col-lg-2 col-md-6 ml-auto">
                <h5 class="title mb-3">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Fourth column-->
        </div>
    </div>
    <!--/.Footer Links-->

    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid">
            © 2017 Copyright: <a href="https://www.MDBootstrap.com"  rel="nofollow"> MDBootstrap.com </a>

        </div>
    </div>
    <!--/.Copyright-->

</footer>
<!--/.Footer-->

This will generate footer like this one:

Basic, blue MDB footer

It looks great, but it's completely static. Since we already know how to make our content dynamic, let's register three new menus, one for each out of 3 columns. Go to functions.php and replace the following code:


  // Navigation Menus
  register_nav_menus(array(
    'navbar' => __( 'Navbar Menu')
    ));
  

with this:


  register_nav_menus(array(
    'navbar' => __( 'Navbar Menu'),
    'footer1' => __( 'Footer #1 Column'),
    'footer2' => __( 'Footer #2 Column'),
    'footer3' => __( 'Footer #3 Column')
    ));
  

We have just registered 3 new menus. Now we have to replace the static code of footer with WP functions to display menu dynamically. Go to footer.php and replace the following part:


<!--Second column-->
<div class="col-lg-2 col-md-6 ml-auto">
    <h5 class="title mb-3">Links</h5>
    <ul>
        <li><a href="#!">Link 1</a></li>
        <li><a href="#!">Link 2</a></li>
        <li><a href="#!">Link 3</a></li>
        <li><a href="#!">Link 4</a></li>
    </ul>
</div>
<!--/.Second column-->

with:


            
<div class="col-lg-2 col-md-6 ml-auto">
    <h5 class="title mb-3">First column</h5>
    <?php
    wp_nav_menu( array(
    'menu'              => 'footer1',
    'theme_location'    => 'footer1',
    'depth'             => 1
    )
    );
    ?>
</div>
<!--/.Second column-->

Open admin menu and navigate to Appearance -> Menus, create a new menu, call it Footer 1 and add some links to it. Once it's done, switch to Manage Locations tab, and assign a newly created menu to Footer #1 Column location. Open your blog, now you can see that links which you have added are displayed in the footer.

Now do the same for two other columns. Don't forget to adjust numbers (2 and 3 instead of 1) in wp_nav_menu() function arguments ('menu' & 'location'). You can (and should) adjust also column title. I used simple "First column:" to make navigation through code easier for you but you could definitely change it to something more descriptive or remove it. If you aren't able to succeed with it, you can download code of this lesson at the bottom of the page and compare with my files.

Congratulations!

You have finished our first tutorial and built you first WordPress theme. Our template isn't ready, though. So let's jump to our second part where we will fulfill gaps and learn more advanced technics. Click here to start our next course.


If something doesn’t work as expected, you can download a final code for this lesson here:

Previous lesson Download Live preview Next Tutorial

Do you want to share?

Facebook Twitter Google +

About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise class systems for the biggest companies within domain.

Currently, Dawid’s main focus is design & web development. He designs and develop websites using Adobe Photoshop, HTML5 / CSS3, bootstrap, JS, Meteor, AJAX, PHP and SQL.

Comments 4

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us