My 5 Favorite WordPress CSS Tricks

1. em strong

Perhaps more than I should, I use the actual editor right inside WordPress to write posts. I have Visual Editor turned off, just because I like to see the tags of what I am doing. Also, I really hate that popup link window that you get when you use the Visual Editor. I am guess quite a few people are in the same boat with me.

Most notably missing is any kind of header tag. If you write long sectioned posts like I sometimes do, it’s ideal to break up sections with header tags. It’s not too big of a deal to hand write them in, but with a little CSS trickery you can use the tools you already have to make headers. Just add something like this to your stylesheet:

em strong {
   font-size: 2.0em;
   font-weight: bold;
   margin-bottom: 0.3em;
}

Now you can select a portion of text and click the [b] button to add the <strong> tags, then select all of that and press the [i] button to give it the <em> tags, and you got yourself a makeshift header style.

2. Remove Excess Calendar Styles

WordPress themselves say that when designing a theme for public release you should start with the Default or Classic theme and modify it. I think that’s sound advice, but as a result, there are an awful lot of themes with lots of unused, unnecessary CSS. Namely, calendar styles. Occasionally you will see a blog that makes good use of a calendar, but they are few and far between. Yet, most blogs stylesheets have a good chunk of unused code in there dedicated to calendars. If you don’t use it, lose it.

3. Get Your Header Hierarchy Straight

On any given page of a blog, there are lots of elements on the page that should be headers: Title of the blog, description of the blog, post titles, post sub-titles, sidebar headings, etc. Getting these things down into a semantically happy hierarchy should be a priority. Here is a suggestion of how you might go about it, and the WordPress PHP snippets to go inside:

Blog Title

<h1><a href="/"><?php bloginfo('name'); ?></a></h1>

Blog Description

<h2><?php bloginfo('description'); ?></h2>

Post Titles

<h3><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

Post Subtitles

<h4>Holding in a fart only makes things worse later.</h4>

Sidebar Sections

<h5>Blogroll</h5>

4. Put a Generous Bottom Margin on Paragraphs

One little WordPress “feature” is that there is no easy way to add spacing between blocks of text in your post from within the editor.

Even manually adding <br /> tags doesn’t work, WordPress strips them out. So what’s a poor blogger to do? Leave spacing up to your CSS. You shouldn’t be adding extraneous break tags anyway, that’s bad semantics.

What WordPress will do, is put both of those blocks of text in their own set of <p> tags automatically. So all you need to do to get some healthy spacing between your blocks of text is give a healthy margin-bottom to that selector:

p {
     margin-bottom: 1.4em;
}

Your commenters will appreciate it too. WordPress treats the comments similarly to posts in that it doesn’t allow extra spacing. With this bottom margin on paragraph elements, if your commenters hard return and start a new parapgraph in their comment, it will apply the margin and everything will look right.

5. Avoid orphans with &nbsp;

This is more of a markup thing than a CSS thing, but it’s a good trick so I’m mentioning it. Many blogs use big fonts for their post titles. Orphans looks especially ridiculous on short lines of text with big fonts. To avoid those single words that like to creep down onto lines all by themselves, but a non-breaking space between the last two words (or last few words) of post titles. e.g. “How to tell a client to get bent and get away&nbsp;with&nbsp;it”