Beans is a brand new free and open source WordPress theme framework which uses the UIKit front-end framework and is designed to help you build light-weight, fast and responsive WordPress themes.

It works responsively out of the box with a mobile-first approach, it will resize your content and also determines and serves up the correct image sizes for your device. They have streamlined the usage of the UIKit framework so it will only load the required components for each page as needed, this keeps page size down and makes your site load faster – in addition, all assets are combined into one file which is minified and cached on a per page basis.

Like other frameworks such as Genesis, it works on the child theme model, meaning you install the main framework theme and then customize it by adding a child theme which contains your custom code and styling – features are added using the Beans API or from the growing code snippets library.

Download Beans » Get Hosting »

1

For a theme framework which emphasizes speed, I put their demo site through GTMetrix and it came out with one of the best scores I have ever seen for a WordPress theme, scoring a page speed score of 96% and a YSlow Score of 97%. Impressive stuff.

3

About UIKit

As mentioned, it makes use of UIKit which is front-end framework, similar to Bootstrap, made up of a collection of HTML, CSS and JS components designed to help you build responsive websites without having to worry about defining base grids and styling yourself.

1

It comes with modern styling for a complete range of elements required when building a site. From base grids, to nav bars and breadcrumbs, to buttons, icons and form elements. You can see the full list of core components here.

2

Example Sites

Before we dive into how to install and use the theme, lets take a look at some live sites built with Beans so you can get an idea of what’s possible with it.

Beans

This is the main Beans framework website which contains the download and all the documentation you need to get started building child themes with it.

1

Theme Butler

This is a free themes website which currently has 4 themes available for download for free – the main site and all the themes are all built with the Beans Framework.

2

Devigner

A portfolio website for Chris Rault, built with Beans.

3

Goot

A small website for teachers, parents and Occupational Therapists.

4

Using The Theme

After installation of the theme you will see it has a nice and clean basic blog layout. You can alter the default layout of the theme by visiting “Appearance” > “Customize” and choosing the “Default Layout” option. Here you can choose between no sidebar, Left Sidebar, Right Sidebar, Double Sidebars and Sidebar each side.

1

You can also choose these different layout options when publishing a page, underneath the Visual Editor is the option to publish the page using the option you chose as default, or you can pick a specific one for the page.

2

Beans comes with 3 Widgetized areas, a main sidebar and the secondary sidebar should you choose to use this style layout. The third, is what I really like is one for the off-canvas menu.

3

This is shown when the mobile menu is used for smaller screen sizes, the main menu is replaced by a menu toggle like so:

4

Which when clicked, greys-out the website and slides in a menu from the left hand side:

5

How to Create Your Own Themes using Beans

Although you could use Beans for your site as it is, the real intended use is to use it as a starter theme to create your own themes. This is done by creating a child theme and carrying out your customization within it, similar to the way a framework like Genesis works you can manipulate features using the Beans API.

Beans have prepared a child theme you can download and use here. The child theme is structured as follows:

assets
   less
      style.less
   uikit-overwrite
      variables.less
functions.php
style.css
screenshot.png

Most of your customization will be carried out with the functions.php file, which must contain the following code which loads up the Beans framework.

// Include Beans.
require_once( get_template_directory() . '/lib/init.php' );

Beans API is where the theme shines – It provides you with a set of tools to quickly tailor the theme to your choosing.

Manipulating the HTML doesn’t require you to overwrite template files which is often overkill and also means that any updates made to the core framework won’t be applied to the your overwrite file. Instead, any HTML markup and attributes on the page can be modified or removed using one line of code. This makes it powerful since you can add UIkit classes anywhere on the page. Furthermore, all of the HTML markup has a hook before and after which allows you to add blocks where you need it.

Beans API includes a range of fields which you can add to post items, taxonomies or even as options. That combined with the ability to display the added fields entries anywhere on the page makes building quite complex pages easy.

Although Beans is built using the UIkit framework, it doesn’t mean it is bloated with a load of features and styling options you will never use – The Beans UIkit API let’s you load only the UIkit components you need on a per page basis, the assets are then automatically compiled and cached for faster loading pages.

If you would like to delve into theme customization with Beans, there is some great documentation available on the site here, A growing code snippets library you can make use of and a complete code reference here.

1

Conclusion

Beans is a framework which could be used by complete beginners, but it is also targetted at theme developers who wish to speed up and simplify the theme creation process. Instead of having to code your CSS from scratch each time, Beans and the UIKit provide a solid starting point. UIKit is actually a very nice looking set of base styles which you can configure and customize further if you wish. I was very impressed with it’s “light-weight” credentials, all the tested sites and the base theme does indeed load very fast.

It will be interesting to see how this new framework does, its certainly a promising start – it would be good to see some examples of it in action being added to their main site and maybe they should start thinking about offering child themes ( paid or free ) for download also. For now, to see what’s possible and to view some code examples in action you should check out the ThemeButler site which offers 4 free themes based on Beans for download.

Take it for a spin and help promote them by giving them an upvote on ProductHunt.

Download Beans » Get Hosting »


Author:

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (13 votes, average: 4.38 out of 5)
Leave Yours +

7 Comments

  1. It looks like a great framework to try out, thanks for sharing. What about theme options? Does Beans use the Customizer?

  2. Hi Antonella,

    Beans comes with a few options in the customizer such as the logo image, theme header background image, default layout etc. It is by no mean a theme “bloated” with administration panels that let users customize their entire website by setting a zillion options.

    That said, I would like to think that it is the most flexible WordPress theme available, partly due to the way it is structured and all the hooks available. So if you know your way around with code a little bit, you will be able to build any website in a very short amount of time without have to hack any core functionalities. In most case, extra plugins are not needed due to the power of UIkit and the theme is super fast.

    If you need help with anything, don’t hesitate to sent your request to http://getbeans.io/contact/.

    Thanks,
    Thierry Muller
    Founder of Beans theme

    • Hi Thierry,

      Thank you for the great reply. I’m not a fan of options panels and zillions of options. I asked because I prefer using the Customizer and love to code focused themes. So, I’m happy Beans is not a monster theme, and I’m definitely going to give it a try.

  3. asdasdas

    re capture huh?

  4. Great timing!
    I have been looking for a WP framework lately. I was thinking of ditching Wootheme’s Canavas for the Genesis framework but its price tags is unappealing to me for something that I might or might not like. Especially when the US dollar is that strong lately. Free is better.

    The only drawback with Bean for me is learning UIKit… but i’m definitely interested in leaning more.

    • Hey Rick,

      UIkit is extremely well documented so you literally just have to copy and past attributes to rapidly achieve amazing results. That said, you are not forced to use it and you can write your own CSS if you prefer to do so.

      Thanks for your interest in Beans,

  5. I want to thank the developers of Beans and WPlift.com for letting me know about it. It seems to be a very cool project, with lots of documentation, snippets, etc.

    I’m not a dev so I have a hard time choosing a base theme for my work. I don’t want a do-it-all solution like most commercial million-options themes (X, Divi, Be and so on), but I can’t start from scratch or with an almost naked theme, since I can’t code.

    I hope this is it ;)

  • Comments are Closed

Our Sponsors