As a web professional, I have often come across clients who want to update their own website. That’s great, because WordPress gives them the ability to do just that. Still, just because someone wants to update their website doesn’t mean they want to become a full-on developer. Frankly, there are some default behaviors inside WordPress that make things more difficult for non-technical users.
That’s where WordPress custom fields come in. In the hands of a savvy developer, custom fields can add all sorts of new content areas and functionality. For example, you might add WYSIWYG (what you see is what you get) fields, fields to allow for file uploads, date pickers and so on.
In this article, we’re going to take a look at an example of how custom fields can help make updating a website a much more intuitive process for your clients.
Recently, I worked with a longtime client on redesigning their site. Their business is promoting arts and crafts shows. They would be using WordPress for the first time and really wanted a way to manage documents in a more logical manner than on their previous static HTML site. Oftentimes documents will need to be shared across multiple pages.
So I downloaded a free version of the Advanced Custom Fields plugin. While custom fields can be created through your theme’s
functions.php file, this plugin makes things a whole lot easier by providing a familiar UI to create the fields you want.
Next, I learned as much as I could about the client’s needs. I found that they needed to enter their content in more of a “fill-in-the-blanks” manner than WordPress allows by default. This would mean using custom fields to add extra content areas and document management capabilities to specific pages within the website.
Below is a simple example of how this was accomplished.
Custom Event Documents
Early on, it was determined that we would use a free version of The Events Calendar for a listing of the client’s upcoming arts and crafts shows. By default, this plugin allows us to enter the basics like the event dates and descriptions. However, each one of these events would also need to have their own set of documents attached. Those documents would then in turn be shown on the calendar and a few other non-calendar pages throughout the site.
While we could just let a user upload and post documents using the WordPress WYSIWYG editor, this may become a bit cumbersome to manage. Especially considering links to these files would be needed outside of the calendar.
Custom Fields Needed:
Using Advanced Custom Fields, I created a new Field Group that included four files for the client to upload and one outside URL to add in as a link. I set things up so that this Field Group would only show up inside the Events post type, which is used by The Events Calendar plugin.
Tip: In the above File fields, I set the Return Value to “File URL“. This allows us to easily grab the specific URL of the uploaded file on the front end of the site. See some example code later on in this article.
The result (on the admin side of things) is that, when adding a new event, these new custom fields will display like so:
The custom fields have now removed any doubt in the user’s mind as to where their documents and other specialized content should go. That should save them some time and frustration.
On the Front End:
There are a number of different ways to display these custom fields on a site. So I encourage you to read the Advanced Custom Fields documentation along with other tutorials about how to use them. But for the purpose of this particular site, I created a custom page template using The Events Calendar’s Themer’s Guide for reference.
As an example, here is the code used to get the first document, “Booth Sizes & Fees” into the custom template. What we’re doing here is creating a conditional statement telling WordPress that, if the field is populated with content, display it as a link with some formatting.
<?php // Get Booth Sizes and Fees ?> <?php if( get_field('event_booth_sizes_fees') ): ?> <a class="brown-button-right" href="<?php the_field('event_booth_sizes_fees'); ?>" target="_blank"><i class="fa fa-cube fa-fw"></i> Booth Sizes & Fees</a> <?php endif; ?>
And, on the front end of the site, an event listing displays like this:
You may notice that there are some other fields included here. They were actually pulled from separate pages within the site. Here’s an example of how that can be accomplished:
<?php // Get Buyer Registration Form ?> <a class="brown-button-right" href="<?php the_field('registration_form', 14); ?>" target="_blank"><i class="fa fa-check-square fa-fw"></i> Buyer Registration</a>
registration_form', 14 portion of the code. It’s calling the “Registration Form” field from a page with an ID of
14. Using similar code, you can share content from your custom fields throughout the site.
This is just one example of how you can use custom fields to make updating a WordPress much easier for your clients. The idea is to lay things out so that the user has a clear idea of where specific items are supposed to go. While this use case may not be appropriate for every site, hopefully it will spark your creativity regarding how you can use custom fields in your own projects.
Featured image: Form flat icon, Photodune