Toolbox: An HTML5 WordPress Starter Theme

The Problem: You want to start hacking away at a WordPress Theme and get your site online. You don’t want to start with a Parent Theme, or a Theme Framework. You want to make your own theme—and you want it to be ready for HTML5. Only, you don’t know where to start.

The Solution: Start your WordPress theming engines! The delightfully blank, and stripped down, Toolbox theme is here.

Continue reading “Toolbox: An HTML5 WordPress Starter Theme”

A Sample WordPress Theme Options Page

Update: This post is crazy old and there are way better options for … options panels now. Like the customizer! Otto can tell you how to leverage the customizer for your theme options. Or, heck, just go ahead and check out the sample code we use all the time.


Problem: You want to create a simple theme options page for your new WordPress theme but all the tutorials and sample theme options pages you’ve seen are way too complex or don’t fit in at all with the existing WordPress look.

Solution: We’ve come up with a simple, sample theme options page you can use for your next theme!

We’ve based this theme options page on the awesome sample plugin options page created by Ozh of Planet Ozh—only now with the bonus Radio and Select options and a Text Area.

Everything is bundled up in a Twenty Ten child theme called A Theme Options Theme—an instant working example—that you can download at the end of this post but here’s how you’d want to use it in your own themes …

Continue reading “A Sample WordPress Theme Options Page”

Using TextMate for WordPress Code Cleanup

I spend a lot of time cleaning up WordPress themes. During the code cleanup I often perform certain cleanup tasks over and over, which makes them perfect for TextMate commands.

In this post I’ll show you how to add two useful commands to TextMate, then move through the steps I take for theme code cleanup and put the commands into practice.

First, let’s add the commands to a TextMate bundle. If you don’t know how to add commands to a TextMate bundle, or don’t have your own bundle set up yet, start here and add a new bundle. I usually add my own commands to a bundle called @lance so it sticks to the top of my bundle list.

Continue reading “Using TextMate for WordPress Code Cleanup”

Quick and Dirty Widget Testing

Testing widgets with your WordPress theme would be so much faster if you could enable all widgets at once, instead of dragging them one by one.

Here are two small functions to help with widget testing. The first takes all “Inactive Widgets” and adds them to the first registered sidebar in the theme. The second removes all widgets, leaving the widget area empty.

To use, add the code into your theme’s functions.php and uncomment the add_action() calls to trigger the functions. Happy testing!

<?php

/**
 * Quick and dirty inactive widget loading
 * Loads all inactive widgets into first registered sidebar
 *  
 * @global array $wp_registered_sidebars
 */

// To use: uncomment the add_filter call below, then refresh your admin Widgets page
// add_action( 'in_widget_form', 'enable_inactive_widgets' );

function enable_inactive_widgets() {

	// get first registered sidebar
	global $wp_registered_sidebars;
	$first_sidebar_id = array_shift( array_keys( $wp_registered_sidebars ) );

	// get widgets
	$widgets = get_option( 'sidebars_widgets' );

	// if inactive widgets exist, add them to the first sidebar
	if ( isset( $widgets['wp_inactive_widgets'] ) && '' != $widgets['wp_inactive_widgets'] ) {
		$inactive_widgets = array(
			$first_sidebar_id => $widgets['wp_inactive_widgets']
		);
		update_option( 'sidebars_widgets', $inactive_widgets );
	}
}

/**
 * Quick and dirty widget removal
 * This will remove both active and inactive widgets
 *  
 */

// To use: uncomment the add_action call below, then refresh your admin Widgets page
// add_action( 'in_widget_form', 'remove_all_widgets' );

function remove_all_widgets() {
	update_option( 'sidebars_widgets', null );
}

?>

An Idea for a New Default Theme for WordPress—Introducing Kirby

In 2010 WordPress will get a new Default Theme, replacing the beloved/hated Kubrick Theme with a new Theme called 2010. I’ve got opinions on the matter. Oh, do I have opinions. I’ve even gone so far as to create a working idea for a new Default WordPress Theme. Read on to find out more.

Principles for a WordPress Default Theme

I’ve set myself some principles for designing a Default Theme.

  1. It should look like a really nice blog theme with a “WordPress” feel
  2. It should be easy to modify and tweak by directly editing template files
  3. It should be easy to Child Theme without directly editing template files

These 3 principles sound pretty simple, right? Well, not really. If you’re just talking about them, yeah maybe. But talking about a WordPress Theme doesn’t make one. Are they so simple when you actually try and make a WordPress Theme that follows these principles?

No. Not really.

First of all, it’s relatively easy to design a WordPress Theme knowing it will only be used by people who have a specific purpose for it. You only download a WordPress Theme if you want to use it, right? Well, how do you design a WordPress Theme that will be forced on people? Most especially, forced on people who are new to WordPress? People who may take one look at the Default Theme and slap their monitors in horror lest they look on something so hideous, so, so limiting ever again?

