photo credit: Apple Fail via photopin (license)

Split content with a horizontal rule

Today I want to share a little technique with you that I use for much of my clients. There are many times when you need the content to be split in two in the frontend. Think about a custom wrapped header, a text in 2 columns, an introduction, etc. In my opinion the client must be able to use the wysiwyg editor and not be bothered with inserting tables, classes or div-elements. After all: the moment you allow your client to edit markup that is responsible for the layout, is the moment your clients’ is guaranteed to mess up his site, blaming you while doing it.


So here’s a little trick I implement very often to provide a fail-proof solution to split a text in 2 chunks without having your client mess up the HTML in the wysiwyg editor:

Horizontal rules are your friend

Let’s be honest: how often do you – or your client – really use a horizontal rule in their copy? I never seen it happen. So that’s why I use this simple element (that’s available in almost all wysiwyg editors) as a ‘separator-indicator’ for my clients. I tell them: “if you want to split your text in two, simply put a horizontal rule where you want to put it”. This sounds simple, but how do you handle this on the frontend?

Regular expressions to the rescue

The first thing you need to do is check if your content has a horizontal rule. This is very easy to check with a simple regular expression. Something like /<hr\s?\/>/  will do the trick. Now we need 2 functions: one to check for the horizontal rule and one to split the content in two:

The implementation in your template is quite easy:

In conclusion

And that’s it! Now you have a simple method to allow your client to split a text in 2 by using the wysiwyg editor, and he won’t have to edit the layout in HTML with all the risks that come with it.

Visitors give this article an average rating of 4.0 out of 5.

How would you rate this article?

Leave a Reply