Implementing tabs entirely with jQuery

Socrates Premium Wordpress Theme

Socrates Premium Wordpress Theme

Get Instant Access

We achieved the above tab scenario by tweaking the WordPress theme to include a ul list of titles in HTML and then the post content within div tags below. This worked well as it generated a ul list with href links to anchor names that would still present the content and work functionally in a non-JavaScript enabled browser.

However, for other situations where WordPress is already presenting the content you need (for example, a list of h2 or h3 headings and content already tucked inside a single post or page), or you just don't have access to edit the theme, it might be easier to generate the DOM objects needed for the UI .tab feature by applying a little jQuery beforehand.

For a list of h3 headers and p paragraph tags added to a single page or WordPress post, we can still wrap that content in the UI tab widget.

The next screenshot depicts the About page, which already has all the content inside it; we just need to "massage" it to best meet the jQuery UI tab requirements:



This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.

Our Team:


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aiiqua.


Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis ante irure dolor in reprehenderit iti voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunf mollit anim id est laborum.

First, we'll target the specific page. WordPress can output unique IDs to pages as well as a host of class names; you'll have to View Source on the HTML output of your WordPress theme to the browser and see if the theme leverages this feature (most good WordPress themes will). This ability can help us target only the content we want to affect. For example, if all we want to enhance is our About page, we can view source and see that the post's unique ID is #post-104. This allows us to target the post we want to add tabs to, by first prepending a ul list of h3 titles.

Once we have the ul list, we'll need to wrap everything in a new, selectable div with an ID of #aboutUs. Then, we'll cycle through each h3 item to create individual li list items with anchor links and wrap each following h3 and p tag with an anchor-named id div of their own.

Read the bold comments in the code to follow along:

//add in a ul list on the About page only, before the first h3

jQuery("#post-104 h3:first").before("<ul></ul>");

//select the ul, the h3's AND the h3's p tags //and wrap them in a new div

//use the .add() function to make sure everything is selected jQuery("#post-104 ul").add("#post-104 h3")

.add("#post-104 h3+p").wrapAll("<div id='aboutUs'></div>");

jQuery("#post-104 h3").each(function(i){

//add text to the ul list w/ anchor links var titleTxt = jQuery(this).text(); var htmlTxt = "<li>

<a href='#name-"+i+"'>"+titleTxt+"</a></li>"; jQuery("#post-104 ul").append(htmlTxt);

//wrap each h3 AND p in a div with anchor names

//this time, use .andSelf to make sure everything is selected jQuery(this).next("p").andSelf()

.wrapAll("<div id='name-"+i+"'></div>");

//remove .entry class so list items don't have right quotes //this is a list style in the default theme jQuery("#post-104 .entry").removeClass('entry');

//Last, create the tabs widget jQuery("#post-104 #aboutUs").tabs();

Refreshing the page now displays this:

Again, the more you understand about your WordPress theme and jQuery, the more power you have to decide which route is quicker or better in terms of deciding whether to manipulate the theme to aid your jQuery enhancement, or if it's better to just use pure jQuery.

Was this article helpful?

0 0
Top 100 Wordpress Plugins

Top 100 Wordpress Plugins

The bulk of the plugins featured are free and available from the website. However, a few commercial plugins are featured in the Plugin Showcase within this guide. The five plugins in the Plugin Showcase aren’t rated. Less information about them is offered because, in many cases, information such as the last time the plugin was updated isn’t available.

Get My Free Ebook

Post a comment