Plus, who says a Default Theme should look like a “blog” Theme?

And, while knowing that most people start their WordPress-theming with the Default Theme and, increasingly, their web designing with the Default Theme—knowing and suffering under that awful pressure and responsibility—how do you make it easy to tweak simply and make it easy to Child Theme—without turning it into a Framework Theme.

Trust me here. While people may be asking for a Framework as the Default Theme they’re not all asking for the same thing. Something as robust as Thematic will have people running screaming away from it. People that want Framework Themes can download Framework Themes. I’m not so sure every new user should have one forced on them.

Continue reading “An Idea for a New Default Theme for WordPress—Introducing Kirby”

Thematic Version 0.9—The Best Version Yet

Thematic version 0.9 represents a major change in Thematic. Actually, this release represents everything I’ve learned from the Thematic user community and my continual efforts in studying how most WordPress themes are actually used.

Thematic is all about you: what you want to do with it, how you’re using WordPress, and how you’re going to use it to meet your online goals.

Head to the Thematic download page and get it now or keep reading and find out what the story is with the best version yet of your favorite WordPress Theme Framework.

The New Default Thematic Style

thematic-screenshot

As you can see, there have been some changes. Thankfully, they’ve all been for the better.

First of all, I’ve done away with building to a consistent baseline. That is, having everything line up to the same baseline across content and sidebar. In theory, or on a static site, that’s a great idea. In practice, I’ve found that it ends up being a detriment when you’re customizing using the default style as a guideline or starting point. Basically, things stop lining up and it makes me koo-koo bananas when I go to visit your blog.

What I’ve replaced it with is a complete rethink of the Thematic typographic scale that adds up to a more harmonious overall appearance. Something beautiful on it’s own but easy to fit into almost any design. You can think of it as a damn elegant theme that’s ready for you to build a successful website with. Beautiful, pleasant, damn elegant typography, and simple design, are a must for engaging your website visitors and keeping them coming back. Now Thematic takes care of all that for you.

And the default Thematic style is easier to customize. No more multiple shades of blue (but keep reading to find out how Thematic Classic can bring it all back) that look kinda weird with your custom image header. In it’s stead, a simple and consistent scale of gray ready for you to take advantage of and color up yourself. (And super easy to edit with a find and replace in your favorite text editor!)

The real icing on the cake for people ready to take their Thematic theme to the next level, Hooks and Filters, are now everywhere in Thematic. Making your Child Theme a potential super-plugin for WordPress. You can see the complete list on the new (in development) Guide To Customizing The Thematic Theme Framework along with code snippets that you can just cut and paste into your Thematic Child Theme.

Continue reading “Thematic Version 0.9—The Best Version Yet”

Thematic 0.8 is live

Thematic 0.8 is live and ready for download! The main upgrade is, of course, comment threading for WordPress 2.7+. International users will note some fixes to localization. Thematic hackers will notice some bugs have been fixed.

More exciting to me is what will happen with Thematic 0.9 and eventually version 1.0 (if you’ve got a feature request, I’d love to hear it in the comments). Thematic is shaping up to be a very strong theme, with some strong people behind it. That’s people as in coders and you, the Thematic users. I think you’re all great. Thank you.

Two things to note

  1. We broke your sidebars.

    The Thematic sidebars have been future-proofed for further enhancements (like extra widget-ready areas in Child Themes). Unfortunately change brings complications. There’s no real easy way around it. Before you replace the 0.7 version with 0.8 copy-paste the content of any text widgets into a text file and take note of your widget order. Then proceed to the Thematic Options page and hit the reset widgets button. Easy as cake but the reset button will exterminate your existing widget setup with extreme prejudice. It’s a pain but you’ll only have to do it once and you’ll have rock-solid sidebars from here on in.

  2. I also broke your menu

    If your Child Theme uses #menu in it’s CSS to target the navigation menu you’ll want to replace it with .menu. It should take 3 seconds to find and replace. If you’re using a Thematic Themelet like Travailler or Acamas this fix has already been emailed out to you.

    Plus, the globalnav filter is gone. Long live wp_page_menu! Here’s how to filter your menu now.

    function sample_nav() { ?>
        <div class="menu">
            <ul>
                <li><a href="#">Oh</a></li>
                <li><a href="#">Hello there!</a></li>
            </ul>
        </div><!-- .menu -->     
    <?php }
    add_filter('wp_page_menu', 'sample_nav');
    

    If you’re using an existing function that filters wp_page_menu it’s a simple matter of replacing that string of text with wp_page_menu.

What’s new in Thematic 0.7

Thematic 0.7 has been officially released with two major upgrades that’ll help you get what you need done with your WordPress blog or site faster and easier.

Rapid Site Development With Modular CSS

