WordPress as CMS: It’s in the Custom Fields

By Michael Cervieri in Software.

When we decided to launch the Labs, the first question was what we wanted to use to actually manage the Web site. Our needs are fairly straightforward: tell people what we do and allow us to blog about how to do it.

WordPress seemed an ideal candidate. A lot of clever thought and design has been put into leveraging WordPress as a Content Management System over the past few years and it was just a matter of using its existing hooks to map content to different sections of the site. So while what follows might begin to look and feel like a circuitous Escher painting with screenshots of the site we’re publishing on, we give you a look at how we spun WP as a CMS in order to create ScribeLabs.

What follows if for people familiar with WP terminology (e.g., the difference between a Post and Page) and generally experienced with how the Loop works.

Site Structure

The key to using WP as a CMS is to figure what content you want to map where. It goes without saying then that having a good idea of your site structure is key. Here’s ours, generally:

• Home
• Software
• Software Subpages
• Media
• Software Subpages
• Strategy
• Software Subpages
• Blog
• Blog Posts/Categories/Etc.

Once you have that, it’s a matter of flowing content upwards. That is, the Home Page’s content consists items authored to its child pages. And if you log into our site and look at what we’ve authored for our Home Page, you’ll get the following 28 words and nothing more:

ScribeLabs is a <a href="/software/">software development</a>, <a href="/media/">media production</a> and <a href="/strategy/">new media strategy</a> firm. Our passion is digital media and the development of applications that support conversation, communication and content distribution.

Yet the page looks like this (header and footers snipped for space.):

Current Home Page minus Header and Footer.

So what gives? There’s a video player, various content boxes and a blog feed. Let’s map this out and show how all the content comes from from sub (or child) Pages.

Content Mapping

I gave you our general site structure above and wrote that we needed to get content from each subsection onto the Home page. Therefore, the Media Home Page controls what’s in the Home Page Media Box, the Software Home Page controls what’s in the Software box, etc.

Visually, here’s what we’re looking at.

Content on Home Pages is created in sub-pages

Technically, here’s how we do it.

WordPress Custom Fields

WordPress Custom Fields allow you to create extra content or data that does not appear in your Page or Post, but can be pulled in where an how you’d like it. The Custom Fields exist below the Text Area when authoring and documentation for setting up Custom Fields exists at WordPress.org. Basically though, you can create as many Custom Fields as you want, assign any content to them that you want, and then display them wherever or whenever you want. Pretty handy.

So here’s the main content row of our Home Page and I’ll focus on how we populate the “Software” area with content.

Select to Enlarge.

To bring that content in there, we used Custom Fields on the “Software” Home Page. Those custom fields look like so (you’ll have to click to view an enlarged version):

Select to Enlarge.

What you can see though is that we have four fields: Title, Description, Highlights and Media. And they correspond to the following items on the Home Page.

• Title: gives us the “Software Development” header.
• Description: Gives us the list items of the things we do.
• Highlights: Gives another list of the languages and frameworks we work in (i.e., Rails, Flex, PHP).
• Media: This isn’t actually used on the Home Page. Instead, it’s for the banner on top of the “Software” Home Page.

To display the content we use WordPress’ get_post_meta() function and end up with something like the following:

$title = get_post_meta(get_the_ID(),'Title',true);
$description = get_post_meta(get_the_ID(),'Description',true);
$highlights = get_post_meta(get_the_ID(),'Highlights',true);
	if($title):
		echo '<h2><a href="'.get_permalink().'">'.$title.'</a></h2>';
	endif;
	if($description):
		echo $description;
	endif;
	if($highlights):
		echo '<div class="links">'.$highlights.'</div>';

This tells the Home Page that if specific Custom Fields are created, display the content.

Mapped and illustrated, we have our developer’s guide looking like this:

Select to Enlarge.

So that’s how we began. WordPress Custom Fields open up a world full of opportunity to map content just about anywhere you’d like. With a little creativity and planning, you can spin your site just about any way your imagination desires.

Michael Cervieri is a ScribeLabs co-founder, Executive Producer of ScribeMedia.Org and an Adjunct Professor at both the Columbia University Graduate School of Journalism and its School of International and Public Affairs. You can find him on Twitter at bmunch.

0 comments

Search