New Child Theme | Minor Site Redesign
Note: this post reflects a previous site design. This site is no longer using the theme or plugins cited in the article.
Yes, I finally did it. I finally updated this site’s theme from a Twenty Ten child theme to one based on Twenty Twelve. And it didn’t hurt at all.
Well, only a little.
Why use Twenty Twelve,? For this site, I’ve preferred to keep things simple while maintaining my coding skills. Twenty Twelve is a good parent theme because it’s easy to customize and very well-suited to traditional Web sites. It’s a cleanly-coded, solid base for child theming – it’s mobile responsive without being bloggy. Or tacky. Its simplicity makes it a superb starting point for a variety of Web projects.
In contrast, the newer default themes have been tougher to work with. Things as simple as moving content boxes where I want them have caused headaches and browser conflicts.
Furthermore, I wanted to test plugins that could prove useful to others managing their own WordPress sites, be they clients or readers of this blog.
Stylin’ Up WordPress
First, there’s Styles, which adds customizer options that allow anyone to tweak colors, fonts, and other aesthetics without needing to know how to code. Next, there’s Styles: TwentyTwelve, which ensures that the Styles plugin works harmoniously with the Twenty Twelve theme.
Styles is free and works very well. You don’t need to create a child theme; it works directly with the WordPress default theme of your choice (only create a child theme if you intend to do major layout changes). It provides a comprehensive set of color, font, and other aesthetic options. I highly recommend it if you want to make the Twenty Twelve theme look unique.
To make Styles work with Twenty Twelve, you’ll need to download and install Styles: Twenty Twelve after first downloading and installing Styles.
And there’s Microthemer (I used the premium version), a plugin that provides a visual way of applying custom CSS to any element on your site. As with the first two plugins, Microthemer is not necessary if you know how to code. But it can make the process smoother, letting you preview changes before keeping them.
Microthemer Saves Your CSS.
Microthemer stores its CSS in a separate directory on your server, so you won’t lose any of your customizations if you switch themes and then switch back (something I learned the hard way when using Jetpack’s Custom CSS – something that isn’t supposed to happen with the Jetpack plugin, but it did).
As far as recommending the plugin, it seems aimed at people who understand how CSS works but aren’t into coding it. If you already know CSS or are willing to learn, you won’t need Microthemer. I find it a bit cumbersome. You’re supposed to be able to double click on a page element to find the CSS that controls it, but doing so yields a long list of selectors that often don’t turn out to be what you’re looking for.
To that end, it’s far easier simply to right click in Chrome and use the “Inspect Element” feature, especially since you can hover over the code and see exactly what it affects – something I can’t seem to do with Microthemer. And once you’ve done that, you may find it easier just to copy the CSS you want to change and edit it in your theme’s style sheet or other CSS insertion point. With Microthemer, you have to create a name for the site element you’re changing and then put it in a particular, program-generated folder.
Microthemer’s site claims that the plugin allows you to edit any plugin or theme, but Microthemer is not actually an editor. It will not change any of your theme files (not necessarily a bad thing!). It does not let you add or edit PHP. It only allows you to add CSS that overrides original theme or plugin CSS.
Plus, you can’t combine selectors or use other shorthand. The plugin does have a custom code feature, but it lacks code completion or hinting (though it does provide warnings for invalid code). You also can’t edit the code Microthemer creates, even though it’s easy to locate. If you try to edit the source file, Microthemer will overwrite your changes.
Microthemer’s Still a Decent Value.
On the plus side, and as previously mentioned, Microthemer’s CSS is stored in a separate folder on your server. You can grab that code and put it directly in your theme or child theme, even if you uninstall the plugin. So, it can be useful for jumpstarting aesthetic changes that you’ll later migrate to a theme stylesheet. It’s also good for CSS that can be lengthy to write and otherwise tough to preview. For example, it’s very useful for adding gradients, for which you’d otherwise have to create separate code for different browsers. Microthemer generates all the code at once while letting you preview.
Again, if you know CSS, you won’t need Microthemer. But its price tag is relatively low (if you catch it on sale, as I did), and you get free future upgrades. Support is also fast and very friendly. The plugin gets regular, frequent updates. And you can use it on any theme. The Styles plugins, in contrast, only work with specific WordPress default themes.
Wrapping Up
If you visited my site before the switch, you probably won’t notice much of a difference. The navigation bar in the header now has a shiny, 3-D gradient and drop shadow, two things that I did with Microthemer. Again, such things are not hard to code, but I’m always looking for ways to make WordPress users’ lives easier.
Eventually, I’ll probably condense all the changes I made via those three plugins into the style.css file for the child theme I’m now using (Twenty Twelve Matera). I’ve been using this redesign as a chance to sharpen my skills and try new plugins that I might, in turn, recommend to others.
So…have you used any of those plugins? Thoughts? Opinions?