Support

Account

Home Forums Backend Issues (wp-admin) Add the hex value as background color in a custom column

Helping

Add the hex value as background color in a custom column

  • Hello there, I want to include the value of hex color as background in a custom column.

    my code.

    
    add_filter( 'manage_pages_columns', 'background_add_custom_column' );
    add_filter( 'manage_posts_columns', 'background_add_custom_column' );
    function background_add_custom_column( $columns ) {
        $columns['colors'] = 'Colors';
        return $columns;
    }
    
    add_action( 'manage_pages_custom_column' , 'background_add_custom_column_data', 10, 2);
    add_action( 'manage_posts_custom_column' , 'background_add_custom_column_data', 10, 2);
    function background_add_custom_column_data( $column, $post_id ) {
        switch ( $column ) {
            case 'colors' :
               if( have_rows('colors') ):
                    while ( have_rows('colors') ) : the_row();
                $hex_color = get_sub_field('hex_color'); ?>
            <p style="background-color:"><?php echo $hex_color;?></p>
    <?php endwhile; endif;
    break;
        }
    }

    This function print the value of hex color ex #172d9b but I want exactly to make it fill out as a background color, instead of printing out the value of hex. The inspect show me that the background color is an invalid properly data.

    I wonder what I am doing wrong. 🙁

    Kind regards,
    Mike

  • I play a lot with the code and I feel that I had the results that I want.

    add_action( 'manage_pages_custom_column' , 'background_add_custom_column_data', 10, 2 );
    add_action( 'manage_posts_custom_column' , 'background_add_custom_column_data', 10, 2 );
    function background_add_custom_column_data( $column, $post_id ) {
        switch ( $column ) {
            case 'colors' :
               if( have_rows('colors') ):
                while ( have_rows('colors') ) : the_row(); ?>
            <div style="background-color:<?php the_sub_field('hex_color');?>;">
            <div style="width:80px;height:80px;"></div>
    <?php
        endwhile;
        endif;
        break;
        }

    }

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

You must be logged in to reply to this topic.