wordpress javascriptとcssが反映されない

Question

wordpressをローカル環境で使っていて、多言語サイトを作るためにマルチサイト化をしました。

２つのサイトを行き来できるようにMultisite Language Switcherという言語スイッチャーを設置できるプラグインを使ってヘッダーメニューにスイッチャーを設置したのですが、

そのスイッチャーをドロップダウンで表示できるようにしたいのでMultisite Language Switcherで複数言語の切り替えを『select option』で実装する方法。
このサイトの通りにやってみたのですが何も変わりません。

サイトに載ってあった

JavaScript

$.fn.ulSelect = function(){
  var ul = $(this);

  if (!ul.hasClass('zg-ul-select')) {
    ul.addClass('zg-ul-select');
  }
  // SVG arrow
  var arrow = '<svg id="ul-arrow" xmlns="http://www.w3.org/2000/svg" version="1.1" width="15" height="15" viewBox="0 0 20 42" style="height: 15px;margin-top: 5px;padding-right: 5px;"><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/><path d="M4.131 8.962c-0.434-0.429-1.134-0.429-1.566 0-0.432 0.427-0.432 1.122 0 1.55l12.653 12.528c0.434 0.429 1.133 0.429 1.566 0l12.653-12.528c0.432-0.429 0.434-1.122 0-1.55s-1.136-0.429-1.566-0.002l-11.87 11.426-11.869-11.424z" fill="#111"/></svg>';
  $('li:first-of-type', this).addClass('active').append(arrow);
  $(this).on('click', 'li', function(event){

    // Remove div#selected if it exists
    if ($('#selected--zg-ul-select').length) {
      $('#selected--zg-ul-select').remove();
    }
    ul.before('<div id="selected--zg-ul-select">');
    var selected = $('#selected--zg-ul-select');
    $('li #ul-arrow', ul).remove();
    ul.toggleClass('active');
    // Remove active class from any <li> that has it...
    ul.children().removeClass('active');
    // And add the class to the <li> that gets clicked
    $(this).toggleClass('active');

    var selectedText = $(this).text();
    if (ul.hasClass('active')) {
      selected.text(selectedText).addClass('active').append(arrow);
    }
    else {
      selected.text('').removeClass('active');
      $('li.active', ul).append(arrow);
    }
  });
    $(document).on('click', function(event){
      if($('ul.zg-ul-select').length) {
       if(!$('ul.zg-ul-select').has(event.target).length == 0) {
        return;
      }
      else {
        $('ul.zg-ul-select').removeClass('active');
        $('#selected--zg-ul-select').removeClass('active').text('');
        $('#ul-arrow').remove();
        $('ul.zg-ul-select li.active').append(arrow);
      }
    }
  });
  }

// Run
$('#be-select').ulSelect();

CSS
ul.zg-ul-select {
	cursor: pointer;
	font-size: 15px;
	@media #{$pc} {
		position: absolute;
		margin: -25px 0 0 260px;
		width: 110px;
	}
	li {
		display: none;
		&.active {
			border: 1px solid #d1d1d1;
			display: flex;
			justify-content: space-between;
		}
	}
	&.active {
		border: 1px solid #aaa;
		li {
			border: none;
			box-shadow: none;
			display: block;
			background: #fff;
			&:hover {
				background: #888;
			}
		}
	}
}
#selected--zg-ul-select {
	display: none;
}
.footermenubox {
	margin-right: 130px;
}

この２つのコードをSimple Custom CSS and JSにて追加したのですが駄目でした。
なにが悪いのか考えうるところはありますでしょうか。
プラグインの設定も間違っていないと思います。

また、ほかに方法がありましたら教えていただきたいです。

Answer 1

ちゃんと見てないので間違ってるかもですけど、"何も変わらない"系でよくあるのは
・キャッシュされた古いものが表示されている
・コードにミス(階層構造のミスや誤字等)があり反映できていない
・設定にミス(そもそも読み込むようになっていない等)があり反映できていない
というものです。
まずはキャッシュを削除、それでもだめなら開発者ツールで該当のJSやらが読み込まれているかを確認、エラーが無いかを確認してください。