How to Create Advanced, Contextual Layouts in WordPress with Conditional Custom Fields

By on WordPress

One of the most overlooked features of WordPress is its ability to place content outside the main post content area and into custom fields created by the website’s administrator user. These fields can be used to do just about anything, from displaying a current mood or song to holding a great deal of content-specific information that might be relevant only to some kinds of posts. Even though their functions are often misunderstood and overlooked, these custom fields are actually quite advanced and they enable some really great things with the website’s design when they’re implemented not only as blocks of content, but also as conditional variables determining a website’s layout based on the post’s content.

This is best done on sites that cover a wide and diverse content genre, like a website about sports, entertainment, or politics. Creating a custom design actually enhances the site’s usability by cluing users in to exactly what type of content they’re reading; if they’re reading a soccer article, changing the website’s design to something a bit more soccer-centric is a nice touch, for example.

To kick a design up a notch with custom fields, WordPress site administrators should be familiar with their template files and the XHTML required to create them. They should also be familiar with PHP and conditional variables; if not, this tutorial will skim the surface of these variables as it relates to implementation here. Further, WordPress administrators will need to develop a pretty thorough understanding of custom fields, their content, and their potential, as part of this process. With those prerequisites met, it’s time to proceed and create a truly advanced design based on custom field content.

Step 1: Enabling the Custom Fields Settings Area in the WordPress Dashboard

Since version 3.1 of the popular content management platform, WordPress has elected to hide screen options that are not frequently used by website administrators when creating new pages or posts within the WordPress Dashboard. This is much like the software’s predisposition toward hiding certain Dashboard widgets for monitoring site activity. The options hidden by WordPress are those that have either not been used before, or those that are least likely to be used. Custom fields certainly fall into both of these categories for most website administrators, and it’s likely that they will not appear on the “Add Post” page by default.

To enable the configuration area for custom fields, simply look for the “Screen Options” tab that sits right below the WordPress Dashboard’s top bar. Click this, and a new menu will slide down that contains a number of checkboxes for items and widgets to be placed on the “Add Post” page. Within this list, an option for “Custom Fields” will appear. Check the box, and the relevant configuration area should immediately be placed below the main content area where posts are typically written.

When the new Custom Fields configuration area has appeared on the “Add Post” page, the screen options tab can be collapsed and the page can be returned to normal. Now it’s time to get started creating custom fields for each of the site’s niche areas of content that users typically peruse.

Step 2: Creating Custom Fields Within the WordPress Dashboard

If no custom field has been created prior to following this tutorial, the configuration area will appear immediately when an option to create a new field. This should be filed out properly and a new field should be created for each kind of content the website serves up. In this example, we’ll be using a sports website to show how content can be split into different designs simply by using a conditional custom field.

Where the custom field configuration area presents its fields, it shows two options. The first is the “Name” field, and this should be the name of the custom field itself. Make it simple, relevant, and all lowercase so that it can easily be included into a conditional PHP variable. In this example, our website’s administrator will be creating custom fields with the following names:

  • soccer
  • baseball
  • football
  • basketball
  • tennis

These fields can be created blank, and reserved for use in a future entry, or they can be filled out as they are created if they’re relevant to any new content being posted. From here on, any content related to the custom field will be placed into the “Value” box that lies on the right hand side of the “Name” area. Fill out the field’s content in this “Value” box if necessary, or leave it blank if no new post is currently being created.

When every custom field has been created, and a new field pertains to every type or niche of content the website currently covers, it’s time to move on. In the next step, we’ll look at how to bring custom field data (also known as “meta” data) into a post using simple WordPress variables within the typical WordPress Loop construction. This may not be necessary for all custom fields, however, so designers should only pursue this next step if they intend the custom field’s content to be seen, rather than merely using it to change the design’s appearance.

Step 3: Bringing Custom Field Meta Data into the WordPress Loop with a Variable

WordPress refers to any information entered into a custom field as the “meta data” of the post. This content is not considered to be the main content on the site, nor should custom fields be used to produce the main block of content on any WordPress website. In order to print any custom field data into an entry, the following variable must be placed within a standard WordPress Loop:

<?php the_meta(); ?>

By default, this variable prints an unordered list of custom field content from every filled-in custom field in the WordPress Dashboard. This might sound problematic, but it’s actually not. For the purposes of this design, only one custom field will ever be filled in at any given time. This is done so that just one custom field displays a sport-themed template for the site’s readers.

