EvoBloggito

Basic Custom Fields Technique to Enhance WordPress as a CMS

Author: Ray Gulick; Published: Mar 11, 2010; Category: CSS, Design/Development, PHP for Designers, WordPress; Tags: Custom Fields, PHP for Designers, WordPress, WordPress as CMS; No Comments

This is not a new trick, and I certainly did not invent it. It’s been used before, but when I went searching for information about how to do it, it was hard to find. In fact, I finally had to ask a friend who is much better at PHP than I am to help me (I only recently learned to spell P-H-P). This is really basic stuff, but for a lot of us, basic is what we need to get on with our projects.

Sometimes, you need things to NOT appear on a page unless something else that goes with it appears on the page. This is a pretty basic capability for most CMS systems, but I had never done it with WordPress on a page-by-page basis.

Here’s the scenario. I wanted to add a highlighted note in the subnavigation area of my WordPress theme, Evo4 CMS, and I wanted it to be tied to the content of the page it appeared on. I hadn’t used custom fields much, but it seemed to me that was the way to go. Here is an example of the code I wanted to appear below the subnavigation items on the pages:

<div class="sub-note">
     <h5>Subnav Note Heading</h5>
     <p>Sed do eiusmod tempor incididunt velit esse cillum dolore
     duis aute irure dolor.</p>
</div>

Pretty simple, right? I decided that, for greater flexibility, my client would have to be responsible for the HTML formatting within the div (this particular client is capable), but I did not want them to be responsible for the div itself, as things can get ugly when someone forgets to close a div or attaches the wrong class to it. In the WordPress backend, on the page on which I wanted the note to appear, I created a custom field named “subnavnote” and added the value (same as above, but without the div):

<h5>Subnav Note Heading</h5>
<p>Sed do eiusmod tempor incididunt velit esse cillum dolore duis
aute irure dolor.</p>

On the page template in my theme (page.php), in the subnavigation column, I added the following:

<div class="sub-note">
<?php echo get_post_meta($post->'ID, 'subnavnote', true); ?>
</div>

Woohoo! That displayed the text from the custom field in the subnavigation area. But there was a problem: when I went to other pages, an empty “sub-note” div displayed (CSS specified padding and a background color for the div, which caused it to be visible even when empty). And that was definitely NOT something to yell “woohoo” about.

I needed a way to make the div appear on a page only if there was a value for “subnavnote.” No note, no need for the note container. This was where Googling left me high and dry, as I didn’t know the right terms to use, or how to ask the question so that I was able to find a usable answer. I have no doubt the answer was and is out there, but it remained outside my grasp.

After fiddling and failing with some PHP code snippets, I asked a friend who is a PHP coder for help. Here’s the solution she gave me:

<?php $subnavnote_value = get_post_meta($post->ID,
   'subnavnote', true); ?>
<?php echo ($subnavnote_value != '') ?
   "<div class='sub-note'>".$subnavnote_value."</div>" : ''; ?>

Basically, if there is no value for the custom field on a particular page, this code prevents the div that contains the custom field content from appearing. And if there is a value for the custom field, both the value and its container div appear on the page.

I would break down the code and explain it if I was competent to do so, but I’m not. I can see how it works, however, and have adapted it to other similar circumstances, which greatly increases my ability to use custom fields. I hope this solution is similarly useful for you.