jQuery Slider PHP / HTML Проблемы

Я наткнулся на некоторый код, предоставленный полезным человеком онлайн сегодня, который идеально подходит для того, что я пытаюсь добавить на свой сайт. У меня есть весь соответствующий код, который предоставил этот человек, но я не могу понять, как правильно его реализовать на моем веб-сайте Wordpress.

Демоверсия, показывающая правильное использование → http://www.akshitsethi.me/labs/slidepanel/

По существу, то, что я сделал, это скопировать их CSS ТОЧНО в конец моего CSS файла (я отредактирую его по своему вкусу позже). Я скопировал код сценария ТОЧНО в файл header.php, за исключением того, что вручную редактировал ссылки в коде сценария, чтобы точно указать файлы.js, которые я загрузил в свою папку темы. Я взял HTML-код, относящийся к DIV, и поместил его в файл slider.php, который я сказал моему файлу header.php для включения...

Что мне действительно нужно, выясняется, почему это не работает. Итак, CSS EXACT, код SCRIPT скопирован в мой заголовок.php и HTML скопирован в slider.php - за исключением a href= "# panel", который я собирался наклеить на страницу где-то. Я делаю что-то неправильно?

Я бы очень признателен, если кто-то может помочь мне разобраться, как заставить это работать на моем сайте. Мой тестовый сайт, на котором я использую это, - http://test.vtisvc.com. Ссылка "МЕНЮ" прямо здесь, в области содержимого главной страницы, должна теоретически открывать и закрывать панель. Очевидно, что заголовок завинчен, благодаря включению панели DIV в slider.php, я верю

HTML в slider.php

<div id="panel" class="hide">
<h4>MENU</h4>
    <ul class="menu">
    <li>
                <a href="#">News Feed</a>
    </li>
    <li>
        <a href="#">Friends</a>
    </li>
    <li>
        <a href="#">Nearby</a>
    </li>
    <li>
        <a href="#">Messages</a>
    </li>
    <li>
        <a href="#">Events</a>
    </li>
    <li>
            <a href="#">Photos</a>
    </li>
    <li>
        <a href="#">Notes</a>
    </li>
    <li>
        <a href="#">Pokes</a>
    </li>
    </ul>
</div>

HTML в header.php, перед закрытием тега HEAD

<script type="text/javascript" src="http://test.vtisvc.com/wp-content/themes/brk_2013/js/jquery.min.js"></script>
<script type="text/javascript" src="http://test.vtisvc.com/wp-content/themes/brk_2013/js/jquery.pageslide.js"></script>
<script type="text/javascript">
$(".open").pageslide({ direction: "right", modal: true });
</script>

HTML в header.php, после открытия тега BODY

<?php
include ('slider/slider.php');
?>

HTML на главной странице

<a href="#panel" class="open highlight strong">Menu</a>

CSS

#pageslide {
  /*
  * Required. Do not modify these.
  */
  display: none;
  position: absolute;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;

  /*
  * Optional. You can tweak these as per your preference.
  */
  width: 200px;
  padding: 20px;
  background-color: #fafafa;
  color: #666;
  -webkit-box-shadow: 0 0 3px 3px #efefef;
  -moz-shadow: 0 0 3px 3px #efefef;
  box-shadow: 0 0 3px 3px #efefef;
}