This is going to be my first tutorial on some of the tricks I employed in developing the UMFC site (which is currently still to go live, as the client is inputing data, so that link is to the development site).

I’d probably rate this tutorial as intermediate to advanced.

One of my all time favourite plugins for WordPress before I switched to the Headway framework, was Ontwerpstudio Trendwerk’s amazing Multiple Content Blocks (They also makes the equally awesome CMS plugin)

When developing WordPress websites that will have user managed content, the aim is always to keep it simple. WordPRess, dare I say, is not so good at doing that. Things like shortcodes and custom fields are not user-friendly. Some users will have no probs with them of course, but others will just go glassy eyed and into the foetal position.

You can’t ever be sure about who is entering content. The person that enters the content today, may not be the same tomorrow. And tomorrow’s person may never have ventured beyond bold and underline in MS Word.

So, ideally, you’ve got to develop backends that stand up to any user.

Several plugins for WordPress do some really cool things to make custom fields user friendly. Two you really should check out are Pods and Magic Fields. They each create custom content types, so not just “page” and “post”. For example, I’ve used Magic Fields to create a Vacancy content type on this UMFC site.

Multiple Content Blocks plugin

But a third plugin, Multiple Content Blocks (MCB), lets you add fields to your page templates.

Let’s say you wanted the user to enter a set of related links, which you would then display either at the foot of the post, or even in the sidebar. Okay, I admit, I’ve done it on a site I’m developing. here’s a screen shot:

Look at Documents, Links and Related Articles. They are all a list the user has typed into a custom field added and managed by Multiple Content Blocks, called Related_Docs_and_Links (can’t have spaces). See this pic:

See, all I had to do was teach the user to type a list with headings in that field. Much easier than explaining custom fields and teaching them HTML (because custom field editor doesn’t have a wysiwyg editor).

MCB meets Headway

Now that’s the front and back, but what’s going on in the middle? How is the page designed in Headway to display that?

Well, you have to get a bit clever.

MCB relies on finding the_block() code in your page template. Immediate problem – Headway doesn’t seem to use page templates. Maybe not, but that doesn’t mean you can’t. No, indeed, it’s quite happy if you do. So, to get MCB working, all you have to do is:

1. copy index.php to the name of your page template – eg otherpages.php
2. set it up as a template by adding “Template: your template name” to its header
3. insert the code for your MCB blocks but very important for us Headway folks, inside a non-displaying div
4. insert the code for your MCB blocks into your Headway design

Here’s the code for the example above.

This is actually my default page.php (which I created because it doesn’t exist in Headway). That’s why it doesn’t need the “Template Name” line, but in my next example I’ll show that.

I’ve bolded the important line. the_block is the key function of MCB.

In the WordPress editor, when you select this template page, it then displays the extra field for related documents and links, but we hide it in the template so it doesn’t display in the wrong place for us on our output page.

To get it to display where we want, we insert similar code into a Text/HTML/PHP leaf, or into a executable PHP widget, which is what I’ve done in this example.

You might notice I’ve used the Widget Logic plugin so this widget doesn’t display on the front page. If there’s nothing in the “Related_Docs_and_Links” field,nothing will display, so it’s not really necessary, but I’m just anal at times.

So, you can see that page at UMFC – Care Providers

Another Example

Ok. If you go to the home page of that site, you will see the MCB plugin in action again. The page content is spit in two columns. I could do this with a plugin like Magazine Columns like I did on the home page of this, my own, site, but they all use shortcodes and I want things to be easy for the user.

Again, MCB to the rescue. This time I set up a MCB block called “IntroSpiel” and a page template called frontpage.php., which I then select for this specific page.

Here’s the code for it:

Again, I’ve highlighted the important lines.

Here’s what the user sees in the WordPress editor

and

And here’s what the Text/HTML/PHP leaf looks like:

And for those who are wondering, there is a bit of absolute positioning going on to get the IntroSpiel MCB and the content to line up nicely. The entire shaded area is the content but with a large left padding, and the IntroSpiel MCB is positioned over the space that creates.

So, there you go, easy when you know how!

Caveat

There is a catch to using MCB.  If your page moves the page/post pointer, you could get the wrong page’s MCB displaying. The easiest way to do that is by inserting a content block that calls another page or post. There are ways around this, but none are overly easy. Just try to avoid it! If you encounter this problem, let me know and I’ll see if I can help you around it. If you suspect it’s happening, insert <?PHP the_ID() ?> into the Easy Hook called Footer Close. If the number displayed doesn’t match the ID of your page, then there’s your problem.

Conclusion

Multiple Content Blocks is an awesome plugin that opens up even more possibilities for content display in WordPress and Headway. Hopefully through this tutorial, you’ll find ways to make more interesting designs on your sites.

Any questions?

Related posts:

1. Review and tutorial: Callout Plugin for WordPress and Headway
2. Screencast tutorial: Styling Multiple Leafs with Custom CSS Classes in WordPress Headway
3. Tutorial: Conditional Leafs in WordPress Headway (part 2)
4. Tutorial: Easy Conditional CSS in WordPress Headway theme
5. Tutorial: Coding a complex design using the WordPress Headway framework