BREW: An easy way to build WordPress themes with Bootstrap 3

October 23, 2013 — 110 Comments

Every once in a while I find myself needing to build or customize a WordPress theme.  For the past two years I have been using ‘Standard’ theme from the now defunct 8bit.  I like Standard.  The code is clean.  It is also built using Bootstrap, which is my favorite front-end framework.  This blog is built with Standard.  But the more I used it, the more I realized it wasn’t ideal (for me).  When 8bit announced they were shutting their doors, I figured it was time to move on.

I made a list of what I wanted in a base theme.  The list was short:

  • WordPress
  • Easy to customize
  • Bootstrap 3
  • No bloat
  • options framework

I wasn’t satisfied with anything I found.  The closest was this theme from 320 press.  I liked that it was built on Bones, but it wasn’t fully updated for Bootstrap 3, and there were little things I didn’t like about it.

So I decided to make my own theme…and BREW was born.  I can’t really take credit for it.  It really just pulls together some of the best open source projects out there.  Projects such as Bootstrap, WordPress, Bones, Navwalker, Redux and more.  It is a work in progress, but I’m already using an early version of it for a new project and I’m pretty satisfied with it.  I have no idea if others would want to use this, but I decided to throw it up on GitHub.

Features:

  • LESS
  • Bootstrap 3
  • Bones
  • sidebar and footer widgets
  • Very clean out-of-the-box experience
  • pagination
  • breadcrumbs (just uncomment in the page templates)
  • Font Awesome
  • Options Framework

If you’d like to try it out (or even contribute) you can find the link below:

https://github.com/slightlyoffbeat/brew

demo

