Archived topic
Customizing custom taxonomy
4 replies · Started by Oliver on October 1, 2021
Guys I used a few forum entries and managed to create a new taxonomy, make it appear in the entry meta and give it an icon.
The problem I´m having is that the icon does not have a right padding like the other icons do so it looks off.
1-How much padding is there between an entry meta icon and the taxonomy name?
2-How can I add the padding.
Also, the normal category and tags icon has a lighter gray color (#8A8A8A) and the new icon a darker color (#595959)
3-How can I change the color to make it the same as the others?
Hi there,
how did you add the SVG icon?
If you wrap it in span tags with the below classes the whole meta will maintain the GP styling:
<span class="gp-icon icon-tags">
<svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>
</span>Hi Dave
I added this php with code snippets
add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
if ( 'niveles' === $item ) {
return '<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>';
}
return $output;
}, 10, 2 );
Can i just add your code instead of the <svg xxxxxxxx> </svg> like this:
add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) {
if ( 'niveles' === $item ) {
return '<span class="gp-icon icon-tags">
<svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>
</span>';
}
return $output;
}, 10, 2 );
Perfect! thanks a lot david, have a nice weekend!
Glad to be of help!
