Single page websites look really cool. Ok, they are not always helpful, especially for sites with lots of content, but if the scope of the site is to present simple information about a person, a product or a small company, then single page websites are a great choice.
What if you want to avoid purchasing a theme and try to make one modifying let’s say twenty twelve theme (my favorite since the last year). You create the layout, insert the content make the site look stunning. You also create the menu links which point to anchor links within the single page (for example “about”, “portfolio”, “contact” etc…
Ups, here comes the problem. How do I assign a custom “current” class in the menu link when
- it is clicked and the page scrolls to the corresponding section
- the user scrolls manually and when each section appears in the viewport, the corresponding menu link becomes highlighted.
Of course we are talking about fixed positioned menus, either on the top, on the side or at the bottom of the website that remains always visible regardless the scrolling.
WordPress assigns automatically such a class (at least for themes such as twenty eleven or twelve) in the menu items but only if the pages are different. When you create custom links that point to anchor points within your single page website, no such luck….
Luckily there is a solution and it is based on a great plugin developed by Trevor Davis. It is based on jquery, the scrollTo plugin and his own plugin jquery.nav.js.
You load these scripts from the footer of your site (before the closing body tag within the footer.php file). Jquery script is loaded by default from wordpress.
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>
Just after these lines you call the script
$(document).ready(function() {
$('#menu-mainmenu').onePageNav();
});
Notice the bold id that you target when you call the script. You can find the correct id name for your menu if you see the generated code of your site from your browser debugger (chrome and firefox have great debugging tools). It is the id of the ul list that contains the links you created for your menu from inside the dashboard. For more information and options check Trevor Davis.
Now that you assigned a “current” class in your menu of your one page site, you can style create wonders for the selected menu items. The plugin works perfectly!!
