Wordpress 3.0 jQuery - part 31 doc

jQuery and WordPress Reference Guide[ 286 ] Now the fun part: Pick any template page in your theme and use the broughtby shortcode by simply adding in: .... If you have an enhancement

jQuery and WordPress Reference Guide

[ 286 ]

Now the fun part: Pick any template page in your theme and use the broughtby shortcode by simply adding in:

[broughtby]

Wherever you paste that [broughtby] shortcode in your theme's template files,

the This page is brought to you by the letter Z text, with a link to the letter's page,

will appear!

Bonus: You are not restricted to using this shortcode in just your template files! Paste

it directly into a post or page through the Administration panel, you'll get the same result And, you guessed it, the output from shortcodes are easily leveraged and enhanced by jQuery!

If you have an enhancement that might take a bit more HTML markup than

the WYSIWYG editor in WordPress can handle, and the site's content editor is overwhelmed by switching over to the HTML view, creating a solution with a shortcode may be just what you need! For example, it would be much easier for your client to add a set of square brackets with some parameters than mark up

a definition list, which the basic WYSIWYG editor doesn't allow for

This would turn:

<dl>

<dt><a href='#'>Event Name and Location</a></dt>

<dl>Event description</dl>

</dl>

Into a simpler:

[event title="Event Name and Location"

description="Event description" url="#"]

[ 287 ]

In addition to helping out WordPress content editors with markup, shortcodes are

a wonderful way to shortcut your time if you're a busy WordPress content author Even if you're not creating your own theme from scratch, you can easily add your own shortcodes to any theme's functions.php file and ramp up your productivity Those of you more comfortable with PHP can take a look at WordPress' Shortcode API and see how to extend and make your shortcodes even more powerful by adding parameters to them: http://codex.wordpress.org/Shortcode_API

Summary

Hopefully after taking a run through this appendix, you've dog-eared it and trust that you'll be back anytime you have a quick question about usage or syntax with the top jQuery and WordPress issues most WordPress developers have regarding jQuery We also took a quick turn through the "underbelly" of WordPress' core functions and shortcodes which hopefully open you up to the endless possibilities

of creating useful enhancements for WordPress sites I hope you've enjoyed this book and found it useful in aiding your WordPress sites with jQuery creations and enhancements

Symbols

:eq() selector 192

.ajax() function, using

.load function, using 230-232

about 227-229

loaded content, transforming 232

shortcuts 230

.animate() function 158

.css() function 158, 219

.delay() function 163

.each() function 174

.entry class 55

.getJSON function

about 237

using, with Twitter 238

.greenStats class 174

.post class 56

.postIcons class 55

.replace() function 174

.sticky class 186

.submit() function 245

.text() function 174

A

action hook

location 109

using 108

add_shortcode() function 285

addClass function 66

addCSS function 113

after() function 68

AJAX

about 11, 225, 226

assessing 227

combining, with jQuery 226, 227

AJAX functionality, jQuery

.ajax() function, using 227, 228 starting with 227

alert() function 71 animation functions

.animate() 273 fadeIn() 273 fadeOut() 273 fadeTo() 273 slideDown() 273 slideToggle() 273 slideUp() 273 stop() 79, 273 example 79, 80

API's with JSON support

bitly 244 delicious 244 goodreads 244 LibraryThing 244 Netflix 244 YouTube 244

append() function 68 Asynchronous JavaScript and XML See AJAX

attribute filters

[attribute!=value] 63 [attribute$=value] 63 [attribute*=value] 63 [attribute=value] 63 [attribute] 63 [attribute^=value] 63 about 63, 64

[ 290 ]

B

basic filters

:animated 56

:eq(number) 56

:even 56

:first 56

:gt(number) 56

:header 56

:header filters 54

:last 56

:lt(number) 56

:not() filter 54

:not(selector) 56

:odd 56

before() function 68

bind() function 75

border property 158

built-in comment form

ajaxizing 244-249

C

cforms II

about 127

settings up 128

child filters

:first-child 57

:last-child 57

:nth-child(number/even/odd) 57

:only-child 57

child filters, examples

:first-child 269

:last-child 269

:nth-child() 269

:only-child 269

class

.greenStats 174

.post 56

.postIcons 55

class attribute 49

class attribute manipulation functions

.addClass() 66

.css() 66

.hasClass 66, 67

.removeClass() 66

.toggleClass 66

Coda for Mac

URL 14

Code/HTML editor

about 14 files, loading with FTP 15 free open source editors 15 line numbers, viewing 14 non-printing characters, viewing 14 syntax colors, viewing 14

text wrapping 14

code arsenal

about 251 accessing 252 editors 252 making it available 252

complete parameter 165 conditional tags

in_category() 283 is_admin() 283 is_category() 283 is_home() 282, 283 is_page() 283 is_single() 283 is_sticky() 283

