Building a WordPress Theme Framework with Bootstrap 3

You know what’s awesome? When you put two things together to create a magical symbiotic harmony. Like peanut butter and jelly. Like mashed potatoes and gravy. This course will explore another dynamic duo: WordPress and Bootstrap 3.
Course info
Rating
(126)
Level
Intermediate
Updated
Apr 17, 2014
Duration
5h 10m
Table of contents
WordPress + Bootstrap
WordPress Theme Development: A Refresher Course
Bootstrap 3
Bootstrapping WordPress: Functions
Bootstrapping WordPress: Header
Bootstrapping WordPress: Footer
Bootstrapping WordPress: Sidebar & Content Area
Using the Theme Customizer
Adding Bootstrap Components
Extending the Bootstrapped Theme
Description
Course info
Rating
(126)
Level
Intermediate
Updated
Apr 17, 2014
Duration
5h 10m
Description

If you build themes on a regular basis, you’re probably always on the lookout for new ways to speed up the process of developing a new theme. Theme and CSS frameworks help you do that, but which one should you use? This course will show you how to integrate Bootstrap 3 into a WordPress theme framework that makes the most of what both have to offer.

About the author
About the author

Chris is a freelance WordPress theme and plugin developer, one half of the design studio Arcane Palette Creative Design, lead developer of WordPress theme shop Museum Themes and Project Manager for the event management plugin Event Espresso. In his free time, he makes electronic music.

More from the author
WordPress Fundamentals: WP_Query and the Loop
Intermediate
1h 45m
May 15, 2015
Get Started With HTML5 Boilerplate
Beginner
58m
Aug 2, 2014
More courses by Chris Reynolds
Section Introduction Transcripts
Section Introduction Transcripts

Bootstrapping WordPress: Functions
When I set out to update Museum Core and change the foundation for it to be based on Bootstrap 3, I knew it would be a big task. What I hadn't anticipated up front was just how much needed to be changed in order to support everything. Basic support for the classes is simple, but adding multilevel menus in expectation for a WordPress theme, pagination support, breadcrumbs, these things require helper functions that extend WordPress Core functionality. It's not just a plug-and-play system, and that's part of what makes Bootstrap based WordPress themes and theme frameworks so different. In this module, I'll be covering the functions. php file to add some of the standard and non-standard stuff. I'll be showing you how to load CSS and JavaScript from the functions file, adding in external libraries for the Theme Hook Alliance support, and a new class that handles dropdown navigation, which has been extended to support multilevel dropdowns. We'll add in theme support for WordPress Core theme functions like custom backgrounds and headers and you'll get to take a look at the function that handles breadcrumb support. Let's get started by digging into wp_enqueue_style and wp_enqueue_script.

Bootstrapping WordPress: Footer
Functionally, footers work the same as headers. You can call specific footers by naming them footermyname. php and calling them with getfootermyname. Footers are relatively static, though less so than headers, although their content doesn't usually change. Not in the way you might think with posts being examples of dynamic content and pages being static. The footer doesn't change. The widgets in the footer, if there are any, can be manipulated by the user, moved around, edited, and content in those widgets can be dynamic like recent post lists. But, footers might not have any of that or they might have all of it. Footers are just a way to add stuff that needs to go at the bottom of the page. The biggest function of the footer besides closing out the body in HTML tag is to add the WP footer function that plugins and themes may hook into to load JavaScript at the bottom of the page. That's really the only requirement of footers. But, themes can have all sorts of things in the footer from nav links to special, featured content. In this module, we'll look at our themesfooter. php, which uses theme hook alliance, hooks, footer widgets, and a footer nav bar and walk through each function individually.

Bootstrapping WordPress: Sidebar & Content Area
Now we get to the fun part: Filling all the space between the header and the footer with stuff. With the exception of the sidebar, all the template files I'll be talking about in this module will be based on the WordPress loop in one form or other. Remember, we talked about the loop earlier. It looks like this: If have posts, while have posts, the post. Eventually, you'll be writing WordPress loops in your sleep. But for now, we'll keep coming back to it because it's the foundation for all of the files in a theme that served content. In this module, we'll build all the template files a WordPress theme needs and a few others to serve up specific content in certain views. I'll walk through building the index. php, page. php, and single. php that we talked about earlier, as well as template parts to cover post formats and other utilitarian functions that will get reused in different templates. The search results page is another kind of archive page that also uses the loop based on URL query parameters. I'll show you how to customize the search results template and how to modify and bootstrap the search form. WordPress will take care of your 404 pages, too. 404 pages are mostly static, but have whatever kind of content on them you want. We'll look at the 404 template file and build our own with some links to help the user get back on track. The archive template takes care of category and tag archives, as well as archives of other post types if more specific archive templates don't exist. We'll build the general archive templates, as well as author- specific archives, which are particularly useful for multi-authored blogs or cases when you want to have a specific author page. Finally, you can customize how the comment forms and posted comments display on your theme. We'll be looking at the comments template, bootstrap that, and look at modifying how comments are displayed with a filter.