The Simplest Way to Create Tabs in WordPress

Adding tabs to your WordPress websites is so easy. Just follow the few steps listed below.

Step 1: In your php file, add the following:

add_action('wp_head', 'myCustomScriptCSS');

function myCustomScriptCSS() {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-tabs');
wp_enqueue_script('custom-script-id', 'path-to-your-custom-script.js'); // ignore this line if you want to use existing .js file

wp_enqueue_style('custom-style-id', 'path-to-your-custom-style.css'); // ignore this line if you want to use existing .css file
}

Step 2: Add the following html codes to wherever you want the tabs to appear:

<div class="wp-tabs">
<ul class="tab-links">
<li class="active" id="tab-list"><a href="#tab1">Tab 1</a></li>
<li id="tab-table"><a href="#tab2">Tab 2</a></li>
</ul>

<div class="tab-content">
<div id="tab1" class="tab active">

tab 1
</div>

<div id="tab2" class="tab">

tab 1
</div>
</div>
</div>

Note:

The class we use on the outermost div is wp-tabs. This is the selector to locate the tab and we will use it step 3 and step 4.

Step 3: In your custom script file, add the following:

var $jx = jQuery.noConflict(); //declare this if you haven't done so.

$jx('.wp-tabs').tabs(); // remember, in step 2, wp-tabs is the class of the outermost div

Step 4: Add the following css codes in your css file.

.wp-tabs .ui-corner-all {
border-radius: 0;
}
.wp-tabs .ui-corner-top {
border-radius: 0;
}
.wp-tabs .ui-tabs-nav li {
display: inline-block;
margin: 0 0 0 5px;
}
.wp-tabs .ui-state-active {
}

.wp-tabs .ui-state-active a,
.wp-tabs .ui-state-active a:link,
.wp-tabs .ui-state-active a:visited {
color: #000017;
background: #f0f0f0;
}
.wp-tabs .ui-tabs-nav a:focus {
box-shadow: none;
outline: none;
}
.wp-tabs .ui-tabs-nav a {
font-size: 13px;
padding: 7px 10px;
text-decoration: none;
display: block;
color: #575a5c;
background: #e4e4e4;
border-style: solid;
border-color: #eee;
border-width: 1px 1px 0;
font-weight: bold;
}

.wp-tabs .ui-widget-header {
background: transparent;
border-width: 0 0 2px;
border-color: #eee;
border-style: solid;
margin: 0;
text-align: right;
}
.wp-tabs .ui-tabs-panel {
padding: 7px 0!important;
}

<div ng-app="mainApp2" ng-controller="CalcController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>

If you can notice, all css codes starts with .wp-tabs which is the selector for our tabs.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *