What jQuery does really well

JQuery at its core, excels at manipulating the DOM by finding and selecting (hence the word query in the name) DOM elements into a jQuery object, often called a wrapper. This allows you to easily get and set page elements and content, and work with all the modern browser event models allowing you to add sophisticated features to your site. Last but not least, jQuery has a really cool set of effects and a UI library. Animation and interface widgets are now at your complete command. Don't panic....

Project Adding a dialog box to a download button with icons

Dialog boxes are great ways to alert and direct people's attention to really important information, making sure they understand the next steps that they need to take, as well as confirming an action. Our client is very happy with the tabbed information on the home page and the condensed accordion side bar. They just need one more enhancement. The first tab on the home page offers a PDF download of a white paper that contains information about their methodology, products, and their various uses....

Using Twitters user timeline method

The URL parameter in our .getJSON function will contain the following API, formatted URL You can choose from the following formats (but guess which one we'll be using ) First up, we'll need to place our tweets on the home page. We have two options here, we can go into the home.php template file and create an actual div and ul list, or we can create it entirely with jQuery. Honestly, a call like this is just up to you. At this point in the book, you should be plenty comfortable editing and...

Creating a basic shortcode

We'll start off by opening up our functions.php file and at the end of it, create a simple function that returns a string of text and markup for our shortcode like so code goes here newText 'This page is brought to you by < a href > the letter Z< a> ' Now, to really take advantage of shortcodes, you do need to know some PHP which, to fully cover, is a bit beyond the scope of this title. But even without much PHP experience, if you follow this example, you'll start to see how flexible...

CodeHTML editor

First up, we'll need to meddle with markup and code lots of markup, CSS, PHP, and jQuery. So, you'll need a good code or HTML editor. Dreamweaver is a great option although I prefer to use Coda for Mac (http www.panic.com coda ). Before I discovered working with Coda, I was very happy with the free editor TextWrangler (http www.barebones. com products textwrangler ). When I was working on a PC, I loved the free text code editor HTML-kit (http www.htmlkit.com ). There are thousands of editors...

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...

The basics of a jQuery plugin

We'll discover that compared to WordPress themes and plugins, jQuery plugins are actually not that complex. To set up a jQuery plugin, you need to follow jQuery's plugin construct. The basic construct consists of setting up a jQuery function for your plugin as follows. Note the bold .fn added to the jQuery object. This is what makes your function a jQuery function. jQuery.fn.yourFunctionName function() code Within that, it's best practice to then add a return this.each(function() ) so that your...

Coding the plugin

First up, looking through the client's network of sites, not many display the author's nickname or name. Only a handful do and of those, the name is listed unobtrusively. It will be much easier to have a plugin display the author's name and then comment out or remove the_author tag from a few themes. Here's a quick detail to note template tags don't do so well in plugins. This is because the template tag, which is a function, is set to display text, which, within another function, we don't...

Enhancing the user interface of your Word Press 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...

Including jQuerys UI from Word Press bundle

The jQuery's UI plugin bundled into WordPress is separated out into individual .js files. You'll have to register the UI core file in your project first, as well as each widget or specific interaction that you'd like to include in your project. Again, the only widgets and interactions available are Dialog, Draggable, Droppable, Resizable, Selectable, Sortable, and Tabs. To register the core in your WordPress theme if ( is_admin()) checking for is_admin makes sure that the UI doesn't load in...

Delay that order

Because timing is everything, I often discover I want a function's animation to complete, and yet, depending on the easing option, especially those that are elastic or bounce, I don't necessarily want the very next function to kick off quite so fast As of jQuery 1.4, it's easy to pause the chain with the .delay() function. Let's place a three second pause in our chain like so .slideDown(5000, 'linear') .delay(3000) .fadeTo('slow', .5) Check your jQuery version delay() requires 1.4+ As soon as...

Project Ajaxizing the builtin comment form

From the working samples we've done so far with .load and .getJSON, you can probably think of many extremely cool ways to implement AJAX in your WordPress site. The most useful application of this is the comment form. First up, we don't even need to amend any template page HTML or WordPress Template Tag, PHP code. This is great as again, as often as possible (all the time really) we always want our site to work without the jQuery enhancement. Ajaxing the WordPress comment form is deceptively...

The basics of a Word Press plugin

Now honestly, the details of writing WordPress plugins are far beyond the scope of this title my goal is to show you the structure of a simple WordPress plugin and the basics of how to construct one. Understanding this, you can begin to write your own basic plugins and feel more confident looking through other people's plugins when assessing what kind of features they provide to your WordPress site and if you need to tweak anything for your jQuery enhancements. Even as simply and basically as...

JQuery plugins overview

JQuery has the ability to allow you to take the scripts that you've created and encapsulate them into the jQuery function object. This allows your jQuery code to do a couple of key things. First, it becomes more easily ported over to different situations and uses. Second, your plugin works as a function that can be integrated into larger scripts as part of the jQuery statement chain. The best place to browse for jQuery plugins is the jQuery plugins page (http plugins.jquery.com ), as seen in...

Launching a jQuery script

Most of the time you'll want your script to launch and or be available as soon as the DOM is loaded and ready. For this, you can use the standard on document ready technique as follows You can reduce the previous code, just a bit, by using the following code If the jQuery variable is evoked and a function immediately passed, jQuery assumes the .ready event is implied and will run the next selection and function as soon as the DOM is loaded.

Project Ajaxifying posts

Lets assume you've got a client (relax, this is the last hypothetical client ) who's an open source media designer and would like a very clean and sparse home page. So sparse, they'd like only a list of the titles of the top, most current posts from two specific categories to appear. (In an ideal world, a decision like this would ensure their site's awesome design could sink in on the user before bombarding them with content.) They'd of course like it to be slick. When you click on the title...

