Sign in


Sign up


Integrating WordPress with MDB

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.

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.1.1.min.js', array(), '2.2.3', 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.1.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 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?

Facebook Twitter Google +

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 25

  • Nama

    Hi! I am a beginner here but I am trying to understand: after we created function.php how is it connected to our code? I mean is there something in header.php or somewhere that tells the files "here, use this function in the theme"?

  • Nama

    I am using NetBeans to apply these tutorials and everything was going good until this one. I copied and pasted the Carousel theme code but it isn't compiled correctly. And in NetBeans the two files: bootstrap.css and bootstrap.min.css have exclamation mark and a message (Error parsing file.) Any suggestions what could I do to fix this? Thank you.

  • Guilherme Enzo

    Parabéns!! Espero um dia chegar ao seu nível de desenvolvimento e criar minhas propiás bibliotecas, mais sei que é um trabalho árduo e demorado! Enquanto isso aprecio muito o seu trabalho e já estou usando suas bibliotecas!

  • Yuriy

    I have error "mdb.min.js?ver=4.8.1:7 Uncaught TypeError: Cannot read property 'addEventListener' of null at Object.e.init (mdb.min.js?ver=4.8.1:7) at mdb.min.js?ver=4.8.1:7" This is my function.php file "function loading_the_styles_and_scrypts() { wp_enqueue_style( 'fontmincss', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css'); wp_enqueue_style( 'bootstrapcss', get_template_directory_uri() . '/libs/mdb/css/bootstrap.min.css'); wp_enqueue_style( 'mdbcss', get_template_directory_uri() . '/libs/mdb/css/mdb.min.css'); wp_enqueue_style( 'stylecss', get_template_directory_uri() . '/libs/mdb/css/style.css'); wp_enqueue_script( 'jqueryjs', get_template_directory_uri() . '/libs/mdb/js/jquery-3.1.1.min.js'); wp_enqueue_script( 'popperjs', get_template_directory_uri() . '/libs/mdb/js/popper.min.js'); wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/libs/mdb/js/bootstrap.min.js'); wp_enqueue_script( 'mdbjs', get_template_directory_uri() . '/libs/mdb/js/mdb.min.js'); wp_enqueue_script( 'g_maps', 'https://maps.google.com/maps/api/js?key=AIzaSyBtkiHLN0AZ_ZvxQ3ClP-9QguNiZMlQldk'); } add_action( 'wp_enqueue_scripts', 'loading_the_styles_and_scrypts' );"

  • Abelardo

    Hello there, I am an enthusiast of your webpage and of its content: superb. I have followed this tutorial and obviously the jQuery version is 3.1.1; therefore, you should update your tutorial in order to avoid questions about this issue. Thanks for your job, guys! Kindest regards,

  • A E S P H E T I C

    hey loving the tutorial really easy to follow :) i got as far as pasting the code in functions.php and i get the following error in the console: JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js?ver=1.4.1:2 (index):79 GET http://localhost/skatecentral/wp-content/themes/mdbblog/js/tether.min.js?ver=1.0.0 (index):78 GET http://localhost/skatecentral/wp-content/themes/mdbblog/js/jquery-2.2.3.min.js?ver=2.2.3 (index):79 GET http://localhost/skatecentral/wp-content/themes/mdbblog/js/tether.min.js?ver=1.0.0 bootstrap.min.js?ver=1.0.0:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) at bootstrap.min.js?ver=1.0.0:6 at bootstrap.min.js?ver=1.0.0:6 at bootstrap.min.js?ver=1.0.0:6 (anonymous) @ bootstrap.min.js?ver=1.0.0:6 (anonymous) @ bootstrap.min.js?ver=1.0.0:6 (anonymous) @ bootstrap.min.js?ver=1.0.0:6 i don't really know jquery so not sure what went wrong.

  • Dawid Adach

    Dear @mark, indeed our license doesn't allow to create WP Themes based on MDB for sale on markets, however, you can still create WP themes either for yourself or for your customer as an end product.

  • mark

    Good tutorial but the license says that you can not create themes for cms https://mdbootstrap.com/license/

  • 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

  • juanpablodupuy

    its posible integration DIVI with MDB or MDW? Thanks

  • Dawid Adach

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

  • koike

    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

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

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

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us