Using WordPress Custom Fields to Enhance a Plugin

The WordPress plugin ecosystem is amazing. It offers us an almost endless variety of functionalities that we can add to our websites with minimal effort.

There are cases, however, when a plugin does about 95% of what we need. Or perhaps it has all the functionality we were hoping for, but could benefit from an extra bit of personalization.

While we could accept any shortcomings and leave well enough alone, that’s not the WordPress way! Instead, we can use the incredibly-flexible WordPress custom fields to help us fill in what’s missing.

Today, we’ll explore some benefits of integrating custom fields into our favorite plugins. Then, it will be time to dive into a real-world example that demonstrates what can be accomplished.

What WordPress Custom Fields Do

The main role of custom fields is to add extra data to a WordPress post, referred to as “metadata”. This is essentially information that goes beyond the default data included with a page, post or even a plugin.

What kind of metadata can be added? Pretty much anything you can imagine. Text, HTML and URLs are common examples. However, you might also add object data from files or posts. Then there is also the possibility of using custom fields as settings that allow you to perform various functions conditionally (if this, then do that).

Custom fields provide some useful benefits:

Adding Highly-Customized Data

When building a website, custom fields provide a way to standardize specific pieces of niche data. That is, data which is unique to a company or organization.

As an example, let’s think of an employee profile. There are a number of different items we might want to include for each person:

  • Name;
  • Title;
  • Photo;
  • E-Mail Address;
  • Biography;

Using custom fields, we can create this standard set of data for each employee. To take things a step further, we might even create a custom post type called “Employees”, in which each post contains these fields.

A User-Friendly Interface – With Some Help

Admittedly, the custom fields UI that comes with WordPress is lacking in a number of areas. But the developer community has created some compelling solutions in the form of custom field plugins.

These plugins help create a much more user-friendly interface and add tons of amazing functionality. Among the most popular are Advanced Custom Fields (which we’ll use in our example below), CMB2, Meta Box and Pods Framework. While there are some similarities throughout, each plugin has some unique benefits that are worth looking into.

Whichever you choose, you can expect a big improvement over the default UI. They’ll make the content creation process that much more intuitive.

Adding Pizzazz to Plugins

Now that we understand the benefits of using WordPress custom fields, let’s talk about how they relate to plugins. Chances are, many of the plugins you have installed on your website already use custom fields in some form. But we also have the ability to add our own.

This can be useful in a number of ways:

Extend Available Data

First, it provides an opportunity to add that custom data we mentioned above. This can be a big help in situations where we want to input and/or display more content than the plugin would typically provide.

For instance, let’s imagine we’re using a testimonials plugin for our web design business. It comes with a default set of fields that we can use to show off our happy clients. But maybe there are some unique items we want to add.

Perhaps we want to mention which CMS we used when building their project, or how long we’ve worked with each client. Custom fields enable us to add this data without having to build a whole new testimonials plugin from scratch.

Add New Functionality

As we stated earlier, custom fields can also be used to create settings. This is an area where we can really use our imaginations in order to make a plugin do even more.

Of course, it’s possible to get pretty deep into the weeds with this. And much of what is possible depends on the plugin’s extensibility and your own ability to write code. But there are tons of potential uses.

Taking our testimonial plugin example a step further, let’s say that we want to add a special front-end design element to denote our biggest clients. We might do something like this to make it work:

  • We could add a checkbox field to each testimonial post called “Star Client”;
  • Checking that box would indicate that we want to display a star icon on the client’s front-end profile;
  • In our theme, we can determine whether the “Star Client” field has been checked for each testimonial post;
  • If the field has been checked, we then display the special star icon;

While this is a very basic example, it does show what is possible when adding settings via custom fields. There are any number of ways this could be used to enhance a plugin.

Real-World Example: The Events Calendar

Now, let’s explore how this might work on a real project. The following is a fairly simple example of how custom fields can add niche data to a popular plugin.

What We’re Using

For this demo we’ll be utilizing two free plugins. If you’re following along, make sure to have them installed and activated on your test site.

The Scenario

We’re building a website for an organization that holds regular meetings. For each meeting, they plan to post an agenda as a PDF document.

While we could just add these documents to each event through the content editor, it opens the door to an inconsistent user experience. By integrating a custom file upload field, we can ensure that each meeting’s layout (not to mention the placement of the agenda) looks the same on the back and front ends.

Plus, having the field within the post editor serves as a friendly reminder to the person who is adding content. This visual reduces the odds that they will forget to add the document.

The Set Up

Here’s how to create and implement our new file upload field into The Events Calendar:

1. Navigate over to Custom Fields > Add New.

2. First, we’ll need a title. Let’s call our new field group “Event Agenda”. Within that group, we’ll create a new File field called “Agenda”. The field settings will be the defaults, although some handy instructions will be included.

Custom field settings screen.

3. Scrolling down to the Location settings, we’ll assign this field group to the Event post type.

Custom field location setting.

4. Now, let’s save our new field group. The Agenda field will now display underneath the content editor within each event.

Agenda custom field displayed in the post editor.

Note that, in this case, we’re using the Gutenberg block editor. It handles custom field metaboxes a bit differently than the Classic Editor. While the Classic Editor allowed for custom positioning of metaboxes, Gutenberg sticks them at the bottom of the screen.

Certainly, this impacts the user-friendliness on the back end. But it doesn’t negatively affect anything we’re doing on the front end.

5. To test things out, let’s add a PDF file to an example event we’ve created.

Agenda custom field with a file attached.

Displaying Custom Fields on the Front End

The last step is ensuring that our new field will display on the front end. Before we begin, let’s visit the documentation for both Advanced Custom Fields and The Events Calendar:

In this demo, we’ll display a link to the agenda on our events page, which is using the “List” view. This will require placing a little code snippet into the active theme’s functions.php file or a custom plugin:

/**
* Display the Meeting Agenda file in The Events Calendar "List" View.
* Learn more about template filters at: https://theeventscalendar.com/knowledgebase/k/using-template-filters-and-actions/
* Learn more about file upload files at: https://www.advancedcustomfields.com/resources/file/
*/
add_action('tribe_template_after_include:events/v2/list/event/title', 'meeting_documents_list'); // Let’s show the Agenda right under the event title.

// Our Custom Function
function meeting_documents_list() {

// Get the Meeting Agenda, if it is available.
$agenda = get_field('agenda');

if( $agenda ):

// If the agenda exists, display a link to it.
echo '<a href="'.$agenda['url']. '" target="_blank" style="color:red;">View Agenda &raquo;</a>';

endif;

}

This provides us with a basic start. We could certainly go on from here and add the agenda link to templates associated with other views. But hopefully this gets your imagination going as to what else is possible.

Checking the result on the front end, you can see that we now have a link to the agenda (styled in red) just underneath our event’s title.

The Agenda custom field displayed on an events listing.

Little Tweaks That Make a Big Impact

A great website often comes down to the smallest of details. Those little extras we add in that make the site easier to use and more useful.

The right WordPress plugins can go a long way towards getting us there. However, they still may lack some of the details that make our particular project unique. That’s where custom fields can come in and help us to finish the job.

So, the next time you wish that your favorite plugin could do just a little bit more, think about how you might use custom fields to make it happen.


Add a Comment

Your email address will not be published. Required fields are marked *