Today’s a great day for us over at Theme.fm because just last night our very first free WordPress theme has made it through the review process and has been approved for the WordPress.org Theme directory! San Fran is quite a minimalistic, typography-based WordPress theme that provides a few different color schemes to pick from and many other exciting features.

This post will briefly take you through the features of the San Fran theme, the planning, design and development process. We’ll dive into some structure and code and see how San Fran makes it possible to customize it using child themes and plugins. We will also briefly cover the WordPress.org review process and the issues that we have faced while submitting our theme there. But hey, if you’re here for the download, go ahead:

Planning the Theme

Honestly, there wasn’t much planning here and San Fran was more of a way to get us relaxed from day-to-day jobs we were doing for clients, so it was mostly mockups going back and forth, without any internal approval process but with feedback of course. We didn’t plan several color schemes and typography changes, we weren’t planning post thumbnails and multi-level navigation menus.

Post formats were indeed part of the plan as well as that lovely GPL icon set we released yesterday. Widgets and sidebars, a full-width page template and a layout that provides easy access via child themes was thought of since day one.

Designing San Fran

As mentioned, these were mostly mockups of pages going back and forth throughout all the process of creating the theme. One aspect we didn’t think of in the first place was providing several color and typography options, so they came after the Arial/Tahoma variant was already implemented and running on WordPress, so then we said “hmm, let’s spice it up a little!” and we came up with three color and typography sets and decided to call them “color schemes”.

We were thinking about the name “skins” for a while but really had a slight problem at defining what a skin is since it was easy to change colors and fonts of things, but not actually move them around, shape them and structure them differently, so we went ahead with color schemes. It was much easier to see the constraints from the designer’s point of view.

The Development Process

Developing San Fran was quite simple at first, the slight problems occurred during cutting the image files into HTML templates after which WordPress’izing them was a breeze. But hey, then came the icons, thumbnail images for archives and the three different color schemes, so we were stuck cleaning up the CSS code and separating it into different files, and eventually got through it — what a relief! At around that time we published the color schemes options tutorial here on our blog.

The Theme Options page in the admin panel is implemented via the Settings API, one thing we can’t wait to see in the upcoming update for the Twenty Eleven theme. This makes it possible for themes and plugins to extend the page and add their own theme options to add some extra features for the theme.

Next, we separated some of our template files into multiple files to allow child themes to override how various post formats are displayed on the front page of their blog, the archives and search pages, sidebars and pagination. This took a while to lay out and there’s a big chance that we’ll be making even further separations in the coming updates to the theme, but from what we learned — it’s worth the effort.

Finally some browser and version testing, some quick check on how plugins play with the theme and deployed the theme with some test data to the playground server for everybody to take a look and provide feedback. Minor issues were quickly taken care of and we were soon ready for the review process.

The Review Process

To be honest, this was our second free theme published in the WordPress.org repository after Minimal Georgia and this time it was so much easier and smoother. Of course we weren’t expecting to get it approved with a single review, so the good guys from the review team helped us out finding the issues.

There were a few minor issues with localization that were fixed, a .gitignore file that we forgot to remove from the archive we uploaded and oh the categories and the multi-level menus were the worst. The review guidelines clearly state that our categories and tags have to be displayed, while we, from design reasons decided to hide some of them if there are too many to fit in that funky meta bar.

Turned out that we were allowed to provide an extra option in the Theme Options that we called “Legacy Categories & Tags Display”, turned off by default, but allowing end-users to get rid of the initially-designed meta bar in order to show their categories and tags in full. That was a brilliant idea and one that has actually worked!

Multi-level navigation was scary since we had three different color schemes, so had to dive into the CSS code again for all four stylesheets (main and three schemes) to figure out the menu children, the hover effects and the colors. But once that was done, we were ready for a second try, which was way faster than we expected — literally minutes! So we were up and running on WordPress.org in no time!

Future Plans

Yes, we do have future plans for San Fran, no scope has been defined yet, but we’ll probably introduce a few other color schemes and typography options, maybe a few exciting customization settings for the Theme Options page. One thing we’re definitely going for is a bunch of new filters and actions throughout the whole theme for child theme developers to really take advantage of San Fran as a parent theme.

That’s about it folks! Hope you enjoy our freebie and we’ll be really happy if you provided any kind of feedback on the design and code. What features would you like to see implemented in the next update and whether you’re willing to use San Fran as a child theme for one of your projects. Use the comments section below to share your thinkings and give us a shout on our Facebook page too!