Combining Underscores With Bootstrap to Create a Theme Framework: Introduction

If you have been developing WordPress themes for a considerable amount of time, you will realize that you tend to reuse some—or most—of your code across projects. If you are like many of us, you might also have a starter/base theme that you use every time you start a new project.

You might even have a functions.php file to which you add functions and snippets, as well as link entire code libraries (such as TGM Plugin Activation, WP Bootstrap Navwalker, etc). And you probably have plugins and widgets (your own or downloaded from the WordPress repository) that you use in many of your projects.

All of these form your framework—a generic and ideally solid foundation upon which all your themes are built.

WordPress theme frameworks have been a hot topic for a while. Whether you should be using one is no longer the question. The benefits of using a theme framework cannot be denied and there are many, many frameworks out there; some are free, some premium. 

The question is, which one should you use?

Which one you end up using will depend largely on your needs, skill level, and other factors such as the front-end framework used. Instead of guiding you in selecting the best theme framework for you, I’m going to propose that you build your own.

In this series, I’m going to walk you through the process of creating your own WordPress theme framework by combining tools that you are most probably already familiar with. The basis/core of this framework will be Bootstrap and Underscores.

In this series, we will cover the following topics:

• Introduction: Combining Bootstrap and Underscores to Create a Theme Framework (this article that you’re reading) 
• Introducing Underscores (_s)
  
• Introducing Twitter Bootstrap
• High-level Overview of the Framework: Directory Structure and Naming Conventions
• Combining Bootstrap With Underscores 
  
• Adding Dynamic Navigation and Widget Areas
• Adding Actions and Filters
• Must-Have Plugins and Incorporating Them Using TGM Plugin Activation Class
• Building Default Widgets
• A Closer Look At Our style.css and functions.php files

In this article, we are going to have a look at theme frameworks: what they are, what they are made of, and the advantages they afford the developer. We are also going to look at why you should build your own WordPress theme framework.

What Is a Theme Framework?

The WordPress Codex describe a theme framework as:

A "drop-in" code library that is used to facilitate development of a Theme, or a stand-alone base/starter Theme that is intended either to be forked into another Theme, or else to be used as a Parent Theme template

Code Library

A theme framework contains a collection of code libraries that include at the very least an options page—which gives you, as a theme developer, the ability to give the end users of your theme some control over the look and feel of the theme without any coding knowledge.

Examples of code libraries commonly included in a theme:

• TGM Plugin Activation Class
• Redux Framework
• WP Bootstrap Navwalker

Base/Starter Theme

A base/starter theme is a bare-bones theme that can be used as a foundation for the creation of your own themes. 

A theme framework is a solid skeleton that consists of both a starter theme and some code/functionality which can be used as starting point when developing WordPress themes.

Features of a Good Framework

A good framework is:

• extensible
• flexible
• follows best practices
• standards-compliant
• well-documented
• up-to-date and bug-free

These apply both to standardized frameworks and to the ones you create for your own use.

Essential Functionality in a Good Framework

A good framework includes the following functionality:

• custom functions to be used in the theme
• custom hooks (action hooks and filter hooks)
• theme option pages
• script libraries
• widgets
• plugins

Advantages of a Theme Framework

A WordPress theme framework has the following advantages:

• Speeds Up Theme Development: It facilitates development by allowing developers to devote time to meeting requirements rather than focusing on repetitive tasks, thereby reducing overall development time.
• Promotes Code Reuse: It eliminates the need to repeat yourself.
• Saves Time: It allows you to do more in less time by giving you additional functionality.
• Coding Standards: Most frameworks are built following the best coding standards so your final theme will be standards-compliant as well.
  
• Customization Options: It provides the ability to make minor design changes without any in-depth programming knowledge.
• SEO-Optimized: Most frameworks are designed with SEO in mind. So when you use one, you can be sure that your theme is optimized for search engines.
• Community Support: Every framework soon develops a community of users who help each other and share tips.

Why Would You Build Your Own?

You might be asking yourself, “Why build your own framework when so many free and commercial frameworks already exist?” Well, to answer that, let’s first have a look at the disadvantages of standard theme frameworks:

• Learning Curve: Every new system must be learned. This is a time-consuming task and can get frustrating, especially for beginners.
• Unnecessary Code: Frameworks grow over time, as the needs of their users grow. And as more and more features are added, some end up being "heavy" and overly complex. This can create a barrier for beginners.
  
• Lack of Flexibility: The architecture of each framework is representative of the creator’s approach to design and development. And their approach might differ significantly from your own. As a result, you might find it difficult or challenging to tweak the framework to do what you want it to do.
• Price: Some frameworks come with a price tag. They force you to “pay to play”. Others use a "freemium" model, where the core is free but additional components are sold. The biggest advantage of these premium frameworks is that you get personalized support, but this doesn’t mean you get inferior support with free frameworks.

You would want to build your own framework to overcome some or all of the disadvantages mentioned above. Your own theme framework is better than any other for the following reasons:

• Because you developed it yourself, you will be familiar with how everything works. So when the end users of your themes run into problems, you’ll be in a position to provide them with support, quickly and effortlessly.
• Because it’s your own, you will only include the code that’s necessary for you. This keeps your code lean and results in your sites loading faster. And as you encounter new and unfamiliar use cases, you develop new, reusable snippets of code—saving you time and increasing your efficiency.
• Because you developed it yourself, you don’t have to pay for it. Granted, there will be that initial cost of time and effort. But that will balance out as you develop more and more themes faster than ever before.
• You have more control. You have the freedom to build your framework to support your particular design or coding style. For example, you can incorporate your favorite front-end CSS framework instead of learning one that comes bundled with another framework.

Conclusion

In this article, I introduced the series as well as a road-map we are going to follow as we proceed. I also looked at WordPress theme frameworks: what they are, what they consist of, and their advantages. The last part of the tutorial built the case for developing your own theme framework.

Throughout this series, we will be building a theme framework that combines tools that most developers are already familiar with. The framework will also incorporate the features and components mentioned in this article, as well as ensuring that it affords you the advantages outlined above.

In the next article in this series, we’re going to have a look at Underscores.