Grow your CSS skills. Land your dream job.

My 5 Favorite WordPress CSS Tricks

Published by Chris Coyier

UPDATE October 2012: This article is almost five years old. It contains a bunch of stuff I'd never do anymore. Rather than delete it, I'm going to update each section with better information.

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.

options.png
Within this editor, the button options are fairly minimal.

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.

UPDATE: This is really dumb. Under no circumstances would I suggest adjusting the font size for text that happens to be double emphasized. Especially for the reason that you're trying to replicate a header tag and don't have a convient button for it. Either make a button for it or write the correct tag by hand, you lazy sap. For the record, I still like my buttons and just add to the HTML editor with the Post Editor Tags plugin.

Not to mention, if you wanted "em strongs" to behave like a header you'd have to make them display block too.

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.

losecalendarstyles.gif
UPDATE: I don't think most theme development these days starts with the default shipping themes. Even though TwentyTen, TwentyEleven, and TwentyTwelve have been pretty good. It's more likely they start with some kind of "blank" theme. The recomended one these days is the _s (underscore "s") theme. Any blank theme I've ever seen doesn't have calendar styles nor do most themes I run across. So, no need to remove calendar styles that don't exist, or need to add them if you aren't using a calendar.

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>

UPDATE: I think this is fine advice, but it doesn't have much to do with WordPress directly really. These days I think I would be more like:

<a class="logo"> - Logo / Blog Title
<h1> - Title of page or blog post
<h2> - Sub sections of blog post
<h3> - Sub sub sections
<h4> - Aside headers

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.

addspacing.gif

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.

UPDATE: This doesn't really touch on the core issue. I think it's fairly obvious that you should have bottom margin on paragraphs. You should put as much as looks correct. The trouble is: what if you need more? It does come up occasionally that inserting some extra space is nice. I think in those rare cases you need to figure out how "rare" this will be. If it's absolutely a one-off case, I think applying some inline styles to the element above or below the space with some extra margin is a fine solution. If it's a bit more common, a spacer class is probably a good idea.

I'm even guily of occationally doing <p>&nbsp;</p> to get a block of space exactly the size of one additional paragraphs margin.

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"

UPDATE: This is still a legit trick, but I'd keep those non-breaking spaces out of the actual content and insert them programmatically somehow. This is a design choice, it doesn't belong in the content. Widon't is a good plugin for this.

Comments

  1. Permalink to comment#

    Great tips, thanks. I alternate between visual and code views for posting, I like the ability to tab between them that they added a few updates ago. Here’s a tip for you. When you’re in the Visual Editor, hit Shift-Alt-V in Firefox or Alt-V in IE and an additional toolbar will show up. It has headers among other things.

  2. Permalink to comment#

    Cool stuff, but I disagree with #1. It’s not semantic. Use a header tag when you mean a header tag. That way when someone is reading your blog via an RSS reader, they see a proper header tag. And search engines will consider text in header tags more important.

  3. @Douglas: WP 2.3 had a button now that gives you more options, just fyi.

    I will have to second Ryan, I actually have a post sitting unfinished that will show how to add more buttons, including the header tags. I’ll try to post that tonight.

    Also, I think you can get away with using widow/orphan for #5, but I could be wrong.

    Good post though.

  4. Valamas
    Permalink to comment#

    Regarding: #4 Put a generous bottom margin on paragraphs.

    With pressing enter in WordPress, it does produce a tag. However, pressing SHIFT+ENTER produces a tag. This is not a wordpress feature but a feature of editable DIVs. SHIFT+ENTER (had a typo where I forgot the ‘F’ :] ), is not easy to remember.

    You say WordPress strips out the ? That is bad and thanks for the suggested fix.

    (Thanks for the preview feature as I type right now. The tags above were not showing and I added spaces to fix).

  5. Yeah disagree with tip #1 with the same reasons as Ryan D mentioned. I personally switch between visual and code all the time. Write it up in visual and just do the headings as separate title and then when in code, add the headings. Would be good when WP adds headings in the Visual!

    Also with the blog headers, I know its all subjective but I think description and article titles can both be h2…

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".