Whenever I want to work on a WordPress theme or plugin I always wish I could just push a button and have a clean WordPress setup to work from. Vagrant allows for wonderfully programmable virtual environments for local development but when starting to work with Vagrant you quickly realize how complex system administration can become. Many have made attempts at solving this issue with projects ranging from Varying-Vagrant-Vagrants, to Bedrock, to VagrantPress. I wanted something less opinionated than Bedrock, less complicated than VVV, and more configurable than VagrantPress.

Enter AnsiblePress

A simple to setup WordPress Development environment that leverages Vagrant with Ansible. The whole thing can be managed from the all file in the group_vars directory and deploys in minutes.

Download From Github

What’s Installed

  • Ubuntu 14.04 LTS
  • Nginx
  • MySQL
  • php5-fpm
  • php5-mysql
  • php5-cli
  • php5-cgi
  • php5-curl
  • Composer
  • WP-CLI
  • Essentials (Git, Curl, Tree, Man)
  • Aliases derived from my dotfiles
  • Automated WordPress Download

Development Roadmap

  • CentOS Support
  • Multisite Support
  • Automated WordPress Download
  • Security (minimal) enhancements

Tic Tac Toe with JavaScript

Here is a great coding challenge for someone who has never done this. Write a complete game from scratch with no libraries or frameworks. Clearly this was a job for JavaScript. I chose to make a tic-tac-toe game. It took just about an hour which isn’t half bad since this is my first attempt at a JavaScript game.

The game itself is pretty basic but outlines some pretty important concepts in game design. I’m going to work on bridging a more elegant algorithm for calculating a win or draw but that will have to wait until another day.

I’ve also decided that I’m going to tackle a few more games, and of course, share them with the good folks of the internets. So far I have in mind to build Snake, Pac-Man and Tetris.

All of my source is on JSFiddle so feel free to use/abuse it as you wish.

Using Sass for WordPress Theme Development

This talk was given at the NY Sass/Agile Design Meetup at Pivotal Labs on October 16, 2012

Workflow: A problem

Hello all, I’m Jean-Pierre Barthelemy. I’m the CEO and Creative Director of Zybra Group, a web design firm that focuses on WordPress development.

Designing a WordPress theme usually starts out on a local development server.

1 min               Creating the database
1 min               Download and unzip the files
5 mins             The famous 5-minute install.
1 min               Updates.
2 mins             Delete dummy content: posts, pages, comments, links.
1 min               Delete Hello Dolly plugin.
1 min               Adjust settings: permalinks and reading.
2 mins             Create or import sample content


Just setting up a new WordPress instance can take 15 minutes. This may not seem like a lot but imagine you had to do this just four times in a day. That’s an hour spent unnecessarily.

Once the install is complete, now I can begin the theme design. First, I come up with some ideas on paper, then flesh it out in Photoshop. Then I chop it up into images and build some HTML/CSS pages. Then I add PhP tags to the HTML documents to make them work with WordPress.

I love Sass because it allows me to minimize the amount of repetition used when writing CSS, enabling me to focus more on the creative process. But is that really enough? Is CSS really the only part that slows us down?

To me Sass is more than just a set of pre-processing tools, it represents a philosophy that code can be written quickly and simply. I asked myself how I could approach the WordPress theme development process differently? What lessons could I learn from the principles that guided the development of Sass?

In the next 5 minutes I’m going to share with you how I use this philosophy to guide my WordPress theme development process.

Speeding it up

I’ve taken several steps to speed up my backend development:

For starters, I use a WordPress Network to build my sites. This way, from one login, I can dynamically switch between sites. And creating a new site requires only two strings: site name and administrator’s email address. I also wrote a plugin which automatically filters out all the fluff I want to delete. Now instead of spending 15 minutes installing each site, I can have a pristine WordPress site in under 5 seconds. Using a network also means that I don’t have duplicate WordPress core files. There are plugins available that allow us to quickly clone WordPress sites but I try to minimize my use of plugins as much as possible.

