WordPress Tabs and Slides Plugin Customization


Hi Guys after a long time 🙂

I got a project that required to have a tabbed layout on its pages. This was easily achievable with numerous plugins out there. I did some research and decided to use “WordPress Tabs Slides” Plugin.

After customizing it according to the customers need I realized that the url wasnt changing to reflect the tab the user was on. The SEO company I was working was adamant about having seperate urls for each tab for SEO optimization.

So Me and my friend(Shammi) decided to customize it to show the #tag for the tab on the url. The effort was successful and I decided to share what we learned with you guys.

After installing the plugin go to the plugin directory,

C:\wamp\www\[urwpinstallation]\wp-content\plugins\wordpress-tabs-slides\ts

and replace the tabs_slides.js file with following content,

/*
// JoomlaWorks “Tabs & Slides” Plugin for Joomla! 1.5.x – Version 2.4
// License: http://www.gnu.org/copyleft/gpl.html
// Copyright (c) 2006 – 2008 JoomlaWorks, a Komrade LLC company.
// More info at http://www.joomlaworks.gr
// Developers: Fotis Evangelou
// ***Last update: May 20th, 2008***
*/

/* Copyright (c) 2006 Patrick Fitzgerald – Version 1.9 */
// Temporarily hide tabs
document.write(‘<style type=”text/css”>.jwts_tabber{display:none;}<\/style>’);
var pageURL = window.location.toString().slice(0, -1);
var urlArray = new Array();
urlArray = pageURL.split(‘//’)[1];
var pageId = urlArray.split(‘/’)[urlArray.split(‘/’).length-1];

var tabberOptions = {
//start on DOM ready
‘manualStartup’:true,
‘cookie’:”jwts_tc_”+pageId, /* Name to use for the cookie */
‘onLoad’: function(argsObj)
{
/* var t = argsObj.tabber;
var i;
if (t.id) {
t.cookie = t.id + t.cookie;
}
i = parseInt(getCookie(t.cookie));
if (isNaN(i)) { return; }
t.tabShow(i);
*/
$(‘#jwts_tab ul li’).find(‘a’).each(function(index){
var str = $(this).text().toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
//alert(str);
str = str.replace(“Echo”, “ECHO”);
str = str.replace(“Faq”, “FAQ”);
$(this).text(str.replace(/-/gi, ” “));

});
$(‘#jwts_tab’).find(‘a’).addClass(‘capitalise’);
var t = argsObj.tabber;
var show_type=unescape(document.location.hash.substring(1));
var i;

// alert(‘hash = ‘ + i);
if ((show_type==””) || (show_type==null))
{
if (t.id) {
t.cookie = t.id + t.cookie;
}
i = parseInt(getCookie(t.cookie));
if (isNaN(i)) {return;}
t.tabShow(i);
}
else
{
t.tabShowByName(show_type);
}
// $(‘#jwts_tab’).find(‘a’).text() = $(‘#jwts_tab’).find(‘a’).text().replace(“-“, ” “, flags);
//alert($(‘#jwts_tab’).find(‘a’).html().replace(“-“, ” “));

/*while($(‘#jwts_tab’).find(‘a’).next()){
$(‘#jwts_tab’).find(‘a’).html($(‘#jwts_tab’).find(‘a’).html().replace(“-“, ” “));
}*/

//console.log(attrib);
//var strVal = attrib;
// alert($(‘#jwts_tab’).find(‘a’).attr(‘href’));
// alert($(‘div.jwts_tabberlive ul li’).find(‘a’).attr(‘href’));
// $(“ul.jwts_tabberlive > ul > li”).css(“border”, “3px double red”);
//alert(‘getCookie(‘ + t.cookie + ‘) = ‘ + i);
},
‘onClick’:function(argsObj)
{
var c = argsObj.tabber.cookie;
var i = argsObj.index;
//alert(‘setCookie(‘ + c + ‘,’ + i + ‘)’);
setCookie(c, i);
var urloftab = this.tabs[i].headingText;
//alert(urloftab);
window.location.hash = urloftab;

// $(“#tabs > ul”).bind(“tabsshow”, function(event, ui) {
// window.location.hash = ui.tab.hash;
//})
//var urloftab = $(‘.jwts_tabberactive’).find(‘a’).attr(‘href’);
// alert(urloftab);
//window.location.hash = urloftab;
}
};
// Cookie handling
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + “=” + escape(value) +
((expires) ? “; expires=” + expires.toGMTString() : “”) +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
((secure) ? “; secure” : “”);
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + “=”;
var begin = dc.indexOf(“; ” + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(“;”, begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + “=” +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
“; expires=Thu, 01-Jan-70 00:00:01 GMT”;
}
}
// The tabs!
function tabberObj(argsObj)
{
var arg;
this.div=null;
this.classMain=”jwts_tabber”;
this.classMainLive=”jwts_tabberlive”;
this.classTab=”jwts_tabbertab”;

this.classTabDefault=”jwts_tabbertabdefault”;

this.classNav=”jwts_tabbernav”;

this.classTabHide=”jwts_tabbertabhide”;this.classNavActive=”jwts_tabberactive”;

this.titleElements=[‘h2′,’h3′,’h4′,’h5′,’h6′];

this.titleElementsStripHTML=true;

this.removeTitle=true;

this.addLinkId=false;

this.linkIdFormat='<tabberid>nav<tabnumberone>’;

for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp(‘\\b’+this.classMain+’\\b’,’gi’);

this.REclassMainLive=new RegExp(‘\\b’+this.classMainLive+’\\b’,’gi’);

this.REclassTab=new RegExp(‘\\b’+this.classTab+’\\b’,’gi’);

this.REclassTabDefault=new RegExp(‘\\b’+this.classTabDefault+’\\b’,’gi’);

this.REclassTabHide=new RegExp(‘\\b’+this.classTabHide+’\\b’,’gi’);

this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;

if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;

if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement(“ul”);DOM_ul.className=this.classNav;

for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;

if(this.removeTitle){t.div.title=”;}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];

if(headingElement){t.headingText=headingElement.innerHTML;

if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi,” “);t.headingText=t.headingText.replace(/<[^>]+>/g,””);}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement(“li”);

