Support

Account

Home Forums General Issues Using unique ID/Slug in template

Solved

Using unique ID/Slug in template

  • Hi there,

    I’m trying to display a unique slug or ID from a post in my template. It’s used to give a unique ID to an accordion slide open/close. Because of the post loop it uses the same class for each one, which results in only the first one properly working.

    Example current code:
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">

    I’ve tried the following and more, but no success:
    <?php $value = get_field( "titel" ); ?>
    <?php $value = get_field( "slug" ); ?>

    I’m a noob at PHP so I think theres a simple solution, but I can’t figure it out.

    I could create a new field and use <?php the_field('accordion_slug'); ?> or something but I doubt that’s the easiest/cleanest way.

    Thanks in advance!

  • I’m assuming that you need the unique id to be in the “data-target” attribute. Whatever type of loop you’re using, create a counter and then append the counter to the class would be the simplest way to do what you want.

    For example:

    
    $count = 0;
    foreach ($whatever as $thing) {
      $target = 'collapse-'.$count;
      ?>
        <div class="panel-heading" data-toggle="collapse" 
           data-parent="#accordion" data-target="<?php echo $target; ?>">
      <?php 
      $count++;
    }
    
  • Hi @daveoudshoorn ,

    Thanks a lot for reaching out to us.

    In order to create unique values for the accordion titles and links you will need to provide a second parameter for the get_field().

    This will get the value of the specific posts as opposed to the global posts which is used when the value is not provided.

    Hope this helps.

  • Hi @hube2 ,

    I assume this creates a count which increases by 1 every time to get a unique ID?

    This resulted in a white page for me though. I’m not sure if i’m supposed to change some of the tags (fields? don’t know what it’s called) but as I mentioned much of this is wizardry for me.

    @acf-support ,

    Thanks for the quick reply. I’ve tried variations of the code from the documentation but I’m a still lost.

    <php $field = get_field($field_name, $post_id, $format_value); ?>

  • I’ve managed to get @hube2 solution to work, but with help from (for me) a bit clearer code:

    You’ll need to start a counter just above your while loop:
    $counter = 0;
    
    Then just before your closing endwhile; you’ll need to advance the counter:
    $counter ++;

    Then simply print the number of that loop like this:

    <?php print "$counter"; ?>
    
    or
    
    <div class="name-<?php print "$counter"; ?>"

    Source: https://support.advancedcustomfields.com/forums/topic/repeater-field-add-break-after-x-rows/

  • I’m having a similar issue with a previous developer’s code, but can’t figure it out. I’m working on a page that has 2 arrays inside a loop using repeaters for an accordion drop down of sub fields and dumping all this into a boostrap card grid.

    Basic structure:
    – if custom query have posts : while custom query have posts : custom query the post
    – if in array
    – if in array
    – count
    – while have rows
    – get sub fields
    – count++
    – endwhile
    – else
    – count
    – while have rows
    – get sub fields
    – count++
    – endwhile
    – endwhile ; endif
    – reset query

    I think it definitely has a unique id issue since both arrays and the “else” section share the same repeater rows, fields and sub fields. What am I doing wrong? The else section near the bottom is the only part that works.

    The 2 arrays handle this page (not working): http://dev-une-online-testing.pantheonsite.io/about/about-owl/academic-programs/

    The else section shows in this page (working): http://dev-une-online-testing.pantheonsite.io/about/about-owl/

    Help?

    <?php 
    function owl_shortcode($atts) {
    	ob_start();
    
    	extract(shortcode_atts (array(
    	    'category' => '',
    	    'name' => '',
    	    'orderby' => 'title'	
    	), $atts));
    						
    	if ($category) {
    		$cats = explode(",", $category);	
    		$array = array();
    		for ($i = 0; $i < count($cats); ++$i) {
    		$array[] = get_category_by_slug($cats[$i])->term_id;
    		}
    		
    		$custom_query = new WP_Query( array( 
    			'category__and' => $array,
    			'post_type' => 'owl',
    			'orderby'   => $orderby,
    			'order'     => 'ASC',
    			'posts_per_page' => -1 
    		));	
    	}
    	else {
    		$custom_query = new WP_Query( array( 
    			'post_type' => 'owl',
    			'orderby'   => $orderby,
    			'order'     => 'ASC',
    			'posts_per_page' => -1 
    		));			
    	}
    	?>	
    	
    <div class="row">	
    <ul class="none">
    
    <?php if ( $custom_query->have_posts() ): while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
    		<div class="col-sm-6">
    			<li class="card containFloat">
    				<?php //image ?>
    				<div class="circle">
    					<?php $image = get_field('image');
    					if( !empty($image) ): 
    						$size = 'thumbnail';
    						$thumb = $image['sizes'][ $size ]; ?>
    						<img src="<?php echo $thumb; ?>" alt="<?php echo $image['alt']; ?>"  /> 
    					<?php else: ?>
    						<img src="https://online.une.edu/wp-content/uploads/2018/06/blank-female-profile.jpg" alt="" height="150px" width="150px"/>
    					<?php endif; ?>
    				</div>
    				
    <?php if (in_array("program-administrator", $cats) || in_array("program-manager", $cats) || in_array("program-staff", $cats)) { ?>
        				<div class="containFloat">
        					<h2 class="margin-top">
            				<?php the_title(); ?>
            				<?php if (get_field('degree')) echo ', ' . get_field('degree'); ?>
            				</h2>
    						<p><?php the_field('job_title'); ?></p>
                            <p><i class="fas fa-phone"></i> <?php the_field('phone'); ?> </p>
                            <p><a href="mailto:<?php the_field('email'); ?>"><i class="fas fa-envelope-open"></i> <?php the_field('email'); ?></a></p>
                       		<br>
        				</div>  
        				  
    <?php if (in_array("program-administrator", $cats) || in_array("program-manager", $cats)) { ?>						
        			<div class="clearBoth">
    							
    <!--- Accordion Expander - OWL Shortcode Test - NOT WORKING --->	
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                       <?php
                       //$uniqueid = get_sub_field( 'collapser' );
                       $uniqueid = uniqid('collapser');
                       $count = 0;
                       while ( have_rows( 'collapser' ) ) : the_row(); ?>
          	<div class="panel panel-default listbox">
                    <div class="panel-heading" role="tab" id="headingTwo">
          			 	<a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>" aria-expanded="false">
                           <?php the_sub_field( 'expand_row') ?>
                        </a>
                    </div>
            	<div id="collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>" class="panel-collapse collapse" role="tabpanel">
                       <div class="panel-body">
                        	<?php if (get_sub_field('description')) { ?>
    						<div class="panel-text"><b>More info</b><?php the_sub_field('description'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('education')) { ?>
    						<div class="panel-text"><b>Education</b><?php the_sub_field('education'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('expertise')) { ?>
    						<div class="panel-text"><b>Expertise</b><?php the_sub_field('expertise'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('experience')) { ?>
    						<div class="panel-text"><b>Experience</b><?php the_sub_field('experience'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('research')) { ?>
    						<div class="panel-text"><b>Research Interests</b><?php the_sub_field('research'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('publications')) { ?>
    						<div class="panel-text"><b>Publications</b><?php the_sub_field('publications'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('bio')) { ?>
    						<div class="panel-text"><b>Bio</b><?php the_sub_field('bio'); ?></div>
    						<?php } ?>
                    </div>
                </div>
            </div>
    				
            <?php $count ++; ?>
    <?php endwhile; ?>
    </div>
    				</div>
                        <?php } ?> 
                        
    				<?php } else { ?>
        				<div class="containFloat">
        					<h2><?php the_title(); ?></h2>
        					<p><?php the_field('job_title'); ?></p>
        					<p><i class="fas fa-phone"></i> <?php the_field('phone'); ?> </p>
        					<p><i class="fas fa-envelope-open"></i> <a href="mailto:<?php the_field('email'); ?>"> <?php the_field('email'); ?></a></p><br>
        				</div>
    				
    				
    <!--- Accordion Expander - OWL.php WORKING --->	
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                       <?php
                       //$uniqueid = get_sub_field( 'collapser' );
                       $uniqueid = uniqid('collapser');
                       $count = 0;
                       while ( have_rows( 'collapser' ) ) : the_row(); ?>
                      <div class="panel panel-default listbox">
                        	<div class="panel-heading" role="tab" id="headingTwo">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>" aria-expanded="false">
                            <?php the_sub_field( 'expand_row' ) ?>
                            </a>
                   		 	</div>
                    	<div id="collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>" class="panel-collapse collapse" role="tabpanel">
                       		<div class="panel-body">
                       			<?php if (get_sub_field('description')) { ?>
    							<div class="panel-text"><b>More info</b><?php the_sub_field('description'); ?></div>
    							<?php } ?>
                        		<?php if (get_sub_field('expertise')) { ?>
    							<div class="panel-text"><b>Expertise</b><?php the_sub_field('expertise'); ?></div>
    							<?php } ?>
                    		</div>
                		</div>
            		</div>
            <?php $count ++; ?>
        <?php endwhile; ?>
    </div>
    <!--- End Accordion --->	
    				
                    <?php } ?>
    			
    			</li>
    		</div>
    	
    		<?php endwhile; endif; ?>	
    </ul>	
    	</div>					 
    <?php 
    wp_reset_query(); 
    return ob_get_clean();
    }
    ?>
  • If you are using the same repeater for 2 loops you need to reset the rows after each loop.

    `
    if (have_rows(‘repeater’)) {
    while (have_rows(‘repeater’)) {
    //……
    }
    reset_rows();
    }

  • Thanks, John. That makes sense, but I guess I’m getting confused by the language since it’s: if have custom_query posts, while have custom_query posts, the posts, and if in array, and if in array while have rows, the rows, else…

       
    <!--- Accordion Expander - OWL Shortcode Test - NOT WORKING --->	
    <?php if (in_array("program-administrator", $cats) || in_array("program-manager", $cats)) { ?>						
    <div class="clearBoth">
    							
    	<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                       <?php $uniqueid = uniqid('collapser'); $count = 0;
                       	while ( have_rows( 'collapser' ) ) : the_row(); ?>
          	<div class="panel panel-default listbox">
                    <div class="panel-heading" role="tab" id="headingTwo">
          			 	<a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>" aria-expanded="false">
                           <?php the_sub_field( 'expand_row') ?>
                        </a>
                    </div>
            	<div id="collapse-<?php echo esc_attr( $uniqueid ); ?>-<?php echo esc_attr( $count ); ?>" class="panel-collapse collapse" role="tabpanel">
                       <div class="panel-body">
                        	<?php if (get_sub_field('description')) { ?>
    						<div class="panel-text"><b>More info</b><?php the_sub_field('description'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('education')) { ?>
    						<div class="panel-text"><b>Education</b><?php the_sub_field('education'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('expertise')) { ?>
    						<div class="panel-text"><b>Expertise</b><?php the_sub_field('expertise'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('experience')) { ?>
    						<div class="panel-text"><b>Experience</b><?php the_sub_field('experience'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('research')) { ?>
    						<div class="panel-text"><b>Research Interests</b><?php the_sub_field('research'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('publications')) { ?>
    						<div class="panel-text"><b>Publications</b><?php the_sub_field('publications'); ?></div>
    						<?php } ?>
                        	<?php if (get_sub_field('bio')) { ?>
    						<div class="panel-text"><b>Bio</b><?php the_sub_field('bio'); ?></div>
    						<?php  } ?>
                    	</div>
                </div>
            </div>
            	<?php $count ++; ?>
    		<?php endwhile; ?>
    	<?php reset_rows(); ?>
    	</div>
    </div>
    <?php } ?> 

    What am I missing? Still getting my chops in PHP, so I’m not quite there yet! Any ideas?

  • Going back to your original code I see that you are doing a custom query inside of a function.

    I’m pretty sure that you need to declare the global $post. Also, you may be in an nested loop already and if this is they case, using a standard have_post() loop in this function will not product the desired results. At this point I’m going to suggest starting your own topic. I have a feeling that this is about the function and the loops that get your here rather then then loops inside of the function.

  • John, yeah. It’s a doozy. I’ll set up a new topic. Thank you.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.