DEV Community

Cover image for WordPress
Theme Development with the latest Bootstrap 5

WordPress Theme Development with the latest Bootstrap 5

MD Bootstrap
The world's most popular framework for building responsive, mobile-first websites and apps
・2 min read

About the tutorial

We have created the most comprehensive tutorial about WordPress Theme Development with Bootstrap and Material Design

☑ Creating a responsive, mobile-first website
☑ Stunning, modern design
☑ Easy to follow
☑ SEO friendly
☑ Free hosting

You can access the full tutorial roadmap & resources here or explore the videos below.

#01: Environment (PHP/MySQL/WordPress)

In the following video, you will learn how to install PHP and MySQL using XAMP. Afterward, we will create a new instance of WordPress.

#02: Theme (Using CLI)

Once we have WordPress up and running locally we can create new theme. You can either create empty starter (without any CSS nor JS) or use predefined starters which comes with preinstalled MDB package.

In this section we will show you how to easily create WordPress theme with single command. (At the bottom of the page we will also show you two alternative ways to create an empty theme)

#03: Deployment (coming soon)

Using MDB CLI you can easily create and deploy WordPress. With a single command, your website will be published on the Internet.


#04: Blog Homepage

In the following video you will learn how:

  • Add custom styles to your theme
  • Import new libraries to your theme
  • Change configuration of your theme (add feature image support)
  • Use WordPress Loop

#05: Blog Post Page

In the following video you will learn how:

  • Create WordPress template hierarchy
  • Build WordPress loop for single posts

#06: WooCommerce Product Page

In the following video you will learn how:

  • Install WooCommerce
  • Add support for WooCommerce in our theme
  • Work and adjust WooCommerce hooks
  • Work and adjust WooCommerce templates

#07: WooCommerce ShopPage

In this tutorial we will learn how to create a WooCommerce shop page.

Additional resources

Learn web development with our learning roadmap:
🎓 Start Learning

Join our mailing list & receive exclusive resources for developers
🎁 Get gifts

Join our private FB group for inspiration & community experience
👨‍👩‍👧‍👦 Ask to join

Support creation of open-source packages with a STAR on GitHub
GitHub Stars

Discussion (0)