But I really want to use the variable

You should not use the variable for jQuery within WordPress. OK, I know, you've got a good reason. Say for instance, you're copying a jQuery script over from another non-WordPress project and it's proving cumbersome to covert all the variables to jQuery or some other custom shortcut variable. Fine. (Never heard of Find and Replace ) At any rate, here is an example of how to shortcut jQuery to safely use the variable * jQuery only code using can safely go here * The only drawback to the above...

Using Word Press bundled jQuery versus including your own jQuery download or using Googles CDN

As I mentioned earlier, the wp_enqueue_script function allows for a safe load of jQuery (and other includes) into noConflict mode. As long as you deregister and register for jQuery from the Google CDN, the library will load into WordPress with the same noConflict mode protection. I really like to take advantage of Google's CDN, for the variety of performance reasons I mentioned, but for large projects with lots of editors and administrators making different decisions on how to manage the...

Conditional tags

The conditional tags can be used in your template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. For example, you might want to display a snippet of text above the series of posts, but only on the main page of your blog. With the is_home() conditional tag, that task is made easy. There are conditional tags for just about everything, out of all of them, these are the seven I find I need most in my...

About Packt Publishing

Packt, pronounced 'packed', published its first book Mastering phpMyAdmin for Effective MySQL Management in April 2004 and subsequently continued to specialize in publishing highly focused books on specific technologies and solutions. Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks. Our solution based books give you the knowledge and power to customize the software and technologies you're...

Word Press plugins overview

So themes change the look of WordPress without affecting its functionality. But what if you want to change or add functionality WordPress plugins allow easy modification, customization, and enhancement to a WordPress site. Instead of having to dig in to the main files and change the core programming of WordPress, you can add functionality by installing and activating WordPress plugins. The WordPress development team took great care to make it easy to create plugins using access points and...

How we got here From Java Script to jQuery

JavaScript, originally named LiveScript, was invented by Netscape's developers in the early 90s. By 1996, Netscape had renamed LiveScript to JavaScript in order to boost its popularity by linking it to Java (developed separately by Sun Microsystems). Java, which had been around a few years itself already, was becoming even more popular because people were starting to run it in websites by using a separate plugin called an applet. There are some ways in which Netscape's developers took care to...

Child filters

Anything in the jQuery wrapper is an array, and these child filters will come in handy, but you'll probably find these filters come in most handy when working with li tags or definition list elements in WordPress. By default, WordPress splits a fair amount of its link content into li tag elements and galleries that are are created by wrapping the images and descriptions in definition lists (dt dd elements). nth- jQuery(.linkcat li nth- child(number child(1) ).css(background, even odd) f60) li...

Word Press

Now that we understand the basics of jQuery and WordPress and have a little background on how they'll interact with each other, we're now ready to take a look at using jQuery to dynamically enhance a WordPress installation. We'll start with getting jQuery included in WordPress and end up with our first cool project Expanding and collapsing content. This is only the beginning of the jQuery possibilities in store for your WordPress site Again, we'll be using WordPress 3.0 in this title and the...

