jQuery & other updates

This week in terms of my JavaScript studies, I focused primarily on jQuery. It was nice to be able to look at jQuery again after the past couple weeks, and find that my understanding of the library feels much more secure now that I have a better foundation in JavaScript overall.

In particular, I used Code School’s Try jQuery course, which included a combination of video mini-lectures and interactive exercises after each video to reinforce the concepts. It focused on the syntax of jQuery as well as some common features and practices that will be useful in future jQuery projects.

I also got the chance to implement some jQuery in my WordPress theme as I continued work on that this week. I wanted one line of code that would target all of the td elements in a widget calendar that were followed by an a element — basically I wanted to be able to select any date on the calendar that was also a link, but I wanted to style the parent element (the td), not the child (the a), so CSS selectors could only get me the opposite of what I was trying to do. This ended up being a bit more of a headache than it probably needed to be — mainly because I discovered that I was using the jQuery method prev() when I should have been using closest(). prev() finds the previous sibling elements, and as mentioned, I was trying to select the closest parent. In the end, this was my code:

$(document).ready( function() {
	$('.widget_calendar').find('td > a').closest('td').addClass('date_with_link');
});

Even then, I had some difficulty getting it to implement correctly into my WordPress theme. I discovered two things about WordPress themes and jQuery:

  1. When enqueing a script that uses jQuery into functions.php, you need to be sure to pass ‘jQuery’ into the array() part of the enqueuing code
  2. WordPress by default doesn’t recognize the shorthand use of $ for jQuery; therefore you need to either use the long version of ‘jQuery’ substituted for all dollar-signs, or, as I ended up opting to do (based off of a suggestion on StackExchange), you can wrap your jQuery code in a function that accepts the $ sign as it’s parameter, and ends with (jQuery)

So in the ACTUAL end (for real this time), my code looked like this:

( function( $ ) {

$(document).ready( function() {
	$('.widget_calendar').find('td > a').closest('td').addClass('date_with_link');
});

} ( jQuery ));

Besides this one tiny example (that took up a really disproportionate amount of time for what I was trying to accomplish, but did at least teach me some things along the way!), I also looked through some more chapters in Beginning JavaScript, read an article on JavaScript Objects in Detail, watched chapter 11 on JavaScript Libraries (focusing on the jQuery discussion) in JavaScript Essential Training at Lynda.com, and watched some more videos from jQuery Essential Training.

I haven’t gotten to look at the Codecademy 5 Basic projects exercises yet, mostly because I opted to spend some more time working on my WordPress theme. This week I focused on cleaning up the styling of the sidebar and footer areas, in particular. I’ve also started some work on a re-design of my personal website so that I’ll hopefully be able to add in sections to better describe and outline the projects in my portfolio (including this custom WordPress theme, once it’s completed).

Leave a Reply

Your email address will not be published. Required fields are marked *