Screenshot 2013-10-23 00.54.42

  • Andy Jessop

    This looks really nice. The only thing I don’t get is redux – what is this used for?

    • slightlyoffbeat

      It is an options framework. It allows you to have a customized tab/panel in the Admin menu. You can use text, checkboxes, dropdowns, etc that you can then plug in to the theme. So for example I just did a theme for a client that had three featured boxes on the front page. I used the options framework to allow them to upload images and set what the URL was when someone clicked on the boxes. This was necessary since they would need to change it about once a month.

      Since I built BREW with the mindset that it would be a base theme when building for clients, I wanted to include an options framework. I comment it out by default. If you uncomment it you’ll actually see a lot of examples of how it could work.

      • Andy Jessop

        Fantastic. Thanks very much – this looks like really interesting bedtime reading.

      • Scott Foster

        I actually tried this out also, but since im not really a developer, I assume after you choose what options to allow, you have to hook it into the theme code right? Is there any good tutorials on this?

  • Chi

    Two of my favourite frameworks made into one. Thanks Dan

  • Ste

    You rock! Just a question: is this supposed as a starter theme to modify or a as a parent theme? I tried to create a child theme, but I’m not able to make styles work. Great job!

    • slightlyoffbeat

      Great question! Honestly, I haven’t looked in to child theme support just yet. It was meant to be directly modified. With that said, there should only be a small number of changes to make it child theme friendly. I will look in to it and keep you posted.

      • Ste

        Thank you so much for your efforts.
        I just started working on a new project and I chose brew as foundation ;)
        I’m getting directly in the theme and appended a custom stylesheet to bones stylesheet in order to override some rules (colors, fixed navbars, typography, etc)
        I’ll let you know when it will be published, so that you can take a look at it.

      • Ste

        Me again Dan, just to let you know that my first Brew-based site is online.

        http://www.dermatiteseborroica.it/

        It’s a medical site with Metro/Windows8 style theme (as per customer request).

        Another brew-based project is under development. Thank you!

  • Ste

    Hi Dan, me again :)
    Maybe I’m missing something, but I can’t get Font Awesome icons to work.

    I pasted in my templates a line as the one you see below, but nothing shows up.
    Am I supposed to activate Font Awesome somewhere in the theme?

    • slightlyoffbeat

      Hello Ste,

      Did you get this snippet from their website? I noticed they JUST udpated to version 4.0. I haven’t looked at it yet, but its possible that the code snippets on their site won’t work because they are specific to 4.0 and not 3.0. I’m going to update to 4.0 over the weekend.

      With that said, you can probably replace the font awesome files on your own pretty easily. You probaby just need to replace the files here:

      https://github.com/slightlyoffbeat/brew/tree/master/library/less/font-awesome

      with the corresponding new files from here:

      https://github.com/FortAwesome/Font-Awesome

      You can also try the old docs here:

      http://fontawesome.io/3.2.1/

      Either way I’ll update BREW soon with the new code.

      • Ste

        Thank you Dan! For the time being I’ll put into header the link to their repository (as they suggest in their Get Started section) and I’ll wait for your update. I really appreciate your work and already love BREW ;)

        • slightlyoffbeat

          Ste,

          I updated to font awesome 4, and did a quick test to make sure everything was working. If you would like to update, here is what you’ll need to do:

          Simply navigate to library/less/font-awesome and delete those 4 folders. Replace with the 4 folders here:

          https://github.com/slightlyoffbeat/brew/tree/master/library/less/font-awesome

          Recompile your less, and you should be good to go.

          You can also go to style.less and uncomment glyphicons.less if you’d like. FA 4.0 no longer conflicts, and you can use both side by side.

  • dima7b

    Awesome theme Dan. I actually forked Bones and made my own Bootstrap compatible theme (but I’m new to forking, and editing and all that) so this looks really great. Thanks for your hard work.

    • slightlyoffbeat

      thanks for the kind words. Hope you enjoy it.

  • James o’loughlin

    I’m so thankful for this template. I’ve been trying to find a bare-bones / clean WordPress 3 template to start a project with and this is it!

    Thanks again!

    • slightlyoffbeat

      Awesome :)

  • Bob Coggeshall

    Hi, after shopping around for free and non-free wordpress/bootstrap3/bones themes (StrapPress, UpBootWP, Bragthemes Builder), I finally came upon yours. I set about building a child theme and the one change I had to make was in bones.php: I had to replace get_stylesheet_directory_uri() calls with get_template_directory_uri() calls. Now I can selectively override only what I need to .. Thanks again !

    • Gabriel Abney

      @bobcoggeshall:disqus , thnx very much for that! Great tip.

    • slightlyoffbeat

      thanks for sharing. I think i’ll update so that others can do this easily in the future.

    • Ste

      Hi guys, I’m not sure if this is what you mean, but I adopted a “cleaner” solution to override bones rules.

      I added to functions.php the following:

      // DEREGISTER BONES STYLESHEET

      function custom_styles() {

      wp_deregister_style( ‘bones-stylesheet’ );

      wp_register_style( ‘bones-stylesheet’, get_stylesheet_directory_uri() . ‘/library/css/style.css’, ”, ’1.0′, ‘all’ );

      wp_register_style( ‘customstyle’, get_stylesheet_directory_uri() . ‘/library/css/customstyle.css’, array( ‘bones-stylesheet’ ), ’1.0′, ‘all’ );

      wp_enqueue_style( ‘customstyle’ );

      }

      // Hook into the ‘wp_enqueue_scripts’ action

      add_action( ‘wp_enqueue_scripts’, ‘custom_styles’ );

      • http://www.zorros.be Pieter Eerlings

        this did the trick, thanks!

      • FartNoMore

        Why is this “cleaner” than Bob’s solution? It looks like it disables a lot of default stuff you might want whereas Bob’s solution is just one change and allows him to selectively override only what he needs to. I am asking because I don’t understand, it is not a criticism. Thanks.

        • Ste

          I’m not disabling anything.
          Please, look into my code: I de-register and register again bones stylesheet just to set a proper loading order (with my custom css coming last).

          In this way you don’t need to modify bones.php

          • FartNoMore

            Ah, very cool! Thanks for taking the time to explain that! I will be using your technique, then. Just getting started with WordPress, so the functions are not all easily recognizable right off the bat for me.

          • Ste

            You’re welcome!
            Please, take into account that since then Bob’s change suggestion has been embedded into Brew core files (just download latest version).

            At this point the best way should be going for a child theme.

          • FartNoMore

            Oh, thanks again! I definitely would’ve missed that. Much appreciated.

    • Joanne

      Bob – I am trying to create a child theme too – your tip saved the day. Really nice of you to post that hint. Thanks!

  • slightlyoffbeat

    There is a dev branch currently on github that has a ton of fixes and updates (text formatting, etc). I’m holding off on pulling all those changes however because I think I may have themed it a bit too much (styling was inspired by Standard Theme). Once I find the right balance between necessary CSS and unecessary CSS, I’ll release.

  • Tyler Derosier

    Thanks for putting all this together Dan. I’m fairly new to WordPress Development and these frameworks and I’m looking for an ideal way to build my own theme from this. Is there a best practices way of going about creating my own custom css with this? I’m confused if I need to touch any of the less files. Also, when I turn on Redux Framework in function.php, is this fully functional in wp-admin? Do I need to build my own functionality into it? Sorry for the newb questions but I appreciate any insight you have to offer. Thanks!

    • slightlyoffbeat

      Hello Tyler!

      Sorry for the slow response. Holidays and all :P When editing, you should be able to stick to the custom and custom variables LESS files. The rest can be untouched. I recommend looking in to something like less for Mac for compiling if you are new to less: http://incident57.com/less/ (or buy codekit, the premium version). As for Redux, turning it on will automatically make it available. An options framework can be a little confusing at first. I’d recommend checking out the redux website to learn a little more about it. It can be pretty powerful once you get the hang of it. You don’t have to use it, but it is handy when building for a client and giving them specific functionality they might need.

      Feel free to ask any more questions. You can also check out the dev branch on GitHub for the latest updates. The next version should be ready mid-January.

      • Tyler Derosier

        No worries, I appreciate the reply. I’ve been playing around and learning quite a bit lately. This starter is a great way to immerse yourself into many different wordpress related enhancers. I’m sure I’ll have some more questions for you at some point. Looking forward to your updated version.

  • ghost1227

    Hey Dan! As the founder of Redux Framework, can I say that finding things like this absolutely makes my day? Not only did you include our little project in yours, but you listed it as one of the best open-source projects out there! That kind of praise is what makes development worthwhile! Any objection to us featuring this project in our showcase? It’s a pretty slick idea!

    • slightlyoffbeat

      Hello! I’m certainly open to this. I’ve been going back and forth on including an options framework. I love the community behind Redux. You are plugin based now, so it may be best to just recommend others install Redux, if they wish to use it (and keep it up to date) :)

    • slightlyoffbeat

      After using Redux for my latest project, I decided to keep it in BREW. Great work on it. I hope others who use BREW will appreciate everything that is possible using redux.

  • PimRaafh

    This is exactly what I was looking for. It really took me a while to find! Please Ghost1227 feature this on the Redux Framework showcase so that many more can find (and contribute) to this awesome clean start.

  • Nadeem Akram

    hello brother. i like ur framework .but can u please tell me how can i connect options to that brew wordpress starter theme.i dont know how to link options to theme

    • slightlyoffbeat

      I know this is a late response, but check out the redux framework site:

      http://reduxframework.com/docs/

      you’ll also notice a few examples such as turning breadcrumbs on and off, etc.

  • Freddie

    This is pure awesomeness! Exactly what I needed! However I currently got issues with loading both glyph and font awesome icons in the header nav. Scratching my head right… do you know what it could be?

    • slightlyoffbeat

      Hmm.. Font awesome has been updated recently. Are you on the dev branch, or the main branch?

      • Freddie

        That’s exactly what I did the other day. I am running 4.0.3 of font awesome now. I am building on the dev branch 2 btw…

        Thanks for pointing me in the direction of using LESS. You really open my mind here! Thanks also for getting BREW together! I am looking forward to what the future will bring us :)

        If you need a helping hand with anything just let me know!

    • slightlyoffbeat

      Check out my response to Ste regarding Fontawesome below.

  • Progku

    Just curious, how about the license of brew? Is it the same as bones (WTFPL)? Can I use it as starter theme for my themes and then sell them on various marketplace such as themeforest, etc?

    • Progku

      Is this one abandoned?

      • slightlyoffbeat

        Nope. I actually just made a big update that I’ll post about soon.

        Since it involves wordpress, GPL (2?). So with themeforest you can sell support licenses, updates, etc. I was planning on using the MIT license.

        • http://zacklive.com ZackLive

          What about selling premium themes based on BREW on other websites? Like starting my own themes shop? Does the MIT license you are planning to use allow this?

  • marc

    When I compile the Less using WinLess I encounter different Error on WinLess.
    Like Variable Undefined on the wp-styles.less, Box-shadow undefined in content.less, etc.

    • slightlyoffbeat

      hmm. I’ll look in to this tonight. I just updated. My guess is when I added in the bootstrap 3.0.3 files I messed something up. I’ll reply pronto.

      • marc

        I downloaded the zip yesterday.
        I’m working on my local and when and updated something and when I saved it I receive error on WinLess when compiled.

        Different error on less folder.

    • slightlyoffbeat

      How long ago did you download from master? can you try re-downloading? I just re-downloaded and was able to compile using LESS for Mac.

      There was a brief period of time about a week ago where I know master asn’t compiling correctly but it as fixed.

    • slightlyoffbeat

      hmm. I tried winless on my PC and compiled style.less without any issues. It sounds like you may have downloaded during the period of time I hadn’t updated the variables file from the 3.0.3 changes. I’d just try re-downloading, or if you have a lot of work done, just replace style.less and custom-variables.less with the new ones.

      • marc

        I’ve tried to compile a fresh brew template without any edits and some problem I encounter Compile error mostly on bootstrap

        • slightlyoffbeat

          Is there a log file I can take a look at?

          • marc

            what log file do you need? log file for WinLess?

      • marc

        I also that have problem compiling style.less, I encounter compile error on wp-styles.less, lessothercontent.less, brew.less, variables.less to name a few files that I encounter compile error

      • marc

        Hi Dan, I downloaded the latest of Brew and I got a Parse Error on lessbootstrapmixins.less when compiling to WinLess librarylessstyle.less

    • slightlyoffbeat

      OK, i think i found the issue.

      wp-styles.less should have been deleted. I was moving the LESS files around in an attempt to get organized and that file should not have been included. Delete that file, and try compiling just style.less (only file you should be compiling).

      • marc

        Okay I’ll try that.
        Sorry I’m just a newbie in bootstrap.

        • slightlyoffbeat

          No prob! It was my mistake for leaving the file in.

  • Guest

    I downloaded yesterday.
    I’m working on my local and when and updated something and when I saved it I receive error on WinLess

  • Joanne

    Is there an easy way to get a child theme of BREW to recognize the child’s functions.php? I find that putting a functions.php file in the child theme folder seems to have no effect. When i put the same functions in the BREW functions.php it’s fine. It seems the functions.php in the child folder isn’t getting executed.

    I used Bob’s tip to point bones.php to the child’s stylesheet directory for library/css/style.css. But that doesn’t seem to have made my child theme ‘official’

    Any advice?

    • slightlyoffbeat

      I’ll need to look in to this. I haven’t dived much in to Child theme support yet, but perhraps it is an easy fix.

      • Joanne

        Recognizing functions.php in a child theme folder should be automatic. Have done it tons of times.

        Doh! It would help if I spelled “functions.php” correctly. Fixed the typo, and now my child’s functions.php is working just fine. Sorry for the false alarm!

        • slightlyoffbeat

          Hello Joanne,

          Great to hear! I make mistakes like that all the time. I also added the get_template_directory_uri() calls to BREW so that others can also enjoy child theme support. If you come across any other issues pertaining to child themes, let me know.

  • Gajan Retnasaba

    Hi Dan, thanks for creating Brew, it is awesome! I particularly appreciated the annotations – it made for a much smoother learning curve. Thank you!

    • slightlyoffbeat

      good call :)

    • slightlyoffbeat

      my pleasure! The annotations are a mixture of mine and the author of Bones, so some credit will need to go to him. I’m glad like it.

  • Sergio Pinna

    The jQuery scripts are in the heder tag: the best way is to put it in the footer tag

    • slightlyoffbeat

      Normally yes, but wordpress core loads it in header. Usually because a lot of plugins have a dependancy on it. I’ll leave it up to developers to change it if they’d like.

  • Smash

    I’m so excited right now, I was looking for something like that for a while. If you add background to that sidebar it’ll be perfect theme. Currently it’s like flying arround. I really love the idea of content part and I guess it’s fully responsive. I have a couple ideas for sidebar, I’ll draw and send them later.

    Random question: Is it working perfectly with bbpress? If it’s, I’ll use it after next ‘big update’.

    Edit: Bookmarked.

    • slightlyoffbeat

      one easy thing to do is add the well class to the sidebar. I purposefully have tried not to customize this theme too much. It is meant to be a starting place for developers. The more theming I do, the more developers have to undo it when they are customizing.

      As for bbpress….no idea :) Feel free to give it a shot and let me know. I’m not sure what is needed to ensure compatibility with bbpress as I’ve never used it personally.

  • Lee Jordan

    I half-heartedly built my own wordpress theme in bootstrap 2 a while back which I have been using for freelance blogs that I build from time to time. I recently revisited it to update it to bootstrap 3 and in the process of reading up on the subject discovered this page. So needless to say I dropped my project immediately and will be switching to BREW ASAP!

    Great work.

    • slightlyoffbeat

      Thanks!

  • Bryan McCaffrey

    Dan, just wanted to say thanks for brew! I’m a developer that started in WP but have been almost exclusively in Joomla the past year and a half. As such I totally lost touch with WordPress…and when the time came that I wanted to create a site for my brothers company, I went looking for a BS3 starter theme (with LESS compatibility). You’ve really put together a great base theme for anyone that wants to develop a site with very little start up work. Rather than be an anonymous download, I wanted to say thanks for the great theme. I’ll definitely be following it. Thanks!

    • slightlyoffbeat

      Thanks for the kind words Bryan. I’ll continue to work on it in hopes that more people will find it helpful. Cheers.

      • rick

        its totally awesome. cant wait for 1.0!

        • Leo

          totally agree, this is great! thanks Dan!

  • kmiekio

    Hi
    First of all thank’s for such a nice starter Brew is excellent. But I’ve got a problem. I was bulding my new site using brew, don’t know what I’ve done wrong and where. But now I can’t turn it on couse its’ giving me this kind of errors.

    Any ideas ?

    https://dl.dropboxusercontent.com/u/12252010/brew.jpg

    • slightlyoffbeat

      Hmm. Never seen that. Try going to appearances > menu and selecting a location for the main menu.

      • kmiekio

        Nope that didn’t fix it

        • slightlyoffbeat

          It wasn’t doing this on a clean install? Is it possible an extra bracket or colin was added or removed somewhere? I haven’t seen this before. Any idea what you changed just before this happened?

  • Liam Johnson

    Hey Dan, when on a category page e.g http://danvswild.com/brew/category/uncategorized/ in the *screen options* – excerpt I insert an image inside and some text, is there a way to get the ‘read more’ button to display underneath? Or a way to display an image with the text in the excerpt its already in with the ‘read more’ button already there.

    Hope this makes sense, thanks for Brew – tis excellent!

    • Liam Johnson

      Also what is the best way to create a child theme now? Thanks!

      • Tanmccuin

        From what I remember Eddie, the creator of Bones said that he doesn’t really believe the in the child theme philosophy and as such didn’t build support into Bones.

  • Liam Johnson

    Hey, I’m a WP newbie – can anyone guide me on how to get the Carousel to work? http://getbootstrap.com/javascript/#carousel Do I have to add scripts somewhere? Thanks

    • slightlyoffbeat

      Sorry for the late reply. All bootstrap components are loaded, so you would just need to add the code wherever you would like it. For example, try it on page-home.php

      This isn’t a super friendly theme for someone new to WP. It is more meant for a boilerplate for developers. Hopefully this helps point you in the right direction :)

  • marc

    Hi Dan, sorry for bothering you again.
    I downloaded the latest of Brew and I got a Parse Error on -> lessbootstrapmixins.less when compiling to WinLess the file -> librarylessstyle.less

    Please help.
    Thanks

    • slightlyoffbeat

      Does it give you a full error message? Usually there is more info with the parse error. It would be helpful.

      • marc

        Parse Error: Syntax Error on line 648 librarylessbootstrapmixins.less
        I compiled the librarylessstyle.less

        • slightlyoffbeat

          Yikes, I thought I fixed this. Easy fix. delete librarylessmixins.less

          and remove this line from style.less:

          @import “bootstrap/mixins.less”;

          • marc

            Hi Dan, I already delete the file and the remove @import “bootstrap/mixin.less”
            Another Parse Error : Syntax Error on tyle.less :(

  • gbrl_lrsh

    Have some issues with per-post custom ‘read more’ text – the documented wordpress method ( ) doesn’t work. Anyone point me to some doc’s, or anything? Is this a redux framwork thing? And if this is the wrong place to ask a question like this, I’m happy to post in the correct place… just point me the way :)

  • Mike Sac

    Hi Dan,

    love the theme. however ie8 is displaying mobile only. looks like the media queries arent working. i see you didnt include respond.js ?

  • momchenr

    This is great. Thanks again for this – I’m using it for a simple internal project and I was looking for something that was this lightweight and extensible. Thanks!

  • http://kevinch.com/ kevin ch

    Hey Dan,

    i’m very new to Grunt and got a question after trying to set up the theme. I got Grunt installed, as well as all the dependencies written in package.json and when i go to the theme folder via shell (windows powershell) and hit ‘grunt’, it goes well into the watch task but don’t do anything when applying changes to scss files. Just won’t compile.
    All dependencies are up to date.
    I think i’m missing something very small to get it all working fine. Any idea?
    It works fine if i ctrl-c and ‘grunt’ again.

  • Christopher Murphy

    I still can’t get a child theme css to work. I have it in library/css/style.css and nothing loads. I tried @timbowens:disqus method and I could get the new css to load but the base css gets wiped out.

  • Liam Johnson

    Has anyone managed to get Retina.js working with this Theme – if so can I have some help as I keep getting Failed to load resource: the server responded with a status of 404 (Not Found)

  • Lincoln Islam

    Is that ok to use with Commercial project or sell premium theme using BREW?

  • CameronNicolson

    Did your version of bootstrap have any conflicts with the options framework?

  • Carlos Pacheco

    Hey Dan, thank very much! This is just what I was looking for. This is perfect in its simplicity, I mean, this is simple and versatile, clean code.

  • Alexandra Faller

    Ive taken a look at your theme and think its just what Im looking for as a base bootstrap wp theme. Ive seen that the underlying bones doesn’t believe in child themes, but I’ve seen that others have created a child theme from this brew theme. Should I be creating a child theme or just modding the original. If original, do I just edit the styles in all the files I want to change or just create a new less file, add it to the import and overwrite styles?

    • slightlyoffbeat

      Hello Alexandra,

      BREW was made to edit the theme directly, however many have been using child themes without issues. I haven’t tested personally.

      I try to keep included CSS to a minimum (bootstrap + a few things) so that it is easy to customize. You can either edit the LESS files in library/less/brew or I like to create my own folder in the less folder, and start creating my own LESS documents, and add them to style.less

      • Alexandra Faller

        Thank you so much for your quick reply and your advice. I shall go about it the way you would as thats my original thought on how I would have done it. Thank you once again :)

  • kemie

    After using brew for a few projects, I decided to try out foundation instead of Bootstrap. I found another theme based off bones, but with Foundation. It was only when I tried using it that I truly appreciated all the work that went into BREW. Thank you for such a well organized, feature rich, well though out theme!