Digging into WordPress » jquery

Using ‘$’ instead of ‘jQuery’ in WordPress

Chris Coyier — Mon, 05 Sep 2011 18:57:29 +0000

WordPress ships with jQuery (for longevity’s sake, as I write this WordPress is v3.2.1). To use jQuery in your plugins and themes “The Right Way” all you need to do is enqueue it (probably in your functions.php file):

wp_enqueue_script("jquery");

The tricky thing is this particular copy of jQuery is in compatibility mode by default. That means that the typical ‘$’ shortcut for jQuery doesn’t work, so it doesn’t conflict with any other JavaScript libraries that use the dollar sign also, like MooTools or Prototype.

Many plugin authors and theme developers are aware of this, and they use ‘jQuery’ instead of ‘$’ to be safe.

/* Normal jQuery you see everywhere */
$("#some-element").yaddaYaddaYadda();

/* "Safe" jQuery you see in WordPress */
jQuery("#some-element").yaddaYaddaYadda();

Here’s the thing… writing out ‘jQuery’ a billion times in a script makes it harder to read and bloats its size. Let’s stop doing that.

If the script is being loaded in the footer (which you should be doing in the vast majority of cases) you can wrap the code in an anonymous function (technically any IIFE) where you pass in jQuery to be mapped to $.

(function($) {
	
	// $ Works! You can test it with next line if you like
	// console.log($);
	
})( jQuery );

If you absolutely need to load the scripts in the header, you’ll probably need to use a document ready function anyway, so you can just pass in $ there.

jQuery(document).ready(function( $ ) {
	
	// $ Works! You can test it with next line if you like
	// console.log($);
	
});

Go forth and write nice looking jQuery!

Randomized Grid of Posts

Chris Coyier — Mon, 16 Aug 2010 15:31:11 +0000

I’m all about tinkering with different ideas to display posts with WordPress. After all, it’s just a bunch of data at our fingertips! WordPress makes it easy to output whatever we need. Not long ago we experimented with making a Thumbnail Based Archives. Now let’s build a Randomized Grid Archives.

1. Create a page template, publish a page

We need a totally unique page template to work with. So create a new one. You know, just make a file like grid-archives.php in your theme and put this PHP comment at the top and then WordPress will recognize it. Then create a new page, pick this template, and publish it. The name and content absolutely don’t matter, just put something there so you can recognize/find it later.

2. Loop it

This is pretty much the entire page. We’ll link out to an external stylesheet for styling. Then we run a Loop for 25 posts (in our demo, we also remove our link style posts). Each post is an anchor tag, and within, the post title, the post image thumbnail, and the excerpt.





	
	Grid Archives | Digging Into WordPress
	/css/gridarchives.css" />



	
		
		
			
				
				ID, 'PostThumb', true); ?>" alt="" />

3. Masonize

Notice in the HTML above we echo’d out a random number between 2 and 4 as part of a class name. The results classes will be: col-2, col-3, and col-4. These represent columns. So each link box is “randomized” based on this class name. Some post link boxes are 2 columns wide, others 3, others 4. Font sizing and thumbnail sizing also adjusts accordingly.

.box { margin: 10px; float: left; }
.box:hover { outline: 2px solid white; }
.box:hover .title { background: none; }
.box:hover .ex { background: none; color: white; }
.box:hover img { opacity: 0.4; }

.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }

.col2 img { max-width: 80px; float: right; margin: 0 0 2px 10px; }
.col3 img { max-width: 100px; float: left; margin: 0 10px 2px 0; }
.col4 img { max-width: 120px; float: right; margin: 0 0 2px 10px; }

