Top 3 WordPress Starter Themes

A WordPress starter theme is a fully functional WordPress theme that can be styled and configured. It acts as a starting point for development of new themes. I experimented with three popular WordPress Starter Themes over the last couple of months. I started off with Underscores, moved on to Bones and then to Sage. And here is my overview, experience and comparison.

UNDERSCORES (_S)

Underscores starter theme was originally conceived and built by the awesome WordPress Theme developers at Automattic who also developed WordPress, Akismet, Jetpack, Gravatar… and more. So it comes from the experience of a team who creates themes for a variety of users, browsers and devices. WordPress theming best practices are applied on this starter theme. It also comes with just the basic markup, styles and functionality.

It is a perfect no-fluff starter theme and hence was a good “teacher” for me to learn the mysteries of WordPress. Thanks to the ThemeShaper crew, I managed to get some pointers on starting my WordPress theme development journey.

PROS

  • Lean Codebase
  • Actively maintained
  • Well-commented code files
  • Lots of documentation and tutorial available on the internet
  • Very easy to setup and use
  • Mobile Navigation Ready

CONS

  • Non Responsive out-of-the-box
  • No styling out-of-the-box

BONES

Bones is a mobile-first starter theme for WordPress. These days, when people are resorting to handheld devices for browsing, a starter theme like Bones comes handy. Building a website for the mobile first and adding more as the screen size increases ensures faster page loading and seamless responsiveness.

Bones was so easy-breezy to setup and run. It came with out-of-the-box stylesheets and that helped with the SASS setup as I have just started learning it recently.

PROS

  • Mobile-First and Responsive
  • Built on HTML5 Boilerplate
  • Well-commented code files
  • Out-of-the-Box stylesheets (SASS) with very detailed comments
  • Very easy to use as a beginner’s starter theme
  • Preloaded Custom Post Types and Custom Dashboard Functions (ideally plugin territory)
  • Great License ?

CONS

  • Does not use the get_template_part pattern (repetition!)
  • Not minimalistic or lightweight as the others (but can be a PRO because it helps with the learning curve)
  • No inbuilt-support for custom headers

SAGE

Sage (previously known as Roots) is a very popular starter theme amongst developers. It includes many developer-centric features and encourages setting up a development workflow advocating various tools like gulp, Bower and BrowserSync. Sage strongly supports the DRY principle and has introduced Theme Wrapper which eliminates repetition.

The documentation on the Roots website was at a very high level and the community was not particularly friendly to newbies. So I struggled to grasp the basics of Sage. A friend helped me navigate through the process and I managed to understand the key concepts of Theme Wrapper and the unique folder structure. I would not recommend this as a starter theme for a WordPress Development Newbie. Not only are there major deviations from WordPress (for the better, actually!), but it is not as well commented as the other two. These two factors made it a difficult for me to explore this in detail in the short time I have available for my Web Development Project.

PROS

  • Lean codebase
  • Actively maintained
  • Active Community (not always newbie-friendly, though)
  • Theme Wrapper for rapid coding
  • URL rewriting and clean URLs
  • Introduces tools for workflow gulp, Bower, BrowserSync

CONS

  • Non Responsive out-of-the-box
  • No styling out-of-the-box
  • Steep Learning Curve
  • Can be time-consuming and complex to setup for a beginner
  • Insufficient documentation on the website
  • HTML5 Boilerplate and Twitter Bootstrap were part of Roots, but has been removed in Sage (for framework agnosticism?)
  • Some of the functionality has been moved to SOIL which is a commercial (paid) plugin


WordPress

StARTER THEMES

HTML5  

OUT-OF-BOX STYLES

CSS PREPROCESSOR

GUIDE  

DIFFICULTY RATING

PRICE  

LICENSE  

MOBILE FIRST  

POPULARITY  

UNDERSCORES

SASS

MEDIUM

FREE

MEDIUM

BONES

SASS

LOW

FREE

LOW

SAGE

SASS/LESS

HIGH

FREE

HIGH

REFERENCES

  • The three starter themes I discussed on this post are:
  • Go here for an excellent tutorial by ThemeShaper in creating a theme

Check Also

Website Header with HTML5 and CSS3

A Simple Website Header with HTML5 and CSS3

Would you like to see the creation process of a simple website header using just HTML5 and CSS3 - from sketch to HTML page to working prototype?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.