Wordpress 3.0 jQuery - part 23 potx

The main reason for using tabs within your site, is that it allows users to easily see a set of related content, one chunk at a time this is why "tab style" site navigation is also popul

Enhancing the user interface of your

WordPress site

We can see that the UI demos at jQueryUI.com certainly look cool, but now that we've got the UI plugin loaded up in to our project, how do we go about really putting these features to use on a WordPress project? Different types of interfaces can help us organize and relate to various types of information more easily and reduce confusion WordPress' theme API allows for various types of information

to be displayed within the site's design in logical chunks, mostly posts and lists Let's see if we can enhance any of that information with UI features

We've seen that the UI plugin offers: accordions, tabs, dialog boxes, date pickers,

as well as easy ways to implement drag-and-drop and sorting Also, if you're using the latest version, 1.8 or higher (as the examples in this chapter are), there are cool

widgets such as Autocomplete and Button Let's pick up another hypothetical client

and see how some minor interface enhancements can help their site out

Project: Turning posts into tabs

You've probably seen tabs being used more and more in sites lately The main reason for using tabs within your site, is that it allows users to easily see a set of related content, one chunk at a time (this is why "tab style" site navigation is also popular)

It also allows you, as a designer, to contain the content into a convenient module, saving valuable screen space

In our Chapter 5, jQuery Animation with WordPress, we learned how to stack up sticky

posts so they rotated, slide-show style While animating posts works well with the unrelated content that you want to ensure, everyone gets a glimpse at, loading content up into tabs means the content is somehow related, and yes, you also want

to conserve space, perhaps getting that information above the fold so that the user

is more likely to take it in

Your newest hypothetical client has three pieces of information that are related to understanding their company This content doesn't change much, but he would like the site's users to be able to get an overview of the information, along with the option

to download a white paper up front, without scrolling

The client already has this content on his site The posts are assigned to a unique

category called Our Structure The posts are rather old by now and don't even show

up on the site's main page, so the client has been manually linking to the perma-links for the posts in various other pages on the site

Setting up custom loops in the WordPress theme

Let's start by going into the client's theme and setting a loop that pulls only from the

Our Structure category Then, using jQuery UI we'll display those posts in a set of

tabs that is viewable mostly "above the fold" ensuring site visitors get an overview of the organization's most important information up front and general post items will flow below

First up, in the index.php page, we'll create a new loop, above the existing loop php include that only displays the Our Structure category Before we do this though,

we'll head over to the jQuery UI site and take a look at the demo of how tabs are set up: http://jqueryui.com/demos/tabs/

Essentially we see that demo tabs have a ul that lists the titles, wrapped in href calls to id anchors that point to the content's div This means our theme actually

will require two custom WordPress loops to accommodate this widget.

We'll set them up in our index.php template file, right above our main content loop.php include, inside the #content div in the theme we're using, which is the default theme The first loop will set up our custom #ourStructure div with

the ul list of titles:

<div id="ourStructure">

<ul>

<?php//start custom loop

//get posts in the proper category

$postList = get_posts('category=4');

foreach($postList as $post):

setup_postdata($post);

?>

//set up a list item with a unique anchor link

<li>

<a href="#post-<?php the_ID(); ?>">

<?php the_title(); ?></a>

</li>

<?php endforeach; ?>

</ul>

<! //second loop goes here >

</div><! //end of ourStructure >

Next, under the previous loop, but still inside the #ourStructure div, we'll run the loop one more time, focusing now on the post's titles and content as follows:

<! //second loop goes here >

<?php

//again, call correct category

$postContent = get_posts('category=4');

foreach($postContent as $post):

setup_postdata($post);

?>

//assign a unique ID to div

<div id="post-<?php the_ID(); ?>">

<h2><?php the_title(); ?></h2>

//add content:

<div class="entry">

<?php the_content('Read the rest of this entry &raquo;'); ?>

</div>

</div>

<?php endforeach; ?>

</div><! //end of ourStructure >

This gives us a result that looks like the next screenshot While not super pretty, it's functional, and it certainly gets that important info up there and allows the user to link down to the id instance's anchor name

We'll then enhance that markup with jQuery's UI tabs like so, by targeting the

#ourStructure div, in our custom.js file we set up the following jQuery statement:

jQuery("#ourStructure").tabs();

Yes Hard to believe, but thanks to the flexibility of WordPress and the work we got

the theme to do for us, that's all the jQuery we need!

Not bad! The content is now contained up top using the jQuery UI theme we chose, called "Smoothness" to compliment our WordPress theme best (again, we're using the default WordPress theme that comes with 3.0 as of the writing of this book) Let's look at some other uses for the UI plugin

Implementing tabs entirely with jQuery

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

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:

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>");

//for EACH h3 item:

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

Project: Accordion-izing the sidebar

Accordions pretty much have the same functionality as tabs Mostly they're just vertical rather than horizontal As with tabs, you'll want to use them to "group"

similar information together into a tidier space, allowing the site user to take in the information in logical chunks and not have to wander down through the site or scroll

In the default theme that we've been working with, our page navigation on the sidebar has some information that we'd like people to be able to see at a glance and not have the headings pushed down past the fold where they may miss them

By grouping sections into accordions that drop down and display additional

information and links, we save some room and ensure when a page loads that users can at least, see the important organizational headers and know that there is more information they may want to expand and view

The accordion widget works great with lists, which is what the sidebar is The

widget also, as you can tell by the example code at http://jQueryUI.com/demos/ accordion, recognizes and works with headers and paragraph or div tags set in a consistent, hierarchical order You can also use various options to set specific DOM objects as headers and navigation elements

Our default theme's WordPress sidebar is one big ul list inside a div Perfect for the accordion widget, but since we set up some custom CSS to make the page list display

more like navigation buttons, we want to target the next two lists in the list below the

page navigation list items Not to worry, it's easy to target and select the following list items and apply the accordion widget to them as follows:

//select the proper li level and exclude the inner ul lists then wrap

in a targetable div

jQuery(".xoxo ul li:gt(10)").not(".xoxo ul li ul li")

.wrapAll('<div id="sideAccordion"></div>');

//select the new target and assign the widget

jQuery('.xoxo').accordion().css({'marginTop':'30px'});

The widget's default state is to display the top accordion open The client would like

it to be completely closed To achieve this, we'll add some parameters to the widget, including active: -1, which is normally used to select which bar to open, but by setting it to -1, they'll all be closed:

jQuery('.xoxo')

//options for the accordion

accordion({header: 'h2', collapsible: true, active: -1})

css({'marginTop':'30px'});

//last, some extra styles to the headers and ul lists

//to line them up

jQuery(".xoxo h3")

.css({'padding':'5px 0 5px 25px', 'height':'15px'});

jQuery(".xoxo ul").css({'height': 'auto', 'margin': '0px',

'paddingLeft': '25px', 'paddingTop': '5px',

'paddingBottom': '5px'});

Our sidebar under our page navigation is now accordion-ized in a nice style that matches our page's tabs

These accordion headers are closed when the page loads, making it easy for the site user to chose which one to explore

Let's now move on to making our client's last enhancement