[Resolved] Add SVG Icon Author Block Element (Archive Page)

[Charbel]

Hello Team,

How to add the following SVG (Twitter icon) to the author archive page before the name?

Author page block: https://charbelnemnom.com/author/charbel-nemnom/

I have already an Author Block element created, but I am not able to add the Twitter icon before the name.
The SVG code below is the same that I am using at the fix main menu and it’s working.

Thank You!

<svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>

[Ying]

Hi Charbel,

You can use a block element instead of a header element in this case:
https://docs.generatepress.com/article/block-element-page-hero/

In the block element, if you add a headline block(GenerateBlock plugin), you should be able to add a custom SVG icon to the headline block:
https://docs.generateblocks.com/article/headline-overview/
https://docs.generateblocks.com/article/headline-overview/#icon

[Charbel]

Hello @Ying, thanks for the response and sorry for the late reply.

I would prefer not to install a new plugin. I am NOT using GenerateBlock plugin.

How can I have the same SVG Twitter icon that I am using for my sticky menu be my name here, please? https://charbelnemnom.com/author/charbel-nemnom/

As mentioned before, I have already an Author Block element created with the following: Block – Hook [generate_after_header], location (Author Archives).

Thank YOu!

[Fernando]

Hi Charbel,

If that’s the case, maybe you can hook it as such:

<div class="my-container">

<svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" width="50px" height="50px"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>

<?php echo '<h1>' . get_the_archive_title() . '</h1>'; ?>
	
</div>

See: https://share.getcloudapp.com/5zuLGDoQ

Also see: https://share.getcloudapp.com/P8u1bWKx

You can then hide the original Archive Title through CSS and control the look of the newly created Elements through CSS as well.

Hope this helps! 🙂

[Charbel]

Hello @Fernando, thank you for your quick reply.

Please note that with my current Author Block element, I can’t enable PHP.
My Element is Block – Hook and NOT Hook.

Here is the screenshot.

Please advise?

Thank You!

[Charbel]

And if I copy and add the SVG code below and put it in my Block – Hook, then it gets deleted automatically. It does not stay.

<svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" width="50px" height="50px"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>

Thank You!

[Fernando]

I see.

The issue stems because you’re using the Classic WordPress Editor.

Block Elements work with the current Gutenberg Block Editor which is the default Block Editor of WordPress.

Alternatively, you could try using a Hook Element instead and try copying all those in your Author Block to a Hook Element instead.

Let me know how it goes. 🙂

[Charbel]

Thank you @Fernando, good catch!

Because I remember I used to have that SVG in the Block – Hook and it was working without any issue. I am not sure if a new update from GeneratePress broke that functionality.

I prefer to use the Classic WordPress Editor instead of the current Gutenberg Block Editor.

I will try to use a Hook Element instead without using PHP. I will use my current two div classes and add the SVG.

<div class="authors-bio-wrapper">
<div class="authors-bio">
!!!!SVG here!!!!
</div>
</div>

I will confirm back.

Thanks!

[Charbel]

Thank you @Fernando, the issue is resolved now after moving to Hook instead of Block-Hook!!!

[Fernando]

You’re welcome Charbel! Glad that worked! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[Charbel]

Many Thanks, @Fernando!!!

I have another request, I will open a new ticket for it.

[Author]

Posts