Add multiple searchable content areas in WordPress with custom fields (video tutorial)

WordPress is more than just blogging software. It’s now a genuine, simple and cost effective way for teams of people to manage content. WordPress isn’t perfect — you only get the one content area, which isn’t ideal. Here I’ll explain a work around that’s both simple and effective.

In lieu of the WordPress ebook I’m working on (which is close to going live, by the way), here’s an advanced topic for the power WordPress users amongst you. If you’re not a power user, but understand the benefits of what this article discusses, let me know and I can certainly help out.

Here I am, re-working the Octane website from scratch. I have all these design ideas, but they all break when I take into account how WordPress 2.9 doesn’t allow for multiple content areas, which is a real shame.

A few months previously, I’d been playing around with custom fields for a client website — I’d used them to store information for the main navigation on the website, such as a shorter name for each Page to use in the navigation, and a value to tell the Plugin which Pages to include and exclude. So this got me thinking.

Can I use custom fields as content areas?

And the answer is a big fat yes! That said, anyone who’s used custom fields will know that you don’t get a fancy editor for your content; all you have is this plain text box. That itself could be the cue for a Plugin, but right then and there, it wasn’t an issue.

So that we know where all of this is going, I’ll explain what I was doing. I wanted to add blocks of text (containing headers, regular paragraph text and lists) to my Pages and then be able to add graphical devices in between.

Add the content into the custom fields

First things first, you need to add your content.

  1. Either edit or add a new Page or Post.
  2. Scroll down to the “Custom Fields” box.
  3. Under the “Name” label, either choose from a previous custom field from the drop-down / pop-up, or click the “Enter new” link button beneath it and type the name.
  4. Under the “Value” label, either type in or paste you content.
  5. Now click the “Add Custom Field” button.
  6. If this is a new Page or Post, be sure to either save draft or publish. If it’s a previous Page or Post, you don’t even need to update.

Add the custom field data to your theme

Now that you have your content added into custom fields, the next thing is to get that content into your theme. I don’t know where you’re placing any of this, so all I can do is explain how you pull your custom field content in.

  1. Select the place in your Page or Post theme file where you want your custom field data to appear.
  2. Paste the code below into that area.
  3. Swap out where it says: “features” with the name of your custom field.
<?php $block = get_post_meta($post->ID, 'name_of_custom_field'); if (!empty($block)) { foreach(($block) as $blocks) { echo $blocks; } } ?>

Keep in mind, you can call custom field meta data from outside of The Loop — which is to say, you don’t need to be inside the loop that WordPress uses to summon up data about a particular Post or Page.

Making your custom fields conditional

This code runs a check to make sure there’s data in the custom field. So, for example, you could invoke a layer in your Page or Post only if there’s content present:

<?php $block = get_post_meta($post->ID, 'name_of_custom_field');
if (!empty($block)) { ?>
<div class="name_of_division_class">
<?php
foreach(($block) as $blocks) { echo $blocks; }
?></div><?php
} ?>

But are custom fields searchable?

By default, no they’re not. So if you’re using them to store lots of content — such as product data, for example — people searching your WordPress-driven website won’t find any of the carefully curated content you’ve added into your custom fields. Dilemma.

However, there’s a fix for this, all thanks to John Hoff, who’s written a script that extends the scope of the WordPress search engine to grab custom field data, too — which you can download here.

I’ve taken his code (which was a Plugin in all but name) and turned it into an actual Plugin you can install into your copy of WordPress. Once installed, you’ll need to edit line 37, which includes the names of the custom fields you want searched:

$customs = Array('additional', 'benefits', 'features');

So, within the Array() item, just change names of the items within the single quotes.

Editing the name values of the custom fields array

To add a new custom field:

  1. add a comma after the last single quote;
  2. followed by a single quote;
  3. then the name of the custom field;
  4. followed by a closing single quote.

To remove a custom field:

  1. select comma before its name;
  2. and the last single quote after its name.

You’ve now learned how to turn WordPress into a more featured content management system, hopefully without breaking too much of a sweat. As always, if you get stuck, leave a comment and I’ll see if I can help out.

12 Responses to “Add multiple searchable content areas in WordPress with custom fields (video tutorial)”

    • Wayne Smallman

      Hi Babs!

      The problem of their being only the one content section is something I’ve been wrestling with for a while, and was the main reason I’d held off using WordPress for the new Octane website.

      The beauty is, it’s not even a hack, it’s a very elegant way of making WordPress work that little bit harder without all kinds of weird Plugins and bizarre code.

      I’m glad you like it!

  1. Gelatinous

    Thanks for the tutorial, this is exactly what i want to do on my site, but i’m using the Thesis theme. Do you know how to make the code Thesis friendly?

    cheers

    • Wayne Smallman

      I don’t know much about Thesis, as I design my own themes. What would you need from my examples to make it Thesis friendly? You should be able to drop my code directly into any theme without any problems.

    • Wayne Smallman

      I’m guessing you’re not too familiar with PHP, yes?

      The code sample is part of a function. You don’t really want to amend the function, but just replace the whole thing (assuming you’re not using it) with my code sample.

      If you amend their code, you’re getting a mishmash of theirs and mine, which is why the whole thing is breaking.

  2. Gelatinous

    The problem is that Thesis works from a single custom functions php file, rather than standard wordpress template files so I need to add in specific code to make it work (hence the function and add action elements in the sample code).

    When I simply add your code in to custom_functions.php it breaks.

    What I assume I need is your code tweaked so it will work with Thesis which is why I was playing around with both of them to try and make it work.

    I’ve no idea if what i’m trying to do is possible but I would’ve thought that if it works on some themes it should work on others?

    • Wayne Smallman

      OK, now I know what you mean. Like I said, I don’t know how Thesis works. But if it’s using the functions file, it should be relatively straight forward.

      I’ve got your email address, so I’ll ping something over tomorrow, OK?

    • Wayne Smallman

      Hi!

      I’ve sent you a few emails, but you didn’t reply.

      This isn’t something I have time to look at right now, what with my current work load.

      As I said in the email, I can’t support third party themes that do things differently or in a non-standard way.

      Sorry, but I’m just too busy.

Got questions? Ask!
Speak to me, Wayne, for a free, no-obligation chat.

Contact Octane