Monthly Archives: May 2012

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