How do I dynamically number widgets as they are created on a WordPress page?

84 views Asked by At

The WordPress website that I am creating has an Frequently Asked Questions page. Each question/answer pair is created via use of the SiteOrigin Page Builder Plugin and a custom widget. I would like to be able to add new questions and rearrange them without needing to manually renumber.

This is how it looks right now:

SiteOrigin Page Builder View

I would simply like the questions to be dynamically numbered (1., 2., 3., and soforth, just before the question).

I can think of some hack-ish ways that might accomplish this task, like abusing an <ol> tag or global variable. I might also be able to use some code to count the number of elements that have been created with the class "question", but it feels like that would add unnecessary code/latency to what should possible with a simple integer variable that exists only while this page is being rendered.

Is possible in WordPress? If so, how do I accomplish it? If not, is there a better method than what I have mentioned?

If it helps, here's the render code from my widget's PHP file:

public function widget( $args, $instance )
{
    $question = $instance['question'];
    $answer = $instance['answer'];

    echo $args['before_widget'];

    if ( ! empty( $question ) )
    {
        echo '<h3 class="question">';
        echo '. ';
        echo $question;
        echo '</h3>';
    }
    if ( ! empty( $answer ) )
    {
        echo '<p>';
        echo $answer;
        echo '</p>';
    }

    echo $args['after_widget'];
}
1

There are 1 answers

0
Kirk On BEST ANSWER

There's a number of ways to do this, but I ended up using Advanced Custom Fields (which I was already using for other things) to store/set a variable. After setting up an integer variable in ACF, I did the following (in my Widget PHP file):

public function widget( $args, $instance )
{
    $question = $instance['question'];
    $answer = $instance['answer'];

    echo $args['before_widget'];

    if ( ! empty( $question ) )
    {
        echo '<h3 class="question">';
        $question_count = (int) get_field('question_count');
        $question_count++;
        update_field('question_count', $question_count);
        echo $question_count;
        echo '. ';
        echo $question;
        echo '</h3>';
    }
    if ( ! empty( $answer ) )
    {
        echo '<p>';
        echo $answer;
        echo '</p>';
    }

    echo $args['after_widget'];
}

I'm going to leave the post up for a couple of days to see if anyone comes up with a better answer without the use of ACF, in case someone down the road has a different use-case than I do.