Run repeater loop 2x (get classes for styles) – good technique?

• herrfischer

• January 22, 2020 at 9:31 am

I have made some kind of a “page builder” with ACF so I have repeaters/flexible-fields for my Bootstrap containers/rows/columns and inside that I have content like accordions, galleries, text, images, buttons etc.

For example I can adjust the colors for a button in a specific column with an ACF color picker field and get the color – but I don’t want to add <style> tags inside the code where the content is – I want only one style tag in the header of the webpage (browsers support style tags inside the body but a) looks ugly b) for how long?.

To get automated class names I use the function get_row_index like:

<?php $gr_container = get_row_index(); ?>
<?php $gr_row = get_row_index(); ?>
<?php $gr_col = get_row_index(); ?>

So I run my code in the template to create the containers/rows/columns + content and then I run the same code again in the header to put the styles with the classnames I get like:

<?php if ( have_rows( 'container' ) ): ?>
<?php while ( have_rows( 'container' ) ) : the_row(); ?>
<?php if ( get_row_layout() == 'container' ) : ?>
<?php $gr_container = get_row_index(); ?>
<?php if ( have_rows( 'rows' ) ) : ?>
<?php while ( have_rows( 'rows' ) ) : the_row(); ?>
<?php $gr_row = get_row_index(); ?>
<?php if ( have_rows( 'row_regular' ) ) : ?>
<?php while ( have_rows( 'row_regular' ) ) : the_row(); ?>
<?php $gr_col = get_row_index(); ?>
<?php $columncolor = get_sub_field('col_color'); ?> /* e.g. I get the text color for the columns here */
<?php if ( have_rows( 'column' ) ): ?>
<?php while( have_rows('column') ) : the_row(); ?>
<?php $gr_column = get_row_index(); ?>

/* so I get my class names and can style them */
.<?php echo 'gr_container'.$gr_container.'gr_row'.$gr_row.'gr_col'.$gr_col; ?> .columncolor {
	color: <?php echo $columncolor; ?>;
}
.<?php echo 'gr_container'.$gr_container.'gr_row'.$gr_row.'gr_col'.$gr_col; ?> .columncolor a {
	color: <?php echo $columncolor; ?>;
}

/* example with buttons */
<?php // Buttons
if( get_row_layout() == 'buttons' ): ?>
	<?php if ( get_sub_field('button_bgcolor') ) : ?>
		.<?php echo 'gr_container'.$gr_container.'gr_row'.$gr_row.'gr_col'.$gr_col; ?> .button  {
			background-color: <?php echo get_sub_field('button_bgcolor'); ?> !important;
		}
	<?php endif; ?>

	<?php if ( get_sub_field('button_color') ) : ?>
		.<?php echo 'gr_container'.$gr_container.'gr_row'.$gr_row.'gr_col'.$gr_col; ?> .button {
			color: <?php echo get_sub_field('button_color'); ?> !important;
		}
	<?php endif; ?>
…

I am not very good with PHP so this is my poorly attempt – is that good practice? Is there a better way to do it? Will it slow down the page very much?

To see the whole code here is the git repository:

https://github.com/herrfischerhamburg/acf_builder

Here I get the content:
https://github.com/herrfischerhamburg/acf_builder/blob/master/template_parts/modules_wrapper_container.php

(the content fields are here: https://github.com/herrfischerhamburg/acf_builder/blob/master/template_parts/modules_content_regular.php)

And in the header I run the same repeaters to get the classes and add CSS styles:
https://github.com/herrfischerhamburg/acf_builder/blob/master/header.php (starts at 24)

Thanks for any comment to this.

• John Huebner

• January 23, 2020 at 12:51 am

I don’t see any issues with what you’re doing. It should not slow things down because any data you get from the first loop through should be cached.

I have debated this as well and I’ve just started adding styles directly into the page, the ugly method you mentioned. Will it be supported in the future? Browsers rarely remove support for things because it would mean breaking thousands of sites. They still support framesets. As far as ugly… well, I like to be able to edit all of the code for me flex layouts in a single template part file, my concern is more about how much work it is to change over what the HTML looks like.

On the other hand, for something like you’re doing I created a button builder on an options page. In the button builder I give each button a unique ID. I then use this ID as a class identifier and output the css for these classes in the head. In the flex field I build a UI that allows the editor to chose one of the pre-built button types and I just insert the correct class name into the html.

• herrfischer

• January 23, 2020 at 4:35 am

I have debated this as well and I’ve just started adding styles directly into the page, the ugly method you mentioned. Will it be supported in the future? Browsers rarely remove support for things because it would mean breaking thousands of sites.

That is a good point, I do this since years and had no problem in any browser – maybe I’ll stick with it, too. Less work.