- This topic has 7 replies, 2 voices, and was last updated 3 years, 11 months ago by
.
-
Posts
-
We are importing real-time news from the Fourth Estate wire into the page at DailyNewsBrief.com and using a large and complex category and tag structure. To make it easier and more friendly for UX and SEO and to use we are using indexes for each taxonomy.
I’d like to link each of the gp-icon classes to a corresponding page, but haven’t yet been able to get it to work with CSS and could use some help as I’ve tried a bunch of permutations and can’t seem to wrangle the css.
class=”gp-icon icon-categories” should like to the page /categories/ (DailyNewsBrief.com/categories/)
class=”gp-icon icon-tags” should like to the page /tags/ (DailyNewsBrief.com/tags/)
Customer Support
Hi there,
you can use the
generate_svg_icon_elementfilter to change the HTML.
Here’s the PHP Snippet required to do that:// Filter Categories Icon add_filter( 'generate_svg_icon_element', function( $output, $icon ) { if ( 'categories' === $icon ) { $output = '<a href="your_categories_url" aria-label="your-link-label" class="gp-icon icon-categories"> <svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"> <path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z"></path> </svg> </a>'; } return $output; }, 10, 2 ); // Filter Tags Icon add_filter( 'generate_svg_icon_element', function( $output, $icon ) { if ( 'tags' === $icon ) { $output = '<a href="your_tag_url" aria-label="your-link-label" 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" width="1em" height="1em"> <path d="M20 39.5c-8.836 0-16 7.163-16 16v176c0 4.243 1.686 8.313 4.687 11.314l224 224c6.248 6.248 16.378 6.248 22.626 0l176-176c6.244-6.244 6.25-16.364.013-22.615l-223.5-224A15.999 15.999 0 0 0 196.5 39.5H20zm56 96c0-13.255 10.745-24 24-24s24 10.745 24 24-10.745 24-24 24-24-10.745-24-24z"/> <path d="M259.515 43.015c4.686-4.687 12.284-4.687 16.97 0l228 228c4.686 4.686 4.686 12.284 0 16.97l-180 180c-4.686 4.687-12.284 4.687-16.97 0-4.686-4.686-4.686-12.284 0-16.97L479.029 279.5 259.515 59.985c-4.686-4.686-4.686-12.284 0-16.97z" fill-rule="nonzero"/> </svg> </a>'; } return $output; }, 10, 2 );In both snippets you will need to update this part according to your needs:
href="your_tag_url" aria-label="your-link-label"Thanks. A big step in the right direction and it is working in the <span>, but I really only want it applied only to the icon.
I think that I can get there with some tweaks to the custom css.
That could should simply replace the gp-icon span with an
<a>element.
If you need to keep the span then change the $output eg.$output = '<span class="gp-icon icon-categories"><a href="your_categories_url"> <svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"> <path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z"></path> </svg> </a></span>';That will wrap the SVG with a link but keep the outer span tag.
Not quite. I just need to apply the link to the icon itself, but the change gets applied to the span.
That adjusted HTML should provide you with:
<span class="gp-icon icon-categories"> <a> link element <svg>icon</svg> </a> </span>So the link will wrap the SVG element – cant acutally add a link to the SVG itself if thats what you require,
If you can add either function then i can take a look at the issue.
Got this resolved. Not quite how originally intended, but it works for us.
Thanks for your help David, as always support from GP is excellent.
Glad to hear you found a solution!
- You must be logged in to reply to this topic.
