My First Theme

One of my projects to finish out 2015 is to create a new WordPress theme. Getting more concrete than that has been hard – it’s clear I’ve never really worked on a design process before. To help get me going I started scanning through the theme directory for WordPress.com and speaking out loud why I liked certain themes.

I gained some traction once I realized the most compelling statements were not about any technical element, but how the theme made me feel. What the theme seemed to help inspire. Kind of like how Apostrophe makes me want to start a magazine, I want the theme I make to have the same effect on someone.

After some brain dumping (I dump, I don’t storm) it became clear that I’d like my theme to inspire gaming and fantasy – like D&D which I love so much. If my theme inspires even one person to blog about their gaming, or to game in the first place, it’s a success.

With that in mind I started wireframing. First, some mobile ideas…

mobile wireframes wordpress theme
Featured Posts will be important

And next, a front page reminiscent of a character sheet…

A few widget areas, and heavy on post content
A few widget areas, and heavy on post content

Obviously there’s a ways to go, but now I’ve got some near-term goals I work on to get the project running. Working name is “Loot.”

Apostrophe

The new WordPress theme, Apostrophe, makes me want to start a magazine of some sort. Beautiful and responsive, it has a great layout for sites pushing lots of content. You can download it for your self-hosted site or activate it on WordPress.com here:

Apostrophe | WordPress theme

Apostrophe, a new WordPress theme from Automattic
Apostrophe, a new WordPress theme from Automattic

Also kudos to fellow Automattician Konstantin Kovshenin, who built Apostrophe’s older sibling, Semicolon.

How I Customized Hew

When the designers at WordPress.com released the theme, Hew, I immediately liked it. I had been using Vertigo because it was unique and odd, just like me. It also used post formats, which I like.

But Hew gave me a chance to turn my page into something less driven by the theme itself and more representative of me. And it still had post formats. 🙂 When you start off, Hew looks like this:

A simple layout… hidden widget area… sections of color… cool. But there was work to be done.

I loaded up my Customizer to look at colors. I live my life in greens and blues, so I picked out a palette first that had some green and blue with dark grey.

Theme doesn't need all the colors? Even better.
Theme doesn’t need all the colors? Even better.

After picking the palette, I found a few color irregularities but fixed those up in the CSS.

I stuck with the default theme font, because I am not a font nerd. Not comic sans or papyrus? Then we’re all set.

Hew automatically sets your header image (tiny little square at the top) to your Gravatar, which is good because I don’t feel like updating my face in more than one place anyway. Gravatar, FTW.

When I made the theme switch I also adjusted my navigation menu. In Vertigo the navigation is below the content, so I treated my links there similar to “More Posts” links. Lots of category pages. Not the case in Hew, so I edited down to just “About” and my reading updates (which I’m doing poorly.)

Hew also uses a social links menu, so I whipped up one of those with my Facebook, Twitter, Untappd, LinkedIn, and WordPress.org profiles. WHAT? Genericons doesn’t have an Untappd icon? It’s okay. There’s a billion social networks and a lightweight icon font shouldn’t have them all. I’ll fix it in the CSS later.

Widgets! I used to have a Twitter timeline at the bottom of my page in Vertigo. With a social links menu, this seems bizarre because why have my timeline when you can click on the little birdy? Gone. I still have the Goodreads widget appear (on my reading posts only) and left some of the navigation links. I really like having this kind of thing hidden behind the menu button.

And then the big stuff, CSS. In 53 lines of it, this blog becomes my customized creation. My first step, wrangling my damn 2015 Reading page. And I’m not talking about how slowly its filling up with books I’ve read either. No! The display-posts shortcode is handy, but tough to keep it all looking pretty. Here’s what I’m running to help:

/******************************
Make display-posts prettier
******************************/
div.listing-item {
margin: 1em 0;
}
img.attachment-thumbnail {
padding-bottom: 30px;
}

So far it seems like this avoids any weird lines beneath the images, and keeps each listing looking separated enough.

Next up, refine those colors:

/******************************
Make stuff match the header color: Line under links, botton colors
******************************/
.entry-content a {
border-bottom: 1px solid #94BA65;
}
button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span {
background-color: #94BA65;
}
/******************************
Change widget wrapper color to something with less blue
******************************/
#widgets-wrapper {
background-color: #2790A0;
}
/******************************
The comment meta box should match the header color
******************************/
footer.comment-meta {
background-color: #94BA65;
}

I seriously should live in a world where only 3 colors exist. Makes things easier to match. I think my wife still finds the widget wrapper to clash with the green. But I like it.

Remember that missing Untappd icon? Yeah we can fix that. Eric Coram, real man of genius, had an untappd transparent icon which I found through google images. I took that one and made some adjustments for my needs. That’s the beautiful icon you see up in my menu now. In the Custom Menu settings you can set CSS classes for menu items, and I made use of that to make an “untappd” class for my CSS:

/******************************
Change the untappd icon in social links menu
******************************/
li.untappd a::before {
content: url('https://alexjgustafson.files.wordpress.com/2015/02/icon-untappd-2561.png');
margin-top: -6px;
margin-bottom: -8px;
}

And last, but not least, my big long name caused some problems. On smaller screen widths, Hew would cut off my name and overflow it with an ellipsis. I did not want this. So I added a media query to change the title’s font size instead:

@media screen and (max-width: 509px) {
.site-title a {
font-size: 70%;
}
}

While writing this post, I also noticed that code styling in Hew isn’t too distinct from standard text. So I added some CSS to clear that up too:

code{
display: inline-block;
margin-left: 50px;
}

The customization never ends! But this is what I’m running. Feel free to steal copy any of it for your use as well.