Fun with CSS in WordPress
I just had an email exchange with an old friend and fellow web developer (and WordPress user) regarding some techniques for CSS trickery on home pages in WordPress themes. Up until this week, I had been running a version of my theme that just featured brief excerpts of articles on the home page. I was doing this by brute force in PHP, truncating the post text with the substr() function, and then cleaning things up using the strip_tags() function, which removes all HTML tags from a string.
It got the job done, but as he and I were discussing, it wasn’t pretty: it stripped out the “dangerous” stuff — that is, unclosed HTML tags (cut off during truncation) that would have screwed up the formatting of the rest of the page. But it also stripped out desirable styling (bold, italics, links) and paragraph breaks.
The ideal situation would be to have a way to show just the first two paragraphs of each post, retaining all of their original formatting. Of course, WordPress has a feature to handle this: if you put a <!--more--> comment tag in your post, your page template can truncate the post at that point, with a link to the single-post page to display the rest of the content. But I’ve never liked having to put that <!--more--> into my posts. I want a completely automated solution.
And then it hit me… this could be done with CSS. It took a little trial and error, but I came up with the following:
#content .entry p,
#content .entry h3
{
display: none;
}#content .entry h2:first-child,
#content .entry h2:first-child + p,
#content .entry h2:first-child + p + p
{
display: block;
}
A few things to note:
- This assumes that your entire loop is wrapped inside
<div id="content">...</div>. You may need to come up with a specific ID to use just for this block in your index page, and be sure not to use that in your single-post page, or your posts will never appear in their entirety. - This also assumes that you’re using the WordPress convention of wrapping your posts in a pair of
<div>tags with the attributesclass="post"andclass="entry"(though technically,class="entry"is the only one that matters here). - Your post title should be in an
<h2>tag, immediately following<div class="entry">. - The first definition may need to be extended to include other HTML tags you want to hide on your index page. In this example, it’s only hiding content that is inside
<p>or<h3>tags. - If you want to hide every HTML tag except the ones you explicitly specify, you could change the first block to
#content .entry *, but keep in mind that will also remove styling like bold and italics, and it will remove links. Probably not what you want.
The specifics may vary depending upon how your WordPress theme is set up; I just know that with the way mine is set up, which pretty closely follows standard convention, this CSS worked to get the index page to list the posts and only show the first two paragraphs of each. (It also retained the images that I embed at the start of each post, and also retains any embedded video from YouTube or Vimeo, since — at least the way I insert them — those are not wrapped in <p> tags.
Note that all of the HTML content for each post is still loaded by the browser — we’re just using CSS to tell the browser not to show it on the page. This is not going to help with performance; it’s strictly aesthetic.
2 Comments
TagsAdobe
Blogs
Comments
Flash
HTML5
Web StandardsCategories
Computers & Technology
No one’s listening
But… comments. Oh, comments. They help turn a one-sided online journal into a thriving community of engaged individuals. Or not. By now, the true nature of most comment threads — a bunch of morons yelling “FIRST” followed by a bunch of even bigger morons ranting at each other without ever engaging — is so well-known, so obvious, that it’s boring even to mention and somewhere between tiresome and excruciating to experience.
So, how long will it be before comments go the way of Internet Explorer 6 and Flash? (Oops… have I spoken too soon?) I think the day is coming soon.
Comment ça va?
Many prominent blogs, Daring Fireball for instance, have long eschewed comments (although the persistent commenters have found a way around that). Others are following suit. And now, it’s easier than ever for frustrated readers to take things into their own hands and silence comments wherever they go online.
I can’t tell you how tempting shutup.css is. I’ve spent more time angrily scrolling through insipid comment threads than I care to remember… but it’s driven me to rant before.
Jumpin’ Jack Flash
But, just like Flashblock (or, for you Safari users, ClickToFlash), I think if I were to try it, I would quickly go back, no matter how annoying the comments are.
Don’t get me wrong: I feel the same way about comments as I do about Flash. Both have potential, but far more often than not they are just intrusive and annoying rather than useful. I tried Flashblock for a few days last week, and I was happy not to be intruded upon with overlaid advertisements, intro animations, and other bandwidth- and time-wasting nonsense. But turning off Flash also meant I had to click an extra button to watch most videos, and even worse, to upload files on my WordPress blogs… not to mention the client sites I’m developing that have JWPlayer and YUI Uploader embedded in them. So, as much as I want to be rid of Flash, and as content as I am not to have it in iPhone OS, I decided I needed to turn it back on in Firefox on my MacBook.
The same goes for comments, but I don’t even need to try shutup.css to know I wouldn’t want to keep it. Sure, I hate the comments on most news and tech sites I read, but I like them on my own site, and I like them on the sites that I want to comment on.
Turn it on again
So, with both Flash and comments, there are proponents and opponents. It seems in the recent dust-up over Flash (or the lack thereof) on the iPhone and iPad, the most fervent supporters of Flash are Flash developers, or people who just hate Apple. And with comments, well, it’s pretty obvious: people who like comments (or, more specifically, like to make them) want them, and just about everyone else doesn’t. It’s clear to me that comments rarely add value, and they often detract from the sites they’re on. On the other hand, allowing comments on my sites has for the most part added value to them, and, critically, commenting on other sites has driven traffic to my sites.
Does this mean that the act of commenting is purely, or at least primarily, an act of shameless self-promotion? Perhaps. I wouldn’t post a comment if I didn’t think the comment had merit on its own, but I’ve also consciously posted comments on some sites knowing that doing so was a prime opportunity to bring some of those sites’ readers over to my sites.
And in the end…
By now it is becoming increasingly apparent to me that both Flash and comments are facing their demise. At least someone at Adobe gets it: Adobe is not in the Flash business, they’re in the “helping people communicate” business. Flash has been a tremendous tool for allowing people to communicate online for a long time where open standards have lagged behind. But by its nature, Flash is fundamentally opposed to what the web is really about. Nobody “owns” HTML or CSS or JavaScript. They’re open standards, and they’re the foundation of the web. Proprietary, closed technologies limit the web’s growth. Flash requires a plug-in (even if just about every computer comes with it preinstalled); Flash files are a “black box” to search engines and text-based systems; the technology resides in the hands of a single company whose fate will dictate the fate of all of the content locked into the format, and the fortunes of the creators of that content.
Comments, too, are about helping people communicate. But it’s become clear that — more or less, depending on the particular site — few people who engage in comments on a blog are really all that interested in communication. If comments cease to be seen as communication and instead become an ugly, depressing wasteland at the bottom of web pages, then they’ll die off too.
Looking forward into a new decade, I am beginning to see the old alignments of the Internet as we’ve known it falling away. There’s a convergence of new standards, new devices, and new means of communicating. And this naturally means that certain older ways, “standards” or not, will fade from our day-to-day experience. I’ll certainly be happier to see Flash go than comments, but then again, I think I’ll do just fine either way. Let me know what you think. Or not.