Experiments in Theme Design

Thematic Version 0.3

Thematic version 0.3 is ready. If you’re upgrading, stuff moved. That’s beta for you—but don’t worry, I’ve made things better. Here’s what I’ve gone and done.

Added a 3 column stylesheet
Cleaned up the post meta and separated it from the comments section following popular convention (and probably breaking stylesheets)
Prettified the sliding meta panel with a photoshop-y G.I. Joe handle (it’s like Snake Eyes designed it!)
Added an option to control the position of the widget area that shows up between the post on the index page—a great place for promoting something important
Added a print stylesheet that should undo any unprintable styles you add to your theme.

My plans for version 0.4? Right now Thematic is optimized for Search Engines—but not enough. It’s going to get an audit from me—I know a fair bit from trial and error and study and there’s still more to do—and I’ll see what I can do about getting a professional audit. Any SEO professionals want to help me make the most optimized WordPress theme ever? For free?

And I’ve decided to give the base theme some style. Something simple to build on that will help folks see the features of Thematic. Something that prevents an immediate response of “That’s it?” which, to be fair, I haven’t exactly done anything about.

I’m still working on the bookmark-able landing page. It’ll be fun and worth bookmarking. It was going to launch with version 0.3 but, well, it’s not. And I didn’t want to waste any time releasing 0.3 just because I was holding things up with a goofy page design. Yes, goofy. Or somewhat goofy. You’ll see. Anyway, I’m looking forward to getting it finished.

But what’s more exciting for me is that I’m actually using Thematic. It provided an awesome starting point for the current custom project I’m working on, saving me a ton of time. More details when the project is done.

Download Thematic v.03

By Ian Stewart | Posted in Themes | Comments (8)

How To Add Gravatars For The Post Author in WordPress

Now that Gravatar support is part of the WordPress core adding them into your WordPress theme is easy. Adding them to your comments has been documented. How about adding them to your post titles to highlight the comment author? Within the loop? That’s fairly easy too. Here’s the code:

<?php echo get_avatar( get_the_author_email(), '80' ); ?>

Pretty simple, huh? get_the_author_email outputs the post author’s email and the “80” is the size of the avatar image in pixels (you can change that). How this will look depends on how you use it; where you put it in the theme (it has to be in the loop!) and how you style it.

Want an example? I had to figure this out for an upcoming project so…

Look at that frighteningly intense young man there in black and white. Good grief, it’s me! The author of the post! The code, it works! It works!

Ahem. Excuse me. I get a little excited about these things. Good luck using it in your own theme!

By the way, did you know WordPress has built in email protection from spam bots (read Disguising Your Email)? I didn’t. Neat.

By Ian Stewart | Posted in Theme Tips | Comments (13)

How To Build WP-PageNavi Into Your WordPress Theme

WP-PageNavi, from Lester “GaMerZ” Chan, gives you an awesome upgrade to your WordPress post-page navigation. Instead of the typical “Older Post/Newer Post” links, you get “Digg-like” pagination. Like so:

Very cool. But what if you want to incorporate it into a WordPress theme for release? How do you style it when the instructions tell you to modify the plugin files? Good questions. I’ll tell you how.

First of all you want to tell WordPress to use the plugin if it’s installed and if it’s not installed to use the traditional navigation.

<?php if(function_exists('wp_pagenavi')) { // if PageNavi is activated ?>
 
<?php wp_pagenavi(); // Use PageNavi ?>
 
<?php } else { // Otherwise, use traditional Navigation ?>
 
<div class="nav-previous">
<!-- next_post_link -->
</div>
 
<div class="nav-next">
<!-- previous_post_link -->
</div>
 
<?php } // End if-else statement ?>

Good. Now for the styling. What you want to do is style the navigation to fit into the look of your theme. So what we’ll need to do is perform a bit of a reset on the plugin styles in our themes style.css file. I’ll give you an example.

/* =PageNavi
-------------------------------------------------------------- */
 
/* Use !important to override PageNavi CSS */
 
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
color: blue !important;
background:transparent !important;
}
.wp-pagenavi a:hover {
}
.wp-pagenavi span.pages {
background:transparent !important;
}
.wp-pagenavi span.current {
background:transparent !important;
}
.wp-pagenavi span.extend {
background:transparent !important;
}

Now your styles are protected against any upgrades to the plugin and you’re ready to make it fit the look of your theme.

You can look for this technique in my future themes. Good luck trying it out in yours!

By Ian Stewart | Posted in Theme Tips | Comments (2)

Changes At ThemeShaper

There have been some changes at ThemeShaper in the past week. I have a new host for all my blogs and projects, I started an Amazon Bookstore, and the next version of my development theme, Thematic, has been released.

Hosting with Fused Network

I’ve changed hosts and I couldn’t be happier. Fused Network now supports ThemeShaper by hosting it for free. Free. I could cry.

On top of that all my projects, domains, subdomains, databases, settings and assorted whatnots were moved over for free. Again, that’s free. Fused Network has a very impressive reputation online and, frankly, their support is extremely flattering.

Check out Fused Network.

I Opened An Amazon Bookstore

People that know me (or read Upper Fort Stewart) know I love reading. They also know I love sharing what I read and, well, now you know it too. I’ve started an Amazon aStore where you can browse through a hand-picked selection of books on Web Design, Graphic Design and Creative Thinking. I’m probably the only Designer recommending Shakespeare alongside Samurais for creative inspiration, but what the heck, you should read them.