WordPress website administrators should test this variable out before they proceed, and look at the output that it produces. The basic unordered list construction of this variable will require some CSS modification in order to blend into the site’s main design, and in order to fit in with the site’s existing written content. Be sure to assign some classes (not ID elements, as this unordered list will be repeated several times) and style it accordingly. When it looks good, and when everything looks like it blends together and belongs in the main content area, it’s time to move on to the creation of conditional design elements based on custom field data.

Step 4: Getting Acquainted with Conditional PHP Variables and Implementing New Design Elements

The most important step toward a fully conditional website is to understand how conditional variables word in WordPress, and then decide where conditional statements should be placed in order to change the design dynamically to meet the content being displayed. For this tutorial, we’re going to go ahead and say that the WordPress website administrator has opted to change the site’s masthead based on the sport that features as the main focus of the article. Because this is on a per-article basis, this will not be done on the website’s main index page. Instead, we’ll need to combine two conditionals in order to make our changes. The first will only display changes if the page is “single” or a standalone entry page, and the second variable will alter the design on a single page depending on the content of a custom field. Here’s how the variable will look in its intended form:

<?php if is_single && (get_post_meta($post->ID, "soccer", true))) { ?>

In the example above, the variable simply says, “if the current template is a standalone page, and the conditional field for soccer is filled in, then take the action below.” It’s actually pretty basic and easy to understand once the variables are constructed. In this example, the double ampersands is the PHP equivalent of “AND” and it means that both conditional statements must be met by the content in order for the masthead to change. If just one condition is wrong, it will not display. This is how the masthead change is prevented from being visible on sections like the site index, archive pages, and category pages, where it might not be as relevant or as intuitive as on a standalone page.

When the entire thing is put together to create a series of custom mastheads for each sport, it looks like the example below. This code should be pasted right into the same variable that was created for the soccer website, with a line break between each conditional statement:

if is_single && (get_post_meta($post->ID, "soccer", true))) {

<div id="soccer-masthead"><h1>Sports Blog: Soccer</h1></div>

if is_single && (get_post_meta($post->ID, "baseball", true))) {

<div id="soccer-masthead"><h1>Sports Blog: Baseball</h1></div>

if is_single && (get_post_meta($post->ID, "football", true))) {

<div id="soccer-masthead"><h1>Sports Blog: Football</h1></div>

if is_single && (get_post_meta($post->ID, "basketball", true))) {

<div id="soccer-masthead"><h1>Sports Blog: Basketball</h1></div>

if is_single && (get_post_meta($post->ID, "tennis", true))) {

<div id="soccer-masthead"><h1>Sports Blog: Tennis</h1></div>

} else {

<div id="soccer-masthead"><h1>Sports Blog: Other Sports</h1></div>

With this conditional construction placed into the current theme’s “header.php” template file, the content of a custom field created within the WordPress Dashboard will now have a direct and major impact on how the design itself is presented to the end user. This series of conditional variables creates a new masthead for every single type of content, but it also permits for a standard website header (probably one that matches the index page’s standard masthead) for content that does not fit into any of the major niche areas that the site covers.

It’s important always to have an “else” statement for a general website masthead, or any design element that is being changed through the use of conditional variables and custom fields. It’s entirely possible that some content simply won’t fit into any category, and it’s important to have a backup plan in case that happens. Otherwise, the site simply will not display a masthead (in this case) and users would be left with a serious usability headache that would see them unable to navigate the site or determine exactly where they are within its pages of content.

This is all that needs to be done in order to alter the design and make it conditional based on the content of a custom field. When everything within the conditional variable has been customized to the designer or administrator’s liking, the “header.php” template file can be saved and uploaded to the server via the FTP client of choice. The theme can then be tested to make sure that it works with the new conditional variables, and posts can be updated to place content into the new custom fields as it is appropriate.

Step 5: Make Sure Everything Works, and Make it Backwards Compatible

Chances are pretty big that the website has not been using custom fields up until this point, meaning that older posts will need to be updated so that they can be brought in line with the new design elements. The chief way of doing this is to simply edit every post, place content into the relevant field, and save. In the example here, the website administrator has opted to place the scores of any games into the custom field, displaying score information in the post itself while also changing the website’s basic design.

When all of the website’s older content has been updated to work with the new conditional design elements, there is really nothing left to do except test the new implementation for bugs and glitches that might present usability problems to end users. Most often, this has to do with the omission of the “else” statement included in the example above, so be sure to have that backup plan initiated in order to avoid a masthead-free website design (in this case). When it all looks great and works perfectly, there’s nothing more to do. The website is finished and can now alter its appearance based on the content of a custom field.