Codeable info

The 4-Hour Unique Theme

Posted on by in WordPress Tutorials

At first blush, customizing a WordPress theme seems simple enough. You find “a good one”, install it, and then discover the code is all kinds of odd. 6 hours later, drowning in tabs of “possibilities” and pages upon pages of installed themes, it doesn’t seem so easy anymore.

Even still, if you’re looking to get something fresh and free, customizing a theme is certainly the most efficient way to go. The problem is not your solution – it’s your way of thinking about the solution.

Hour 1 – Theme Discovery

I banged my head up against that exact same wall of useless themes continuously my first few years working with WordPress, and theme discovery is easily the biggest time-suck if you don’t know how to look. Here’s your stud finder.

First things first, you need absolutely clear goals – just two. For one, the layout type – do you need an unusual display style like a magazine layout, or maybe something with a professional page style for a business site, or is the regular columned blog style just right? Second – where do you want to focus your fancy; great typography, whiz-bang widgets and pages, or a particular graphic style?

…because you’re not going to get ALL of your priorities in one free package.

I typically focus on great typography as it’s often the most time consuming to implement since I’m such a perfectionist in that area. Your “fancy sticking point” could be very different, but the key is to focus on what you want “done for you” to clear out a significant chunk of the development time. Although I will caution – focusing your fancy on the graphic style can be more of a time investment if you intend on flip-flopping the layout at all.

Once you figured out your top two goals, resign yourself to letting absolutely everything else fall off during the theme hunt. Nothing but these top two goals matters one bit. The header, the colors, the fonts, the number of columns, the size and scale of things including fixed or dynamic widths, the placement of things like menus and widgets – they simply do not matter.

In fact, the more “wrong” and “blah” they are, the better. Usually that means the code is simple enough to modify quickly and make a completely unique theme out of it. Modifying CSS, adding custom pages, and registering sidebars are the simplest things to do. Expect it, and you will save yourself hours of frustration.

TIP: Search Google for blog entries about your layout type or fancy focus, like “best portfolio WP themes” or “best typography WP themes” instead of searching through directories.

Hour 2 – Evaluation

If you’re still debating on a couple potential themes, this second hour will take a little longer but you will definitely have a winner. The point of this hour is to internalize the theme – to become so familiar with the important bits that it’s as if you developed it yourself, so that you can move on as if you developed it, knowing exactly what you need to do.

TIP: As you go through each step, note anything you find that needs to be changed in a list to reference later.

Once you install your potential themes, take a good look around. The first eliminating factor is whether there is a Javascript or specialized code handling something I want to keep (a quick check in the theme files for a .js and a glance at functions.php should suffice). If I don’t instantly understand it at first blush (and I’m a 16-year veteran), the theme gets deleted.

Is the CSS file six miles long? That’s a good thing – you’re probably mobile-ready and the theme has all the hooks you need already built-in to modify it quickly. A glance down the CSS to make sure it at least has hooks for comment formatting is usually enough to determine if a theme is worth keeping. Even if you won’t use comments, this is usually a sign the theme has all the hooks you need.

If it looks like you could edit this to suit your needs rather simply with all the hooks and boxes you need, the last step of elimination is a look at the images. Sometimes an otherwise super simple edit is foiled by design tricks that lock you into the original layout. It’s not always a deal-killer, but it’s worth knowing.

For example, I went to use Deep Blue (above) for the basis of what would be a left-column layout with a full-width header on top, and about another 200 pixels wide overall. The background image made those pretty simple edits a complete nightmare. The black behind the sidebar and the white behind the body are not colors declared in the CSS – it’s one image, repeated vertically and centered. I just scrapped the background and made my own.

The last step in this hour is to settle on a theme if you haven’t already, and cross-reference your CSS alongside your theme files, find where your classes and identifiers live, and if it’s complicated – draw out a plain framework on a piece of paper and label the empty boxes with their CSS selectors.

At the end of roughly 2 hours, you should have a theme, a list of things to do and a clear idea how to do them. If you don’t know much about HTML and CSS, add another hour to allot for learning and finding out how to do what you want.

Home Stretch – Hours 3 and 4

Now we modify. First, move around your divs in the theme files, being careful to order your code properly so floating works as expected. Next, get your graphics fixed up, if necessary. Import your database or content, if you have it (if not, just make your placeholder pages) and then worry about widgets, menus, and custom post types. Last, modify the CSS to your vision.

TIP: You can often find all the code you need for a custom post type with a quick Google search. Copy. Paste. Done.

Using this method, I have consistently developed unique WordPress websites in less than 4 hours. More complex sites take about one easy work day. Compared to one full week to develop a theme from scratch, modifying really is the quickest route for me when I am both the designer and developer on a project.

What tricks do you keep up your sleeve for quick WordPress development?

Comments Closed

Codeable info