t.li=DOM_li;DOM_a=document.createElement(“a”);

DOM_a.appendChild(document.createTextNode(t.headingText));

DOM_a.href=”#”+t.headingText;DOM_a.title=t.headingText;

DOM_a.onclick=this.navClick;DOM_a.tabber=this;

DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);

aId=aId.replace(/<tabnumberone>/gi,i+1);

aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,”));

DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);

e.className=e.className.replace(this.REclassMain,this.classMainLive);

this.tabShow(defaultTab);if(typeof this.onLoad==’function’){this.onLoad({tabber:this});}
return this;};

tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();

if(typeof self.onClick==’function’){onClickArgs={‘tabber’:self,’index’:tabberIndex,’event’:event};

if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};

tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=’ ‘+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};

tabberObj.prototype.tabShowByName=function(tabberName){var i;for(i=0;i<this.tabs.length;i++){if(this.tabs[i].headingText==tabberName){this.tabShow(i);break;}}return this;};

tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;

div.className=div.className.replace(this.REclassTabHide,”);

this.navSetActive(tabberIndex);if(typeof this.onTabDisplay==’function’){this.onTabDisplay({‘tabber’:this,’index’:tabberIndex});}
return this;};

tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;
// var urloftab = this.tabs[tabberIndex].headingText;
// alert(urloftab);
// window.location.hash = urloftab;
return this;};

tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=”;return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName(“div”);for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!=’function’){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions==’undefined’){tabberAutomaticOnLoad();}else{if(!tabberOptions[‘manualStartup’]){tabberAutomaticOnLoad(tabberOptions);}}

/* WordPress Slides */

wtsslide = function(wrapper,speed, obj){
//alert(jQuery(obj).text());

//jQuery(obj).text(jQuery(obj).text().replace(‘.’, ”));
if (jQuery(obj).text().indexOf(“(Hide)”) >= 0) {
jQuery(obj).text(jQuery(obj).text().replace(‘(Hide)’, ”));
jQuery(wrapper).slideToggle(speed);
return true;
}

jQuery(obj).text(jQuery(obj).text() + ‘ (Hide)’);
jQuery(wrapper).slideToggle(speed);

}

wtsaccordion = function(group,wrapper,speed){
jQuery(group).hide();
jQuery(wrapper).slideToggle(speed).toggleClass(“active”);
}

Please pay attention to the Bolded code, those are what we added. Hope this is helpful feel free to contact me if you have any questions.

Advertisements

Let me know what you think .. :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s