New Competencies for Theme Designers

Wordpress 2.5's new image uploader solves the longstanding bug of using deprecated XHTML attributes to float images (align="left", etc.), rather than it being done in CSS. This is handled by applying classes to the image when it's inserted into the post, rather than via inline CSS. This is good, in terms of semantics, clean markup, and separating presentation from content. It's something that Scott suggested a while back, that I've been building into my themes and designs since.

This places the responsibility on theme authors to support the new classes. They are:

  • alignleft
  • alignright
  • aligncenter

I'm not convinced of the need for the align prefix, but it's great progress nonetheless. If your theme doesn't support those classes, here's the code you can insert at the end to handle them:



.alignleft,.left {
	float:left;
	margin: 0.5em;
}
.alignright,.right {
	float:right;
	margin: 0.5em;
}
.aligncenter, .center {
	display: block;
	text-align: center;
	margin: 0 auto;
}

11 Comments

  1. Posted 31 Mar 2008 at 1:58 |
    Permalink Quote

    I got a kick out of seeing those, too. I agree now too that ‘align’ might be a bit too much. But it is written in stone now.

    Speaking of inline styles, what’s up with using the style element as compared to the style attributes in the default gallery short code settings?

    Yet again, we’re left to question exactly which side of XHTML our semantic blogging application is on. Heh.

  2. Posted 31 Mar 2008 at 2:11 |
    Permalink Quote

    EEEWWWWWW. That’s gross, I hadn’t tested the gallery feature yet. I suppose for large galleries, it’s lighter, but still.

    I don’t know why they can’t stick that stuff in wp_head()

  3. Posted 31 Mar 2008 at 2:24 |
    Permalink Quote

    Oh, and you forgot the original addition to the three standardized classes mentioned above: .alignnone.

    Here’s some CSS for that one:

    .alignnone, .none{
    float:none;
    }

    Yuk, yuk, yuk. :lol:

    I have to say, though, I do like the various image size-specific classes that are automatically inserted. It’s a step forward.

  4. Posted 4 Apr 2008 at 7:45 |
    Permalink Quote

    Good tip, Adam. Thanks.

  5. Posted 7 Apr 2008 at 12:59 |
    Permalink Quote

    I really like this blog but I wish to heck I could read it. There is no contrast between the deep orange font and the black bg.

    Some time ago - possibly as my skills increased (maybe not) I became a lot less interested in themes and a lot more interested in admin panels which are a sub cat of web apps in their own right. I haven’t yet held forth on the WP admin but watching the process and reading the commentary
    has fascinated me. I am well out of touch with the goings on at Habari - I haven’t looked at it in months. But once I saw graphics of centered admin
    panels with fixed widths of 1024 and Blueprint CSS I knew it wasn’t the place for me. *Graphic Design* led development has been the death of many an app. It nearly killed Shuttle.

    What Matt did to Jeffery’s stuff God alone knows.
    But WP has no track record of developing GUI which are remotely satisfactory. Or of listening to the people who have.

    So how on earth did you blag a WP day job?
    Me? I had to switch to Joomla to get anyone to pay me regularly. :)

  6. Posted 7 Apr 2008 at 2:25 |
    Permalink Quote

    :lol: we’re an office full of Joomla! haters. The disconnect between menu items and page contents has caused plenty of customer complaints about J! as well.
    As far as the site, yes, I’m annoyed by it as well, but I’m short on time to devote to my own projects.
    From the sounds of it, the admin design is more JSM than Jeffrey

  7. Posted 7 Apr 2008 at 2:40 |
    Permalink Quote

    I didn’t say I liked Joomla. :)
    And your design studio site is borked in FF on linux. No SEO pricing / results. :)
    Thought you would appreciate that. :)

  8. Posted 7 Apr 2008 at 4:12 |
    Permalink Quote

    Heh, in this case broken = unwritten. I should probably just remove those links.

  9. Posted 7 Apr 2008 at 9:36 |
    Permalink Quote

    I have started to use *global classes*. Global classes are a generic set of classes which are always available for that particular type of work. So a php non CMS site always has the same set. That way in an environment where production is distributed the html guys can rely on certain things being in the CSS. Commercially I think that is important. The reason is that at our place I try and keep the development of the html separate from authoring of the CSS. That way they don’t impede each other. But you need to know that the two ends of the tunnel are actually going to meet in the middle. The reverse is also true. We use other types of class sparingly. Where poss we just use semantic mark up and descendant selectors.

  10. Posted 8 Apr 2008 at 10:18 |
    Permalink Quote

    I suppose the issue with .right is that you can’t rule out the possiblility that inexperienced theme designers have been using it for their sidebars…

  11. Posted 8 Apr 2008 at 10:35 |
    Permalink Quote

    I suppose there’s a possibility of getting more styling than you bargained for, but overall, a sidebar generally has width and float, so it would seem like a good thing (I don’t know how the kids are coding their themes these days).

Post a Comment

Your email is never published nor shared. Comments that do not follow the guidelines may be removed. By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution. Required fields are marked *
↓ Preview