PageDrop Child Theme: Drop Down Menus for Thematic

Built-in drop down menu support is something we’re working on right now for Thematic 0.9 (one of the many changes you’ll likely be hearing about pretty soon). In the meantime, the always resourceful Cozmoslabs has released a nifty little Child Theme for Thematic called PageDrop that adds drop down menus to the current Thematic style. I’m sure this will be very popular. Check it out.

How To Change The Postheader in Thematic

bendler.tv has written an easy to follow tutorial on how to change the Postheader in Thematic. The Postheader is the content, typically including the title and author info, above each post and page. This is can be one of the most powerful tools in your Thematic toolbox and the same technique can be used to modify the Postfooter. It let’s you take extreme control over what appears above and below all of the content on your Thematic site—without touching a single Template file.

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

Collapsing WordPress Widget-Ready Areas & Sidebars

Problem: Theme users need as many widget-ready areas as possible. They’re easy to use and they help keep theme template files clean. But! unused, empty, widget-ready areas, areas waiting for you to add a widget of your choice, hang around waiting to spoil your designs by limiting your styling options. Just as bad, empty widget areas can invalidate your markup. But don’t worry, we can do something about it. Only first, we need to take a closer look at the problem.

Here’s how a typical widget-ready sidebar looks. I’ve taken the code from Automattic’s guide to widgetizing WordPress themes.

<ul id="sidebar">

 <!-- likely awesome stuff -->

</ul>

We’ve got an unordered list and inside of it a statement that looks for the dynamic_sidebar() function. If we’ve registered one, it’ll spit out our awesome stuff: WordPress widgets marked up as list items.

All very good. But what if we start out with no awesome stuff in there? No default widgets? Well, that means our containing ul element will be hanging out there in our site with no li elements in it. A list without list items. Totally invalid and totally unsemantic. Worse yet: what if you were styling that ul with a margin, border, or just positioning it? That styling would stick—even if the widget area was empty. Totally unacceptable.

Thankfully, there’s a fix. Continue reading