How to Add a Horizontal Line to a WordPress Post or Page


Sometimes making different sections of a post distinctly separate from each other can go a long way in making your post more readable. In some cases, embedding a horizontal line, like this one …


is just the answer.

For example, in a recent post here on WPMU, I had over a hundred different graphics that needed to be separated (105 Weird and Woderful 404 Error Page). Horizontal lines were perfect for this.

But how do you do that?

Well, it’s pretty easy. Just switch to the HTML view in your visual editor, and insert the following code where you’d like the horizontal line to appear.

<hr />

If you’d like more than one line, just do that multiple times.

<hr />
<hr />

Styling

There are also a number of styles you can apply to your lines such as color, size, alignment, etc. In the newest version of HTML (HTML5), you will need to use CSS to style your lines.  You can read more about horizontal rules (this is what “hr” technically stands for) at w3schools.com.

And that’s it — a simple solution that can make your post both more attractive and more readable.

UPDATE: Peter Bockenhauer makes a good point in the comments. If you have clients who are unfamiliar with HTML, they probably don’t want to go into the HTML editor, and you probably don’t want them in there anyway. A solution to that is a plugin. He found one (Simple Breaks), and I just checked it out quickly. Seems to work fine. Thanks, Peter.

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

Photo: Blue Strips from BigStock

Tags

Comments (12)

  1. This is still a hard thing to accomplish for client sites. You do not want your client going into the HTML view and they don’t want to mess with HTML either. Still a tough thing to get around, but horizontal rules can come in handy so many times.

  2. Very interesting. I tried this on my site. I didn’t like the way the ads were crouding the discription text so I thought this would be a solution. An example of where I used it is on this page. http://www.catrinasgarden.com/store/products/big-red/ I put the code bit discussed in the article into the html editor in wordpress and the line shows up when switching to the visual editor, but after publishing…no line. I also put a line between the title and the discription. Any ideas.
    Thanks,
    Catrina

    • Cathy – I’m not sure what’s happening. I can see the line in your html, but you’re right, it’s not showing. Maybe your themes makes it white and so therefore it’s not visible. Not sure. You might try the plugin that was mentioned (http://wordpress.org/extend/plugins/simple-breaks/). It offers some different options. Maybe you can get something to appear with it. Also, you might switch your theme for a minute just to check to see if it’s the theme that’s causing the issue.

  3. Good Morning and Happy Holidays,
    Well it is the Theme. The lines show up in the default theme. Of course everything that is in the second side bar dissapears. I works with both the plug in and with the easy fix. Interestingly the line shows up inbetween the discription and the buy now button and price. These of course are added “outside of the box”. Where I really need a line (or some sort of other seperation) is in between the bottom of my product information (I believe there is a line in there that tells what product catagories it is in with links) and my adsence ad. The ad actually lives in the page.php template so I tried putting the in there just before the ad but that didn’t work either.
    I think I’ll just look for some articles on working with the css of the products. I’d like to make the picture look better and not be crowded by the text too. Any suggestions would be great or point me to another article.
    Thanks,
    Catrina

Participate