We Are Communication Architects

Building brand awareness through content creation and community engagement.

June 2nd, 2010

Adding Editable Content Areas to your WordPress Theme

Sometimes when creating a website, there is a need for small blocks of content to appear in certain areas of the page. This may be a small feature panel on the home page or just a notification in the sidebar or header. Before WordPress 3.0, there were a couple of ways of doing this. The content could be hard coded into the theme, which meant the theme code would have to be edited any time there were updates. Or a page or a post with the needed content could be pulled in via a query_posts().

The issue with the latter was that the page or post meant to only be a content block would show up as a full page/post within search results or in the normal post loop. This is no longer a problem. With the improved API for custom post types and taxonomies in WordPress 3.0, creating new types of content has become extremely simple.

To get started, the new post type needs to be registered.

function initialize_content_blocks()
{
  register_post_type('content-block', array(
    'labels' => array(
      'name' => 'Content Blocks',
      'singular_name' => 'Content Block',
      'add_new_item' => 'Add New Content Block',
      'edit_item' => 'Edit Content Block',
      'new_item' => 'New Content Block',
      'view_item' => 'View Content Block',
      'search_items' => 'Search Content Blocks',
      'not_found' => 'No content_blocks found',
      'not_found_in_trash' => 'No content blocks found in Trash',
      'view' => 'View Content Block'
    ),
    'publicly_queryable' => false,
    'exclude_from_search' => true,
    'public' => true,
    'rewrite' => false,
    'supports' => array('title', 'editor'),
    'taxonomies' => array()
  ));
}
add_action('init', 'initialize_content_blocks');

With the above added to the theme’s functions.php, a new private post type of content-block will be created. Setting publicly_queryable to false and exclude_from_search to true, content-block posts won’t be publicly accessible, so front end users of the site won’t see any of these posts in the search results or via specific URL in the front end. Once added, a new menu item for Content Blocks will appear in the menu of the admin. Clicking Add New under this menu will bring up the edit screen with a title field and content area.

Now that content-blocks can be added, there needs to be a way to specify which of these posts should go where. Setting up a new taxonomy to designate these areas will accomplish this.

register_taxonomy('content-position', array('content-block'), array(
  'rewrite' => false,
  'labels' => array(
    'name' => 'Content Positions',
    'singular_name' => 'Content Position',
    'search_items' => 'Search Content Positions',
    'popular_items' => 'Popular Content Positions',
    'all_items' => 'All Content Positions',
    'edit_item' => 'Edit Content Position',
    'update_item' => 'Update Content Position',
    'add_new_item' => 'Add New Content Position',
    'new_item_name' => 'New Tag Content Position'
  ),
  'show_tagcloud' => false,
  'hierarchical' => true
));

The above segment creates a new content-position taxonomy and relates that taxonomy to the content-block post type created earlier. This should be added after the register_post_type() call within the initialize_content_blocks() function shown earlier. Now editing/adding a new content-block shows a Content Positions meta box on the side column in the edit screen. A new content-block with a position of ‘homepage notification’ can now be added.

With all of the admin setup to handle the new post type, the theme needs to be altered to use it. A simple query_posts() within the theme will take care of this.

<?php $content_block = new WP_Query(array('post_type'=>'content-block',
  'posts_per_page'=>1, 'content-position'=>'homepage-bottom-right-panel'))?>
<?php if($content_block->have_posts()): $content_block->the_post(); ?>
  <?php the_content();?>
<?php endif; ?>

That’s it. For now on, the most recent content-block will show up in the area designated in the theme. If the content needs to be randomized, 'orderby'=>'rand' can be appended to the WP_Query() instantiation.

About the Author
Michael Pretty is an application developer for the Voce Connect Platforms team with a background in developing for PHP, mySQL, WordPress and a handful of other environments. Follow him on Twitter @prettyboymp

Filed in Development, WordPress

Add Your Comment9 Responses to “Adding Editable Content Areas to your WordPress Theme”

Alicia St Rose on June 2nd, 2010 at 4:00 pm

This is EXACTLY what I’m looking for. Just downloaded WordPress 3! Thank you!!!

Gabriel on October 29th, 2010 at 4:44 pm

Very helpful! Thanks!

carolyn on December 20th, 2010 at 1:13 pm

Very helpful but where in the theme do I paste the following? Which file?

‘content-block’, ‘posts_per_page’=>1, ‘content-position’=>’homepage-bottom-right-panel’))?> have_posts()): $content_block->the_post(); ?>

Biswajith kr on January 19th, 2011 at 5:03 am

Very good article and it is very much help full.But there is a doubt..

Where will I paste the last code given above? Ie in which page will i paste the code ‘content-block’, ‘posts_per_page’=>1, ‘content-position’=>’homepage-bottom-right-panel’))?> have_posts()): $content_block->the_post(); ?>

Michael Pretty (prettyboymp) on February 1st, 2011 at 10:31 am

@carolyn, @Biswajith, the last part of the code goes in your theme wherever you need the content block to display. So if you need it in your header, put it in header.php of your theme.

Richard Forbes-Simpson on June 6th, 2011 at 6:40 pm

this a gem!

just implemented this in a wordpress thesis theme and works great!

thanks for sharing…

Jon Jennings on June 27th, 2011 at 8:58 pm

Awesome technique.

I had a site with several blocks of content placed in specific locations on the page. Hard-coding some of them into the theme page was an awful idea and trying to put loads of divs and class IDs into the page content would have made it virtually impossible for the customer to edit the page in the future.

This was JUST what I wanted and the example worked perfectly. Many thanks.

Adam Green on July 4th, 2013 at 12:09 pm

This is terrific but you need to make one thing clearer. In the last query_posts() snippet, you have a position homepage-bottom-right-panel but that’s just an example, people need to enter the name of their own Content Position that they’ve created between those quotes.

Needs pointing out I think for inexperienced people who follow your steps and don’t see anything.

Daniel on July 5th, 2013 at 9:02 am

Hi,

nice post! My problem is that is always shown only a block. when I add a second appears at this point of the first