I’m doing my best to make Thematic a tool for rapid site development whether you’re digging into it and using it as the basis for a custom site design or using it as a theme framework with a WordPress Child Theme. How? By making the CSS completely modular. Let’s take a look at two of the folders in the library directory of Thematic; layouts and styles.

/layouts
  2c-l-fixed.css
  3c-r-fixed.css
  2c-r-fixed.css
  3c-fixed.css

/styles
  18px.css
  typography.css
  21px.css
  default.css
  images.css
  plugins.css
  reset.css

Each of these files can be imported into the stylesheet of either your Thematic-based theme or Child Theme with the @import rule—or copy-pasted if you want to make changes without having to override the CSS to make structural changes. Simply put, what that means is that you can bring each of these files into play in your stylesheet and rapidly build a WordPress theme by mixing and matching them. And I mean really rapidly. For example, here’s an example of a fully finished 3 column Thematic Child Theme, with a sidebar on either side of the content, that follows the default Thematic color styles—built by you, out of only a few lines of CSS. Continue reading “What’s new in Thematic 0.7”

Announcing Acamas

I’m proud to announce my latest theme, Acamas. It’s another Thematic Themelet that completley changes the look of Thematic and adds new functionality. This time, it’s a featured post area with a considerate structure that changes the layout based on the type of blog page you’re on. Plus, it has a lot of possibilities for customization. Check it out and see if it’s right for your blog.

Matt Mullenweg & Joseph Scott Discuss The WordPress Themes Directory

On July 18, Joseph Scott announced that after what seemed like, well, what seemed like a very long time, an official WordPress themes directory had returned. And you know what? It turned out to be awesome (and if you read below, it should get awesome-er). But I still had some questions and a few  details that I wanted clarification on. I bet you did too. With that in mind, here’s Matt Mullenweg and Joseph Scott on what’s happening at the WordPress themes directory.

ThemeShaper: The new WordPress themes directory is great but—and I think I speak for almost every WordPress user here—what took so long? Was it taking “great lengths to make this as painless as possible for theme authors”? Or was it something else?

Matt: Basically the system for interacting with Subversion invisibly via ZIP files took a bit longer than we thought. There is still a lot more to do to make it a fantastic experience for both theme authors and WP users, but for launch we just wanted to get in the most essential features.

ThemeShaper: What does the WordPress Themes Directory bring to the community that Theme Clubs and individual developers aren’t bringing right now? And flipping it around, what is the directory bringing to those same Theme Clubs and individual developers?

Matt: Theme authors and all the different theme sites were all doing interesting things and great jobs on their own, but if you think from the point of view of a WordPress user there were a couple of big problems:

  1. Themes were scattered across the web, searching for them was frustrating, it was easy to miss good ones, and each site had its own UI for downloading and testing.
  2. Many of the theme directories seemed more interested in promoting paid themes they got affiliate revenue from than highlighting the amazing free GPL themes out there.
  3. There were some fake theme directories set up that were distributing malware, if you installed one of their themes (often copies of legit themes) it would hack your blog.
  4. Themes were of varying quality, and it was difficult to tell which themes supported which WordPress features.

The WordPress theme directory addresses all of these, and as a bonus allows us to do a theme update mechanism like we have for plugins and give theme authors a canonical place to track their distribution.

Since there have been over 150,000 downloads in less than a month it seems to be working.

Continue reading “Matt Mullenweg & Joseph Scott Discuss The WordPress Themes Directory”

Use WordPress As a CMS With The Travailler Theme

For a while now I’ve wanted to release a WordPress theme for small to medium-sized businesses that would allow them to quickly set up a professional, smart-looking website. And today, I’d like to introduce you to Travailler, the WordPress theme that puts your blog to work.

Check out the demo by clicking on the big image below and then come on back and read on.


Continue reading “Use WordPress As a CMS With The Travailler Theme”

Thematic 0.5 Ready for Download

Thematic 0.5 is ready for download. I’m not sure why I’ve held on to this one for so long. I guess I’ll have to just hurry up with 0.6 then, won’t I? Here’s a list of some of the most notable changes.

  • Removed the link to the IE8 Javascript library. It seemed, after all, to be a bit of bloat that Thematic just didn’t need (but I’ll show you how to add it back in below)
  • I added a new grid background to the images folder (960_grid_12_col_21px_height.gif). It’s the same grid I created for ThemeShaper when I did the latest redesign. Now it’s yours too.
  • Thematic is now fully translatable and localized (I’d forgotten about one errant “By” in previous versions). Indeed, it even includes a Français translation by Michaël Foussard. Merci, Michaël!
  • Probably most exciting of all, I went and did an SEO audit on Thematic (the definitive guide to WordPress SEO was a big help). And I’m mostly, pretty, 99.9% certain that there’s not much else I can do to optimize it. But prove me wrong, please! I want Thematic to be the best it can be.

Continue reading “Thematic 0.5 Ready for Download”