Creating a WordPress theme with Bootstrap

A new site launched this week that walks its users through the process of building a WordPress theme with the Bootstrap framework. The site is BootstrapWP.com and the Bootstrap WordPress theme developer, Brad Williams, has spent the last few months recording and writing the step-by-step tutorials for the site.

What will you learn

The site starts off from the very beginning of the WordPress theme development process by downloading a popular starter theme. From there, Brad takes you through the process of adding the Bootstrap framework to your WordPress theme. In these tutorials you will learn how to use Bootstrap within WordPress too:

• Use the Bootstrap navbar as the main menu
• Use the responsive grid system throughout your WordPress template files
• Use Bootstrap classes to style the WordPress search form
• Update the pagination markup to use Bootstrap
• Turn default buttons and links into Bootstrap buttons

Throughout the WordPress theme development process you will also learn how to create new WordPress page templates that include:

• Full width page template
• Filterable portfolio page template
• Built-in contact form page template
• Left sidebar page template

While creating these new page templates you will also learn how to add other third party JS and CSS scripts to your WordPress theme. These include scripts like Isotope, which will give your portfolio items some animation as your theme users sort and filter the listed items.

You will also learn how to include the Font Awesome toolkit, which will allow you to use 479 different icons throughout your WordPress theme. One tutorial goes over how to use the Font Awesome icons in the post meta section of the blog post. This adds a nice extra touch to your WordPress theme.

Once you get what Brad calls the Base responsive WordPress theme developed, you move on to custom post types and adding a theme options panel. The custom post type that will be added is for a Portfolio section within your WordPress theme. You will even learn how to use the Isotope JS script and the Bootstrap buttons to filter your portfolio items.

As of now, the last tutorial series is adding a Theme Options panel to your WordPress theme. This series goes over how to add an option panel with all kinds of different options to allow your theme users the ability to make changes to the theme. Some of the options include:

• Adding different stylesheets to pick from
• Option for static and fixed navbar
• Custom logo upload feature
• Changing the portfolio columns
• Adding social icons with Font Awesome
• Drag and drop homepage builder

Once you get to this point you have a very nice Bootstrap WordPress theme will all kinds of features.

Who is it for?

If you are interested in learning how to build a WordPress theme, then this course is for you! A little knowledge of HTML/CSS would be helpful, but I think you could get by without due to how Brad explains everything in his videos. Creating a WordPress theme with the Bootstrap WordPress tutorials on BootstrapWP is a fun way to learn!