Posted December 4, 2012 in CSS, WordPress

Test-Driving WordPress Twenty Twelve

I wanted to take a peek at the much-hyped WordPress Twenty Twelve theme so I used it to redesign my portfolio. I figured it would be a good theme to explore, since the chances of a client requesting it seem fairly high. Overall, I think it lives up to most of the hype. I especially recommend it to non-coders because you can do so much through the GUI. For example, you want a custom navigation menu, or three? No problem, you can do it from the “menus” subpanel without writing a line of code!

I dig the whole “minimalist” vibe but I felt there was room for improvement, most notably, white space. Out of the box, there’s just too much margin between certain page elements, which gave me a “scattered” feeling when looking at the index page and sidebar items. My first order of business was to tighten things up. I stripped the comment and entry metadata from the index page, then pushed the date up below the entry title. Personally, the “white page on grey background” look made me think I was staring at a Microsoft Word document, so I unset the margins above and below the body. The box-shadow around the body was next to go, followed by setting the page background to white. I also stripped most of the margin from the widgets, then added a subtle green to a:hover, just for a dash of color. Super minimalist, super clean.

I really like what they’ve done with the front-page template, but it wasn’t immediately intuitive how to recreate the slick-looking two-column homepage touted around the interwebs. It’s actually pretty easy to do: create page and set it to “front page template,” call it “home” or whatever you like, then add your content. When you’re satisfied, go into “Settings > Reading” and select that page as your home page. You can set widgets to apply to the home page only. To get the two-column layout up top, simply select a featured image and insert it into your post.

According to WordPress, the media uploader is going to be considerably revamped in 3.5. I think that’s a good idea because there are some usability issues with the current uploader that I find a little annoying. For example, after selecting a featured image, WordPress says “done,” but takes no action, which left me wondering if I needed to click “save all changes” (you don’t). If you do, you’re taken back to the “media gallery” index page and given another option to “save all changes.” It’s a little funky. They should streamline this process.

Though I like the mild border radius and box-shadow the theme automatically adds to uploaded images, I found it working against my desired aesthetic for the home page. I didn’t like the “blocky” feeling that resulted from running a regular photo on the home page, so I opted for a line drawing with ample white space all the way around. Unfortunately in that context the default box-shadow gave the impression of a vertical rule gone awry. The “featured image” has the class img.wp-post-image. If you open up style.css and scroll to line 320 or so, you can see the “fancy border” styling. Commenting this out will remove the border-radius and box-shadow, but will apply to all WP-added images. If you only want to remove the box-shadow from the “featured image” on your homepage, the following did the trick for me:

.entry-page-image img.wp-post-image {
	box-shadow: none;
}

Other than those trivial complaints, the theme has a lot going for it. I intend to tinker and fine-tune some more, and I’m glad I took a look under the hood 🙂

Got Something To Say:

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