Intuitive Custom Fields in WordPress

Posted on January 23, 2018

Managing a website is hard enough on clients. It certainly isn’t what they specialize in – their specialty is running their business. When developers don’t take the time to think through the experience their integration is presenting it can create intimidation for someone who wants to make simple content edits. Advanced Custom Fields provides some niceties out of the box that allow us to easily create a set of fields that not only look nice but they’re easy to use too. Let’s take a look:

Use the “tab” field

Advanced Custom Fields has a special field they offer called Tab. What this allows you to do is separate a group of fields from another. When you use the tab field in combination with breaking up a group of fields by section you can allow your integration to make sense to the person using it. They can look at the tab and see one that says say, “Intro Section” and correlate those fields to where they appear on the homepage.

Don’t over think field labels

What you name a field can cause confusion to the person using the website. When someone goes to edit the homepage and they see a fields that read “Intro Section Heading”, “Intro Section Background Image”, etc. while they’re descriptive, they’re big. They open the door to misinterpretation. Instead, if you have an “Intro” tab you can label the fields simply “Heading” and “Background Image”. To avoid conflicts in the database you can use Advanced Custom Field’s “name” option when defining the fields. So “Field Label” could simply be “Heading” and “Field Name” could be “intro_heading”.

Room to breath

What if you’re creating a drag and drop page builder using the Flexible Content field? Layout blocks are pretty heavy UI elements and even more so if you have nested repeater fields in them. Even if your preference is to have tabs left aligned use best judgement to open up some space. Elements on the screen are easier to understand when they aren’t smashed into a little area.

Beyond Custom Fields

The WordPress dashboard is an incredibly flexible tool. As developers who integrate people’s websites it’s important that we take the time to think through our implementation. Organizing and properly naming your fields is just a start. Here are some other ideas for cleaning up the dashboard and making it as easy and intuitive for your clients as possible:

Happy coding!