Integrating WordPress with MDB

Responsive MDB website displayed on different devices

Author: Dawid Adach

-

In order to user MDB elements in our theme, we have to include MDB libraries as well as all references to 3rd party libraries (like jQuery).

1. MDB files

First, let's download MDB files. Click here to download latest MDB version. Unzip package, and copy css, font, img and js folders into your theme directory.

MDB files directories

2. Linking CSS/JS

Usually, links to CSS files are located between <header></header> tags and JS links in the bottom of our website. However, in a case of WordPress template we have to do it differently. Let's create a new file, called functions.php and place following code inside:


<?php

/**
 * Include CSS files 
 */
function theme_enqueue_scripts() {
        wp_enqueue_style( 'Font_Awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
        wp_enqueue_style( 'Bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
        wp_enqueue_style( 'MDB', get_template_directory_uri() . '/css/mdb.min.css' );
        wp_enqueue_style( 'Style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery-3.3.1.min.js', array(), '3.3.1', true );
        wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/popper.min.js', array(), '1.0.0', true );
        wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );
        wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array(), '1.0.0', true );

        }
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

?>
            

New functions

theme_enqueue_scripts() - this is our (you can change the name if you want) custom function which is responsible for loading resources files.

wp_enqueue_style() - WP function responsible for loading CSS

wp_enqueue_script() - WP function responsible for loading JS

add_action() - WP function which "executes" our function (theme_enqueue_scripts()) at certain moment of loading webpage.

Now when our CSS and JS are linked we can finally start real development with use of MDB components. Before we will move to next lesson let's verify that our CSS and JS files are linked properly. Go to MDB Carousel documentation page, copy code of basic carousel and paste it inside index.php between <?php get_header(); ?> and <?php get_footer(); ?>.

Your index file should look similar to mine:


<?php get_header(); ?>
           
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-1z" data-slide-to="1"></li>
        <li data-target="#carousel-example-1z" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
        <!--First slide-->
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">
        </div>
        <!--/First slide-->
        <!--Second slide-->
        <div class="carousel-item">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide">
        </div>
        <!--/Second slide-->
        <!--Third slide-->
        <div class="carousel-item">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
        </div>
        <!--/Third slide-->
    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->

<?php get_footer(); ?>

              

Now refresh our blog. You should see nice working example of a carousel (exactly same as on MDB Carousel documentation page). If results are different then open website in Chrome (I recommend to use it all the time), press F12 (Windows) / Cmd + Opt + I (OS X) or open the Chrome menu Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.

In case you make any typo/error you should see an error in console:

Console error

Don't want to use Chrome?

If you can't or don't want to use Chrome that's fine. Other browsers also have a similar tool to debug website. You just have to figure out how to open them in your browser.

In this case, I made a typo - instead of importing jquery-3.3.1.min.js file I tried to import jquery-2.2.4.min.js which doesn't exist. As a result, none of the jQuery function used in our code could work. Developers console will be your best friend along with our course, so I suggest learning by heart how to open it.

If you code works fine let's remove carousel code so that we could real development. Revert file index.php to stage from begining of this lesson (it should have only 2 lines calling <?php get_header(); ?> and <?php get_footer(); ?>

Lesson summary

We have connected MDB CSS and JS files into our template so that we could use all MDB components. We've also learned how to open and use Developers console to debug our webpage.


Previous lesson Download Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...