Part 1: Setting Up Your Tabs
As I continue to use WordPress for more than just a blogging platform, I’m finding more ways to use the dynamic content built into WP to creative interactive Javascript (especially jQuery) elements.
In this case, we’re going to look at a way to populate a tabbed jQuery element with WP post data.
In our imaginary church, we would like to create an element on our landing page that lists each campus of our church and displays them when each tab is selected.
Assuming you use a unique page template for your church’s landing page, let’s set up the jQuery tabs with some place-holder static content.
[cc lang=”html”]
3 Convenient locations (select campus)
East Campus Content
West Campus Content
North Campus Content
[/cc]
Now lets style it a little bit to make it more pleasing to the eye.
[cc lang=”css”]
/* some general navigation styling */
.nav, .nav ul {z-index: 100; margin: 0; list-style: none; line-height: 1;}
.nav li {float: left; width: auto;}
/* container and title styles */
#locations {margin: 10px; padding: 0px; border: 3px solid #fff; max-height: 283px; background:#ccc; border: 1px solid #333;}
h3.header {height: auto; color: white; font-size: 18px; font-weight: bold; font-family:verdana;overflow: visible; padding: 3px 5px;}
/* lots of styles for the tabs */
ul.tabs {list-style: none; width: auto; line-height: 30px; height: auto; margin: 6px 0 25px 0;}
ul.tabs li a:link {font-weight: bold; line-height: 0; margin-right: 5px; padding: 15px 10px8px;color: white; text-decoration:none;}
ul.tabs .active {color: #ccc; background: #999;}
ul.tabs li {border-right: 1px solid #ccc; border-left: 1px solid#333;}
ul.tabs li:first-child {border-left: 0px;}
ul.tabs li:last-child {border-right: 0px;}
ul.tabs li:hover {color: #7d7d7d; text-decoration: none; background: rgb(102, 102, 102);}
/* the tab content */
.tab_container { overflow: hidden clear: both; float: left; width: 100%;}
.tab_content { font-size: 90%; padding: 10px 20px;}
.tab_content p {padding-top: 10px;}
[/cc]
This looks like a lot but really, most of this is styling the tabs so that they have a double border divider as well as different colors for the “active” and “hover” pseudo classes.
Next, we need to add a jQuery tab script. We could write one, but there are plenty of great, low-profile, tab scripts out there. I happen to like this one from Soh Tanaka.
When you add/enqueue your scripts and styles and placeholder html and you should get something like this:
Now what we’ve done so far isn’t that exciting. We’ve just set up very simple jQuery tabs (really the way we styled them, they don’t actually look like tabs but that’s okay).
Now for the fun part. Filling them with dynamic WordPress content!
Derek says
Hi Brian,
I’m trying to use your examples here on a website I’m working on. In my scenario I really need to be able to link directly to a page and have it display a specific tab number. With you example it doesn’t change the url and so I can’t link directly to a page-name#tab2 for example. Does that make sense? Any suggestions on how I could accomplish this?