next next

Apollo: A WordPress Theme From Scratch pt 1: Concept

Written by Cebo Campbell on May 13th   •   3 Comments »

Deciding to build and sell a WordPress Theme at a “premium” level is an easy decision to make, but a tough one to follow through to the end. Whether you have a framework or not, themes of any kind are big undertakings. It takes an awareness of an ever-changing market feature set, a range of skill in design, HTML, CSS and PHP, as well as a large pair of cajones…big ones. You see, WP themes are like any other artform, in that, you put yourself on the line and you are simultaneously judged by your sales and your peers. In most cases, there is no client telling you what they want or don’t want…it’s just you and a blank canvas. And with the market so flooded with themes, you might believe developing themes easier than traditional consulting work. Nope. There is no one over your shoulder telling you what they want or don’t want, no one describing the market demands and giving you deadlines. For the most part, my friend, you are on your own. But, having a good process that guides you through is the most helpful thing you can do. So, in this short series of articles I will show you my process as well as build a fully-functional theme. My process breaks down like this:

My Process
  • Conceptualization – coming up with and fleshing out design and development ideas and plans before the computer
  • Design – Full design views for every page
  • Markup (testing) – Writing proper, clean code as it prepares for WordPress
  • WordPressification – Building into WordPress
  • Choosing a Marketplace

Conceptualization

Conceptualization, fundamentally, is just thoughtful planning. Because I am a designer and a developer, for me at least, I always start with just a pen and paper. I write down notes and draw doodles of things to get a general idea of what I am doing. The planning is not as simple as sketching and prototypes, but, with themeing, really trying to grasp the fullness of what you plan to do and working through the problems now rather than later. With Apollo, the first bump was deciding what type of theme I wanted to build. As you know, there are a bazillion types of themes– business, portfolio, magazine, eccommerce, showcase, real estate and others. For me, I have lots of friends who are photographers or designers who’d asked me in the past about helping them pick a good wordpress site. So I decided to build Apollo as a showcase theme. My friends, not the market, dictated that decision. This is important. Some of my earliest themes were dictated by the market…based on what I believed would sell. I did what we all do and went to Themeforest and Woothemes and others to see what was the most popular. This approach can be more hazardous than helpful as we will limit our creative abilities right from the start. Inevitably, we look at and attempt to duplicate what we see in popular themes. As artists, and we all are, we have to build what “we” want. The market is a measuring stick, but not the rule maker. I thought specifically about my user and what they would like to see. That, in and of itself, gave me an entirely different vantage point. I could now work through the problems in a personal way.

Once I knew that Apollo would be a showcase theme, and me being a cocky bastard, I wanted it to be the one of the most bad-ass showcase themes available while having “intuitive” features. I say “intuitive” because one my personal issues with WP themes is that they often try to do too much or more than what is needed for that particular theme. You’ve seen ‘em, every possible updateable feature, eighteen different homepage sliders, a zillion google-fonts and so on. I may be in the minority on this, but “over-themeing” in my opinion is just overcompensation for lack of intuitiveness. I mean, you wouldn’t buy a phone just because it could also double as a fork. Any great design, just feels intuitive…with elements, color palettes and features that help advance it, not relinquish that great design to the user (this is also the philosophy of most apple products). When you give the user the ability to change all the fonts, all the colors and all of the layout, you might as well just make a WIX site. Sorry for the rant…

Anyway, I started taking notes. My first step was to describe the theme in three words. This allows me to keep to a simple idea of what I want and build around, a, sort of set, of rules to guide me as I begin working. For Apollo, the words were: Bold, Clean, Smooth.

Bold – for me meant, big sections, large images and big text.

Clean – for me meant tons of white space and a single font choice with different weights

Smooth – for me was all about functionality. I want to replace all jquery I can with css3 and lazy load all the big images

Now that I had an aiming point, I started sketching. My first sketches were rough, but they were meant to be. What I was attempting to do was work through some of the issues and getting it on paper helps tremendously. I started working with the homepage first. One of the things I am pretty big on doing is concept and design without initial regard for code. I am confident enough now to code pretty much any design, but that was not always true. I used to limit my designs because I was afraid I could not code it. But, designing without limits actually stretches you out creatively and drives you to write more creative and complex code to accommodate it….but we will get into that in the next section.

Keeping tight to my three word description, Bold, Clean, Smooth, Apollo had to get that right off the bat. Big images. Big showcase. Gigantic homepage that feels almost like a one-pager. One of the trickiest things to code are the big, full-screen websites because they require very special code to pull off, not to mention in this case I wanted both the full screen effect and the deeper home page below. It’s scary stuff. You can see in my sketches my notes on some of my troubles with it.

I took down a list of things I thought would benefit that theme homepage. Now, in my case, I had friends who I could consult with and determine what would be most needed. So, I decided on:

  • Big Featured Slider (full screen)
  • About Us/About Me/Services
  • Portfolio Section
  • Blog Section
  • Contact Section

These were the most basic things I felt were needed on the homepage. In my sketches I was able to think about the priority of these elements and how they should be positioned on the pages while at the same time continuously keeping the three words in my head: Bold, Clean, Smooth. If what I was putting on paper did not fit those parameters, I started again. As you can see in some of the sketches, it is pretty sloppy, but it familiarized me with what I about to dive into as well as helped me wrap my head around it all.

One of the best parts about concept is not just the design, but the notes I am taking on the functionality. I am now able to start thinking about detailed stuff as well, such as hover state animations, sliders, parallax features and more.

I rarely ever have a final sketch. Whether you do or not is a preference thing. I prefer to have more room to work creatively once I start making concrete designs in photoshop. But, at this point, I know what I am building, I have rules for design, Bold, Clean, Smooth, I have basic functionality drawn up in my head, but most importantly, before I ever touch a computer, Apollo is already shaping into what “I” want. Concept done. So, now, I am on to design, which I will cover in the next post.

Stay Classy and check Part 2: Design







3 responses on “Apollo: A WordPress Theme From Scratch pt 1: Concept

  1. [...] Apollo has been a ride. If you followed the previous post, you saw how the sketches began to crystallize into something and the ideas came together. Before [...]

  2. wpflame says:

    wow, you are a professional. do you code it yourself?

  3. Cebo Campbell says:

    Yes, I did.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent Posts
Instagram
A Little About Me

I am just a dude who likes making things. I've worked as designer, a social media marketing director, a copywriter and even a pool cleaner. I own the boutique creative agency Novel Avenue, make WP themes, EE Themes and Ruby themes and honestly could not live without football. I am husband to a rad wife, dad to two kiddos and love what I do. Also, I am down for a beer if you're buying.
I am easy to find

HIT ME UP

  • My peeps on the web