Highlight Comments Using #comment-hash and jQuery

Do you want to highlight comments when visiting a comment URL? While there’s probably a plugin for this, we have created a quick code snippet that you can use to highlight comments using #comment-has and jQuery in WordPress.

Instructions:

All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:

add_action( 'init', 'jquery_register' );
function jquery_register() {
if ( !is_admin() ) {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' ), false, null, true );
    wp_enqueue_script( 'jquery' );
   }
}

add_action('wp_head','wps_highlight_hash');
function wps_highlight_hash(){
     echo '<script type="text/javascript">
     $(document).ready(function() {
	/* HIGHLIGHT WITH COMMENT HASH */
	if(window.location.hash) {
	  $(window.location.hash).addClass("highlight");
	}
     });
     </script>';
}

This is an example to create the CSS for highlight class. You can customize it as you want.

.highlight{
       background:#F5EAC6;
       }

Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.

If you liked this code snippet, please consider checking out our other articles on the site like: 7 best WordPress poll plugins to grow online engagement and how to increase maximum file upload size in WordPress.