My first thought was: “That is really nice and helpful. I want that on my blog as well!”
My second thought was: “There has to be a way that doesn’t require a manual process of adding those links everywhere I would like to have it!”
There is a way of doing it automatically and that is exactly what we are looking at in this blog post.
The “Problem” I tried to solve is that I would like to have an anchor on every header of my blog posts. It should be possible to press a link to get the URL which leads directly to that anchor. Basically, I would like to resemble the functionality you see on the Microsoft docs (the post has some relation to Microsoft after all 🙂 ).
If you click this little chain symbol you will get the following link:
If you don’t have your own child theme, an update of your current theme will override the changes in both the function.php and the CSS file.
The last step is to add some CSS to make the icon look a bit nicer and only appear when one is hovering above the header.
The CSS I present here is working for my theme. It might need some changes to look nice for your setup.
First of all, we style the anchor link. We would like to show it beside the header without changing the position of the header. We also would like to hide it as the standard (opacity 0). The last line defines a smooth transition if the opacity is changed.
As you can see it is quite easy to add an anchor to every header in your blog posts. You only need a few lines of code.
I got one step further and created a very simple WordPress Plugin that includes all those changes. You can find it on the WordPress Plugin store and the code on my GitHub. Everything should work if you install the Font Awesome Plugin and mine.
Because of the request of an individual I have added some functionality to the version you can download (Both from GitHub and the Plugin Store). It will now also handle if you add id’s manually or add several headers with the same text.
I hope this article helped you. Feel free to contact me if you have any questions. I am always happy to help.
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Share this ArticleLike this article? Email it to a friend!