Put styles to file with unique ID

• herrfischer

• June 17, 2019 at 6:57 pm

I use ACF to let the user define the colors of the footer:

<?php
    while ( have_rows('colors', 'option') ) : the_row();

    $colors_ID = uniqid();

    if( get_row_layout() == 'footer_colors' ) : 

        if( have_rows('footer_left_colors') ): 
        while( have_rows('footer_left_colors') ): the_row(); 
            $text_color = get_sub_field('text_color');
            $links_color = get_sub_field('links_color');
        endwhile;
        endif;
?>

So I can put this to the PHP file:

<style>
    .footer_left_<?php echo $footer_col_ID; ?> p {
        color: <?php echo $text_color; ?>;
    }
    .footer_left_<?php echo $footer_col_ID; ?> a {
        color: <?php echo $links_color; ?>;
    }
</style>

It works, but I would like to put the styles to the header. Any idea?

• John Huebner

• June 18, 2019 at 8:04 am

Not sure I understand how your 2 pieces of code go together, where does $footer_col_ID come from?

• herrfischer

• June 19, 2019 at 5:44 pm

Sorry, it must be “$colors_ID”. With “uniqid()” I give the elements a unique ID, use it as a CSS Class and style it. The <style> section is somewhere in the document, I want to somehow collect these and put it to the headers (header.php) style section.

• John Huebner

• June 19, 2019 at 9:32 pm

The only way you can do that is to loop over the repeater or flex field twice, once when outputting the header and then again when outputting the content.

I would probably stick with the inline CSS, it’s not really hurting anything and can be a good way to accomplish what you doing.

The only thing I would say is that I would not use uniqid() in the loop. This means that you are regenerating the IDs on every page load. I would likely create another meta_key to hold the ID so it remains consistent. This would also help you to put the CSS in the header if you want to do that.

• herrfischer

• June 20, 2019 at 12:28 am

“I would likely create another meta_key to hold the ID so it remains consistent.”

How to do this? Sounds interesting.

• John Huebner

• June 20, 2019 at 2:31 am

Because you are using a flex field I would create a sub field in every layout to hold the ID. I would either make this field readonly or I would completely hide it in the admin. I would use JS to generate a unique.

I’ve done this in the past and I used a clone field for my layout settings. This is a snippet of code from that

if (typeof acf != 'undefined') {
	acf.add_action('append', function($el) {
		// this will run when a new layout is added
		
		// generate a tab ID value
		$el.find('[data-key="field_580a29b44f676"] input').each(function(index, element) {
			if (element.value == '') {
				var new_id = acf.get_uniqid('tab-');
				element.value = new_id;
			}
		});
		
		// generate a container ID value
		$el.find('[data-key="field_580f79274e327"] input').each(function(index, element) {
			if (element.value == '') {
				var new_id = acf.get_uniqid('container-');
				element.value = new_id;
			}
		});
		
		// generate column ID field_5812172eb48c4
		$el.find('[data-key="field_5812172eb48c4"] input').each(function(index, element) {
			if (element.value == '') {
				var new_id = acf.get_uniqid('column-');
				element.value = new_id;
			}
		});
	
	
	}); // end acf.add_action
}

The field is a readonly txt field and the I output these ID values where they are needed in the html.

• herrfischer

• June 22, 2019 at 1:20 am

Maybe I could use an easier method. Like this (extra while loop with $i++) to get unique classes:

<?php if( have_rows('_post_slider') ) : ?>

    <?php $flexibleSlider = 0 ?>
    <?php while( have_rows('_post_slider') ) : the_row(); ?>
        <?php $flexibleSlider++; ?>
    <?php endwhile; ?>

    <div class="row slider-wrapper">
        <div class="col-md-12">
        <div class="slider_inner slider-<?php echo $flexibleSlider; ?> ">
            <?php 
                $count_dataindex = 0;
                $count_dataid = 0;
            ?>
            <?php while( have_rows('_post_slider') ) : the_row(); ?>
                <?php $count_dataindex++; ?>
                <article class="" data-index="<?php echo $count_dataindex; ?>" data-slidertitle="<?php the_sub_field('_headline'); ?>">
                    <?php $image = get_sub_field('_bild'); ?>
                    <figure style="background-image: url(<?php echo $image['sizes']['img-l']; ?>)"></figure>
                    <?php if ( get_sub_field('_headline') ) : ?>
                        <div class="slider-headline" data-id="<?php echo $count_dataid; ?>">
                            <?php echo get_sub_field('_headline'); ?>
                        </div>
                    <?php endif; ?>
                </article>
            <?php endwhile; ?>
        </div>
        </div>
    </div>

    <script>
        jQuery(document).ready(function($){
            $('.slider-<?php echo $flexibleSlider; ?> ').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        });
    </script>
    
<?php endif; ?>

EDIT: Hm no. I get “slider-4”, “slider-3”, “slider-3” … .

• herrfischer

• June 22, 2019 at 1:43 am

Where to put your code? in the “functions.php”?

• John Huebner

• June 22, 2019 at 1:47 am

Yes, you could, I was trying to go with the way you were generating ID values in the OP.

Make sure you’re incrementing both of your counters and in the same place, either at the beginning or end of the loop.

• John Huebner

• June 22, 2019 at 1:49 am

The code that I used for JS is from a custom JS file added according to https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/