Support

Account

Register Login

Home › Forums › ACF PRO › Repeater Field Wrapper, Incrementing Class and IDs

Solved

Repeater Field Wrapper, Incrementing Class and IDs

  • I had three questions that were related and I didn’t want to bog things down here with three separate topics. I hope that’s okay.

    My main issue is with repeater fields:

    1. I am having trouble getting a class name assigned to wrappers on repeater fields (wrappers don’t appear at all). Is there something I am missing?

    2. I am also trying to get a class name and ID to appear, but to add a number at the end of each repeating field’s content. How do I do this?

    3. I had a hard time getting sub fields to appear in if/else statements. How do I get them to appear only if there is content present in the field itself?

    What am I doing wrong? I tried using examples from the documentation, but they wouldn’t work and/or I couldn’t find examples to view for these issues.

    Here is my code:

    <?php
	if( have_rows('manufacturing_grid_blocks') ):
    while ( have_rows('manufacturing_grid_blocks') ) : the_row();
?>
<div class="small-12 medium-4 large-4 columns grid-block">
	<?php #the_sub_field('manufacturing_grid_media'); ?>
	<img src="<?php the_sub_field('manufacturing_grid_photo'); ?>" />
	<?php the_sub_field('manufacturing_grid_video'); ?>
	<h3><?php the_sub_field('manufacturing_grid_header'); ?> <span><?php the_sub_field('manufacturing_grid_sub_header'); ?></span></h3>
	<p><?php the_sub_field('manufacturing_grid_content'); ?></p>
	
	<!-- If images are added to gallery, show Photos link and open gallery in modal -->
	<!-- Add integer after ID -->
	<a href="#" data-reveal-id="manufacuring-gallery-#">View Photos</a>
	<div id="manufacuring-gallery-#" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
		<?php the_sub_field('manufacturing_grid_gallery'); ?>
	</div>
</div>
<?php endwhile; else: /* no rows found */ endif; ?>

    Any pointers are greatly appreciated.

  • I’ve been struggling also. I can’t get the wrap properties to do anything. If you figured this out, please let me know here. I can get the repeater subfields to work and I can put a div around the repeater in the PHP of the custom post type file I’m using:

    First, I have ACF installed and other fields are working. Repeaters are set up with Field Label and Field Name that ACF inserts by default, Field Name has no spaces, uses underscores between words (and I think hyphens are allowed, too.)

    In my instance, I only am using one sub-field per repeater and it’s field type is set to “text”.

    Here is my PHP used in the template file. You can see where I stop PHP to insert div tags with HTML, then restart PHP:

    <!-- education listings -->

<?php

// check if the repeater field has rows of data
if( have_rows('education_listings') ): 

// loop through the rows of data
?>
	<div class="educationBlock"><h2>Education</h2>
	
  <?php  while ( have_rows('education_listings') ) : the_row(); ?>
	<div class="educationListing">
	<?php
        // display a sub field value
        the_sub_field('education_list_item');
	?>
	</div> 
	<?php
    endwhile; ?>
    </div>
    <?php

else :

    // no rows found

endif;

?>

<!-- end education listings -->

  • Hi @ericcarroll and @stinkykong

    I’m honestly not sure what you’re trying to achieve here.. your descriptions are a bit confusing to be honest 🙂

    But here’s what I think you’re saying.. You want to show the content within the each repeater.. you want to first check wether some content exists to avoid empty html wrapping elements. You want to increment the “id” of the gallery content for each gallery listed.

    Here’s some sample code based on your own.

    
<?php $i = 0; ?>
<?php if( have_rows('manufacturing_grid_blocks') ): while ( have_rows('manufacturing_grid_blocks') ) : the_row(); ?>
	<div class="small-12 medium-4 large-4 columns grid-block">
	
		<?php if( get_sub_field('manufacturing_grid_media') ): ?>
			<img src="<?php the_sub_field('manufacturing_grid_photo'); ?>" />
		<?php endif; ?>
		
		<?php the_sub_field('manufacturing_grid_video'); ?>
		
		<h3><?php the_sub_field('manufacturing_grid_header'); ?> <span><?php the_sub_field('manufacturing_grid_sub_header'); ?></span></h3>
		
		<?php if( get_sub_field('manufacturing_grid_content') ): ?>
			<p><?php the_sub_field('manufacturing_grid_content'); ?></p>
		<?php endif; ?>
		
		<!-- If images are added to gallery, show Photos link and open gallery in modal -->
		<!-- Add integer after ID -->
		<?php if( get_sub_field('manufacturing_grid_gallery') ): ?>
			<a href="#" data-reveal-id="manufacuring-gallery-<?php echo $i; ?>">View Photos</a>
			<div id="manufacuring-gallery-<?php echo $i; ?>" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
				<?php the_sub_field('manufacturing_grid_gallery'); ?>
			</div>
			<?php $i++; //Only increment if we had a gallery.. move this outside the last div but inside endwhile if you want it to increment regardless ?>
		<?php endif; ?>
	</div>
	
