Dynamic Accordion in WordPress

Question

I used the Bootstrap v4.0.0 accordion to display my business services. Further, I created a custom post type "service" for my services (Each service is a post).

To display my services dynamically and not hardcode them, I implemented a for-loop within the WordPress while-loop which uses an enumeration to provide the number of the collapsible.

I don't like my solution, especially the enumeration - Is there a better way to solve this? If you see any other improvement, I would be glad to hear also.

See my code below:

<div class="wv-archive-container wv-boxed-wrapper">
 <div class="container">
 <div class="row">
 <div class="col-sm">
 <h1 id="wv-archive-header-h1">All Services</h1>
 <div id="wv-accordion" class="wv-accordion">
 <div class="card mb-0">
 <?php $wv_services = new WP_Query( array(
 'posts_per_page' => -1,
 'post_type' => 'service',
 'orderby' => 'date',
 'order' => 'ASC'
 ) );
 while ( $wv_services->have_posts() ) {
 $enum_of_collapsible_str_numbers = [
 "One",
 "Two",
 "Three",
 "Four",
 "Five",
 "Six",
 "Seven",
 "Eight",
 "Nine",
 "Ten",
 "Eleven",
 "Twelve",
 "Thirtenn",
 "Fourteen",
 "Fivteen",
 "Sixteen",
 "Seventeen",
 "Eighteen",
 "Nineteen",
 "Twenty"
 ];
 $total_number_of_service_posts = wp_count_posts('service')->publish;
 for ($collapsible_str_number = 0; $collapsible_str_number < $total_number_of_service_posts; $collapsible_str_number++) {
 $wv_services->the_post(); ?>
 <div class="card-header collapsed" style="cursor:pointer;" data-toggle="collapse"
 href="#collapse<?php echo $enum_of_collapsible_str_numbers[$collapsible_str_number] ?>" rel="nofollow">
 <a class="card-title"><h2><?php the_title(); ?></h2></a>
 </div>
 <div id="collapse<?php echo $enum_of_collapsible_str_numbers[$collapsible_str_number] ?>" class="card-body collapse"
 data-parent="#accordion">
 <p><?php the_content(); ?></p>
 </div>
 <?php }
 }
 wp_reset_postdata();
 ?>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

Answer 1

Not sure what you are trying to achieve, but you can use numerical values for enum_of_collapsible_numbers and you can generate them like this

$enum_of_collapsible_numbers = range(1, 20);

Answer 2

I personally do not prefer the mixing of data collection with data printing, but I understand that this is common on simple Wordpress pages (I am not a Wordpress developer).

id values do not need to be purely comprised of letters to be valid, so I would use a counter and scrap the idea of having a limited-length lookup array of words.

Using printf() will help to clean up your code by removing string concatenation/interpolation; it also allows you to reuse the same variable in the same expression. Generally, I don't enjoy trying to read a bunch of <?php ... ?> declarations bouncing in and out of php in script -- it just feels too noisy.

Move your cursor:pointer; inline declaration to an external stylesheet inside .collapsed{} to reduce some of the eye strain on this script.

Consider declaring your <div> attributes on multiple lines to prevent excessively long lines of code.

Do not use (multibyte) curly quotes to encapsulate attribute values.

I think I recommend writing <a> inside of <h2> instead of the inverse.

Untested suggestion:

$wv_services = new WP_Query([
 'posts_per_page' => -1,
 'post_type' => 'service',
 'orderby' => 'date',
 'order' => 'ASC'
]);
while ($wv_services->have_posts()) {
 $post_count = wp_count_posts('service')->publish;
 for ($i = 0; $i < $post_count; ++$i) {
 $wv_services->the_post();
 sprintf('
 <div class="card-header collapsed"
 data-toggle="collapse"
 href="#collapse%1$d"
 rel="nofollow"
 >
 <h2>
 <a class="card-title">%2$s</a>
 </h2>
 </div>
 <div id="collapse%1$d"
 class="card-body collapse"
 data-parent="#accordion"
 >
 <p>%3$s</p>
 </div>',
 $i, // referenced by %1$d
 the_title(), // referenced by %2$s
 the_content() // referenced by %3$s
 );
 }
}
wp_reset_postdata();