UPDATE: WordPress now has a horizontal rule button by default.
It seems like the last few designs that I have received from designers have made use of a nice little line break in between content throughout the website.
The easiest way I knew how to implement such a design element was to use the HTML markup known as the Horizontal Rule. It works great for breaking up content on a visual level when you style it right with CSS. The code simply looks like this: <hr>.
It will create a line break (styled of course) like this:
The Problem with a Horizontal Rule in WordPress
The default functionality doesn’t allow you to insert a Horizontal Rules. You can do it yourself by going to Text/HTML editor, but asking the client to update their posts and pages in HTML is not okay. They aren’t coders.
Let’s Make It Easy For Clients
Clients + HTML = Sad Face. Developers should be making things like this easy for the end-user, the client. They don’t pay you to work in HTML. They want visuals.
Why don’t we just add a Horizontal Rule button In WordPress to the MCE Editor in WordPress? Just stick the code below in your functions.php file. Huzzah, you now have a new button added to the WYSIWYG Toolbar.
The default styling for Horizontal Rules is ugly. Let’s spice it up a bit!
If you’d like to look at some cool styles for <hr> tags, take a look at this post by Chris Coyier.