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 blue center-on-small-only">
       <!--Footer Links-->
    <div class="container-fluid">
        <div class="row">
            <!--First column-->
            <div class="col-md-3 offset-md-1">
                <h5 class="title">Footer Content</h5>
                <p>Here you can use rows and columns here to organize your footer content.</p>
            </div>
            <!--/.First column-->

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

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


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

  • Dawid Adach

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

  • User avatar

    Isaac

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

  • Dawid Adach

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

  • 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.

Leave a reply

Anonymous User

Wordpress tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free