Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

MDB footer displayed on different devices

Footer


Written 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 center-on-small-only primary-color-dark">

        <!--Footer Links-->
        <div class="container-fluid">
            <div class="row">

                <!--First column-->
                <div class="col-md-3 col-md-offset-1">
                    <h5 class="title">ABOUT MATERIAL DESIGN</h5>
                    <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>

                    <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
                </div>
                <!--/.First column-->

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

                <!--Second column-->
                <div class="col-md-2 col-md-offset-1">
                    <h5 class="title">First column</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-md-2">
                    <h5 class="title">Second column</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-md-2">
                    <h5 class="title">Third column</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">
                © 2015 Copyright: <a href="http://www.MDBootstrap.com"> 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-md-2 col-md-offset-1">
    <h5 class="title">First column</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:


<!--Second column-->
<div class="col-md-2">
    <h5 class="title">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'). 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?


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

  • User avatar

    david.howlett

    The final code for the Wordpress MDB tutorial doesn't work: http://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/wordpress/_zip/I-7.zip Please can you fix.

  • Dawid Adach

    @david.howlett It's fixed now, thanks for letting me know.

  • User avatar

    Isaac

    Would u someday put up a tutorial on how to create a forum or social networks using wordpress?

  • Dawid Adach

    Isaac, currently we do not plan such thing however you can check bbPress or WP Symposium Pro Social Network plugins

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.