O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Wordpress 3.0 jQuery

Book Description

Enhance your WordPress website with the captivating effects of jQuery.

  • Enhance the usability and increase visual interest in your WordPress 3.0 site with easy-to-implement jQuery techniques

  • Create advanced animations, use the UI plugin to your advantage within WordPress, and create custom jQuery plugins for your site

  • Turn your jQuery plugins into WordPress plugins and share with the world

  • Implement all of the above jQuery enhancements without ever having to make a WordPress content editor switch over into HTML view

  • In Detail

    Using jQuery you can create impressive animations and interactions which are simple to understand and easy to use. WordPress is the leading publishing platform that can be customized to power any type of site you like. But when you combine the power of jQuery with WordPress—the possibilities are infinite.The combination creates a powerhouse of possibilities for generating top-notch, professional websites with great usability features and eye catching visual enhancements.

    This easy-to-use guide will walk you through the ins and outs of creating sophisticated, professional enhancements and features, specially tailored to take advantage of the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build several custom jQuery solutions for various types of hypothetical clients and also show you how to create a jQuery and WordPress Plugin.This book covers step-by-step instructions for creating robust and flexible jQuery solutions for today's top site enhancements: expanding/sliding content, rotating slideshows and other animation tricks, great uses of jQuery's UI plugin widgets as well as AJAX techniques. Along with these it will also show you best practices for jQuery and WordPress development.

    That means, you'll learn how to implement just about any jQuery enhancement you can dream of on a WordPress site and also learn how to do it with minimal edits to the site's theme and while allowing the site's content editors to continue adding content the way they've always been (usually with the WYSIWYG editor), and never having to worry that they'll forget or not know how to add a special attribute or custom HTML to a post to make the jQuery feature work.

    From development tools and setting up your WordPress sandbox, through enhancement tips and suggestions, to coding, testing and debugging, and ensuring that the WordPress content editor's workflow isn't interrupted by having to accommodate an enhancement with special HTML, this book covers the best practices for not only jQuery development but specifically jQuery within WordPress development.

    Expert help on getting started with and using jQuery, the most user friendly JavaScript library to enhance your WordPress site.

    Table of Contents

    1. Wordpress 3.0 jQuery
      1. Wordpress 3.0 jQuery
      2. Credits
      3. About the Author
      4. About the Reviewer
      5. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Errata
          2. Piracy
          3. Questions
      6. 1. Getting Started: WordPress and jQuery
        1. This book's approach
        2. Core fundamentals you need to know
          1. WordPress
          2. Basic programming
            1. JavaScript and AJAX techniques
            2. PHP
        3. Essential tools
          1. Code/HTML editor
          2. Firefox
            1. Web Developer toolbar
            2. Firebug
          3. Not essential, but helpful: Image editor
        4. jQuery background and essentials
          1. What jQuery does (really well)
          2. How we got here: From JavaScript to jQuery
            1. Once upon a time, there was JavaScript
            2. Why jQuery is simpler than JavaScript
          3. Understanding the jQuery wrapper
          4. Getting started with jQuery
            1. Downloading from the jQuery site
          5. Including the jQuery library
        5. WordPress background and essentials
          1. Overview of WordPress
          2. Essentials for getting WordPress running
            1. Using WAMP
          3. Using MAMP
            1. Choosing a hosting provider
            2. Rolling out WordPress
        6. jQuery and WordPress: Putting it all together
        7. Summary
      7. 2. Working with jQuery in WordPress
        1. Getting jQuery into WordPress
          1. jQuery now comes bundled with WordPress
            1. Registering jQuery in a WP theme
            2. Avoiding problems registering jQuery
          2. Using Google's CDN
            1. Registering and including jQuery through Google's CDN into a theme
              1. Understanding Google's versioning system
          3. Using WordPress' bundled jQuery versus including your own jQuery download or using Google's CDN
        2. Keeping conflicts out!
          1. Setting your own jQuery variable
          2. But I really want to use the $ variable!
        3. Launching a jQuery script
        4. Our first WordPress and jQuery setup
          1. Registering jQuery in our setup
          2. Registering your own custom script file
          3. Setting up the custom-jquery file
        5. jQuery secret weapon #1: Using selectors and filters
          1. Selecting anything you want from the document
          2. Filtering those selections
            1. Basic filters
            2. Child filters
            3. Content filters
            4. Form filters
            5. Attribute filters
            6. Visibility
        6. jQuery secret weapon #2: Manipulating CSS and elements in the DOM
          1. Manipulating CSS
            1. Manipulating attributes
          2. Manipulating elements and content
          3. Working with the DOM
        7. jQuery secret weapon #3: Events and effects (aka: the icing on the cake)
          1. Working with events
            1. Helpers are so helpful!
            2. Working with bind, unbind, and the event object
          2. Adding effects
            1. Showing and hiding
            2. Sliding in and out
            3. Fading in and out
            4. Working with the animate function
        8. Making it all easy with statement chaining
        9. Our First Project: Expanding/collapsing WordPress posts
          1. Keeping jQuery readable
        10. Summary
      8. 3. Digging Deeper: Understanding jQuery and WordPress Together
        1. Two ways to "plugin" jQuery into a WordPress site
          1. WordPress themes overview
          2. WordPress plugins overview
          3. jQuery plugins overview
        2. The basics of a WordPress theme
          1. Understanding the template's hierarchy
            1. A whole new theme
          2. The Loop
          3. Tags and hooks
            1. Conditional tags
            2. Template include tags
              1. Creating custom header, footer, sidebar includes
            3. Plugin hooks
            4. Project: Editing the main loop and sidebar in the default theme
              1. Changing the loop
              2. Changing the sidebar
        3. The basics of a WordPress plugin
          1. Project: Writing a WordPress plugin to display author bios
            1. Coding the plugin
            2. Activating our plugin in WordPress
        4. The basics of a jQuery plugin
          1. Project: jQuery fade in a child div plugin
            1. Extra credit: Adding your new jQuery plugin to your WordPress plugin
        5. Putting it all together: Edit the theme or create a custom plugin?
        6. Summary
      9. 4. Doing a Lot More with Less: Making Use of Plugins for Both jQuery and WordPress
        1. The project overview: Seamless event registration
          1. What the "client" wants
        2. Part 1: Getting everything set up
          1. What we'll need
            1. ColorBox
            2. Cforms II
            3. Installing the WordPress plugin
            4. Setting up the registration form with cforms II
              1. Striking a balance: Forms should be short and easy and yet retrieve useful information
            5. Creating the register page using WordPress 3.0's custom menu option
          2. Working with WordPress 3.0's custom menu option
          3. Customizing the theme
            1. Creating the custom page template
            2. Creating the custom category template
          4. Getting jQuery in on the game plan
            1. Including the ColorBox plugin
            2. Writing a custom jQuery script
          5. Pulling it all together: One tiny cforms II hack required
        3. Part 2: Form validation—make sure that what's submitted is right
          1. The trick to client-side validation: Don't just tell them when it's wrong!
            1. Blank input validation
            2. Properly formatted e-mail validation
        4. Final thoughts and project wrap up: It's all about graceful degrading
        5. Summary
      10. 5. jQuery Animation within WordPress
        1. jQuery animation basics
          1. CSS properties made magical
            1. Making it colorful
          2. Taking it easy, with easing control
          3. Timing is everything: Ordering, delaying, and controlling the animation que
            1. Getting your ducks in row: Chain 'em up
            2. Delay that order!
            3. Jumping the queue
            4. Stepping to completion
        2. Grabbing the user's attention
          1. Project: Animating an alert sticky post
          2. Creating easy, animated graphs
        3. Delving deeper into animation
          1. Project: Creating snazzy navigation
          2. Project: Creating rotating sticky posts
            1. Putting in a little extra effort: Adding a loop indicator
        4. Summary
      11. 6. WordPress and jQuery's UI
        1. Getting to know jQuery's UI plugin
          1. Widgets
          2. Interactions
          3. Effects
          4. jQuery UI plugin versions bundled in WordPress
          5. Picking and choosing from the jQuery's UI site
          6. Making it look right: Easy UI theming
          7. Including the jQuery UI plugin features into your WordPress site
            1. Including jQuery's UI from WordPress' bundle
            2. Including from the Google CDN
            3. Loading up your own custom download from your theme or plugin directory
            4. Don't forget your styles!
        2. Enhancing effects with jQuery UI
          1. Effects made easy
          2. Easing is just as easy
          3. Color animation with jQuery UI
        3. Enhancing the user interface of your WordPress site
          1. Project: Turning posts into tabs
            1. Setting up custom loops in the WordPress theme
            2. Implementing tabs entirely with jQuery
          2. Project: Accordion-izing the sidebar
          3. Project: Adding a dialog box to a download button with icons
        4. Summary
      12. 7. AJAX with jQuery and WordPress
        1. What AJAX is and isn't: A quick primer
        2. AJAX: It's better with jQuery
          1. Assessing if AJAX is right for your site—a shorter disclaimer
        3. Getting started with jQuery's AJAX functionality
          1. Using the .ajax() function
            1. Taking shortcuts
            2. Specifying where to .load() it
            3. Transforming loaded content
        4. Project: Ajaxifying posts
        5. .getJSON: The littlest birds get the most re-tweets
          1. JSON and jQuery basics
            1. What JSON looks like
            2. Using JSON in jQuery
            3. Using .getJSON with Twitter
            4. Using Twitter's user timeline method
              1. What's Twitter sending back?
            5. Using getJSON with Flickr
          2. Other popular services that offer APIs with JSON format
        6. Project: Ajax-izing the built-in comment form
        7. Summary
      13. 8. Tips and Tricks for Working with jQuery and WordPress
        1. Keep a code arsenal
          1. Free your arsenal
          2. Your arsenal on-the-go
        2. jQuery tips and tricks for working in WordPress
          1. Try to use the latest version of jQuery
            1. Stay current with the Google CDN
          2. Stay in No Conflict mode
          3. Make sure other scripts in the theme or plugin use the Script API
          4. Check your jQuery syntax
            1. Colons and semicolons
            2. Closing parenthesis
            3. Mismatched double and single quotes
          5. Use Firefox and Firebug to help with debugging
          6. Know what jQuery is doing to the DOM
              1. Web Developer's Toolkit: View Generated Source
              2. Seeing what Firebug sees
          7. Tips for writing great selectors
            1. Don't forget about your selection filters!
          8. Keep the WordPress editor's workflow "flowing"
            1. But my jQ script or plugin needs to have specific elements!
        3. WordPress tips and tricks for optimal jQuery enhancements
          1. Always use wp_enqueue_script to load up jQuery and wp_register_script for plugins for custom scripts.
          2. Always start with a basic, working, "plain HTML" WordPress site
          3. Validate, validate, validate!
          4. Check your PHP syntax
            1. PHP shorthand
            2. Check for proper semicolons
            3. Concatenations
        4. Summary
      14. A. Appendix: jQuery and WordPress Reference Guide
        1. jQuery reference for WordPress
          1. noConflict mode syntax
          2. Useful selector filters for working within WordPress
            1. Selection filter syntax
            2. Selector filters
            3. Content filter syntax
            4. Content filters
            5. Child filter syntax
            6. Child filters
            7. Form filter syntax
            8. Form filters
          3. jQuery: Useful functions for working within WordPress
            1. Working with classes and attributes
          4. Traversing the DOM
          5. Important jQuery events
          6. Animation at its finest
        2. Getting the most out of WordPress
          1. The WordPress template hierarchy
          2. Top WordPress template tags
            1. Conditional tags
          3. Quick overview of loop functions
          4. Setting up WordPress shortcodes
            1. Creating a basic shortcode
        3. Summary