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.