conditional tags, WordPress theme

about 99 is_home() 99

content filters

:contains(text) 59 :empty 59 :has(selector) 59 :parent 59 about 58-60

content filters, examples

:contains(text) 268 :empty 268 :has(selector) 268 :parent 268

css() function 65 CSS, manipulating

about 65, 66 attributes, attributes 67, 68

CSS pseudo classes

:first-child 54 :hover 54

[ 291 ]

custom menu option, WordPress 3.0

register page, creating 130, 131

theme, customizing 134

working with 132, 133

custom plugin

creating 120

D

default theme

main loop, changing 102-105

main loop, editing 101

sidebar, changing 105, 106

sidebar, editing 101

Document Object Model See DOM

DOM 16, 20

DOM, working with

.each(functionName) 71

.find(selector) 71

.get(number-optional) 71

.length or size() 71

DOM functions

.after 271

.append 271

.appendTo 271

.before 271

.html 272

.insertAfter 271

.insertBefore 271

.prepend 271

.prependTo 271

.text 272

.wrap 272

.wrapAll 272

.wrapInner 272

Dreamweaver

URL 14

E

effect enhancement, jQuery UI used

color animation 205

effects, easing 204

effects

animate function, working with 79

fading in 78

fading out 78

hiding 77 showing 77 sliding in 78 sliding out 78

effects, jQuery UI plugin

add class 196 color animation 196 hide 196

remove class 196 show 196 switch class 196 toggle class 196

error

function 246

events

.bind() 75 click() 73 dbclick() 73 hover() 73 keydown() 74 keyup() 74 mouseenter() 73 mouseleave() 73 toggle 73 unbind() 75 bind 72 event.data 76 event.pageX, pageY 76 event.result 76

event.target 76 event.timeStamp 76 event.type 76 unbind 72 working with 73

events, jQuery

.click 272 dbclick 272 hover 272

F

fadeIn() function 78 fadeOut() function 78 fadeTo() function 78 filter hook

location 109 using 108

[ 292 ]

Firebug

about 17

features 18

Firefox

extensions, Firebug 16, 17

extensions, Web Developer Toolbar 16

need for 16

Flickr

using, with getJSON 242, 243

form filters

:button 61

:checkbox 61

:file 61

:image 61

:input 61

:password 61

:radio 61

:reset 61

:submit 61

:text 61

about 60

form filters, examples

:button 270

:checkbox 269

:file 270

:image 270

:input 269

:password 269

:radio 269

:reset 270

:submit 269

:text 269

form validation

blank input validation 149-151

client-side validation 148

e-mail address, validating 151-153

server-side validation 148

wrapping up 154, 155

functions.php file 40

G

GET call 145

getJSON

using, with Flickr 242, 243

Google's CDN

jQuery, including into theme 42

jQuery, registering into theme 42 jQuery UI plugin, including from 201 using 42

versioning system 42

Google Code's Code Distribution Network

See Google's CDN

H

href attribute 218 HTML-kit

URL 14

HTML tag names 49

I

id attribute 49 implicit iteration 22 instertAfter() function 68 instertBefore() function 68 interactions, jQuery UI plugin

draggable 195 droppable 195 resizable 195 selectable 195 sortable 195

iPaste 252 isPreventDefault() function 76 isValidEmailAddress function 152

J

JavaScript

about 10 comparing, with jQuery 22 history 21

JavaScript Object Notation See JSON jQuery

about 8, 19, 23 activities 19 AJAX functionality, starting with 227-229 classes, working with 270, 271

combining, with WordPress 35, 36 comparing, with JavaScript 22 definitions, downloading 28 deriving, form JavaScript 20 DOM's object, passing to jQuery object 25

[ 293 ]

downloading from 26, 27

events 272

getting started 25

including, into WordPress 39

including, into WordPress plugin 44

library, including 29, 30

secret weapon 47

statement chaining 80

Visual Studio, using 28

wrapper 23, 24

jQuery, including into WordPress

bundled functions 40

Google's CDN, using 42

jQuery registering, problems 41

registering, in WP theme 40

steps 39, 40

WordPress'bundled jQuery, versus own

jQuery 43

jQuery, loading in noConflict mode

$ variable, avoiding 44

own jQuery variable, setting 44

jQuery, plugging into WordPress site

jQuery plugins 89, 90

ways 85, 86

WordPress plugins 88, 89

WordPress theme 86, 87

jQuery, secret weapon

+ selector 51

~ selector 52

attribute filters 62

basic filters 54

child filters 57

content filters 58

css() function 49

CSS, manipulating 65

DOM, working with 71

effects 72

events 72

filters, using 47

form filters 60

selections, filtering 53

selectors, using 48-51

visibility 64, 65

jQuery animation

.animate() function 158

.css() function, using 158

.delay() function, using 163 advanced easing 161 basics 157

