Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


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.

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.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-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 src="https://mdbootstrap.com/img/Photos/Slides/img%20(18).jpg" alt="First slide">
        </div>
        <!--/First slide-->
        <!--Second slide-->
        <div class="carousel-item">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg" alt="Second slide">
        </div>
        <!--/Second slide-->
        <!--Third slide-->
        <div class="carousel-item">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(20).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-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 8

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

  • User avatar

    mark

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

  • 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

  • User avatar

    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 ;)

  • User avatar

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

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

Leave a reply

Anonymous User

Wordpress tutorial

0%

Progress: 0%

Sign up to follow your progress and get extra benefits fro our tutorial.

Sign up for free