WordPress Post Formats. Image courtesy of Greg Rickaby/GregRickaby.com.

Check out this impressive array: WordPress Post Format Eye-Candy: Tumblr Style Theme Inspiration Showcase by Kym Huynh at WordCast. The problem those site designs solve is inherent in WordPress, which will permit the posting of many types of information. Just text alone – WP is ready to accept haiku-or-shorter-length compositions, documents long enough to require pagination, lists, lots of white space, no white space – lots.

This is a problem when – for instance – the post title is very large – and the post body itself is very short. It’s  not pleasing to the eye  – and not an efficient use of screen space. Such as

An h2 post title which sits atop a very short post

A very  short post.

There is a feature now available for theme authors called “post formats.”  Here’s the WP Codex entry on “Post Formats.” And here are some other excellent resources.  At present – if I understand things correctly – only  the Genesis theme framework from StudioPress uses this feature, and so far not in every theme. (One nice theme that uses most or all of the formats is Tapestry).

From Greg Rickaby, a designer who works mostly with the Thesis Theme and with the aforementioned Genesis, these posts:

• How To: Post Formats for Genesis Child Themes (this post predates the adoption of page formats by the folks at Studio Press, but if you’re comfortable altering your functions.php file, it’s my impression that this post will help you introduce page formats into an existing theme);
  
• While you’re there, checkout Mr. Rickaby’s Fringe child theme forGenesis
• How To: Enable Post Formats in WordPress (If my post is confusing, start with this post from GregRickaby)

From Andrew Nacin, a WP Core Developer, and excellent elucidator of WordPress and other issues),   On standardized post formats gives some insight on how this evolved, and reminded me not to take for granted the people who labor over open-source apps and who generally are not rewarded in a way remotely proportional to their efforts. Mr. Nacin points out that this is still a work in progress, and

Are there flaws? Yes. There are a few confusing factors here. One, as Mark [Mark Jaquith - see MarJaquith.com, and/or this post] suggests, a ‘custom post type’ is a horrible name for what it really is. Ironically, the best name for ‘post formats’ (trust me, we pulled out our thesauruses for this one) would have been ‘post types.’ Then there’s the confusion where some have used the term ‘custom post formats’ even though they’re not talking about custom ones at all — probably because of confusion around the similar-sounding ‘custom post types’ term.

To point out another example – an “aside” for these purposes, appears to be defined as a post without any title ir caption, and below a certain length. In one theme I tested, it was clear that, less than one complete line of text, and the post stayed as an “aside.” But when I added five lines additional copy, WP – or the theme – in any case, automatically – switched the radio button from “aside”to “standard.” One assumes that eventually themes will come with  some documentation about the limits of formats – perhaps some control over them. But – even as is, this feature is an enormous step forward in WordPress’s trajectory towards being even more flexible without the average user touching code. My point  is that while this feature is likely to get rapidly better, even as is it’s  an outstanding improvement.  How hard it is to incorporate into an existing theme I couldn’t  say.

Last,post types and formats and taxonomies, oh my! from Otto on WordPress.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

• DummyTextGenerator.com
• HTML-Ipsum
• Duck Island Greek Machine (which is only one of the options at Duck Island)
• Lorem Ipscream (with a tip of the hat to Russell Heimlich for this great post)
• This outstanding html-formatted placeholder text, created by JonTangerine (and his “Silo” has many more useful tools – don’t miss it)
• Faux-Texte

Alyssa Gregory identifies seven tools of a particular type; her readers identify six more, not counting some other assets one would find following the links out, like in Russell Heimlich’s “Yummy Lorem Ipscream,” which includes, just to give an example, a list of dummy image generators. (I didn’t even know they existed, so vast is my ignorance).

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

My very much past-warranty brain says that I already know how to wrap text around an image  – a simple task  – but especially as the other blogs grow – we’re trying to standardize post styling, among other things.  Big white space – asymmetrically placed images with text hugging the top and bottom margins – not desirable.

So I found a brilliant tutorial by Liz Jamieson, proprietor of Big Satchurday,  AKA http://LizJamieson.co.uk – which provides a way to solve the problem (1) via a WordPress Plugin, (2), using settings in the WordPress native image uploader and style dialog; (3) using HTML – but no CSS – as she explains, mostly visually, how to go about it. It’s the perfect style for a tutorial – you can skip ahead easily when you know you already understand a part, but wherever you get stuck theres detailed explanation.
So I suppose I should insert an image or two. The image of the cherries in the upper-left-hand corner was resized in the WP native image editor to 150 x 150 thumbnail. Using the radio button to align the image left, 10 pixels vertical margin, 15 horizontal, seemed (and seems) right to my eye.

The resultant settings look like this in the WordPress image dialog. NB: You will likely have to place the image, save it, and then edit.

"Advanced Settings" tab in the WordPress upload image dialog box

So check out  How To Add Images/Photos With Wrapping Text in WordPress via the HTML Code Window : Big Satchurday.  Liz Jamieson  definitely goes on the “how-to” and “panic-button/how-to” link lists.  There’s a screen grab of one of the relevant portions of the image dialog box – the “Advanced Settings” tab below.

Other acknowledgments – the image of the cherries is a public domain image from Wikimedia Commons; the screen grab was done with the FireShot add-on for Firefox (there’s a pro version that I plan to check out as well) by Evgeny Suslikov.

