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 a 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

WWithin 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 regulary. 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...

Leave a reply