border property 158 color, adding 159 completing 166 CSS properties 158 easing control, using 161 functions, chaining 162 linear easing 161 queue, jumping 164, 165 swing easing 161 timing, handling 162

jQuery plugin

basics 115 child div plugin 116, 117 jQuery plugin, adding to WordPress plugin

118, 119 overview 115 setting, plugin construct 115

jQuery reference

for WordPress 265

jQuery reference, for WordPress

animation functions 273 DOM, traversing 271 events 272

noConflict mode syntax 266 selector filters 266

jQuery script

launching 45

jQuery syntax, checking

colons 255 parenthesis, closing 255 semicolons 255

jQuery tips and tricks

for WordPress 253 for optimal jQuery enhancements 261

jQuery tips and tricks, for optimal jQuery enhancements

about 261 PHP syntax, checking 263 plain HTML WordPress site, starting with 262

use wp_enqueue_script, using 261 validating 262

wp_register_script, using 261

[ 294 ]

jQuery tips and tricks, for WordPress

Firebug's HTML view, using 257

Firebug, using 255

Firefox, using 255

Google CDN, using 254

great selectors, writing tips 258, 259

jQuery, interacting with DOM 256, 257

jQuery syntax, checking 255

latest version, using 253

multiple quotes, mismatching 255

No Conflict mode, staying in 254

Script API usage, confirming 254

selection filters 259

single quotes, mismatching 255

specific elements, adding to jQ script 260

specific elements, adding to plugin 260

Web Developer's Toolkit, using 256

WordPress editors workflow, controlling

259, 260

jQuery UI

effects, enhancing 203

jQuery UI plugin

about 194

bundled version, in WordPress 196, 197

CSS styles, including 202, 203

effects 196

features, including in WordPress site 200

including, from Google CDN 201

incluing, from WordPress'bundle 200

interactions 195

own custom theme download, loading up

202

requirements, choosing 197, 198

requirements, picking 197, 198

themes, selecting 199

widgets 194

JSON

.getJSON, using with Twitter 238

about 237

structure 237

using, with jQuery 238

L

LibraryThing

API's with JSON support, services 244

Loop functions

<?php endif; ?> 284

<?php endwhile; ?> 284

<?php if(have_posts()) : ?> 284

<?php while(have_posts()) : the_post(); ?> 284

loopStickies function 189

M

Mac, Apache, MySQL, and PHP See MAMP

MAMP

hosting provider, choosing 34 using 33

manipulation functions

.after(string) 69 apendTo(selector) 68 append(html & text) 68 before(HTML & text) 69 clone(selector) 70 empty(selector) 70 html(HTML & text) 69 insertAfter(selector) 69 insertBefore(selector) 69 prepend(html & text) 68 prependTo(selector) 69 remove(selector) 70 text 69

.wrap(html or functionName) 69 wrapAll(HTML) 69

.wrapInner(selector) 69

N

noConflict mode syntax 266

O

OAuth 239

P

PHP

syntax 12

PHP syntax, checking

concatenations 263 PHP shorthand, using 263

[ 295 ]

semicolons, checking 263

steps 263

posts

ajaxifying 233-236

prepend() function 68

preventDefault()function 76, 219

Q

que parameter 164

R

removeAttr() function 218

Rich Interface Application See RIA

RIA 177, 226

rotating sticky posts

creating 182-190

loop indicator, adding 190-192

S

sandbox 9

seamless event registration

about 124

cforms II hack 145, 146

client needs 124

ColorBox plugin, including 142

custom jQuery script, writing 143, 144

form, setting up 129, 130

goal 129

page creation, WordPress 3.0's custom

menu option used 130, 131

requirements 125

setting up, cforms II used 127, 128

seamless event registration, requirements

cforms II 126

ColorBox 125, 126

ThickBox plugin 126

WordPress plugins, installing 127

selector filters, examples

:animated 267

:eq(number) 267

:even 267

:first 267

:gt(number) 267

:header 267

:last 267

:lt(number) 267 :not(selector) 267 :odd 267

selector filters, WordPress

child filters 268, 269 child filter, syntax 268 content filters 268 content filter, syntax 268 form filters 269, 270 form filter, syntax 269 selection filter, syntax 266 selector filter 267

selector structure, syntax

comma 49

no space 49 space 49

setInterval function 189 shortcodes, WordPress

basic shortcode, creating 285, 286 setting up 284

snazzy navigation

creating 177-182

statement chaining 22, 80 success

function 246

T

template hierarchy, WordPress

404.php 274 archiv.php 274 author.php 275 category.php 274 date.php 275 home.php 274 page.php 274 search.php 274 single.php 274 tag.php 275

template tags, WordPress theme

bloginfo() 98 the_author_meta() 98 the_category() 98 the_content() 98 the_title() 98 wp_title() 98