Next, I decided to build a theme framework. This allows me to have a stable core for all of my projects that serves as the launching point for the design layer. My framework only does what is common to every single WordPress site I create. It has zero CSS and only provides a semantic HTML5 framework for creating a blog and pages.

The added functionality of custom post types, custom meta boxes and custom taxonomies is done in the child themes only. My child themes start out with helper functions. Rather than creating some large API for generating sidebars and endless page templates I create them individually, as needed. As bits of code become more useful they are added to my Parent theme or First-Child theme to become readily available in future designs.

Design Layer

For my front-end development I wanted a way to be able to develop my own toolbox of styles, so I started using Compass.

Compass functions as an extension of Sass by offering things like patterns and mixins that make writing Sass even easier. It takes the guesswork out of writing the bits of code that we need, such as resets, grids and buttons.

Extending Compass

What it doesn’t do is handle some of the advanced math that is responsible for creating responsive layouts and establishing visual patterns. To address this I am creating an extension of Compass that moves beyond CSS and addresses visual design.

When you use Sass you can define a color palette to work from. You then can create additional colors by defining their mathematical relationship to one another, rather than by setting hex values. For example, a light shade of blue will be defined as 20% brighter than the predefined shade of blue in your color palette.

The extension that I am building uses equations to suggest a full palette of colors that work well together, based on the predefined color palette that is established in Sass. What this does is take some of the guesswork out of achieving color harmony, it also speeds up the design process because a change to one color creates a ripple effect, thus changing the entire document.

This is about spending less time wrestling with code and instead getting right to the creative part. Being able to change things, intelligently and comprehensively is one of the things that makes this possible. It creates dynamic flexibility.

CSS First Design

Which leads me to my final point. We’ve discussed all the ways that I have sped up the development process, by using Compass and writing CSS more quickly. Now that my backend development is nearly instantaneous, I have more time for front end creativity. Once I apply Compass and my extension, front end development becomes much faster as well.

Back in the day (last week) I used to go from Photoshop, to HTML, to PhP, to debugging. Now that I have achieved so much increased efficiency, it only makes sense to shorten this process as well. Why bother with Photoshop, when writing an actual CSS document is so much easier? Why not go straight to Sass to design the front end and cut the process in half?

Hello world!

The classic first lesson in computer programming Hello World, symbolizes the beginning of a new journey. Since 1999 I’ve written in C++, PhP, Javascript, Ruby, Python and a few other languages. Today, I’m writing in Me.

A 2012 New Year’s Resolution

In 2011 I was a struggling freelance web designer working out of an office share in downtown Brooklyn. I decided that if I was going to have a future as a web professional I needed more than a working knowledge of the various programming languages. I needed to master them.

So began the ten month quest to fluency in web development.

  • Books: New York Public Library
  • eBooks: iBooks, Kindle, etc.
  • Screencasts:, Code School, Code Academy
  • Articles: A List Apart, Smashing Magazine
  • Q & A: Stack Overflow

Update: 2013 renewed perspective

Software development is demanding to such an extent that you really have to be strategic about everything. Your workflow will either liberate you or cause you to write in circles. Methodology and tools will save you valuable high level thinking time. The more often one can ask: how can we do this better/simpler/faster the better off you’ll be in the long run.

Reading vs Screencasts vs Tutorials

I’ve figured that reading is the chief learning medium for advancing as a programmer. Being able to read a textbook thoroughly and quickly will do more to advance you as a programmer, mainly because books are non-linear. With a textbook its a lot easier to skim, fast-forward, go back to something and more importantly you can take it with you anywhere you go.

The New Library

My once massive collection of textbooks bought and borrowed is now just about three books on my shelf. I have since built a pretty impressive library of textbooks on my iPad mini. I am amazed at how many amazing resources there are online for free or insanely cheap and best of all, I don’t need an internet connection and I can take my entire 100 book collection with me everywhere I go and constantly learn new things.