Wordpress ページ遷移後　クラス付与

前提・実現したいこと

wordpressでページ遷移した後、特定のタグにクラスを付与したい。
（ページ遷移後もJavaScriptを機能させたい）

発生している問題・エラーメッセージ

ページ遷移する際リロードにより、Javascriptが機能しなくなる。

該当のソースコード

header.php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css">
7    <?php
8    wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css');
9    wp_enqueue_script('jquery');
10    wp_enqueue_script('word-press-main', get_template_directory_uri() . '/assets/js/javascript.js');
11    wp_head(); ?>
12</head>
13<body>
14<?php wp_body_open(); ?>
15<!-- header -->
16<header class="header">
17<nav class="header-inner">
18<h1 class="header-logo"><a class="header-btn" href="<?php echo home_url(); ?>">LOGO</a></h1>
19
20
21<!-- 質問該当箇所 -->
22<!-- gnav -->
23<ul class="gnav-list">
24<li class="gnav-items"><a class="gnav-item" href="<?php echo home_url(); ?>">HOME<p class="gnav-txt">ホーム</p></a></li>
25<li class="gnav-items"><a class="gnav-item" href="<?php echo get_permalink(145); ?>">ABOUT<p class="gnav-txt">会社概要</p></a></li>
26<li class="gnav-items"><a class="gnav-item" href="<?php echo get_permalink(155); ?>">SERVICE<p class="gnav-txt">事業内容</p></a></li>
27<li class="gnav-items gnav-items-menu"><a class="gnav-item" href="<?php echo get_permalink(235); ?>">CREATE<p class="gnav-txt">Webサイト制作</p></a>
28<ul class="gnav-item-list">
29<li><a class="gnav-item-btn" href="<?php echo get_permalink(235); ?>">› Webサイト制作</a></li>
30<li><a class="gnav-item-btn" href="<?php echo get_permalink(261); ?>">› 料金・プラン</a></li>
31<li><a class="gnav-item-btn" href="<?php echo get_permalink(266); ?>">› 制作事例</a></li>
32<li><a class="gnav-item-btn" href="<?php echo get_permalink(275); ?>">› 制作の流れ</a></li>
33<li><a class="gnav-item-btn" href="<?php echo get_permalink(279); ?>">› よくあるご質問</a></li>
34</ul>
35</li>
36<li class="gnav-items"><a class="gnav-item" href="<?php echo get_permalink(238); ?>">BLOG<p class="gnav-txt">ブログ</p></a></li>
37<li class="gnav-items"><a class="gnav-item" href="<?php echo get_permalink(221); ?>">CONTACT<p class="gnav-txt">お問い合わせ</p></a></li>
38</ul><!-- /gnav -->
39<!-- 質問該当箇所 -->
40
41
42<!-- menu -->
43<div class="menu-open menu-close">
44        <span></span>
45</div>
46</nav>
47
48</header><!-- /header -->

CSS
1@charset "UTF-8";
2html {
3  font-size: 62.5%;
4}
5
6body {
7  margin: 0;
8  padding: 0;
9  font-size: 100%;
10  height: 100%;
11  font-family: arial, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", Verdana, sans-serif;
12}
13
14.header {
15  z-index: 999;
16  position: fixed;
17  box-sizing: border-box;
18  top: 0;
19  background: #fff;
20  box-shadow: 0 0 2px rgba(6, 8, 8, 0.15);
21  width: 100%;
22}
23
24.header-inner {
25  max-width: 1280px;
26  padding: 0 20px;
27  margin: 0 auto;
28  box-sizing: border-box;
29}
30
31.header-logo {
32  display: inline-block;
33  margin: 0;
34}
35
36.header-btn {
37  font-size: 32px;
38  letter-spacing: 4px;
39  margin: 0;
40  padding-top: 0px;
41  display: block;
42  font-weight: 800;
43  font-family: 'Montserrat', sans-serif;
44  color: #222;
45  line-height: 80px;
46  box-sizing: border-box;
47  height: 80px;
48  cursor: pointer;
49  text-decoration: none;
50}
51
52//　質問該当箇所
53.gnav-list {
54  display: flex;
55  justify-content: space-between;
56  align-items: center;
57  float: right;
58  list-style: none;
59  padding: 0;
60  margin: 0;
61}
62
63.gnav-items {
64  margin: 0;
65  float: left;
66  height: 80px;
67  padding-top: 9px;
68  color: #282828;
69  box-sizing: border-box;
70  font-size: 1.6rem;
71}
72
73.gnav-items-menu {
74  position: relative;
75}
76
77.gnav-items-menu:hover .gnav-item-list {
78  opacity: 1;
79  top: 78px;
80  visibility: visible;
81}
82
83.gnav-item {
84  display: block;
85  margin: 0;
86  padding: 14px 0 6px;
87  box-sizing: border-box;
88  width: 130px;
89  font-size: 1.6rem;
90  font-weight: bold;
91  text-align: center;
92  position: relative;
93  color: #282828;
94  text-decoration: none;
95}
96
97.gnav-item-list {
98  list-style: none;
99  position: absolute;
100  top: 50px;
101  background: #fff;
102  height: auto;
103  width: 190px;
104  padding: 0 0 26px;
105  border-radius: 0 0 6px 6px;
106  border: 2px solid #9dce54;
107  border-top: none;
108  box-sizing: border-box;
109  transition: all .3s;
110  opacity: 0;
111  z-index: 1;
112  margin: 0;
113  list-style: none;
114  visibility: hidden;
115}
116
117.gnav-item-btn {
118  font-size: 15px;
119  color: #333;
120  line-height: 42px;
121  height: 42px;
122  padding-left: 26px;
123  text-align: left;
124  font-weight: 600;
125  display: block;
126  letter-spacing: 0.2px;
127  box-sizing: border-box;
128  cursor: pointer;
129  text-decoration: none;
130}
131
132.gnav-item-btn:hover {
133  color: #429f00;
134  text-decoration: underline;
135}
136
137.gnav_item:hover .gnav-txt {
138  color: #429f00;
139}
140
141.gnav-txt {
142  padding-top: 8px;
143  margin: 0;
144  font-size: 13px;
145  font-weight: 500;
146  letter-spacing: 0;
147  color: #666;
148  line-height: 1;
149}
150
151.active {
152  color: #429f00;
153}
154//　質問該当箇所

JavaScript
1'use strict';
2
3// 下記のコードをページ遷移後に機能させたいです。
4jQuery(function($) {
5 $(function(){
6    var $btns = $('.gnav-item');
7    $btns.click(function(){
8      $btns.removeClass("active");
9      $(this).addClass("active");
10    });
11  });
12});

試したこと

・https://teratail.com/questions/27919
こちらの質問を参考にコードを書き換えましたが、解決には至りませんでした。

・擬似クラス:active,:link,:visited,などの使用を考えましたが、①クリックした要素にページ遷移後常にクラスが付与されている状態を保つ（常にテキストに色が付いている）。②他のページに遷移する場合はクラスを取り除く（テキストの色が元の黒色に戻る）。の２点が実現されなかったので、解決には至りませんでした。