Display custom field value part by part?

Question

I have custom field in posts called hex_colors which contains hex color codes separated with white space, custom field value is like this:

"000000 f0f0f0 c0c0c0 202020 404040 "

I can change function which create it to separate with ", " or " | " or anything else, if it helps.

I can show it like this:

<?php
if (get_custom_field('hex_colors')) { 
echo '<div>'; echo get_custom_field('hex_colors'); echo '</div>';
}
?>

But I would like to show each color code one by one and to style each one, for example instead of this:

<div>000000 f0f0f0 c0c0c0 202020 404040</div>

to get something like this:

<div class="colors" style="background-color:#000000">000000</div>
<div class="colors" style="background-color:#f0f0f0">f0f0f0</div>
<div class="colors" style="background-color:#c0c0c0">c0c0c0</div>
<div class="colors" style="background-color:#202020">202020</div>
<div class="colors" style="background-color:#404040">404040</div>

---

I tried like this:
    if ( get_post_meta( get_the_ID(), 'hex_colors', true ) ){
    $colors = get_post_meta( get_the_ID(), 'hex_colors', true );
    $colors = explode( ' ' , $colors );
    foreach( $colors as $color ) {
        echo '<div>';
        echo $color;
            echo '</div>';
    }
}

It works, but I get output something like this:

<div>000000</div>
<div></div>
<div>f0f0f0</div>
<div></div>
<div>c0c0c0</div>
<div></div>
<div>c0c0c0</div>
<div></div>
<div>404040</div>
<div></div>

Empty div () at the end (because of " " white space at the end of custom field value. This is function which create custom filed:

<?php
for ($i = 0; $i < $colors_to_show; $i += $inc) {
for($j=0;$j<$inc;$j++) {
$out_color_text .= ''.$colors_key[$i + $j].' '; // CUSTOM FIELD VALUE
}
}

$id = $post->ID; // Post ID
$value = $out_color_text;
add_post_meta($id, 'hex_colors', $value, true);
?>

Some fix to create value without white space at the end?

Answer 1

Per comments just trim the $colors before use:

if ( get_post_meta( get_the_ID(), 'hex_colors', true ) ){
    $colors = get_post_meta( get_the_ID(), 'hex_colors', true );
    $colors = explode( ' ' , trim( $colors ) );
    foreach( $colors as $color ) {
        echo '<div>', $color, '</div>';
    }
}

Answer 2

If you're getting empty divs like that, you probably have two spaces between each value. In that case, only the first space would be treated as a delimiter.

I think the best thing to do would be to separate them with some other physical character and then remove all spaces from the individual values (this is what the call to trim() below will do).

I would do it more like this:

$colors = get_post_meta( get_the_ID(), 'hex_colors', true );

if ( !empty($colors) ) {
    $colors = explode( '|', $colors );
    // NOTE: I like to delimit values with pipe characters since they aren't used very often in normal text on my sites.

    foreach ($colors as $color) {
        $color = trim($color); // Strip Whitespace from value

        if (!empty($color)) { // If color is not empty, print the div
            echo '<div>' . $color . '</div>';
        }
    }
}

This only calls get_post_meta() once. Since that function will return a blank value if there is no meta, you can just set $colors with the initial call, and check to make sure it's not empty.

Additonally, you don't really need three echo calls. Using the . will concatenate values so echo '<div>' . trim($color) . '</div>'; achieves the same result with a single line of markup.