Extra credit Adding your new jQuery plugin to your Word Press plugin

Now you're free to go and install your WordPress plugin and include jQuery plugin on as many sites as needed However, in case you're wondering, yes, we can refine the installation process a bit more and just incorporate this jQuery plugin inside our WordPress plugin. The first step is to simply drop our jquery.authover.js script inside our plugin directory and then use the wp_enqueue_script to evoke it. You'll want to pay particular attention to this use of the wp_enqueue_script function, as it...

Doing a Lot More with Less Making Use of Plugins for Both jQuery and Word Press

At this point, you understand enough about jQuery and WordPress basics as well as the different ways to integrate them together that you can start to get truly creative in your solutions. In this chapter and the following three chapters, we're going to roll up our sleeves and work out solutions for some often requested projects and start getting jQuery to do some useful and just plain cool work within our WordPress sites. We're going to bring all available components of WordPress and jQuery...

Word Press themes overview

A WordPress theme is, according to the WordPress codex, a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. Themes comprise a collection of template files and web collateral such as images, CSS stylesheets, and JavaScript. Themes are what allow you to modify the way your WordPress site looks, without having to know much about how WordPress works, much less change how it works. There are plenty of sites that host free themes...

Keeping conflicts out

Because WordPress and jQuery are anticipating other libraries to be loaded which may use the short variable, . The wp_enqueue_script ensures jQuery is loaded up in noConflict mode. Therefore, you'll also need to make sure to write your custom jQuery code in noConflict mode's syntax. The easiest way to do this is to replace the variable (common in many jQuery scripts) with the full jQuery variable, as I've discussed in Chapter 1, Getting Started WordPress and jQuery, and done in my two previous...

Project Writing a Word Press plugin to display author bios

As we've discussed, plugins can help expand WordPress and give it new functionality. However, we've seen that adding jQuery scripts directly to the theme and editing its template pages here and there will do the trick in most cases. But let's imagine a more complicated scenario using our modified default theme and the hypothetical client mentioned in the previous project in this chapter. While we tweaked the default theme, I figured that this client might want to have her site's focus be more...

Working with the animate function

The three animation functions in the previous table will do most of what you need. You may, however, find yourself in a situation that requires a tad more control. In that rare instance, you can use the animate function. .animate(css properties, duration, easing, functionName) jQuery(.post) .animate( width 200, opacity .25 , 1000, function() code ) jQuery(.post).stop() Creates a custom transition of CSS properties on the selected elements Stops an animation on a selected element Here's an...

Word Press and jQuerys UI

We're now ready to take a look at jQuery's most popular plugin UI. UI of course, stands for User Interface. The jQuery UI plugin takes many of the most popular tasks that the developers have already made simple through jQuery, and makes them even simpler. I know, it's hard to imagine it getting any easier, but that's exactly what this plugin does. Most importantly, while the enhanced effects are nice, the UI plugin provides interface widgets and an easy way to style or theme them without the...

Picking and choosing from the jQuerys UI site

The advantage of downloading from the jQuery's UI site is you can pick and choose only what you need for your project. If you go to the download page at http www.jqueryui.com download, you'll see on the right-hand side that you can pick version 1.7.3 or 1.8.4 and click on the Download button this will give you everything. For development purposes, you can just download the whole thing. The ZIP file is over 4 MB but that includes a development bundle directory chock full of examples and...

Project jQuery fade in a child div plugin

Taking the required jQuery function discussed previously, I'm going to write up a basic function, which can be passed not only to the main jQuery wrapper selection, but an additional selector parameter so that it's easy to target the child div of a selection, or the specific parameter of the jQuery selection that's passed the parameter. Again, note the bold comments in my authorHover function to follow along sets up the new plugin function authorHover jQuery.fn.authorHover function(applyTo)...

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....

JQuery secret weapon 1 Using selectors and filters

It is time to start having some fun with jQuery I feel jQuery can be broken down into three core strengths, what I deem as its secret weapons Understanding selectors and filters Manipulating CSS and content Working with events and effects If you get a handle on these top three strengths, you're well on your way to being a jQuery rockstar This first item, understanding selectors and filters, is essential. You need to have a strong understanding of selectors and filters if you're going to be able...

The trick to clientside validation Dont just tell them when its wrong

Everyone responds to positive feedback. Instead of waiting for your users to mess up or forget a field, with the use of jQuery and a few styles you can let them know that they filled the field out correctly and are ready to move on. Using Inkscape, I've made a simple little check and x set of icons that can be applied as a background image to a span added by jQuery. Using the CSS sprite image technique of adjusting the background position to display the check or the x icons, the user will...

