お世話になっております。
どうぞよろしくお願いいたします。

Wordpressで、ヘッダーに設置したボタンをクリックで文字の大きさ、背景色を変更したいです。
こちらのサイト
https://blog.btmup.com/css/jquery-css-two-ways-to-change-font-size-switching.html
の「jquery.cookie.jsで切り替え」を実装してみたのですが、動作しません。
テストで制作したHTMLの時点では動作していたので、なにが原因か分からず途方に暮れています。

header.php

<head>
<?php wp_head(); ?>

<link rel="stylesheet" id="styleFontsize" href="<?php bloginfo( 'template_directory' );?>/css/fontsize_standard.css" type="text/css">
<link rel="stylesheet" id="styleColor" href="<?php bloginfo( 'template_directory' );?>/css/bgcolor_white.css" type="text/css">

<script type="text/javascript" src="<?php bloginfo( 'template_directory' );?>/js/jquery.cookie.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$(document).ready(function(){
	$("#styleFontsize").attr({href:$.cookie('style01')});
	$("#styleColor").attr({href:$.cookie('style02')});
});
function switchFontsize(cssname){
	var cssurl= '<?php bloginfo( 'template_directory' );?>/css/'+cssname+'.css';
	$('#styleFontsize').attr({href:cssurl});
	$.cookie('style01',cssurl,{expires:30,path:'/cookietest/'});
}
function switchColor(cssname){
	var cssurl= '<?php bloginfo( 'template_directory' );?>/css/'+cssname+'.css';
	$('#styleColor').attr({href:cssurl});
	$.cookie('style02',cssurl,{expires:30,path:'/cookietest/'});
}
});
</script>
</head>

<body>
<ul>
<li>
<span>文字サイズ</span>
<a class="size_btn active" href="javascript:void(0);" onclick="switchFontsize('fontsize_standard'); return false;">標準</a>
<a class="size_btn" href="javascript:void(0);" onclick="switchFontsize('fontsize_large'); return false;">拡大</a>
</li>
<li>
<span>背景色</span>
<a class="color_btn c_white" href="javascript:void(0);" onclick="switchColor('bgcolor_white'); return false;">白</a>
<a class="color_btn c_black" href="javascript:void(0);" onclick="switchColor('bgcolor_black'); return false;">黒</a>
<a class="color_btn c_blue" href="javascript:void(0);" onclick="switchColor('bgcolor_blue'); return false;">青</a>
</li>
</ul>

<div id="main">
<p>テキスト</p>
</div>
</body>

エラーメッセージ

Uncaught ReferenceError: switchFontsize is not defined
    onclick https://サイトURL/:1

Uncaught ReferenceError: switchColor is not defined
    onclick https://サイトURL/:1

ディレクトリ構成

【Wordpressテーマ】
cssフォルダ
　∟fontsize_standard.css
　∟fontsize_large.css
　∟bgcolor_white.css
　∟bgcolor_black.css
　∟bgcolor_blue.css
jsフォルダ
　∟jquery.cookie.js
header.php
index.php
【/Wordpressテーマ】

試したこと

・cssファイルやjsファイルの場所の変更
・css、jsのURLをフルパスに変更
・jQueryの最新版をアップロード、記載
・jQueryをWordpressで使えるように変更(jQuery(function ($) {～});)

質問の仕方が悪い部分に関しては、随時修正いたします。
ご助力を頂けましたらと存じます。

行動規範の内容に同意します

回答1件

本件の直接的な回答ではありませんが
jquery.cookie.jsは古くて現状のブラウザの仕様と合わなくなってきています
js.cookieに切り替えるか、生のjsでcookieを利用ください

✕ https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js
○ https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js

参考

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3jQuery(function ($) {
4  function func1(){
5    console.log('func1');
6  }
7});
8function func2(){
9  console.log('func2');
10}
11</script>
12
13<a href="javascript:void(0);" onclick="func1()">func1</a> <!--これはfunc1がつかめない-->
14<a href="javascript:void(0);" onclick="func2()">func2</a>