Как сделать вкладки (табы) в WordPress

Вкладки на CSS3

<div class="tab-wrap">
    <input type="radio" name="tabs" id="tab1" checked>
	<div class="tab-label-content" id="tab1-content">
  		<label for="tab1">Первая вкладка</label>
  		<div class="tab-content">
  			TAB 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas, nibh bibendum viverra semper, eros est semper libero, ac facilisis lectus sapien eu lorem. Nam suscipit nisl at ante tristique mattis. In convallis, nisl nec aliquet aliquet, nibh lorem molestie nisl, dapibus faucibus ipsum mi ut odio. Proin posuere tellus at hendrerit fringilla. 

  		</div>
	</div>
 
	<input type="radio" name="tabs" id="tab2">
	<div class="tab-label-content" id="tab2-content">
  		<label for="tab2">Вторая вкладка</label>
  		<div class="tab-content">
  			TAB 2 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.
  		</div>
	</div>

	<input type="radio" name="tabs" id="tab3">
	<div class="tab-label-content" id="tab3-content">
		<label for="tab3">Третья вкладка</label>
  		<div class="tab-content">
  			TAB 3 - Donec vulputate ante ac ligula vestibulum, id mollis diam commodo. Integer at consequat magna. Sed elit sem, dictum nec porttitor ac, ultrices id enim. Morbi semper eros a enim malesuada, eu finibus erat dictum. Ut vitae orci a odio sagittis malesuada. Cras volutpat vel lorem in tempor. Duis ultricies lectus sit amet tellus vehicula faucibus. Etiam sed leo ac erat tempor feugiat at quis ipsum. Mauris pellentesque nisl lorem, ac finibus sapien sagittis vel. Donec et lobortis est. Vestibulum dignissim ligula nec erat interdum, quis sollicitudin metus pretium. Vestibulum quis dui sapien. Proin commodo justo ac orci elementum molestie. Aliquam mattis orci vitae volutpat commodo.
  		</div>
	</div>

 	<input type="radio" name="tabs" id="tab4">
 	<div class="tab-label-content" id="tab4-content">
	    	<label for="tab4">Четвертая вкладка</label>
			<div class="tab-content">
				TAB 4 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue 	porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.
			</div>
	 	</div>
</div>

.tab-wrap {
    width: 100%;
    position: relative; 
}
.tab-wrap input[type="radio"][name="tabs"] {
    display: none;
    z-index: -1;
}
.tab-wrap input[type="radio"][name="tabs"]:checked + .tab-label-content label {
    border-bottom: 3px solid red; 
}
.tab-wrap input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    display: inline-block;
    background: #ededed;
    padding: 15px; 
}
.tab-label-content {
    display: inline-block;
    margin-right: 15px; 
}
.tab-label-content .tab-content {
    position: absolute;
    top: 50px;
    left: 0px;
    line-height: 130%;
    display: none; 
}

Вкладки с использованием плагина jQuery

<ul class="tabs2">
	<li class="tab-link current" data-tab="tab-1">Первая вкладка</li>
	<li class="tab-link" data-tab="tab-2">Вторая вкладка</li>
	<li class="tab-link" data-tab="tab-3">Третья вкладка</li>
	<li class="tab-link" data-tab="tab-4">Четвертая вкладка</li>
</ul>

<div id="tab-1" class="tab-content2 current">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" class="tab-content2">
	 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content2">
	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" class="tab-content2">
	Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

ul.tabs2{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs2 li{
	background: none;
	color: #fff;
	display: inline-block;
	padding: 5px 20px;
	cursor: pointer;
	background: #00bcd4;
}

ul.tabs2 li.current{
	background: #00bcd4;
	color: #fff;
	border-bottom: 3px solid red;
}

.tab-content2{
	display: none;
	background: #ededed;
	padding: 15px;
}

.tab-content2.current{
	display: inherit;
}

$(document).ready(function(){
	$('ul.tabs2 li').click(function(){
	var tab_id = $(this).attr('data-tab');
		$('ul.tabs2 li').removeClass('current');
		$('.tab-content2').removeClass('current');
		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})
})