Wordpress ACF dynamic status bar

Question

I am in the process of creating a order tracker using Wordpress, ACF, and a yet to be decided form plugin for use on the front-end.

The back-end is working just fine but now I'm working on the front-end. What I am trying to accomplish is a visual progress bar for the user (Author) to view status on individual orders (posts).

In my field groups I have 6 stages. To open the next stage a option (radio) must be ticked to conditionally open the next stage.

These stages are what I want to represent on the front end.

Example: Order 123 is a new order. On the back end the new order information would be added (create New Post). Creating the new post would trigger the first step, or a 1, on the front end visual progress bar. When an employee saves step 2 (Edit post) the progress bar would reflect step 2, or a 2. And so on through to completed.

A little more clarity; I realize that Edit Post won't create the next step or the next progress. What I meant was that in the post form the post would be edited and the next tick, or trigger, would conditionally open the next status level or stage (i.e. Step 3, or a 3).

I am not sure if I need to somehow turn a word (label|value) into a number, make the Label=Step 1|Value=1?

I've tried a number of sliders, event trackers, range plugins but they all seem to want a numeric value and I can't connect and acf field to them. Any idea on how to either pass a radio/select/checkbox text value as a number and how to turn that step/value into a visual representation?

Or, any suggestions for plugins, or scripts, that might work for this?

Optimally, I would like each step to be a gradient color from the next. But, of course that's after I figure out the progress bar.

Thank you so much.

Answer 1

You can use PHP intval to change a string to a number, so your ACF data will always be a number you can work with. Then create a <progress> bar (or your progress bar of choice) with that ACF field because you know the number of steps will always be 6, and your returned ACF field will be a number between 1-6.

<label for="post_step">Post Step:</label>
<progress id="post_step" value="2" max="6"> 2 </progress>