Bloated themes are all the more common nowadays, with many theme developers choosing to include an abundance of features, and sometimes additional plugins, into their themes. This leads to theme bloat that can slow down your site unnecessarily.

Now, that’s not to say that none of these themes are good or that they don’t serve their own purpose, however you sometimes just want a simple theme that gets the job done, is easily customisable, and doesn’t contain unnecessary additional settings.

One such theme framework that was launched in August 2015 is the Beans Theme Framework; an easy-to-use, lightweight, well-documented, free and open-source WordPress theme framework.

Introducing the Beans Theme Framework

Beans was created as a means of providing WordPress developers and users with the opportunity of creating fast and lightweight websites that can be as complex as you want through the use of the UIKit front-end framework.

Whether you’re new to WordPress or a seasoned developer, Beans allows you to create and modify your WordPress site just the way you need. While looking simple enough on the front-end as you can see from the demo, all the magic is under the hood.

The Beans theme is WordPress minded; it’s free, open-source, plugin-friendly and very well documented. It’s also aimed at having very stable updates, uses the latest technologies in LESS, CSS3, HTML5 and jQuery, while also being very flexible and extendable.

More About How Beans Works

The Beans theme looks good on all devices thanks to its responsiveness and use of adaptive images. It resizes the content appropriately on all devices while also creating, caching and serving the best suited images for the device in use.

Besides that, Beans is also SEO friendly with the most credit for this going to the fact that it’s lightweight, semantically coded and fast loading. As long as you can publish good quality content, Beans will take care of the rest to improve your SEO rankings.

As already mentioned above, Beans is built using the UIkit front-end framework. In fact, the developers behind Beans went a step further to streamline it even more by allowing you to load only the components you need on a per page basis. This ensures that the pages are kept lightweight and loading as quickly as possible.

This increase in speed is loved by all search engines as well as all users. Every line of code used in Beans is optimised to its maximum and all parts of the theme are only loaded when required. In addition to that Beans also has its assets combined into one file which is minified and cached on a per page basis if need be.

The Beans API

The Beans API is made up of multiple API components, each with their own specific purpose. Each component is only ever loaded when needed to avoid unnecessary memory usage. This also improves your website’s speed. You can read more about the API components, their loading aliases and dependencies in the Beans API overview.

The Starter Child Theme

The use of child themes is great since it allows you to make changes to the parent theme without being destructive, while also ensuring that any changes you make aren’t lost when you update the parent theme. Since Beans in itself provides a very simplified theme layout to start off with, the developers also provide a free Starter Child Theme.

This child theme provides you with a solid base to start off with when modifying your new website, and is structured as follows:

The functions.php  file is where all the Beans customisation snippets are included, screenshot.png  is just a placeholder image to be used in the Appearance > Themes admin page, style.css  contains the basics needed to register the child theme, while style.less  is added to the UIkit compiler via the functions.php file. You can find out more about this Starter Child Theme in the documentation.

Other Child Themes & Websites Using Beans

Besides the Starter Child Theme there are also a few others available at the moment. ThemeButler currently offers a few different child themes for Beans, while also providing some useful resources such as this tutorial video on getting started with Beans and your chosen child theme.

You can also browse through a couple of live websites currently making use of the Beans theme; these are Devigner and GoOT. The Devigner child theme is also available for download from ThemeButler.

Integration with the UIKit Framework

As I mentioned earlier, the Beans framework makes use of the UIKit framework. This is a lightweight and modular front-end framework for developing fast and powerful web interfaces. It’s composed of a comprehensive collection of HTML, CSS, and JS components which are simple to use, easy to customize and extendable.

Similar to Bootstrap, UIKit helps you in such a way that you don’t need to worry about any base grids or styling, it’s all done for you by the framework. You’re provided with a wide variety of styling elements ranging from whole base grids to the smaller things such as buttons and icons, all of which can have a big impact on the overall look of your site.

The full list of the core components offered by UIKit can be found here in their documentation.

How fast is it?

With Beans being touted as fast and lightweight, I ran a couple of quick tests on their demo site using both GTmetrix and Pingdom to see how they perform, and it must be said that its performance really is impressive. You can check out the results in the screenshots below.

Using the Beans Framework and Child Themes

Making use of the theme framework can be as simple or complex as you want it to be. The installation process is simple; just upload the theme’s zip file from your dashboard’s Themes section and activate it. Below we’ll take a quick look at what it’s like to work with.

Using the Customizer

First up, as soon as you install and activate Beans you can make simple customisations from the Theme Customiser. From here you can change background colour and image, header image, menus, widgets, etc. You can also select the Default Layout for the theme as seen below. This same layout can even be set for individual post items and terms.

The widget areas include a section for an Off-Canvas Menu. This menu is used on smaller screen sizes and makes use of a menu toggle that, when clicked, greys out the main site and slides in the off-canvas menu from the left hand side of the screen.

Modifying a Child Theme

Now, the best way to make some more substantial changes is to make use of a child theme as mentioned above. Once the child theme of your choice has been installed and activated you can make use of the code snippets and code reference found in the documentation to make as many changes as you’d like.

The majority of the changes will be made through the theme’s functions.php  file, and this is where Beans API comes into its own. It allows you to modify the theme’s look without losing the changes you made when you update the core framework.

In addition, you’re free to add UIkit classes anywhere within a page, and all the HTML markup has hooks before and after it for you to be able to add any blocks where needed. Using UIkit also means that the components are loaded on a per page basis, reducing theme bloat and allowing for the page’s assets to be automatically compiled and cached, leading to a faster page load.

An Extensive Documentation

The documentation provided for the Beans framework is one of the best I’ve seen. It includes everything you might need, whether you’re a beginner or an experienced developer, showing you exactly what you need to do to in almost every situation possible.

This extensive list of guides and tours allow you to fully understand each aspect of the framework, while also showing you what you need to do to implement the required changes.

Code Snippets and Code Reference

One of the ways it does this is through the Code Snippets and Code Reference sections of the documentation. The code snippets provided explain exactly what code is required to add, remove and modify various elements in your theme, be it simply remove the site title tag in the header or even forcing a particular layout.

The code reference sections then provide all the information needed on all the functions and hooks that are available within the theme, and there is a long and extensive list of them for you to make use of.

Conclusions and Recommendations

In conclusion, the Beans theme framework looks very promising. It’s speed and ease-of-use are very compelling, even for those who aren’t very familiar with theme development as yet. Where you don’t understand something, the extensive documentation should cover you.

Being free and available on GitHub will of course help in getting the theme framework out there since it’s only been available for a very short while, and it will entice theme developers, those looking to get into theme development, as well as those looking for a simple, customisable theme for their WordPress site.

Give it a go for yourself and see what it’s like, I’m sure you’ll find it interesting.