Custom Layouts in the WordPress Content Editor


A short while ago we were working on a WordPress project where the content of the page needed to be displayed in two columns … informational text on the left and a contact form on the right (not in a sidebar).

Screenshot of page showing two column content

There are some WordPress themes out there, like WooThemes, that have built-in shortcodes for formatting page and post content into multiple columns, but we weren’t using one of those so we had to come up with an alternate solution.

Now this project was somewhat unique in that it was going to be a temporary placeholder website with relatively static content. If there were going to be any updates to it while waiting for the ‘real’ website to be designed and developed we would likely be doing those also so creating a solution that required knowing a bit of HTML and remembering CSS class names wasn’t a problem. We went with wrapping the content of the two columns in <div> tags … quick and easy.

But what if this had been the ‘real’ site that was going to be updated regularly? And what if it wasn’t just two <div> tags but a more complex layout?. Manually adding in the same HTML for each new page or post would get to be a real pain the backside very quickly.

This week I came across a post on Smashing Magazine that shows how to create Advanced Layout Templates in WordPress’ Content Editor. I thought it was a fabulous idea and will be keeping this one in mind for future projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>