Indenting a single line in WordPress

Something came up in my twitter feed today which I had solved a while ago and – because the solution doesn’t fit very well into 140 characters – I thought I’d share it here.

WordPress allows for indented paragraphs within it’s usual editor but not for a single line. Well you can use the “Preformatted” formatting option in the visual editor but that will change the font and appearance of your text as well. I’m presuming this is not what you want. Within the visual editor there is no easy way to have a single line indent. Thus you can have this:

Bacon ipsum dolor sit amet pastrami beef ribs boudin, ball tip ham bresaola chuck short loin venison corned beef filet mignon bacon. Meatball cow corned beef meatloaf. Shankle jerky andouille strip steak. Swine shoulder rump spare ribs corned beef, short loin andouille tri-tip jowl leberkas hamburger drumstick.

But not this:

Bacon ipsum dolor sit amet pastrami beef ribs boudin.
Ball tip ham bresaola chuck short loin venison corned beef filet mignon bacon.
Meatball cow corned beef meatloaf. Shankle jerky andouille strip steak.
Swine shoulder rump spare ribs corned beef, short loin andouille tri-tip jowl leberkas hamburger drumstick.

Wait..what?”

“Hang on?” I hear you say, I just said you can’t do that and yet I have – er – done it. Okay you can achieve it in WordPress but not with the standard editor in visual mode. The trick is to wrap a small bit of html code around the line you want to indent. In this case the first line in the above paragraph actually looks like this…

> <span style=”padding-left: 1em;”>Bacon ipsum dolor sit amet pastrami beef ribs boudin.</span>

The “padding-left:  1em;” bit is where you set the width of the indent. I have used an “em” measurement which is a printers term equivalent to the width of the “m” character is the current typeface/font. You can also specify the indent in “px” (pixels) or “pt” (points). Don’t forget the quotes though. Oh and you must put the editor into HTML mode to add the styling code. To do this simply edit your post and click the HTML tab at the top left. Here’s some examples of using different units of measurement..

Bacon ipsum dolor sit amet pastrami beef ribs boudin. 10px
Bacon ipsum dolor sit amet pastrami beef ribs boudin. 2em
Bacon ipsum dolor sit amet pastrami beef ribs boudin. 5pt

Keeping it consistent

Now it’s quite possible that you will always want the indent the same size when you come to use it. That’s where stylesheets come in. Instead of specifying the indent width each time you can just refer to a “class” which is defined in your theme’s stylesheet. That way if you ever need to change the indent across all the instances where it is specified in your blog, you can just change your stylesheet and voila!

To do this you use the following code where you want an indent..

> <span class=”myindent”>Bacon ipsum dolor sit amet pastrami beef ribs boudin.</span>

Now we add the class to the stylesheet. In your WordPress dashboard, click Appearance->Editor. It should open your stylesheet(css) for editing but if not just click the relevant css file from the right hand list. Now add the following to the bottom of the file and click Update.

> .myindent {
padding-left: 1em;
}

Note the fullstop at the beginning of that line. Again you can alter the padding specified as before. In my theme this gives you …

Bacon ipsum dolor sit amet pastrami beef ribs boudin.

Hope this helps.

By the way if you are wondering where all the meaty references came from. It’s from the excellent [Bacom ipsum](http://baconipsum.com/).