Skip to main content
ACFWordPress

ACF – ordering by dropdown choices whilst showing label

By September 20, 2016No Comments

ACF

Advanced Custom Fields – Sorting staff profiles by role

A WordPress client wanted to bring some order to a large staff section on their website. Using the Advanced Custom Fields plugin I used ACF dropdowns to create role options, so the departments, committees and councils that staff are part of can be assigned to each member.

I created a team profile custom post type and role taxonomy (for department, committees pages etc). This all worked well but I had an issue displaying the staff profiles in the order of the dropdown choices e.g. (Chairman, Vice-Chairman, Member, Past Chairman).

ACF Dropdown

Ideally I’d like the staff profiles sorted by the order of these choices, so ‘chair’ first to ‘member’ last.

ACF - ordering by dropdown

I could get some sort of ordering on most ‘role’ pages but as some staff are in multiple committees at varying levels, I need to display the profiles by the order of the dropdown option / choice for that ‘role’. One person might be position #1 on one department page, but #8 on another. I wanted them to be ordered by the dropdown choice order, rather than having to have an extra order field paired with each dropdown.

Possible Solutions

Adding numbers to the dropdown value

I looked into using numbers (1-10) for the values, as recommended on Stackoverflow : WordPress: How to sort content by ACF custom field?.

However, I was displaying the dropdown value on the page, so didn’t want ‘Member’ to now display as ‘8 – Member’.

Using the choice dropdown label

I looked into displaying the label instead of the dropdown choice value, but I would need the specific field keys to show the choice label. See this article on Stack Exchange : Advanced Custom Fields select field : How to echo the label, not the value?

This wasn’t possible as the role template dynamically shows around 30 different roles and their own relevant dropdown field.

Advanced Custom Fields Support

ACF support was also unable to solve the issue;

“Unfortunately, there is no direct way of sorting your post using the order of the choices. This is because the choices do not maintain any order that can be used in the standard WP query.

The only option would be to use the php multisort array to sort the returned array.

Unfortunately, such an implementation are quite beyond the scope of our support. I would recommend that you check out https://codeable.io for some freelance developers who may be able to help you out.”

Ordering by dropdown choices whilst showing label Solution

The solution was to add numbers (01 -10) to the dropdown choice values but then to use a function to remove these numbers so they don’t display on the frontend.

Here are my updated ACF dropdown choices;

ordering by dropdown choices

Note that single numbers start with ‘0’, so I know that there will be 3 characters at the start of the value that I don’t need. I can then use substr($value, 3) to remove these unwanted characters and display the clean value instead.


$value = get_field( $field['name'] );
$strvalue = substr($value, 3); // remove ordering number from value

I can then display the new value on the page using;


echo $strvalue;

I hope that helps. Let me know in the comments if you’ve faced a similar issue ordering ACF options and if this post was useful.

Andrew Taylor

A senior UI designer with over 25 years of web design and web development experience working for some of the largest companies in the UK. An expert in all things Magento and WordPress.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.