Best way to set up the CMS for a specific page layout?

Hi guys,
I make wordpress themes from scratch but I haven’t delved into shortcodes/plugin/widget design yet.

I’m wondering how best to set up a page template that will consist of four boxes (2x2 grid). Each box has an image and a link to another page of the site, and each box has slightly different styling. The client needs to be able to change the content of each box, and add new pages with this four-box layout.

In the past I would have just set up a table within the text editor and shown them how to add their images to each table cell. I know, this is not the correct way of doing things, so I want to learn how to do it better. And now that I’m doing responsive layouts I really want each box to be wrapped in a div so they can stack when viewed on mobile.

ANYWAY what is a nice user-friendly way to set this up? Ask the client to wrap each box item in shortcodes? Or make each box a widget? There could be 50 pages with this layout on the site, so it needs to be easy. Just not sure how to do it.

Any thoughts?

Many thanks. :wink:

Are you asking for codes?

I didn’t quite understand, did you finish designing your theme?

Sorry about not being clear in my post - to reword:

I’m looking for a way for my client to update their pages in the CMS. These pages just don’t have one single block of editable content - each page has four blocks of editable content, arranged in four divs. Some of this content is pulling data from other pages, some is text/image input.
Each block has styling I’ll be setting in the stylesheet.

Thru what mechanism can I set up the theme to allow the client to easily add content to each box on each page? Can you suggest maybe a pre-existing plugin or shortcode method to do this?

One way of doing it would be to make each box a widget - BUT - I can’t do this because there’s too many pages and each would require four different widgets.

Another way would be to set up a 2x2 table on each page and input the content into each cell - BUT - don’t want to do this because its sloppy and the table cells won’t react well in the responsive format.

Any ideas? Thanks very much.

Off Topic:

I know you don’t want to hear this, and it’s a bit off topic and perhaps cheeky, but the real answer is to get a better CMS. :slight_smile:

Yikes ralph, that’s extreme…
I’m a bit past that stage now, well and truly in Wordpress world, for this site and all my sites.

If you want to explain a bit more that might give me more insight into other cms’s … but I 100% need a Wordpress solution here. No turning back now for this one.

I really just meant that WP isn’t designed for this, yet it’s a standard need for a CMS—which is partly why I refuse to use it for anything other than a blog. I hate to see people hacking WP around to do things it’s not designed for, when there are much nicer CMSes like ExpressionEngine and even Perch that make this stuff blindingly easy. :slight_smile:

(This isn’t intended as a criticism of you, by the way. I realize WP is a hugely popular CMS, but I’m not really sure why, to be honest.)

Hi ralph, fair point, and I do intend to investigate other cmses later as I’ve heard good things about EE and the like.

Shield your eyes if need be - I do need to hack WP for this one though! :slight_smile:

Am assuming something like this wouldn’t work for you? It says it has a responsive grid and it also has templates. Doesn’t look like it would mess with whatever you are already using to style your own template either as it is working within the page content.

Slackr that looks pretty amazing, and could be the answer. Going to play around with it today. Thank you.

Yesterday I found a free plugin called divup content, basically the client just needs to type the shortcode [divup] between block of content and it will place nicely id-ed & class-ed divs around those blocks. Pretty simple.

I actually went on to Codecanyon to find another plugin that does a similar job but from memory allows you the designer to pre-set the templates. The client just sees a set of options eg 4 boxes template, contact page, 3boxs+ad. Once they choose it the layout is pre-set but they can define the content. It may have been this one but it was a while ago I spotted it and put it on my mental radar.

I like the idea of pre-setting templates. Thanks again for your help on this one.