WordPress & how to best manage specific content

wordpress-tools2

WordPress is great .. but ..

I’ve been working with WordPress for 6 years or something.
And most of the times that’s a bunch of fun, and I always find a way to make something work, but…¬†some stuff is still a bit hard to do (or I’m not aware of a better method).

And sometimes, it’s hard to choose on which tradeoffs to make.

With the arrival of Custom Post Types in 3.0 the Managing of Content in our System became a lot more powerful for instance, but it doesn’t solve all (ok, given, sometimes a bit wacky) problems in regards to content management.

Let’s say I want a page with a specific block or multiple blocks of content, which has specific markup (not generated by TinyMCE).
Let’ say it should look like this. Boxes with a title+icon, a description and the full block has a link around it.

Screen-Shot-2013-11-11-at-19.59.44

Part of the HTML (one row) would look this
<h1>My Post title</h1>
<p>On this page you’ll find our departments and their contact info</p>

<div class=”row”>
<div class=”widget small-12 large-6 columns”>
<a href=”#HREFLINK”>
<div class=”box”>
<h3 class=”h3″><i class=”ss-icon”>navigateright</i>&nbsp; Communications Department</h3>
<p class=”desc”>Tom Hermans</p>
</div>
</a>
</div>
<div class=”widget small-12 large-6 columns”>
<a href=”#HREFLINK”>
<div class=”box”>
<h3 class=”h3″><i class=”ss-icon”>navigateright</i>&nbsp; Finance Department</h3>
<p class=”desc”>John Hermans</p>
</div>
</a>
</div>
</div>

A number of problems arise..

How does a non-technical person add a box like this ?
Or edit a box ?
Or remove a box without messing with the rest ?

btw: the wpautop already messes with this kinda code layout.

So, how to tackle this issue ?

I thought about this some time and there are number of ways to achieve this.

The simplest: Dump this HTML in the editor ?

Yes, but tricky and feels hacky. First of all, wpautop messes it up, and disabling doesn’t help you if you need it for other pages.
Plus, a non-technical practically shouldn’t be touching the page anymore. Risk too high.

Custom fields?

Yes, but the flexibility on “where to display them” disappears. The ‘placement’ is completely dictated by the Page Template. For instance, if someone wants to drop two boxes like this between paragraph 1 and 3 (and maybe a few more between paragraph 5 and 6).. is not doable.

Custom Post Types ?

possibly yes, and loop ’em. But the edit this-page-in one spot disappears. Plus placement is also dictated by Page Template. And content sits outside of the page.

Shortcodes ?

Mmmyeah, pretty flexible, but harder to update. Still better than HTML though, more straightforward, not too much of html & classes where this is all pretty dependent on. And all content is “in-page” editable.

Widgets ?

Same flexibility/structure as with shortcodes, without messing too much with the HTML that has to be spit out, but also no in-page editing possible. Content deferred to another section of the backend, which makes it confusing for some.

So, there are a number of ways of achieving this, all with their pro’s and contra’s. I’m just wondering what the opinions are on this ? It’s essentially a trade-off, a choice between maintainability vs simplicity and it all has to do with a specific way of organizing content and the knowledge of the people having to manage this.

Anyone who has a good idea on how to tackle this ‘BEST’, please comment below. Even if it’s a hack or a highly personal option.

XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>