0

I'm making a WordPress theme and using Advanced Custom Fields I have added a repeater option.

Now the thing is I want to allow the user to add as many "services" as they want but I am not sure how to make this so that bootstrap grids are dynamically created based on the number of services.

I saw this question: Using PHP loop to add Bootstrap rows and proper column numbers to elements But couldn't figure out how to use it properly with what I need.

What I tried was counting the number of services and returning the html from that function.

Then I made a str_replace_first_occurance function that basically did an str_replace on the first occurrence of "Content". And it looped through this the number of services there were.

I guess this should've worked but it became very messy and doesn't seem like the best way to do this.

What's the best way to achieve this?

1
  • Why downvoted? Any solution ideas? Commented Oct 8, 2016 at 23:40

2 Answers 2

0

I used this code and works perfectly!

    <?php

    $max_columns = 3; //columns will arrange to any number (as long as it is evenly divisible by 12)
    $column = 12/$max_columns; //column number
    $total_items = count( get_field('services_services'));
    $remainder = $total_items%$max_columns; //how many items are in the last row
    $first_row_item = ($total_items - $remainder); //first item in the last row
    ?>

    <?php $i=0; // counter ?>

    <?php while ( have_rows('services_services') ) : the_row(); ?> 

        <?php if ($i%$max_columns==0) { // if counter is multiple of 3 ?>
        <div class="row">
        <?php } ?>

        <?php if ($i >= $first_row_item) { //if in last row ?>   
        <div class="col-md-<?php echo 12/$remainder; ?>">
        <?php } else { ?>
        <div class="col-md-<?php echo $column; ?>">
        <?php } ?>

            <div class="service-box">
                <h3 class="service-heading"><?php echo the_sub_field('service_name'); ?></h3>
                <span class="<?php echo the_sub_field('service_fa_class'); ?>" aria-hidden="true"></span>
                <p class="heading-text"><?php echo the_sub_field('service_description'); ?></p>
                <a href="<?php echo the_sub_field('service_learn_more_url'); ?>" class="btn btn-info">Learn More</a>        
            </div>

        </div>        

        <?php $i++; ?>

        <?php if($i%$max_columns==0) { // if counter is multiple of 3 ?>
        </div>
        <?php } ?>

    <?php endwhile; ?>

    <?php if($i%$max_columns!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
    </div>
    <?php } ?>
Sign up to request clarification or add additional context in comments.

Comments

0

How many do you want displayed per row? You would most likely want to run a foreach through the array that is given from your ACF repeater. Then put your value inside of the below. I assume you know how to get the php into your front-end?

    <div class="col-lg-4">
        // Content which is your service
    </div>

You could also get the count of the array from your repeater field to figure out how many services were added. Then you could do some logic to figure out if you want it to be a col-lg-3 or a col-lg-4.

1 Comment

I can give you exact instruction if you show me the var_dump and die on your ACF field that you get from: $value = get_field( "your_field_name" );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.