Whenever I check out something interesting, I’ll add it in. So you know, I get a 4-6% commission on all books purchased through here. Consider buying a book from here incentive for my oft ridiculous and outrageous pursuits in WordPress and Drupal.

Visit The ThemeShaper Bookstore.

Thematic Version 0.2 Has Been Released

I don’t want to make too big of a hullabaloo about it right now—I’m still working on a bookmark-able page for it and a slicker template for it—but I’ve released Thematic 0.2. It’s pretty gross currently but the outer structure of the theme is set in my mind and any updates shouldn’t break stylesheets—too badly.

But let me tell you, I’m totally going to make a hullabaloo.

For version 3 I’m going to take a look at where the post meta should be, add in an option to control the position of the widgetized index insert (a spot to add a widget between posts) and create a 3-column sample structure with two sidebars on the right. I’ve abstracted the structure from the sample style.css and I want to provide bulletproof options for the most popular blog layouts. The 3-column is a must.

Version 2 has built-in support for WP-PageNavi and Subscribe to Comments. Unless someone can convince me otherwise, I’m going to leave the plugin support at just those two for now.

Download Thematic Version 0.2.

By Ian Stewart | Posted in Site News | Comments (7)

We Need To Kill The Sidebar

It’s time for the WordPress sidebar to go, and all mention of it to be wiped out from existence. I’m not talking about the visual idea of a sidebar on your blog. No. I’m talking about the WordPress function get_sidebar() and the use of the term, Sidebar in the WordPress admin. This way of thinking is obscuring the vision of WordPress designers and limiting the potential of your blog theme.

Here’s why: A sidebar doesn’t have to be a sidebar.

That’s it really. Any area of your theme can be turned into what is now referred to as a dynamic sidebar that let’s any WordPress blogger control content layout by moving widgets around. Any area. The header, the main content area, the footer. Everything is up for grabs. Not just “sidebars”.

Now, if theme designers want to take advantage of this functionality they run into a problem. They’re making sidebars like, <?php get_sidebar('headerarea') ?>, which tells WordPress to look for a file named sidebar-headerarea.php, which in turn lets you add widget content into a theme’s header, by dragging a widget into the “headerarea sidebar”.

The headerarea sidebar? What’s that beside? Not convinced? How about footerbar sidebar? After-the-first-post sidebar? Belowbar sidebar?

Not good.

Starting to see where I’m coming from? I’ve got a proposal up on the WordPress Ideas Forum to change this. Vote to deprecate get_sidebar and “Sidebar”.

Theme Developers: Check out Doing more with Widgets: Home Page Layout and Doing more with widgets: Changing Layouts for some fun tutorials on using WordPress widgets creatively.

By Ian Stewart | Posted in Uncategorized | Comments (12)

A WordPress Theme Structure with Meaning and Possibility

Continuing work on my next theme, Thematic, one thing I want to get out of the way immediately is the structure, or skeleton, of the thing. The outer structure of any HTML+CSS document is where things usually go bonkers and the last thing I want is for my markup to make things worse when I update versions. So, that said, here’s the basic divisions of markup, which I’ll follow with some of my thinking. I’m hoping we can start a conversation over this—and I’m totally up for a raging debate over my non-transcendent approach to this—so give this post a quick scan and see if you can add your two cents. The more the merrier.

The Thematic Markup Divisions

Why Use This Structure?

Why divide the code up this way? How is this any better than The Sandbox or any other theme for that matter? What are you trying to do here exactly?

Well, one of my main goals is to enable all sorts of CSS madness without changing the markup. While at the same keeping the markup divisions logical, letting the <div> serve it’s intended purpose. That is, making sure the <div> is there only to make my code more readable and imparting some meaning to it with class structure. With two important and glaring exceptions of course, wrapper and container.

A wrapper class is sort of a convention now—even though it’s not necessary—and anyway, it provides a useful point for playing with absolute and relative positioning. The container class lets us up keep our content source-ordered and have a sidebar on the left side of the screen using CSS only (check out the Sandbox layouts for examples of this). The use of these classes are straight out of The Sandbox and general web design convention. I think we can probably all agree on keeping these here.

But what about the CSS madness? More carefully thought out divisions = more madness. Subdividing the header and footer contents and collecting the center bits in a <div> let’s us create a bulletproof fixed-fluid hybrid layout, something like SimpleBits, or even something weird like MNML, and who knows what else. Personally, I like the who knows what else. Anyway, combined with the semantic class functions of The Sandbox there aren’t a lot of themes that can compete when it comes to employing the possibilities of CSS.

So what do you think? I’d appreciate the thoughts of anyone considering using Thematic. It’ll be your markup too, eventually.

For more thinking about the whole topic of naming and structure check out What’s in a name (pt2) and Structural Naming. These two posts are 4 years old but still worth reading.

By Ian Stewart | Posted in Ideas About Design | Comments (11)

Coming Soon: My Personal WordPress Theme Starting Point

I will soon be releasing the hacked-up version of The Sandbox that I’ve been using as a starting point to develop free and custom themes. For free. On Google Code. As an open source project. Since I have different goals than the Sandbox creators (and not as much skill!) I won’t call my changes improvements but they are changes you may appreciate:

Search Engine Optimization
A grid-based starting point
CSS Reset and Typography based on Blueprint
Markup allowing even more CSS madness than The Sandbox
Theme Options
More Page Templates
More widgetized areas
More Microformats
Popular Plugin Integration

By Ian Stewart | Posted in Ideas About Design | Comments (21)