Табы или панель вкладок в WordPress без плагинов

1. Html код

Для начала нужно сделать разметку.

<div id="tabs">
<ul class="wptab">
<li><a href="#tab-one" class="selected" onclick="click(); return false;">Первый таб</a></li>
<li><a href="#tab-two" onclick="click(); return false;">Второй таб</a></li>
<li><a href="#tab-three" onclick="click(); return false;">Третий таб</a></li>
</ul>

<div class="clear"></div>
<div class="boxes box inside">
<div id="tab-one" class="list" style="display: block;">   
Содержание первого блока
</div>
<div id="tab-two" class="list" style="display: none;"> 
Содержание второго блока
</div>
<div id="tab-three" class="list" style="display: none;">
Содержание третьего блока
</div>
</div>
</div>

2.Подключение Java

В файл footer.php перед закрывающим тегом body добавляем вот этот код:

<script type="text/javascript">
  $(document).ready(function(){
    $(".wptab a").click(function () {   
    $(".wptab a").removeClass("selected");    
    $(this).toggleClass("selected");
    $(".list").attr("style","display: none;");
    $("#tab-category").attr("style","display: block;");   
    var div_name = $(this).attr("href");
    $(div_name).attr("style","display: block;");
    });
  });
</script>

3.Стили CSS

Добавляем стили в наш файл стилей, например style.css

#tabs{overflow:hidden;margin:15px 0 1px;}
#tabs ul.wptab{position:relative;padding:0px;height:50px;}
#tabs ul.wptab li{display: inline;list-style: none;color:#ffffff;cursor:pointer;}
#tabs ul.wptab li:first-child{position: absolute;bottom:0;left:0;}
#tabs ul.wptab li:nth-child(2n){position: absolute;bottom:0;left:140px;}
#tabs ul.wptab li:nth-child(3n){position: absolute;bottom:0;left:280px;}
#tabs ul.wptab li a.selected,
#tabs ul.wptab li a:hover{text-decoration:none;color:#fff;background:#339900;padding:5px 0 10px;-webkit-transition:all linear 0.2s;-moz-transition:all linear 0.2s;-ms-transition:all linear 0.2s;-o-transition: all linear 0.2s;transition:all linear 0.2s;-moz-box-shadow:0 2px 5px rgba(0,0,0,0.3);-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);box-shadow: 0 2px 5px rgba(0,0,0,0.3);}
#tabs ul.wptab li a{width:140px;color: #fff;display:block;float:left;padding:5px 0 6px;font-size:14px;text-decoration:none;text-align:center;background:#222;-webkit-transition:all linear 0.2s;-moz-transition:all linear 0.2s;-ms-transition: all linear 0.2s;-o-transition:all linear 0.2s;transition:all linear 0.2s;}
#tabs .inside ul{margin:0;list-style:none;padding-left:0px;}
#tabs .inside .list{display:none;}
#tabs .inside .list:first-child{display:block;}

Если все сделано правильно, то должно получится так.