Putting it all together Edit the theme or create a custom plugin

We've learned in this chapter how easy it is to edit a theme, create a WordPress plugin, and a jQuery plugin. For the majority of your WordPress development work, adding jQuery enhancements right to the theme will do the trick. If you feel your jQuery scripts are a bit cumbersome and you're allowed to edit the theme (assuming of course, you don't break the layout or dramatically alter the look) you'll probably find that being able to wrap WordPress content in custom HTML tags with special class...

Digging Deeper Understanding jQuery and Word Press Together

Now that we've gotten a look at the basics of jQuery within WordPress, we're ready to dig a little deeper by understanding the following What WordPress themes, WordPress plugins, and jQuery plugins are and do The basics of creating your own WordPress themes, plugins, and jQuery plugins Best practices for how and when to apply jQuery directly to a theme or to WordPress plugin, as a script or as a jQuery plugin By taking a closer look at these two main components of WordPress, the theme and the...

Tips for writing great selectors

If by any chance you skimmed or skipped Chapter 2, Working with jQuery in WordPress (or haven't read it yet), you'll want to go back and review it in detail. You'll also find that the next appendix has the top cheat-sheet selector filter highlights that will be helpful once you have an understanding of the fundamentals of selectors. Having a handle on your selectors means you'll be able to do anything you want with jQuery. Literally I have yet to come up with a problem that I've had to push...

Making it all easy with statement chaining

As I've mentioned, one of jQuery's many powerful features is statement chaining, that is, stringing multiple functions together that will be performed in the order they're added to the chain (left to right) on the selected set all in one nice string of code. For example, we can change a CSS property, hide the selected elements, and fade them smoothly with one line of code For a more in-depth example of statement chaining, let's get to our first jQuery project in WordPress.

Project Editing the main loop and sidebar in the default theme

Alright That may seem like a lot to know about themes As someone just looking to enhance a WordPress site with jQuery, you may be asking Is it really necessary to know all that Even if you have no interest in creating custom themes, from time to time, when working with jQuery, you'll find it very useful to be able to understand how WordPress themes work, what HTML markup the theme is outputting, and what most of the different tags and functions do. Granted, in Chapter 2, Working with jQuery in...

Getting started with jQuerys AJAX functionality

At the heart of jQuery's AJAX functionality is the .ajax() function. This little guy allows you to do some heavy lifting and has everything you need for all your XML HTTP Requests (XHR) needs. For those of you with a little AJAX experience under your belts, you'll be pleased to find that in true jQuery form, this function eliminates the need for setting up the traditional if else statement to test for support for the XMLHTTPRequest object and if not then, the ActiveXObject (for IE browsers).

Working with bind unbind and the event object

We'll just do a quick overview of these functions using this method is a bit of overkill, but it might come in handy for specific uses and if nothing else, make you appreciate all the helper shortcut functions jQuery provides you with. Occasionally, you may need to really refine the control of your events, and using the bind() and unbind() functions, you may well handle this for yourself. You can pass parameters of event types, such as click or mouseenter you can pass some data as well as an...

Working with Word Press 30s custom menu option

However, we don't want the Register page to show up in our Page navigation and we need it to be in its own template page so that it will load more nicely into our modal box, without the theme's header and footer graphics and styling. We'll need to modify our template, but first, let's create a custom menu in WordPress 3.0 that will override the Page menu and then we can easily specify what pages should show up so the registration page won't appear in our site's navigation. First up, you'll want...

Setting up the registration form with cforms II

The cforms II plugin offers many powerful form-building features for the not-so-technical WordPress administrator. As a more technical WordPress developer, it flat out saves you tons of time. The cforms administration interface does take a while to get used to, but it is by far the most powerful and flexible form plugin I've used with WordPress. CformsII is a complex plugin that requires a large amount of administration real estate, and several screen pages. For this reason, once you activate...

Important jQuery events

Most of the time in WordPress, it's all about .click and .hover but .toggle and .dbclick will come in handy as well. .hover(functionName1, functionName2) .toggle(functionName1, functionName2, functionName3, ) jQuery(.post) .click (function() code ) jQuery(.post) .dbclick(function() code ) jQuery(.post) .hover(function() code ) jQuery(.post) .toggle(function() code ) Binds a function to the click event type, executed on a single click. Binds a function to the click event type, executed on a...

Specifying where to load it

We can achieve the exact same effect we got from our full .ajax() function with the parred-down code here jQuery('.post first').css( overflow hidden, height Again, kinda cool, in that the code snippet is a lot simpler. It's AJAX the page itself isn't reloading, but why would you want to do that (Again, to keep the example from being too messy, I used the .css function to change the CSS properties and hide the overflow and lock the height of the .post div.) It does seem rare that this would be...

Two ways to plugin jQuery into a Word Press site

You're aware that WordPress is an impressive publishing platform. Its core strength lies in its near perfect separation of content, display, and functionality. Likewise, jQuery is an impressive JavaScript library with a lot of effort spent on making it work across platforms, be very flexible and extensible, and yet, elegantly degradable (if a user doesn't have JavaScript enabled for some reason). You're aware that WordPress themes control the look and feel of your site and that WordPress...

Understanding the templates hierarchy

Wordpress Template Hierarchy

We've discussed that a WordPress theme comprises many file types including template pages. Template pages have a structure or hierarchy to them. That means, if one template type is not present, then the WordPress system will call up the next level template type. This allows developers to create themes that are fantastically detailed, which take full advantage of all of the hierarchy's available template page types, to make the setup unbelievably simple. It's possible to have a fully functioning...

JQuery and Word Press Putting it all together

You probably come from one of two camps you might know and have experience with jQuery and you're looking at WordPress to help maintain your site. Or, more likely, you have experience with WordPress and you're looking to see what jQuery can do for you. If you have some experience with jQuery but are fairly new to WordPress you're probably familiar with all sorts of jQuery examples that show clean and clear, hand-coded HTML and CSS, which you then craft your jQuery scripts to fit. It can become...

The basics of a Word Press theme

By now you've gotten the point that the WordPress theme essentially contains the HTML and CSS that wrap and style your WordPress content. Thus, it's usually the first place you'll start when incorporating jQuery into a site. Most of the time, this is a good approach. Understanding a bit more about how themes work can only make your jQuery development go a little smoother. Let's take a look at how themes are structured and best practices for editing them. Want to know more about WordPress theme...

Setting up custom loops in the Word Press 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....

Final thoughts and project wrap up Its all about graceful degrading

As with everything you do with jQuery, you need to keep in mind that you're creating useful enhancements that are great to have, but if for some reason a user didn't have JavaScript enabled or available, the process or site won't break. Our client is very happy with our seamless registration solution. Going through the registration process with JavaScript disabled, the registration process does work just fine using the standard browser back keys. The only drawback I find is that the...

Project Creating rotating sticky posts

Earlier we discovered that working with WordPress sticky posts is pretty easy That's good to know because our Mr. I want Flash client has now requested an additional enhancement solution. They are using WordPress sticky posts to make site viewers aware of the products that they're featuring. Making the posts sticky works great keeping their product mentions up top usually two to four at a time , while their regular news posts and updates flow below the product features. However, when they have...

Using MAMP

Similar to WAMP, MAMP stands for you guessed it Mac, Apache, MySQL, and PHP. Mac users will head on over to http mamp.info and download the free version of the server. Once you download and unpack the ZIP and launch the .dmg file, it's a pretty straightforward process for copying the MAMP folder to your Applications folder and launching the app. Again, like WAMP, MAMP from the start page offers you an easy way to launch phpMyAdmin. phpMyAdmin will allow you to easily create a database and...

Understanding the jQuery wrapper

As we move through this title, you'll hear and learn a lot more about the jQuery object, also called the wrapper or wrapper set, which probably makes the most sense, as it's a set of elements you've selected to work with. But as it's essential to how jQuery works, we'll do a quick introduction now. To fully understand the wrapper, let's back up a bit outside of jQuery. Ultimately, it all starts with your browser. Your browser has a JavaScript engine and a CSS engine. The browser can load, read,...

Table of Contents

Chapter 1 Getting Started WordPress and jQuery_7 Core fundamentals you need to know 8 JavaScript and AJAX techniques 10 Not essential, but helpful Image editor 18 jQuery background and essentials 19 What jQuery does really well 19 How we got here From JavaScript to jQuery 20 Once upon a time, there was JavaScript 21 Why jQuery is simpler than JavaScript 22 Understanding the jQuery wrapper 23 Downloading from the jQuery site 26 Including the jQuery library 29 WordPress background and essentials...