Integrating WordPress with MDB

Responsive MDB website displayed on different devices

Author: Dawid Adach

-

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

1. Installing the MDB libraries

First, let's download the MDB libraries. Click here to download the latest MDB version. Unzip the package, and copy the 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 the case of WordPress templates we have to do it differently. Let's create a new file, called functions.php and place the 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 custom function which is responsible for loading resources files. (You can change the name if you want).

wp_enqueue_style() –– the WP function responsible for loading CSS code

wp_enqueue_script() –– the WP function responsible for loading JS codes

add_action() –– WP function which "executes" our function (theme_enqueue_scripts()) at a certain moment of the webpage loading process.

Now when our CSS and JS codebases are linked we can finally start real development using the MDB components. Before we move to next lesson, let's verify that our CSS and JS files are linked properly. Go to the MDB Carousel documentation page, copy the code for a 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 a nice working example of a carousel (exactly the same as on the MDB Carousel documentation page). If your results are different then open the website in Chrome (I recommend to use it all the time), press F12 (Windows) / Cmd + Opt + I (OS X) or open the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.

In case you make any typos/error syou should see an error message in the 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 websites. 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 functions used in our code could work. The developers console will be your best friend along with our course, so I suggest learning right now how to to open it.

If your code works fine, then let's remove the carousel code so that we can move onto some real development. Revert the file index.php how it was at the beginning 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 of the MDB components. We've also learned how to open and use the developers console to debug our webpage.


Rate this lesson

Previous lesson Download Next lesson

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

About the 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...