0

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?

  • 1
    This looks like a pure PHP question that could be solved with explode() and array_unique(). – birgire Jul 14 '15 at 12:43
  • Thanks @birgire , I updated my question with function. Could you please look at it, there is some tiny mistake in it. – Advanced SEO Jul 14 '15 at 14:53
  • In your explode call, try using two spaces as the delimiter instead a single space – czerspalace Jul 14 '15 at 15:57
  • My custom field value is "000000 f0f0f0 c0c0c0 202020 404040 " there is no two white spaces. I can adjust function above to use two white spaces as delimiter (or anything else), but I get that one more delimiter at the end, and function which read custom field get me that divs (<div></div>) at the end. Any way to cut off that last delimiter? – Advanced SEO Jul 14 '15 at 16:24
  • 1
    Just trim( $colors ) before exploding it. – bonger Jul 14 '15 at 18:24
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>';
    }
}
1

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.

  • I updated my question, probably at the same time as you your answer, so I will look at it now, ad test it. – Advanced SEO Jul 14 '15 at 15:30
  • Function works but since my custom field value is "000000 f0f0f0 c0c0c0 202020 404040 " (with white space at the end) I get one more blank <div></div> at the end which brake design. Any help how to remove that extra divs? Thanks. – Advanced SEO Jul 15 '15 at 15:39
  • I've updated the answer. Basically, rather than trimming $color in the echo call, trim it first, and then only print the div if $color is not empty. Your last trailing space value will be empty once it is trimmed – Mike Jul 15 '15 at 16:53
  • 1
    Alternatively, you could also use $colors = trim( get_post_meta( get_the_ID(), 'hex_colors', true )); – Mike Jul 15 '15 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.