State of the (WordPress) Themes

In this session, Ryan Imel of WPCandy talks briefly about how WordPress themes have changed over the past several years, including free themes, premium themes, default themes, theme frameworks and of course, theme options!

As you might know I’m obsessed with theme options, and I even started a blog about them, which was supposed to showcase both great and “not so great” theme options panels. I had quite a hard time finding great theme options pages, as opposed to ones I didn’t like, so as Ryan mentioned in his talk, people often refer to that blog as the “Theme Options Porn” blog.

However, I have a feeling that the Theme Customizer introduced in WordPress 3.4, might totally change things, and render my blog useless (which I don’t mind!) I’m stumbling across more and more themes that “squeeze” their options into the customizer, which is great. And there’s a great tutorial by Otto showing you how to do that. Thanks Otto!

Obviously most of the themes are still doing both, Theme Options and Customizer Options, but I don’t think that’ll last for long and here’s why. There’s never been an easier API to create powerful, core-like and future-proof controls, such as color pickers, image uploaders, ond others. Once you figure it out, you’ll see that it’s easier (and much less code) to write options for the Customizer, and you’ll never want to go back.

I must admit I’m scared of a theme like Weaver, putting all of its options into the Customizer, but then again, the Customizer has already got most of the controls you’d ever use for theme options, as well as options sectioning out of the box! It’ll be much more difficult to create a non-WordPress (or what Ryan calls the “Russian Doll Syndrome”) experience. Having said that, one might think that the Customizer is restricting WordPress theme developers, by setting rules to what you can do, and what you can’t do, as well as a pre-defined user interface, which you can’t really change (not supposed to at least).

I’d say that the Customizer is not only guiding theme developers to create better, usable theme settings, but also empowering them to do so. Besides, you can always extend a Customizer control and customize the hell out of it, though you probably shouldn’t :)

Anyway, that’s just my thinking about the state future of WordPress themes. Let’s hope Ryan gives a similar talk next year, and see how things change. What do you think about theme options pages? What do you think will change over the next year? Do you see huge potential in the Theme Customizer like I do? Please, share your thoughts by posting a comment. Thanks!


Konstantin Redesigned

I don’t often work on designs. In fact, until today, this blog had only three different themes. The first one was a blue-ish theme from the .org repo, the second one was made by me (my worst first ever WordPress theme), and had an opening <? php tag on the top left. The third one was one I temporarily called Publish, which you see in the screenshot on the left.

Today’s “redesign” is not much different from Publish, in fact, I just called it Publish 1.1, changed fonts, colors, and moved elements around, so it’s not really a redesign, but more of a quick refresh. However, because I started contributing to Automattic’s _s starter theme, I thought I absolutely had to use it in a real-life project. And what could be more real than this? ;)

I used the theme generator to create the base for my new-old theme, used the sidebar-content demo layout and made the rest with CSS. It was a breeze and took me three hours or so. It’s far from perfect, and I’ll keep tuning it along the way. The Gravatar on the top left is a simple call to get_avatar using the admin e-mail address set in the Settings, not sure it’ll fit for multi-author blogs.

<?php echo get_avatar( get_option( 'admin_email' ), 100 ); ?>

Anyway, this is just a reminder that Underscores is so awesome! I’ll keep working on this and you can obviously follow along on Github. Feedback, bug reports and pull requests much appreciated! Have a great Wednesday :)

Update: and it’s now compatible with (some) mobile devices too. The “small-menu” script in the underscores theme is doing a really good job.

Introducing — The Best Way To Get Started With The _s Theme on ThemeShaper. It’s a project Hugo Baeta and I have been working of in the past few days. Make sure you check it out and come back with some feedback. If you’d like your face to appear in the list of contributors, make sure you contribute at least one patch (or pull request) to the underscores project on Github. Have fun!

Twenty Twelve is Back in the Game

Twenty Twelve Demo

Twenty Twelve is back in trunk now and looking pretty amazing, aiming for 3.5. The theme options code is one of my favorite parts, showing off the 3.4 customizer and the Settings API. One thing I absolutely love about default themes in WordPress, is the fact that they show you how to make things right. I think studying a default theme is way more valuable, than reading a whole pile of WordPress books, or attending some kind of WordPress courses.

Default Post Thumbnails in WordPress

Justin Tadlock wrote about the right ways to add default post thumbnails to your WordPress themes. One method is to filter on post_thumbnail_html, and the second method is to simply use else with has_post_thumbnail.

The second method is easier to understand, straightforward and future-proof. The filter in the first method would only work well when we need to change the markup of the thumbnail images output, like print a div with a background-image instead of an img element.

On WordPress Theme Frameworks

I’m in a bad mood today, so I’m gonna do a little whining about WordPress theme frameworks, okay? Don’t be surprised if I delete this post in a day or two ;)

I was reading this post on WPBeginner, where Syed writes that you can edit your theme’s header.php file, and add a stylesheet for a Google Font in your theme. Then he writes about “the right way” to do it in the Genesis theme framework:

add_action( 'genesis_meta', 'wpb_add_google_fonts', 5);
function wpb_add_google_fonts() {
    echo '<link rel="stylesheet" type="text/css" href="|Oswald" media="screen">';

Okay, so here’s what I don’t understand. Why on earth should a theme framework way of adding a stylesheet file, differ from the WordPress way to do it?

I spent years and years and years, studying the massive amount of WordPress actions and filters, and by now I’m aware that if I’d like to output something in my theme’s <head> section, I’d simply use a child theme functions.php file, or a plugin file (I wouldn’t edit my header.php), and hook to wp_head to print my link elements, voila!

Now if I choose to use Genesis (or any other theme framework for that matter), it’s supposed to make my life easier, right? Well no! Now I have to spend more and more years to study another billion actions and filters names, so I know that if I’m using Genesis, I have to hook to genesis_meta instead. This is crazy, and the reason why I don’t use any WordPress theme frameworks. Please don’t come and tell me your framework is different and I’m gonna love it, because I’m not.

Oh and in case you were wondering, the right way to include a stylesheet into your WordPress theme would be to use the wp_enqueue_style function.

Phew, I feel much better.