How I used a WordPress Child Theme To Redesign My Blog

Problem: You want to take advantage of WordPress Parent-Child Themes but you want more control than is usually afforded through CSS alone. What about adding a Favicon? Or a link to a custom stylesheet for IE fixes.? Or editing the menu? How do you do that without messing around with the original Parent Theme?

Solution: You do what I did. I had this exact same problem redesigning ThemeShaper to take advantage of my WordPress Theme Framework, Thematic. I’ll tell you how I solved it and give you a better idea of the power of the functions.php file in WordPress Child Themes.

When you’re done reading this post you should be well on your way to taking full advantage of the power of WordPress Child Themes and redesigning your blog the smart way—leaving the original parent theme files untouched.

And if you haven’t heard about WordPress Child Themes before, make sure you take a look at my post on How To Protect Your WordPress Theme Against Upgrades. I go through a quick primer on them and how to get started using them (along with some useful tips on using Plugins).

First, Make a Functions.php File

Currently, only two overriding files are recognized in WordPress Child Themes, style.css and functions.php (unless my proposal for 2.7 makes it in). You can do a lot with CSS alone but with functions.php your theme can interact with WordPress just like a plugin.

First things first: make a file in your Child Theme folder called functions.php and add the PHP opening and closing tags to the first and second line (<?php and ?>) using your favorite text editor (I use Smultron). Make sure you don’t have any extra lines before or after these tags. We’re going to be inserting the following snippets of code on the lines in-between these tags. Now you’re ready to make your WordPress Child Theme sing.

… not literally, of course. That would be annoying. Continue reading

A Revolution in Theming: WordPress Theme Frameworks

WordPress is exceptionally easy to Theme—but it can be better. WordPress can be a smart little CMS for most websites—but it can be better. How? WordPress Theme Frameworks.

A while ago I asked a whole bunch of smart people what they thought the future of WordPress themes would look like. I also asked the whole WordPress community (also very smart) to think about a new default theme for WordPress. It’s putting those two things together that’s led me to the following statement:

The future of WordPress theming is in Theme Frameworks. If WordPress included three or four theme frameworks—not default themes—in the core it wouldn’t just be the easiest CMS to theme, it’d be the smartest.

Thinking of Theme Frameworks as something different from Themes could be revolutionary. And they don’t have to be included in the WordPress core to change how we think of WordPress themes. But take a look at my proposal for powering-up Child Themes in WordPress 2.7 and some of the current benefits of using them. And while you’re at it, check out Thematic.

Thematic is my own personal WordPress theme framework that I’ve released to take advantage of all this. Sort of an über-theme that puts the best of everything in one place so the core of it will never have to be messed with. It really leverages what you can do with WordPress themes: everything that needs to be changed is either an option (even the footer credits!) or a widget, leaving customization to the CSS in a Child Theme.

And that’s Customization that’s easy to make—for developers and enthusiasts—since the Thematic CSS is modular. The Reset, base Typography and Plugin styles have been separated from the basic look and ready to be used independently by Child Themes.

What do you think about WordPress theme frameworks? Sound Exciting? I think so.

How To Protect Your WordPress Theme Against Upgrades

Problem: You’ve finally found a theme you like but you want to modify it. The modifications are pretty simple but what happens when you want to upgrade the theme? Do you really want to go through all those files again hunting down the changes? Don’t you wish you could just upgrade and be done with it?

I’ve been there. I’ve done everything the wrong way at least twice. Learn from my mistakes. Here’s the right way to modify your theme and protect it against any future upgrades. And don’t worry, it’s really simple. As it usually turns out, WordPress is ready for us and has done most of the heavy lifting.

Continue reading

Hide all your links

Want to concentrate solely on typography and foundational structure while you’re designing your next WordPress theme? Hide all your links. Make them black. Get rid of the underline and make them blend in. Destroy all visual evidence of hypertextuality. Show no mercy as you attack the lists and paragraphs and headings that shore up your content and don’t let anything distract you from your end goal: typographic excellence.

Assuming you’re starting with a white background and black text, CSS makes it relatively easy to exterminate anchors with extreme prejudice:

a {
color:#000;</code><code> text-decoration:none;
}

There. Now go make something beautiful.

While you’re at it, try hiding your header and sidebar in The Ultimate WordPress Theme Test.

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.

Continue reading

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.

Continue reading

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:

Wp-PageNavi Sample

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. Continue reading

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. Continue reading

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. Continue reading