WordPress and jQuery’s UI [ 206 ] 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. To get started, we decide that it would benet us to leverage a little help from the WordPress theme. Chapter 6 [ 207 ] 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 ow 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 le, right above our main content loop.php include, inside the #content div in the theme we're using, which is the default theme. The rst 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 > WordPress and jQuery’s UI [ 208 ] 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 »'); ?> </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. Chapter 6 [ 209 ] We'll then enhance that markup with jQuery's UI tabs like so, by targeting the #ourStructure div, in our custom.js le we set up the following jQuery statement: jQuery("#ourStructure").tabs(); WordPress and jQuery’s UI [ 210 ] Yes. Hard to believe, but thanks to the exibility 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. 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. Chapter 6 [ 211 ] 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 specic 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 rst 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. WordPress and jQuery’s UI [ 212 ] 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(); Chapter 6 [ 213 ] 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. WordPress and jQuery’s UI [ 214 ] 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 specic 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'}); Chapter 6 [ 215 ] 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. . selected jQuery( "#post- 104 ul").add("#post- 104 h3") .add("#post- 104 h3+p").wrapAll("<div id='aboutUs'></div>"); //for EACH h3 item: . 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. 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>";