Quantcast
Channel: WPMU.orgtheme framework | WPMU.org
Viewing all articles
Browse latest Browse all 6

7 Free, Modern Starter Frameworks for WordPress Designers

$
0
0

There are several ways how designers approach the process of creating custom WordPress-based websites and WordPress themes:

  • one can start from scratch, writing the entire code “by hand”. This is the most time-consuming and, to the best of our knowledge, relatively rarely used method,
  • one can take a ready-made WordPress theme (either free or premium) and tweak it until the desired result is reached,
  • or one can use what is called a theme framework to save a significant amount of time which would otherwise be spent on writing and testing the same code base over again.
framework image representing wordpress theme frameworks
Frameworks are not only good for supporting electricity cables..

Theme framework is a fancy word for a starter theme that is based on a solid code foundation that comes with built-in generic features such as starter template files, useful scripts, meaningful css, etc. Building up your WordPress theme or website from a framework is probably the most efficient way of streamlining the development process and ensuring that the end result is stable and resilient.

The latter is true because high-quality frameworks boast optimized and fully standards-compliant PHP, HTML, CSS, and Javascript. Add to it the fact that most of the frameworks mentioned in the below list have either extensive documentation or developed support communities, or both – and it becomes clear why so many developers prefer using theme frameworks in their everyday work.

And there’s a cherry on top of it all: all theme frameworks presented here are absolutely free to use and come under a GPL/BSD license!

But Nothing’s Perfect

Nothing’s perfect, and frameworks have certain cons of their own, the most important one being that once a particular framework is chosen, the developer is confined within its capabilities, and adding certain advanced custom features may become less productive than building everything from scratch.

Another aspect worth noting is the initial time investment required to get to know the ins and outs of the chosen framework (e.g. how functions are added and removed, how layouts are constructed, etc.) – and various platforms can approach the same functionality from very different perspectives! However, the time spent on learning to use a theme framework can be recouped within two to three projects, and provide significant efficiency gains in the long run.

A Rundown of the Frameworks

Below I provide an overview of some of the best free starter frameworks, focusing on features, capabilities, security, and support. The majority of them are, quite expectedly, pretty lightweight, minimalistic, and open-source, which is why the primary goal of this article is to highlight the distinguishing characteristics which could help you to decide which particular platform to use in your work.

I’ve also included a comparison table at the end for a more convenient overview.

1. Whiteboard

Visit Whiteboard website →

Whiteboard WordPress theme framework

This is one of the oldest WordPress frameworks, which has been prolonging the life of designers around the world since 2008. It boasts a clean, well-structured, as well as standards compliant code base, and offers more dynamic classes and IDs than most other free and commercial frameworks. Whiteboard includes the Less CSS adaptive grid system which allows creating mobile-ready websites in a snap.

