From Bootstrap to WordPress
Many developers who build custom WordPress themes like to start with some sort of front-end development framework that provides them with out of the box CSS grids, responsive styles, common element styling and even JavaScript components.
Of the many frameworks that provide these features, Bootstrap ranks among the most popular and in this course we will walk you through everything you need to know about setting up a custom WordPress theme that allows you to have full access to all Bootstrap features in your WordPress themes.
We’ll show how to setup the basic theme files, properly import Bootstrap CSS and JS, integrate Boostrap menu styles with WordPress custom menus managed from the admin area, create default templates using common page layout design patterns, and call some of Bootstraps JS components like off canvas content and slideshows.
Setup a Bootstrap Theme
In order to get started converting a site from static Bootstrap into WordPress we will need to make sure that we have all of our files uploaded to the right place and some basic WordPress code added. In this first stage we begin to set everything up and import the Bootstrap code into a WordPress theme.
From Bootstrap to WordPress Project Overview – 1:34
Setup Your WordPress Development Environment – 2:50
Create the Basic WordPress Theme Files – 4:48
Add Bootstrap CSS via the functions.php File – 6:31
Add Bootstrap JS via the functions.php File – 8:11
Creating Bootstrap Navigation in WordPress – 12:50
Adding Ability for Dropdown Navigation – 3:28
Install Bootstrap Shortcode Plugin – 1:28
Create Bootstrap Styled Theme Templates
Once we have everything setup properly, we can move into coding the actual Bootstrap styled templates. This involves combining the Bootstrap markup along with specific WordPress functions and coding conventions. At the end of this stage we will have a number of different templates built out to use in our theme.
The Header and Footer Templates – 4:24
Creating a static front page – 4:21
Adding Widget Areas to the Front Page – 8:17
Creating a Static Page Template with Sidebar – 9:51
Creating a Full Width Static Page Template – 1:52
Creating a Grid with Shortcodes – 4:29
Creating a Basic Blog Listing Template – 9:29
Creating a Single Blog Listing Page – 2:48
Create a Blog Archive Page – 1:51
Creating a Portfolio Landing Page – 18:28
Creating a Portfolio Single Page – 11:48
Revisit Our Default Index.php Template – 0:57
Maintaining Your Theme as a Parent Theme – 0:52
Add Bootstrap Components to WordPress Theme
In our final stage we begin to add in different JavaScript components into our theme like slideshows and off canvas content.
How to Integrate Bootstrap JavaScript Components with a WordPress Theme – 2:09
Preparing to Add a Bootstrap Slideshow Carousel – 3:39
Setting Up a Bootstrap Slideshow Carousel – 7:11
Finishing Up Our Bootstrap Slideshow Carousel – 8:11
Dropdown Bootstrap Menus and the Walker Class – 2:49
How to Add Bootstrap Modal Windows to Your WordPress Theme – 6:08
Adding Off Canvas Content to a WordPress Theme – 7:27
From Bootstrap to WordPress Outro – 0:55