WordPress, JS

add .current menu class for single posts

Javascript

window.addEventListener('DOMContentLoaded', function () {
	var url = window.location.pathname;
	var urlRegExp = new RegExp(url.replace(/\/$/, ""));

	// media active
	var isSinglePost = document.body.classList.contains('single-post');
	var isSingleCaseStudy = document.body.classList.contains('single-case-studies');

	if (isSinglePost) {
		var mediaItem = document.querySelector('#menu-item-2888');
		if (mediaItem) {
			mediaItem.classList.add('current-menu-item');
		}
	}

	if (isSingleCaseStudy) {
		var mediaItem = document.querySelector('#menu-item-44');
		if (mediaItem) {
			mediaItem.classList.add('current-menu-item');
		}
	}
});

or functions.php

function add_current_menu_item_class() {
    $classes = '';
    if (is_singular('post')) {
        $classes = 'current-menu-item';
        $menu_item_id = 2888;
    }
    if (is_singular('case-studies')) {
        $classes = 'current-menu-item';
        $menu_item_id = 44;
    }
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var mediaItem = document.querySelector('#menu-item-<?php echo $menu_item_id; ?>');
            if (mediaItem) {
                mediaItem.classList.add('<?php echo $classes; ?>');
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_current_menu_item_class');