Add Custom WordPress Drop Down Menus to Posts

The default WordPress editor offers all of the features a typical user would need to craft attractive pages and posts. This is especially true after the recent rollout of the platform’s Gutenberg block editor. But what if you want to attach additional data to your content?

Say, for instance, that you’d like to display a current mood beneath your post content. Sure, you could accomplish this with the platform’s built-in tagging system, but adding custom WordPress drop down menus to your posts might be a better approach.

Installing Advanced Custom Fields (ACF)

The Advanced Custom Fields plugin provides simple tools for adding custom menus and fields to the standard WordPress editor. Search for and install the plugin from the WordPress website or from the Add Plugins screen.

You can identify the correct plugin by its developer and by its impressive install count. ACF boasts more than one million active installs and is developed and maintained by Elliot Condon.

ACF in the Plugins Repository

Creating a WordPress Field Group

With Advanced Custom Fields activated, scan your admin menu for the new Custom Fields tab. Tap or hover over the new tab to expand its submenu, then hit the Add New item.

You are directed to the Add New Field Group screen. Each of the fields you create with ACF must belong to a group, and each field group can be added to any number of post types.

Go ahead and input a name for your group using the title field near the top of the current screen. Your group can contain additional fields beyond the “current mood” field we’ll be creating, so use a generic group title. Consider a title like “Post Details” if you intend to display the custom fields beneath your blog posts.

Scroll down to the Location panel of the Add New Field Group screen. The rules you define here will dictate when and where your custom fields will be visible from the WordPress control panel.

We plan to display custom WordPress drop down menus beneath our posts, so make sure your rule reads “Post Type is equal to Post.” This is often the default rule for new ACF groups.

Defining Location Rules for Custom WordPress Fields

Publish your new field group after supplying a title and defining location rules. Your group doesn’t include any fields just yet, so let’s quickly fix that.

Adding a Custom WordPress Drop Down to Your Group

Locate the Add Field button in the panel immediately beneath your group’s title field. Click or tap it to continue.

Start by assigning a field label to your new field. In this case, a value like “Current Mood” would be appropriate.

The name field follows the label field and is often filled automatically using a variation of your field label. Field names must follow a specific format and are rarely visible from the WordPress back end, so stick with the default and shift your attention to the Field Type menu.

You can assign one of several types to each new field, including the text field type, the select type, and many more. Custom WordPress drop drop menus are created using the Select type, which you’ll find in the Choice section.

ACF Options for WordPress Drop Down Menus

Choosing Select from the Field Type drop down will introduce a Choices text area. Find it beneath the Required toggle then enter items for your custom drop down. Each line of the text area should contain a single choice.

You’re free to review the remaining field options, but most of them can be left as is. With your field options defined, return to the top of the current screen and update or publish the group.

Displaying Custom Field Values in Your Posts

Advanced Custom Fields will automatically display your custom WordPress drop down menus beneath the post editor as long as your group’s location rules are met. This is not the case for your website’s front end. You’ll need to add the ACF shortcode to a post if you’d like to display a custom field value inside of or beneath post content.

Either create a new blog post or edit one that you’ve already published. Ensure that your custom drop down is available beneath the classic editor or blog editor and make a selection. Publish or update your post after picking a mood from the drop down.

Next, you’ll add the ACF shortcode to your post’s content. This will allow visitors to view your drop down selection from the front end.

Add a blank return to the bottom of your blog post if you’re using the classic editor. If you’re running the Gutenberg block editor, simply insert a shortcode or paragraph block beneath existing blocks. Insert the following into the empty line or block: [acf field="current_mood"]

Consider adding a label for your field beneath the opening square bracket to offer readers some context. Without a label, your new line or block would display your drop down selection and nothing else. This would likely confuse new readers.

Finally, update your post once more then view it from your website’s front end. You should find that your current mood is now visible near the bottom of your blog post. Feel free to return to older posts to select moods for them and to add the ACF shortcode as needed.

Current Mood Selection Visible from Front End

Troubleshooting Advanced Custom Field Shortcode Issues

The shortcode example provided above will work only if your new drop down was automatically assigned the current_mood field name. To confirm your field’s name, use the Field Groups item in the admin menu’s Custom Fields submenu to review existing groups.

Click or tap the Edit link beneath a group to browse its fields. From the Edit Field Group screen, click or tap your drop down’s Edit link and take note of the value supplied for Field Name.

If you find that your field’s name differs from the name we supplied in our shortcode example, update your post accordingly. For instance, if your drop down’s field name is mycurrentmood, your shortcode should read: [acf field="mycurrentmood"]

Custom WordPress Drop Down Menus and Child Themes

The Advanced Custom Fields shortcode offers non-technical users an easy way to display field values alongside page and post content. However, coders can use ACF functions to display choices made with custom WordPress drop down menus in template files.

To leverage this feature, you’ll need to set up a child theme for your website and create a custom template file for your pages or posts. Use the plugin’s the_field() function in your template file to display a field value defined for the current entry. Using our current mood example, that function might look like this: the_field(‘current_mood’)

the_field Function in Twenty Nineteen Template Part

If this approach sounds confusing, feel free to stick to the shortcode alternative instead. While the function eliminates the need to include a shortcode in every post, the techniques are identical in every other way.

Expanding the Advanced Custom Fields Plugin

We’ve shown you how to create custom WordPress drop down menus for your blog posts, but you can do much more with the ACF plugin. For example, you can use additional field types like map and color pickers to enhance content in unique ways.

If you maintain a recipe website, why not create fields for prep time and ingredients? Do you review video games or movies? Use custom WordPress drop down menus and text fields to define a platform, genre, and more for posts.

The standard Advanced Custom Fields plugin is completely free and offers plenty of features for most use cases. If you’re looking for more advanced features, consider an upgrade to ACF PRO.

Our blog posts and email updates contain occasional affiliate links to third-party products and services. This means that we stand to earn a commission on any sales delivered with the links, but we do not recommend products or services that we don't use and love.