Sign in

Sign up

Bootstrap WordPress tutorial – building a responsive theme

by Dawid Adach,

What is it about?

What comes out of integration Material Design and Bootstrap? Powerful and beautiful framework - MDB. Imagine what will happen when we combine MDB with the most common blogging platform in the world - WordPress? That will be outstanding.

Along these tutorials, we will teach you how to build elegant and responsive web pages like blog, e-commerce, landing page, etc. This comprehensive tutorial contains everything you have to know about WordPress Theme development, starting with setting the environment, through WordPress installation and configuration, setting up theme construction, development including custom widgets and functions. The tutorial is divided into multiple lessons. If you are new, you should start from the very first lesson, however, if you already have some experience you can start from more advanced lessons.

See what you are going to create:

Full image carousel

See live preview

Half page carousel

See live preview

If you want to get more excited and see what possibilities offers you MDB, you can read more about it here:

More about MDB

Or you can jump directly into the tutorial and start to create some amazing things right now!

Start learning

Each of the following lessons will progressively guide you on your Bootstrap journey and will familiarize you with the most crucial web development aspects.

Beginner (Level 1)

Pre Tutorial - Server configuration

Before we start creating amazing websites, we have to learn how to install and configure our development environment. This tutorial will teach you how to run your local server, database and finally how to install WordPress on your server.

Table of contents:

1. Server - installation and configuration

2. Database - installation and configuration

3. Wordpress - installation and configuration

Start tutorial

Beginner (Level 2)

Blog Homepage

Within this tutorial we will learn how to create and activate WordPress theme. We will also create homepage of our blog theme.

Table of contents:

1. Wordpress Theme Creation

2. Basic structure

3. Integrating WP with MDB

4. Navbar

5. Main loop

6. Sidebar

7. Footer

Start tutorial

Beginner (Level 3)

Blog Post Page + features

One our home page is ready it's high time to polish blog post. We will also learn more advanced WordPress techniques like how to create pagination and custom widget areas.

Table of contents:

1. Single Post

2. get_template_part()

3. Pagination

4. Widget Area

Start tutorial

Intermediate (Level 1)

Advanced Landing Page - Full page image carousel

Move on to another level by learning about full page image carousels - incredibly popular designs

Table of contents:

1. Baseline

2. Adjusting navbar & footer

3. Dynamic carousel based on posts

Start tutorial

Advanced (Level 1)

Multipurpose web page - Half-page image carousel

Create outstanding main page combining both - half page carousel as well as famous MDB cards to present the best feature of yours.

1. Initial structure

2. Transparent scrolling navbar

3. Dynamic half carousel

4. MDB Cards as posts

Start tutorial

Advanced (Level 2)

Coming soon...

Looking for more? We are releasing new tutorials regullary. Subscribe to our newsletter and don't miss any 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 & is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Comments 75

  • WPThemeTank

    Wow, great initiative Dawid. It's really helpful.. Best wishes for your good work! :)

  • Mahar

    Thanks for your tutorial. Very usefull framework for building the website. I will keep this for my reference.

  • Vaibhav Parmar

    Hi, I am read your licence policy and your free version use MIT Licence so i can use your framework in a theme/template for CMS(Wordpress) sale so that I am downloaded your free version and open it and check your License.pdf that available in your package but I note that one point, In your License.pdf, does not give any rights of Creation of a theme/template for CMS sale for free version please check this screenshot so I am little bit confuse that can I use your free version of implimate of commercial wordpress theme And your framework is awesome. thank you.

  • Robert Achmann

    1. Live Preview Still doesn't work: Error establishing a database connection 2. The links to the next part of this tutorial goes to a different tutorial instead of the next part

  • Arian Saputra

    excellent,We are waiting for the advanced tutorial :) thanks for all :) i love mdbootsrap

  • Hazhir

    hello again , sorry for bothering you guys so much specially Dawid :) , forgive me sir :) , i have a problem showing subMenus in this tutorials the menu works just fine but as soon as i make a sub menu nothing show up, i have already made the $depth = 4 but nothing changes i have also read the MDBBootstrapNavMenuWalker() function but couldn't understand what's preventing the menu from showing sub menus! thanks again you guys ROCK!

  • Hazhir

    hello Dawid Adach , nice tutorial really, thank you for making such great tutorials, i was wondering could you make a lesson for how to style the comment section also the widget sidebar ( i mean the texting and other widgets like the search and archives) to look materialized. and i tried to style the comment section in wordpress it was really painful and at last i couldn't even succeded . thank you again

      • Hazhir

        hi again :) , i already made the comment section but one thing when i Enqueue the "mdb.js" file in to the functions.php the submit button to submit the comment doesn't work but when i don't enqueue this mdb.js file everything works like a charm? do you know what could have made this problem? thank you again

      • Hazhir

        yes , there are no errors but the submit button doesn't work at all, i mean when i click on it , nothing happens but when i don't enqueue the "mdb.js" file the submit button works :) i don't know what is preventing the submit button in the mdb.js file to work. thanks again for your helps

  • Darshan Saroya

    Being a WordPress Developer I am very curious to make MDBootstrap WordPress theme. This tutorial will help a lot for me. Soon with my Material design WordPress theme :-) .

  • herve

    Hello, I find very interesting your vision and I try to integrate it into a wordpress site. The latter already has a theme. So I integrated your wp_enqueue_style () into the functions.php file I then went into an article and copied the code from a panel ( The layout is not displayed! The files are loaded! thank you for helping me suggestion make panels with rounded box and maybe a plugin wp or joomla to facilitate integration

      • Dawid Adach

        Dear Herve, are you sure that you have paste snippets in a file which is being rendered by WordPress? Once page is generated can you verify with inspector whether correct HTML code is there? Otherwise try to place them in index.php file and retry making sure that you include both header and footer to your index file.

      • herve

        Thank you for your reply. I'm in a theme and I can reproduce the same thing in the index.php file Hello, It seems to me that the files are well there and I made a copy / paste in the HTML editor of wordpress. Is it compatible with all themes ?? If you see something abnormal. The url of the test site Thanks

      • Dawid Adach

        Dear herve, when I try to visit i am getting redirected to login page. Could you please either remove restriction for not logged in user or provide me with login an password? You could also send me a source file at d.adach (at)

  • Eric Gould

    Will there be a free and / or premium MDB 4 Wordpress theme that will roll out?

  • michel_tchoutang

    I really appreciate this tutorial. I wish to master a lot more wordpress theme development. So please when will you put the remaining tutorials on that topic?! Thanks a lot for your beautiful, amazing and very useful framework.

      • Dawid Adach

        Dear Michel, thank you. I've just finished rewriting tutorials to the newest version of MDB which took quite some time. I will be working on new tutorials, however, I can't promise you any delivery date. I strongly encourage you to subscribe to our newsletter ( to get notification about new products or tutorials, as well as follow us on our social media profiles: Facebook: Twitter: Google+: Kind regards, Dawid

  • Utsav Chopra

    Hey Dawid, is this bootstrap responsive? I am thinking to go over it and create one theme for my blog. Thanks for this great share.

  • Marcelo Anselmo

    Can I commercialize sites and Wordpress themes with this amazing framework ?

  • Dawid Adach

    Dear @masoud, today we have released new tutorials. I hope you will enjoy them as well :)

  • masoud

    excellent,We are waiting for the advanced tutorial !

  • Dawid Adach

    Dear Jack, within this time we have been working on other things like MDB 4, Material Design for WordPress ( and few more things which we will release soon... :) Don't worry, we didn't forget about this part and we will continue it quite soon.

Leave a Reply to Arian Saputra Cancel reply