Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

Responsive MDB website displayed on different devices

Integrating WordPress with MDB

Written by Dawid Adach ,

Final result preview
Live preview

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 and js folders into your theme directory.

iOS 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:


 * Include CSS files 
function theme_enqueue_scripts() {
        wp_enqueue_style( 'Font_Awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/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-2.2.3.min.js', array(), '2.2.3', true );
        wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/tether.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-1" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-1" data-slide-to="1"></li>
        <li data-target="#carousel-example-1" data-slide-to="2"></li>

    <div class="carousel-inner" role="listbox">
        <!--First slide-->
        <div class="carousel-item active">
            <img src="https://mdbootstrap.com/images/slides/slide%20(7).jpg" alt="First slide">
        <!--/First slide-->

        <!--Second slide-->
        <div class="carousel-item">
            <img src="https://mdbootstrap.com/images/slides/slide%20(8).jpg" alt="Second slide">
        <!--/Second slide-->

        <!--Third slide-->
        <div class="carousel-item">
            <img src="https://mdbootstrap.com/images/slides/slide%20(9).jpg" alt="Third slide">
        <!--/Third slide-->

    <a class="left carousel-control" href="#carousel-example-1" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    <a class="right carousel-control" href="#carousel-example-1" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
<!--/.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-2.2.3.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 you 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.

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

Previous lesson Download Live preview Next lesson

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 6

  • User avatar

    Muritu James

    Hello over there. I thank you for your continued hard work and detailed documentation you provided. I started material design for bootstrap about a week ago and I have seen significant progress as far as my design is concerned. I aspire to do more with MDB and soon I will upgrade to pro version to enjoy all features. Thanks again.

  • Dawid Adach

    Muritu James, I am happy to hear that - this is our pleasure to see that MDB helps our users to develop theirs' skills :)

  • User avatar


    Thank you, Dawid. I want to work carousel, but I couldn't. I found and read this tutorial, and the carousel worked! I didn't know pointing styles and scripts in function.php.

  • Dawid Adach

    @koike, please check our new project http://mdwp.io , it supports carousel out of the box ;)

  • User avatar


    its posible integration DIVI with MDB or MDW? Thanks

  • User avatar

    Bartłomiej Malanowski

    Technically, you should be able to integrate MDB with DIVI. We cannot confirm that because we've never tried MDB with DIVI. Also, please keep in mind that our license doesn't allow you to create Wordpress themes for sale

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.