WP: Advanced Custom Fields. Flexible Content + Repeater Fields. Using Custom fields in inline CSS

Question

I am trying to style a H4 element with a left and bottom border of varying widths and a specific colour which is defined by a custom field that the client would fill in the CMS. My CMS layout is correct but the code below I know not to be. My problem area is specifically with the H4, the other parts of the code are rendering correctly.

<?php               
if (get_field("sponsorlogos")){
  while (has_sub_field("sponsorlogos")){

    if (get_row_layout() == "sponsor_category_title"){ // Sponsor Category Title
      echo '<h4 style="border-left: 10px solid '.the_sub_field('sponsor_category_title_colour').' !important; border-bottom: 1px solid '.the_sub_field("sponsor_category_title_colour").' !important; margin: 40px 0 15px 0;">';
        the_sub_field("sponsor_category_title_text");  
      echo '</h4>';
    }  

    if (get_row_layout() == "sponsor_logo_container"){ // Sponsor Repeater Field
      $rows = get_sub_field('sponsor_item'); 
      if ($rows){ 
        echo '<ul id="sponsor-logo-container">';
        foreach($rows as $row){
          echo '<li class="sponsor-logo"><a class="logo-link" target="_blank" href="'.$row['sponsor_link'].'"><img width="190" height="110" src="'.$row['sponsor_logo'].'" alt="'.$row['sponsor_title'].'"class="logo-image grayscale" /></a><span class="staff-name">'.$row['sponsor_support'].'</span></li>'; 
        }
        echo '<div style="clear:both;"></div>';
        echo '</ul>';
      }
    } 
  }
}
?>

The resulting markup is as follows:

<h4 style="border-left: 10px solid  !important; border-bottom: 1px solid  !important; margin: 40px 0 15px 0;">Bronze</h4>

You can see it omits the hex '#xxxxxx' colour part.

I should reiterate though, as the colour hex is successfully spat out twice in the markup (as expected) but it appears above the H4 element.

Im sure I'm not using the Advanced Custom Field tags correctly.

Help!

Answer 1

Try changing the PHP code from

echo '<h4 style="border-left: 10px solid '.the_sub_field('sponsor_category_title_colour').' !important; border-bottom: 1px solid '.the_sub_field("sponsor_category_title_colour").' !important; margin: 40px 0 15px 0;">';

to

echo '<h4 style="border-left: 10px solid '. get_sub_field('sponsor_category_title_colour').' !important; border-bottom: 1px solid '.get_sub_field("sponsor_category_title_colour").' !important; margin: 40px 0 15px 0;">';

In other words, replace the_sub_field() with get_sub_field(). You should use the get_sub_field() function when you already have an echo call. You use the_sub_field() when there is no echo preceding it.