[Resolved] Php alternative to using hrefs?

[Carsten]

Hi there, I’m using href links defined by svg’s in an hook element to add fast access links to my mobile header, and it is working fine, maybe a little bit slower than links in my menu.

As I’m getting a little bit more confident with adding php, and whant to use best practice, I was wondering if there is another way of adding these links to my header than using hrefs?

I guess I can add them by their page id’s in a function using generate_menu_bar_items hook?
How do I add the svg’s to a function?

Regards
Carsten

 <a href="/search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg></a>
	 

<a href="/members/me/bp-messages/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-chat-dots" viewBox="0 0 16 16">
  <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
  <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/>
</svg>

[bp_better_messages_unread_counter hide_when_no_messages="1" preserve_space="1"]

</a>

[David]

Hi there,

i am afraid i do not understand.
Can you explain what you want it to do ?

[Carsten]

Sorry for not making myself clear.

This is the what the href code is doing: adding a messages and search link to my menu on mobile, and it is working, though a little slow.

https://imgur.com/fijxFWh

My question is what best practice adding this like this or adding them with php by their page id’s in the element?
In that case, how is the svg’s added to php, stil with link to http://www.w3.org svg page?

It seams like the load time for the page is a bit slower that accessing the page via the menu, maybe because of the svg load, should I upload the svg instead?

[Carsten]

I’ve seen the video at documentation on generate_svg_icon_element, and I can see that you copy the HTML for the icons, so apparently it is not possible to upload a svg icon? 😉

About the href, I think I will refrase my question to.

Can a function like adding these links to the header (see image) be added other than using the href’s as I’m already doing?

[David]

The generate_svg_icon_element is built for using inline SVGs.
You could however output an <img> in that filter.
But the image would make an additional network request, whereas the SVG does not.
The img could not be recolored wheras the SVG can.

This in the SVG – xmlns="http://www.w3.org/2000/svg" is just an XMLS Namespace, its not a link, the browser can use it to determine what type of XML code it ie ie. an .svg

Can a function like adding these links to the header (see image) be added other than using the href’s as I’m already doing?

No. Its href or nothing.

[Carsten]

Thanks for clarifying this.

[David]

You’re welcome

[Author]

Posts