.title { background: #237abe; color: white; display: block; padding: 10px; overflow: hidden; }
.col2 .title { font-size: 16px; }
.col3 .title { font-size: 18px; }
.col4 .title { font-size: 20px; }

.ex { background: white; color: #222; display: block; padding: 10px; }
.col2 .ex { font-size: 11px; }
.col3 .ex { font-size: 12px; }
.col4 .ex { font-size: 13px; }

So each of those post link boxes is just floated to the left. That’s going to make a pretty ragged and nasty layout all by itself, because each box will be a different height depending on the length of the title and excerpt. No problem though, we’re going to rearrange the boxes using the jQuery Masonry plugin by David DeSandro. We’ll just call jQuery, the plugin, and the write a quick script to call it. This can go pretty much anywhere on the page. Typically jQuery is run on DOM ready, but in this case we are waiting for the window’s load event, because we want to wait for the thumbnails to load before masonizing.

Enjoy!

Here is ours. Let us know if you play with this on your own site at all.

Make an Infinite More-Posts Section

Chris Coyier — Wed, 18 Nov 2009 20:32:23 +0000

The goal here is to make a list of posts in the sidebar that show a number of recent posts. There will be a button you can click which will replaces those links to recent posts with older posts, AJAX style. You can keep clicking the button and keep getting older and older posts. On this site, we currently show 5 recent posts. So this little section shows the 5 posts after that, then clicking the button once will show 5 more older than that, and so on.

1. Create a Page Template for “Additional Posts”

All this page template does is display a list of 5 posts. Totally raw and unstyled. No DOCTYPE, no footer, no nothing.

The only thing special about this template is that it pulls down the URL parameter “offset” and scrubs it. The query_posts function will use that offset number to return posts older than that number.

2. Make sure jQuery is loaded.

We’re going to use the powers of jQuery to do this, so make sure it’s loaded. Here is a simple way to get that done, make sure this is above the wp_head() function.

I often like to load it directly from Google. To do that, see here.

3. Make a new script (or append to your already exisiting script)

We’re going to write a little JavaScript here, so this is where we’ll do that. Call this AFTER the wp_head() call so it will surely run after jQuery is loaded.

4. Make a home for the list of posts

On our site, we are putting this in our sidebar (sidebar.php file).

More Posts
... loading ...
Get more!

The #postContainer div will be the target for loading up the new list of articles. The #another link will have a click handler tied to it which will trigger the AJAX load.

5. Create a new page with your new page template

Go ahead and publish a new page. It doesn’t matter what the title is, just select your new page template from the page template dropdown menu. Click the View button to make sure it loads up a list of posts OK. Note the URL of this page.

6. Write JavaScript to do AJAX load

We’ll put jQuery in noConflict mode here just to be super safe.

var $j = jQuery.noConflict(); 

$j(function(){

    var offset = 5;

    $j("#postContainer").load("/additional-posts/?offset="+offset);
    $j("#another").click(function(){
        
        offset = offset+5;
    
        $j("#postContainer")
            .slideUp()
            .load("/additional-posts/?offset="+offset, function() {
                $j(this).slideDown();
            });
            
        return false;
    });

});

In plain English:

When the DOM is ready…
Set variable offset to 5
Load the contents of the URL /additional-posts/?offset=5 into the element with ID postContainer
When the “more” button is clicked…
Increment the offset variable by 5
Slide up the container
Load the URL again, with a new offset parameter
When done, slide the container back down

That’s it!

For a demo, check out our current sidebar on Digging Into WordPress. Thanks to Erik Lundmark for the idea.

Password Protect More Than the_content()

Chris Coyier — Wed, 19 Aug 2009 00:59:47 +0000

WordPress has the ability to easily password protect the content of any Post or Page. Right over by that big juicy blue “Publish” button, there is an option for Visibility. Click edit, and you have the option to make it password-protected and set a password.

What happens now?

By default, WordPress will prepend “Protected: ” to the title of the post, and replace the content area (and comments area) with a default message:

This post is password protected. To view it please enter your password below:

After the message, a form prompting the user to enter a password. It looks like this:

Shortcomings

Like we said above, what actually gets “protected” is the content of the post and the comments for the post. In the actual theme files, that boils down to:

Anything else is not protected! This includes pulling and displaying custom fields for that Post. Theoretically, this makese sense, as WordPress works by functions, and cannot be expected to know what’s going on in every single custom theme. However, custom fields can potentially contain important information that you might want to be hidden via password protection.

Here is a little code snapshot from the single.php template right here on DiW:

– UPDATE –

The easiest possible way to password protect additional areas is with this simple function:

Thanks Jay!

The Password Form

This is the form code that gets generated for a password protected post:


This post is password protected. To view it please enter your password below:
Password:

The ID’s values for you will be different, but that’s the gist of it. This is a bit of a tangent, but let’s say you want to style this form. Good luck, form itself nor the labels or inputs have any class names or ID’s that you can latch onto to style while not potentially affecting other forms.

I thought about the body_class function for a moment, thinking perhaps password protected posts at least get a class for this, but no dice.

I think this is a problem… WordPress should get us some hook here!

Hiding more!

Fair warning, this is a little hacky, as it’s going to rely on JavaScript, which is client side technology that can be turned off, rather than server side technology which cannot.

There is one thing that is unique in that password form code above (hence the tangent), that we can look for with JavaScript. The idea is this:

Look for password input
If it is present…
Hide other stuff.

We’ll use jQuery for this, because it makes it easy and that’s just how I roll. The example below is taken from a site I worked on recently where I was displaying an audio track with custom fields, which was displaying even when the post was protected.

if ( $('input[name="post_password"]').length > 0 ) {
    // hide stuff
    $(".audioplayer").hide();
}

Dealing with that Title

One of the other potential annoyances with password-protected posts is how it appends “Protected” to post titles. This isn’t an option, so removing it is a matter of adding a filter to the the_title function. Add this to the functions.php file:

function the_title_trim($title)
{
    $pattern[0] = '/Protected:/';
    $pattern[1] = '/Private:/';
    $replacement[0] = ''; // Enter some text to put in place of Protected:
    $replacement[1] = ''; // Enter some text to put in place of Private:
    
    return preg_replace($pattern, $replacement, $title);
}
add_filter('the_title', 'the_title_trim');

If it’s not obvious, this will also remove the “Private: ” from being appended to private post titles.

Making an Expanding Code Box

Chris Coyier — Thu, 09 Jul 2009 15:49:56 +0000

On blogs that like to share snippets of code like this one, it is common to use the

 tag to wrap the code so that the spacing/indenting is maintained and long lines do not wrap. While this is desirable behavior, it can be undesirable to have those un-wrapped lines break out of their containers awkwardly and overlap other content.
On Digging Into WordPress, we use JavaScript (jQuery) to solve this problem. One solution could potentially be to use only CSS and expand the width with something like pre:hover, but JavaScript is more elegant:

Expands only when needed
Expands only to as wide as needed
Expands with animation



The CSS
The 
 tag is naturally block-level, so this is what we’ll use to style our code blocks and hide the overflow.
pre { 
  background: #eee; 
  padding: 10px; 
  border: 2px solid #c94a29; 
  overflow: hidden;
  margin: 0 0 15px 0; 
  width: 563px; 
  font-family: Courier, Monospace;
}
The jQuery
The real trick here is that the code blocks are wrapped not only in 
 tags but also in  tags. The code may ultimately get cut off by the pre block, but that inner code tag still has a natural width that can be measured by JavaScript. Here is the logic:

When a pre block is hovered…
Measure the internal code blocks width
If that width is wider than the pre block…
Expand the pre block to be wide enough to accommodate
On mouseOut, return the pre block to its original size

$j("pre").hover(function() {
	var codeInnerWidth = $j("code", this).width() + 10;
    if (codeInnerWidth > 563) {
		$j(this)
			.stop(true, false)
			.css({
				zIndex: "100",
				position: "relative"
			})
			.animate({
				width: codeInnerWidth + "px"
			});
		}
	}, function() {
			$j(this).stop(true, false).animate({
				width: 563
		});
	});
Couple of things of note here. The “codeInnerWidth” is calculated on every hover, because different blocks will have different inner widths. The width of the pre blocks are hard-coded though. Calculating that on every hover leads to problems like fast mouse-in-mouse-outs expanding the box and re-calculating it’s size to be larger than it was originally. The stop function prevents queuing up of animations. Also note the $j being used is just because we are using jQuery in noConflict mode:
var $j = jQuery.noConflict(); 
Demo
None of the code blocks so far have been long enough for you to see it in action, so here is a demo block (RSS readers, obviously you need to see this on our site to see it work).
This is a really long line of code that is even longer than the world super-cala-frag-alistic-espee-ala-dosis

© 2009 Digging into WordPress | Permalink | 25 comments | Add to del.icio.us | Post tags: JavaScript, jquery, tricks



Use Google-Hosted JavaScript Libraries (…still the Right Way)
Chris Coyier — Thu, 25 Jun 2009 21:05:04 +0000
I previously posted on how to include jQuery in your WordPress theme the Right Way. That is, to use the wp_register_script function to register the script first. It’s literally a one-liner in your header.php or functions.php file, but by default, it loads the internal version of jQuery that ships with WordPress. 
It’s all the rage these days (for good reason), to use Google-hosted JavaScript libraries. They even encourage it. If you’d like to hop on the bandwagon, you can do so and still use the proper wp_register_script function. 

UPDATE (December 2011)
As of WordPress 3.3, this is the best way to do it, using the proper hook (thanks David Hollander):
//jQuery Insert From Google
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}
Just add this code to your functions.php file:

if( !is_admin()){
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
   wp_enqueue_script('jquery');
}

That last line there gets the script queued up for you so you don’t need to do it again in the header. Assuming you have the proper wp_head(); call in your header, you’ll be all set! Note that we have wrapped this in a conditional tag to prevent that action on Admin pages. Because this Google-hosted version of jQuery is not in noConflict mode, it interferes with the rich text editor in the admin. This prevents that.
Remember, the reason for all this is to ensure that other WordPress stuff (plugins…) are aware that the script is already loaded so don’t go around loading another copy. Loading two copies of a JS library is just bad news.
Also, I always use jQuery as an example but of course this would work with any popular JavaScript library. For example, the MooTools path at Google is:
http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js
Google’s AJAX Developer’s API Guide is here.
ALSO… there are a crapload of scripts all ready to be queued up for your use in WordPress. See the full list here. 
David wrote in to tell us that he was working in an HTTPS environment, and he used this alteration to ensure the URL for the Google-hosted version of jQuery was properly served from HTTPS when needed:
if (!is_admin()) {
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http".($_SERVER['SERVER_PORT'] == 443 ? "s" : "")."://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
   wp_enqueue_script('jquery');
}

© 2009 Digging into WordPress | Permalink | 22 comments | Add to del.icio.us | Post tags: functions, header, jquery



Including jQuery in WordPress (The Right Way)
Chris Coyier — Wed, 03 Jun 2009 01:58:16 +0000
If you want, you can just download jQuery, put it on your server and link to it from your header.php file in the  section. But that can cause you grief. For one thing, some plugins use the jQuery library, and they are going to load it as well. This can cause problems. How was your plugin to know you already had it loaded?
Another thing is that WordPress already includes a copy of jQuery. Here is how you can load up jQuery in your theme the smart (and intended) way. Put the following code in your header.php file in the  section:




Your theme probably already has the wp_head function, so just make sure you call the wp_enqueue_script function BEFORE that. Now you are all set to call your own jQuery JavaScript file, AFTER the wp_head function.

You are ready to rock, but there are still some considerations. For example, safeguarding yourself from the future possibility of conflict with other libraries. You really shouldn’t be using multiple JS libraries to begin with, but… better safe than sorry.
To be super-safe, you can put jQuery into “no conflict” mode and use a different shortcut for jQuery. In this case “$j” instead of the default “$”. The standard “$”, for example, can conflict with Prototype. Here is an example of a safe bit of jQuery JavaScript:
var $j = jQuery.noConflict();

$j(function(){

    $j("#sidebar li a").hover(function(){
    	$j(this).stop().animate({
    		paddingLeft: "20px&"
    	}, 400);
    }, function() {
    	$j(this).stop().animate({
    		paddingLeft: 0
    	}, 400);
    });

});
Can you recognize this bit of code? We use it right here on Modern WordPress to do the cool “link nudging” in the sidebar!
Translations

Belorussian translation


© 2009 Digging into WordPress | Permalink | 59 comments | Add to del.icio.us | Post tags: header, jquery