<?php endwhile; endif; ?>


    @stinkykong     I can’t see anything wrong with your code.. what is it that’s not working according to what you expect?

  • I was posing my example as a possible solution for Eric on his issue that I also experience where adding an ID or a CLASS to the field’s wrapper attributes seems to have no affect. I put a div tags in HTML into the post-type template to do what I expect the wrapper attributes values to accomplish. Are we correct in assuming that the wrapper attributes would wrap the field in a div?

  • Can you clarify what you mean by “wrapper attributes”?

  • I mean the line in the ACF editor of any field or subfield, at or near the bottom under Conditional Logic. Under “Wrapper Attributes”, there is an entry for width, class, and ID. I assumed this was intended to wrap a div around the field area with a value for width or a name for class or ID.

  • I’ve updated to ACF PRO 5.3.1 and the wrapper attributes (in the ACF UI) do not do anything.

    See: Wrapper Attributes at the bottom of this page to see what we’re referring to: http://www.advancedcustomfields.com/resources/field-settings/

    I can’t get a wrapper element to appear or print out a class, ID, etc.

  • Ah..

    Well ACF does not attempt to do anything to your theme or frontend on it’s own. The wrapper attributes you are all referring to are not something that would automatically be applied to frontend when you use have_rows.. It’s a way to customize the layout of the fields in admin..

    So for instance you could set with to 50% on two fields below each other to make them appear side by side in wp admin. Or if you require to run some custom javascript in admin and target specifik ACF fields you could give them all a custom class name to target.

    Any and all output of ACF field values in your themes has to be done by yourself. And setting classnames or IDs on your elements in the theme is super simple
    <div class="my-class" id="my-specific-id"></div>

    And say you want all elements with my-class to have 50% width you’d set this in your style.css
    .my-class{ width: 50%; }

    Hope that clears it up for you!

  • Ok, thanks Jonathan. That explains the purpose of the wrapper attributes. But Eric, does this help with your original questions? #2 – Adding the numbers after the class isn’t addressed yet. Not sure about the others, #1 and #3.

  • Thanks for the help, guys.

    That makes sense about the wrappers, but ACF might consider making that more obvious what they do (on the admin side) to avoid further confusion.

    I was able to loop through like the example and get a number assigned with the i++ code, thanks.

  • Hi @ericcarroll

    Great to hear that everything has resolved for you!
    ACF does absolutely nothing automatically for the front end (which is actually just right if you ask me 🙂 ). So while I don’t think it needs that much of an explanation perhaps this confusion can be avoided with just some minor wording tweaks.

    instead of just Wrapper attributes we could apply a short text underneath as with many of the labels above.. like Used in admin.

    Do you think that’d be enough?

  • I think it should be something simple in the interface and something clearly outlined in the documentation. This working in the admin area is a very helpful feature, but I would think that if it can be applied to the admin area, it could (or might be intended to) be applied to the front end as well. Not knowing ACF’s intent, both Eric and I were held up by a common, errant assumption.

  • As a developer that works almost exclusively with WordPress since years back I’ve probably built ~100 sites with WordPress. Most of these have used ACF. I don’t think ACF will ever attempt to create content on the front end automatically and I honestly don’t think it should. It would work against ACFs greatest feature which is flexibility.

    However I completely agree that it should be more clear!

  • I agree that the wording needs to change if it is for the admin side only.

    Perhaps something like “When logged in, wrappers are used on the post forms to control or change how the fields are displayed.”

  • +1 for this being confusing still!

    I would actually like a way to add classes to a field directly through ACF, as I’m using the Tachyons framework.

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

The topic ‘Repeater Field Wrapper, Incrementing Class and IDs’ is closed to new replies.