[Resolved] Add icon before category

[epickenyan]

Hi. How do I add the GP SVG icon that appears before the category on my blog section?

[David]

Hi there,

are you using a custom function for the Post meta? If so can you share that with us, and we can take a look at including the SVG markup within that.

[epickenyan]

It was a code shared by Tom. Here it is (it is working in posts though).

add_filter( 'generate_post_date_output', function( $output, $time_string ) {
	$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
		$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
	}

	$time_string = sprintf( $time_string,
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( get_the_modified_date() )
	);

	printf( '<span class="posted-on">%s</span> ', // WPCS: XSS ok, sanitization ok.
		$time_string
	);

        if ( ! is_single() ) {
            $categories_list = get_the_category_list( ', ' );
    
            if ( $categories_list ) {
                echo '<span class="cat-links">' . $categories_list . '</span>';
            }
        }
}, 10, 2 );

[David]

Try this instead:

add_filter( 'generate_post_date_output', function( $output, $time_string ) {
	$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
		$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
	}

	$time_string = sprintf( $time_string,
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( get_the_modified_date() )
	);

	printf( '<span class="posted-on">%s</span> ', // WPCS: XSS ok, sanitization ok.
		$time_string
	);

        if ( ! is_single() ) {
            $categories_list = get_the_category_list( ', ' );
    
            if ( $categories_list ) {
                echo '<span class="cat-links"><span class="gp-icon icon-categories">
                        <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0 1 43.592 27.907l12.349 26.791A16 16 0 0 0 228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" fill-rule="nonzero"></path>
                        </svg>
                    </span>' . $categories_list . '</span>';
            }
        }
}, 10, 2 );  

[epickenyan]

The HTML is there, but the icons are not showing.

[David]

Have you removed the filter, as i can’t see the markup

[epickenyan]

Yes, I did and replaced it with the new filter you shared.

[David]

Try this CSS:

.entry-header .gp-icon {
    display: inline-block;
}

[epickenyan]

That worked! Thanks, David.

[David]

Glad to be of help.

[Author]

Posts