Whiteboard features:

  • Widest choice of dynamic classes and IDs
  • HTML5 and CSS3 with seamless degradation
  • Lightweight and well-structured code
  • Supports menu, background, and header management, several widget areas, etc
  • Easy to remove unneeded parts
  • Built-in Less framework for full mobile support
  • Compliant with WordPress development standards
  • Compatible with older ( – Cross-browser compatible
  • Search engine optimized
  • Supports multi-lingual capabilities
  • Open source

Whiteboard weaker points:

  • Available documentation is quite shallow

Especially recommended for:

Experienced ones who like to feel independent.

2. Underscores

Visit Underscores website →

Underscores WordPress theme framework

Based on the popular Toolbox theme, the Underscores, or _s framework is the product of 1000+ hours of testing plus the collective experience of the Automattic team – the guys behind the WordPress software itself. Underscores comes with a multitude of neat features such as sample theme options panel, custom template tags, several pre-formatted layouts, custom header implementation, and useful add-ons called “tweaks” that can be activated easily through the functions.php file.

Underscores features:

  • Backed by the experience of the WordPress creators
  • Minimalist and well-commented templates
  • Standards-compliant HTML5 and CSS3 code
  • Easy to add and remove capabilities
  • Custom header implementation
  • Custom template tags to optimize your code and prevent duplication
  • Sample theme options panel
  • Custom add-on functions, or “tweaks”
  • 5 ready-made CSS-based layouts
  • Mobile-friendly, with smartphone-optimized drop-down menus
  • Open source
  • Theme creator and showcase at Underscores.me

Underscores weaker points:

  • Not recommended to use as a parent theme

Especially recommended for:

Fans of Automattic who like to showcase  their creations

3. Bones

Visit Bones website →

Bones HTML5 framework

This sleek and resilient starter theme is built upon the HTML5 Boilerplate engine which is used by Google, Microsoft, NASA, and many other big fellows. Bones is distinguished by the “mobile-first” approach, which means that devices with smaller screens such as smartphones and tablets are being served only the required minimum, and the content flow is scaled up with the increase in screen size. This can make a huge difference for the mobile users with slower connection speeds, helping you to retain and engage the ever-growing share of the mobile traffic. The theme author offers a great tutorial on TutsPlus on how to get started with Bones.

Bones features:

  • Standards-compliant HTML5 and CSS3
  • Extremely detailed, clean, and well-commented code
  • Mobile-first approach
  • Graceful fallbacks for older browsers
  • Easy to add and remove features
  • WordPress header optimized for speed and performance
  • Supports custom post types
  • Custom dashboard functions included
  • Tuts+ tutorial on working with the theme
  • Open source

Bones weaker points:

  • Not meant for creating child themes
  • Limited support from the authors

Especially recommended for:

Less WordPress-savvy folks with per-project needs.

4. HTML5Reset

Visit HML5Reset website →

HTML5Reset framework

A clean and simple “no-frills” starter theme, HTML5Reset offers a style-free framework packed with usefulness to help boost the initial phases of the website/theme development process. Apart from the standard HTML5 and CSS3 goodies, it also features jQuery, Modernizr, and built-in Analytics. What you get as a result is a stable, cross-browser-compatible foundation code for your project needs.

HTML5Reset features:

  • Very clean and detailed code, focus on CSS optimization
  • Standards-compliant HTML5 and CSS3
  • Includes Modernizr the library
  • Cross-browser compatible with easy browser-specific classes
  • Complies with hNews microformat
  • Widget-ready

HTML5Reset weaker points:

  • Relatively raw and less-maintained
  • Limited documentation and support

Especially recommended for:

Disciples of minimalism who like to build from the ground up.

5. Gantry

Visit Gantry website →

Gantry WordPress and Joomla framework

Gantry is a freebie by the RocketTheme dev team which consolidates their extensive theme-building experience into a simple yet powerful starter framework. Apart from the other frameworks listed here, Gantry is compatible with Joomla in addition to WordPress, which extends its usefulness beyond the confines of a single CMS.

This is probably one of the most feature-rich free frameworks, boasting a configurable admin interface, dozens of widgets, built-in extendable AJAX, and many more, making it an extremely flexible instrument, ideal for those who want to “push it to the max.”

Last but not least, the RocketTheme website offers a very detailed set of documents and tutorials on Gantry.

Gantry features:

  • Fully responsive based on the 960 Grid system
  • Available for both WordPress and Joomla
  • Well-structured code optimized for speed and performance
  • 38 possible layout combinations
  • Multiple built-in custom widgets
  • Search engine optimized
  • Additional typographical features
  • Browser-level JS and CSS control
  • 1-click automatic updates
  • RTL language support
  • Extensive documentation on the developer’s website
  • Free child theme available

Gantry weaker points:

  • Support forum accessible only to RocketTheme premium subscribers

Especially recommended for:

Daring amateurs who wish to build websites with extended functionality.

6. Hybrid Core and Hybrid

Visit Hybrid website →

Hybrid Core WordPress theme development framework

The Hybrid Core can be proud of much more than just its Starcraft-style name: it is a modular theme development framework consisting of chunks of php code (controlling e.g. layouts, galleries, images, breadcrumbs, pagers, theme settings panels, etc) which allow the developer to pick and quickly incorporate only the desired features. The creators of Hybrid Core have also prepared an advanced starter theme based on the framework, called the Hybrid.

It may not be as feature-rich as some of the other theme frameworks, yet it does have a multitude of styled child themes in case you wish to start moving in a particular direction right away.

Hybrid features:

  • Modular structure for maximum flexibility
  • Supports breadcrumbs, galleries, pagers, drop-down menus, etc
  • Custom theme settings UI
  • Widget-ready, includes 15 custom widgets
  • Easy layout creation and per-post layout control
  • Search engine optimized
  • Translation-ready
  • Offers a wide variety of child themes

Hybrid weaker points:

  • The theme is not responsive (mobile-optimized)
  • Must have paid membership in the Theme Hybrid club for support

Especially recommended for:

Believers in modular approaches to ..uhm.. everything.

7. Ashford

Visit Ashform website →

Ashford WordPress framework

The last theme included in this list is called Ashford, and somewhat unlike the others it is a “freemium” product (i.e. having a free and a premium versions), brought to you by Turtle Interactive. The free version is a CMS framework which enhances the WordPress experience for web developers by adding more features and flexibility compared to the WordPress.org default. The paid plan adds several interesting features such as mega-menus, layout builder, and mobile support. Since other theme frameworks offer some of the above for free, Ashford can be recommended for those who can really utilize all its premium features.

Ashford features:

  • CMS framework enhancing the generic WordPress core
  • 33 customizable theme options
  • 18 custom page templates
  • Focus on page load speed
  • Widget-ready
  • Advanced blogging features including social sharing, related posts, RSS comments
  • Search engine optimized

Ashford weaker points:

  • Certain features such as mega menus and mobile support available only in the paid Pro version

Especially recommended for:

Those who are ready to pay for the Pro version.

Comparison Summary

Framework Whiteboard Underscores Bones HTML5Reset Gantry Hybrid Ashford
License GPL GPL WTFPL BSD GPL GPL GPL
Open source? Yes Yes Yes Yes No Yes No
Pricing Free Free Free Free Free Free Freemium
Documentation Basic Basic Detailed Basic Detailed Detailed Detailed
Support Limited Limited Limited Offered Offered Offered to club members Offered for Pro
Child themes Not included No No Not included Not included Available Included in Pro
HTML5 Yes Yes Yes Duh! Yes No No
Mobile-friendly Yes Yes Yes Yes Yes No Only Pro
Maintained? Yes Yes Yes Yes Yes Yes Yes

Conclusion

I have provided an overview of the seven most widely used free theme frameworks to speed up custom WordPress website and theme development. Given that all of them are free, developers gain savings both in terms of time and money, and receive the possibility to leverage their everyday work on the effort and expertise that have been put into creating these handy tools. The preference towards a particular platform is often driven by relatively subtle things like the desired level of CSS granularity or the approach to adding and removing new functions.

On a very general level, however, the best piece of advice is probably to try to match the complexity level of the framework with the requirements of the present and possible future projects. Just to give a couple of examples: in case you need a foundation to create websites for individuals and small businesses, themes like Bones and HTML5Reset would be a sensible choice; if, however, you are planning to build a complex WordPress theme for someone or (especially) for resale, you’ll find Gantry, Hybrid, and Whiteboard as more valid alternatives.

As a matter of disclosure, I am personally using Whiteboard in my work, mostly because it strikes a decent balance between being lightweight and offering all required features to suit my needs (I design and sell premium themes under the Satori Studio brand) – but maybe also because I never felt an urge to shift after having spent my time on getting to know it.

As with anything, each of the theme frameworks listed here has its own drawbacks, yet also something great and unique to offer – the ultimate choice is yours!

The metal framework image is courtesy of TschiAe on Flickr.

Related posts:

  1. Free WordPress Frameworks for Designing Your Own Child Theme Want to design your own WordPress theme? These frameworks are...
  2. The Faults of Theme Frameworks, and How to Fix Them There's a bit of a buzz around theme frameworks and...
  3. Theme Force: The WordPress Standard for Restaurant Frameworks If you’re thinking of using WordPress to build a website...

Viewing all articles
Browse latest Browse all 6

Latest Images

Trending Articles





Latest Images