I came across a dilemma recently. I wanted to highlight the WordPress post that is currently shown in my sidebar menu. I couldn’t find a sound solution for this, so here’s what I came up with. Using JavaScript and jQuery 1.2.3 I was able to highlight the current post in the WordPress navigation, or sidebar by dynamically adding the class “current” to the anchor tag.

JavaScript / jQuery

$(document).ready(function() {
	// Your base URL
	var baseUrl = "";
	// You need to target your sidebar here, change #secondaryContent to your sidebar identifier (id)
	$("#secondaryContent a").each(function(){
		var href = $(this).attr('href').replace(baseUrl,'');
		if (href == document.location.pathname) {


#secondaryContent .current
	background:url(images/current-link.gif) 0 4px no-repeat;


First include your copy of jQuery within the HEAD section of the document. Next include the above snippet of JavaScript in your document. Let the script do the rest.


Be sure to modify the baseUrl variable, making it equal to your domain name. Without this the script will NOT function.

Related links

About the Author

Kevin Leary is a freelance web developer in Boston, MA specializing in enterprise WordPress development, conversion optimization and JavaScript development.