What I did was to use WordPress own codes on the matter:
https://codex.www.ads-software.com/Dynamic_Menu_Highlighting
In particular ‘Method Two: With CSS in One Document’. The guide didn’t really help me at first as I didn’t know how to bridge the gap between WordPress codex and my own meny.
The crux, as always, is in finding out and identifying your Site ID.
To see what your pages IDs are you do the following:
1.) Enter the admin mode through /wp-admin
2.) Go to Pages
3.) Hoved the Edit text and look down at the status bar of your browser. A number should be displayed in the site and the code should look something like this:
https://www.martinhult.com/wp-admin/post.php?post=274&action=edit
The number you are looking for is the one after post= which in my case is ‘274’.
Going back to the code provided to us by WordPress in the codex it’ll look like this in the end:
<ul id="menu">
<!-- To show "current" on the home page -->
<li<?php
if (is_home())
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>">Home</a>
</li>
<!-- To show "current" on the About Page -->
<li<?php
if (is_page('<strong>About</strong>'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/about">About</a>
</li>
</ul>
You usually dont have to edit the is_home code as it will always bring you to the front page of the site (ie. index.php) which it considers home.
The one thing you NEED to edit however is the section in the code that I made bold. The text there should be replaced with whichever number you managed to come by in your wp-admin trip.
So MY version of the code would look something like:
<ul id="menu">
<!-- To show "current" on the home page -->
<li<?php
if (is_home())
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>">Home</a>
</li>
<!-- To show "current" on the About Page -->
<li<?php
if (is_page('<strong>471</strong>'))
{
echo " id=\"current\"";
}?>>
<a href="<?php bloginfo('url') ?>/about">About</a> <!-- Remember to change this part to the one you want it to display. You can call it whatever as well as the url is a valid link. -->
</li>
</ul>
And that’s it.
Just dont forget to add a
<style>
#current
{
background-color: #336699;
}
</style>
before you finish coding.
Hope this will help someone struggling with adding dynamic navigation to their site.
