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.2.1.min.js', array(), '3.2.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.2.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 a domain. Since 2 years as a co-founder of mdbootstrap.com & brandflow.net is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Comments 34

  • adlib

    Is there an error in jQuery impementation? You load youe jQuery version, but you do not deregister WP default jQuery version. So in that way there are two jQuery versions running.

      • Dawid Adach

        Dear adlib, WordPress society is divided by whether you should remove default jquery or not. The fact that WordPress loads jQuery in noConflict mode, there’s the possibility of increasing the support load for other developers. FYI - noConflict mode means that the standard $ shortcut used in jQuery. There is a very good reason WordPress ships with its own version of jQuery: all developers can safely rely on it. Therefore, although you could deregister original jquery I prefer not to do so. I prefer to trade website speed (leaving jquery require extra script to be loaded, however once loaded it will be cached by browser) over stability (using only the newest jquery can cause a lot of issues if some core wp functions will be removed from newer version of jQ).

  • Robert Achmann

    Hey guys. I'm in Windows 10, using Chrome version as of today. When I paste the carousel code in, it doesn't render properly - the ordered list just lists the numbers, the images display in order below the numbered list, and after that 'previous next' appears at the bottom I've followed the tutorial to the letter for wordpress, and it doesn't display the carousel. It just displays all the pieces separately. Also, anytime I try to 'View Preview' on ANY page of your site, it opens a new tab and spins, and finally reports: 504 Gateway Time-out nginx/1.12.2

  • Joel Miguel Valente

    Hello, I've noticed that in the example they show this line: "wp_enqueue_script ('jQuery', get_template_directory_uri (). '/js/jquery-3.1.1.min.js', array (), '2.2.3', true);" when in the file to download in the case MDB-Free.zip, bring the jquery-3.2.1.min.js, you have to modify the example so that you select the corresponding file!

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

      • Remy

        How can I fix this error? I tried linking the right version of jquery in the function.php file(by changing it to 3.2.1) but got further errors so I tried changing the version of jquery to the older version (3.1.1) by downloading it and replacing it. what is the best way?

  • 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