Home Forums ACF PRO Put styles to file with unique ID


Put styles to file with unique ID

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

        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');

    So I can put this to the PHP file:

        .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; ?>;

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

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

  • 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.

  • 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.

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

    How to do this? Sounds interesting.

  • 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.

  • 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; ?> ">
                    $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'); ?>
                        <?php endif; ?>
                <?php endwhile; ?>
                $('.slider-<?php echo $flexibleSlider; ?> ').slick({
                    infinite: true,
                    slidesToShow: 1,
                    slidesToScroll: 1
    <?php endif; ?>

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

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

  • 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.

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

You must be logged in to reply to this topic.