And to see if WordPress can manage overlapping image alignment, we’ll add a little Lorem Ipsum and then another  more or less arbitrary image aligned right. But before the filler text, we’ll quote Liz Jamieson, who wisely advises against trying to wrap an image without enough text. It’s roughly analogous to attempting to gift-wrap one volume of the Encyclopedia Britannica with a man’s handkerchief.  It won’t end well.

If the image you select is too large, it won’t look good when text is wrapped around it (because it will take up all the available horizontal space on the screen leaving your text nowhere to go, and therefore it won’t wrap). To safeguard against this, your image should not be wider than say, 300pixels.

"Four Freedoms" Flag, ca. 1943

I’ve quoted Ms. Jamieson in blue because I don’t yet know how to work in a blockquote tag or indentation across  from an image.  So here goes with another image on the right, again using the easy way out of the upload  image dialog. While it worked out the way I’d intended, again WordPress somewhat idiosyncratically requires that one select and place the image, save it, and then reopen and edit it. Only on the second try did the right-alignment take.

I’ll go over Liz Jamieson’s other techniques (via HTML, and via plugin) in coming posts.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

In the posts which immediately follow we’ll try other implementations of Pull This.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

Its sister site, SmashingUpdates carries paid themes, free themes, and user-submitted themes, but I think  that’s worth a separate post. Even so, here’s a screenshot of one of their recent free themes, Smash

Smash Theme from Thumbpress.com and Top 25 Best WordPress Statistics Plugins and Tools List from WPSkinner.com.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

The Death of The Boring Blog Post?

is as close to a “must-read” as is possible.

For my direct purposes – I started blogging to write about disaster preparedness and related issues at Popular Logistics - anything too much fun, or whimsical, would be, I think, in poor taste. Which is no excuse for bad design; and I’m certainly trying to make improvements.

But for content either mordant or whimsical, there’s no reason for every post in a blog to necessarily have the same layout. Donnelly’s essay is especially fun to read because of its own layout, which includes a  lot of examples.

Also – Smashing Magazine – which is the meta-uber power tool set, the Vampire Slayer site for anyone wanting to learn something new about web design (it’s often one of my first stops)

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

1. Wikipedia entry;  Scott McCloud.com.

Here’s Lambert on (network) architecture;

and Lambert’s software reviews.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

Christian Watson, of Smiley Cat Web Design, which has a subsidiary, Elements of Design (“an alternative web desig showcase”). Check out this beautiful gallery of pull-quotes – some of which I think I’d characterize as “call-outs,” which, in my mental taxonomy, are properly a subset of pull-quotes.

Here’s one that I liked a lot,

Gallery with more examples after the jump. If you want to see all 28, you’ll have to go to Elements of Design. Maybe we can find someone who’s written a tutorial on how to generate these practical and eye-catching elements.

via Elements of Design. A wholly-owned subsidiary of Smiley Cat Web Design Blog.

Possibly related posts: (automatically generated)

• Related posts on callouts
• ADempiere Implementation and Customization – Learning Plan – Part …
• CALL CENTER AGENTS. ***PURELY INBOUND SALES- NO CALL OUTS! | Call …
• Callouts: I need a WordPress plugin | Lambert on Development

• Related posts on pull-quotes
• The Street Stops Here: Book Review Pull-Quotes | The Street Stops Here
• Article VI Blog » Blog Archive » Romney Defends Israel
• gordonandthewhale.com » Blog Archive » The Good, the bad, and the …

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

• Change heading fonts in WordPress (h1 through h4);
• choose from over one thousand (1,000) and growing non-commercial fonts;
• requires no code writing

Plus – it lets you do even more - change color style and alignment for headings, headings containing links visited and not visited. It does even more than what’s promised: the “future” features have already been added. but the developers have apparently made big improvement to the software, but neglected to update their FAQ. Font Burner » Frequently Asked Questions promises “new features” in the future which seem to already exist in the plugin. This is rather like the Cheshire cat; we’ve often seen promises without delivery, but not delivery without announcement.

The Instructions Page (heading2)

The Instructions Page a/k/a the “How-To” page on the navbar describes the  steps necessary to use Font Burner:

Step 1: Find a font (h4)

Search through the fonts on Font Burner until you find the perfect font for your site

Step 2: Copy the embed code (h4)

At the bottom of the font’s page you will see the embed code. This is the magical code that will transform your website’s type.

Step 3: Paste the code into your website (h4)

The final step is to paste the Font Burner code right before the body tag  in your web pages HTML. That’s it! If you want to customize your typography further or run into and trouble check out our FAQ page.

The FAQ page (a/k/a the “help” page on the nav bar) is where one of the the additional functions is described – using Font Burner to change the font on body text: ((It’s clear that this depends in part on theme style sheet; I’ve been writing this while the Frugal Theme by Eric Hamm was active – and the body text doesn’t change, but the other functions in the plugin work perfectly. So we’ll test that function in other posts). NB: we’ve now run it in several themes – including K2 and the WordPress default theme.

To change the font on something other than a headline you need to wrap the text in a “class” tag. For example, if you are want to change some text to the font, “Alba Super” you would do something like this:

<div class=”alba_super”>Your text here</div>

Depending on your stylesheet is set up, you may have to play with this method a bit to get it working.

Here’s an example changing headings fonts (I’ve put heading levels in parentheses; that’s my content, not the plugin):

What is Lorem Ipsum? (Heading 3)

Why did we say “dangerous”?

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!