Organize your WordPress Theme in 3 Easy Steps

Like many developers out there, I do my best to write clean and manageable code. Read on to find out three simple steps to make your WordPress themes better than ever.

I make an effort to keep my code clean for two reasons, ease of use and maintainability. It’s far easier to fix bugs or make updates to the code if it’s clean. It will take much more time if six months or a year from now you need to re-examine your code to figure it out, rather than just fixing the issue. I also am a firm believer in the saying “if you’re going to do it, do it right the first time.” and by proxy “make it right”. Every developer sees some “bad code” at some point, sometimes they may have even written it. I feel it’s important to correct wrongs as you see them and improve your own code as you go.

That’s no easy task, but WordPress makes it a little easier when it comes to theme development. Here’s three steps you can take to make your themes a little better than before.

Step One: Proper Template Directories

This is more of a general step you can take, but still useful, and it’s as simple as creating folders to organize your files in. Many developers like to have seperate folders for JavaScript, CSS, and images. These are the folders that I use to keep everything in its place:

  • /theme-directory/css/
  • /theme-directory/images/
  • /theme-directory/js/
  • /theme-directory/includes/

That last one is important. Anything custom that i’m building for the theme, such as a meta box or option page for the admin section of WordPress, would live in this folder. I used to put some front end PHP in there as well, but more on that later.

Step 2: Registering your CSS and JavaScript

WordPress comes with several functions you can use to queue and load your CSS and JavaScript files. You can set a version number for the files, and even tell WordPress that a specific file requires a previously queued file before this one loads (for example, requiring that jQuery is loaded before a jQuery plugin your theme needs gets loaded).

Step 3: Use WordPress Template Files!

WordPress is built around themes and plugins, and it’s really easy to make your theme easy to manage if you use what has been given to you. The best example of this is the function get_template_part(). This function allows for you to split your template files into smaller more manageable blocks of code. For example, you can make a loop.php file that you can use in all of your template files and include it simply by calling get_template_part(“loop”). It’s just that easy! You can use this function to display any file you make in the main template directory, the possibilities are endless.

That’s all there is to it. Check out the following links for more information.

wp_register_script
wp_deregister_script
wp_enqueue_script
wp_register_style
wp_enqueue_style
get_template_part

Where to Start with jQuery Selectors

With jQuery there are many ways to select elements. We are going to cover two of the most popular selectors id and class.

jQuery uses the same selectors as CSS. This makes it very easy to select the elements you want to work with. The two most commonly used selectors are id and class. So before we start make sure you have your jQuery setup and the $(document).ready() function on the page.

Selecting by ID

This is best used when you want to target one specific element. The selector is exactly the same as what you would use to set styles for the particular element in CSS.

Selecting element with CSS and setting some styles.

#youridhere {
	display: none;
}

Now selecting the same element with jQuery and adding CSS styles.

$("#youridhere").css("display","none");

Selecting by Class

With the class selector you can select multiple elements at once. jQuery deals with multiple elements in a very simple manor. It returns an array of jQuery objects. With the way jQuery is designed it will automaticaly apply anything you do to your selection to all elements without having to loop threw the results.

Lets take a simples example of hiding all elements with a class of hide. To do this with CSS we would create the class in our style sheet like so:

.hide {
	display: none;
}

To do this same thing to all the elements with the class of hide in jQuery. You would use the following statement:

$(".hide").css("display","none");

This should get you started on the path of using jQuery in your projects. To read more about the selectors your can use in jQuery check out the documentation.

jQuery's document.ready(), What is it and Why is it Useful?

The document.ready() function is the first thing anyone should learn about jQuery. This function will allow you to take all that ugly behavioral javascript out of your markup.

Lets face it, nobody likes all those javascript:void(0); in the anchors href. As for that body “onload” function call, can that too, its no good. All that ugly code in the markup is just plain bad news.

With jQuery and document.ready() you can put all your event driven javascript in one file, making it easy to maintain and upgrade later. The document.ready() function works just as the name implies. Document refers to the DOM, or Document Object Model, while in this case “ready” refers to when the DOM is registered by the browser.

Before we start, make sure you have jQuery included on your page. For a quick refresh on how that’s done, click here.

Using the document.ready() function is really easy. Check out this example:

	$(document).ready(function(){
		//insert code here
		alert("this will flre when the DOM is loaded.");
	});

As with most code, there is a shorthand version of the document.ready() function. In jQuery, any function passed to the jQuery object will be bound to the document.ready() function, as seen below.

	$(function(){
		//insert code here
		alert("this will work the same as the code above.");
	});

This is how you would add a click event to all the anchor tags on your page using the document.ready() function.

	$(document).ready(function(){
		$('a').click(function(){
			alert("you clicked me!");
		});
	});

That’s all there is to it. Are you having an issue with jQuery, or any code you need some help on? Have an idea for an article you’d like to see? Feel free to leave a comment with any questions or suggestions.

jQuery 101: Adding jQuery to Your Website

Everyone has to start somewhere. So lets get you setup to begin learning jQuery. The first thing you will need to do is get jQuery setup and running on your site. Now let’s get started.

The traditional jQuery Setup

1. Download the files

Make a trip over to the jQuery site and download the latest version or follow this link to the download page. You will want to grab the minified version of the code to save on bandwidth.

2. Add the script to your site

In the root folder of your site make a new folder called js. Then add the freshly downloaded jQuery script file to this folder. With the files in place you will need to add the script to your pages.

Open up one of you pages on your site and make you way to the head section of the page. Now copy the script tag below and paste in the head area of your files.


Once your script tag is in place you are ready to start using jQuery.

Using hosted files from Google

Google offers a great service. They host several of the most popular javascript library’s. This works well for sites that want to save on bandwidth or always have to latest code. Google offers several different ways to link to the script files. We are just going to use the direct link method. For more on the options of linking to these files check out the Google AJAX Libraries API.

1. Choose your version

There are a few options you have for choosing what version of jQuery you would like to link to. You can link to the main version of 1. This will keep your code updated to any subversions of 1. You could link to 1.3 this would keep your site running on the latest subversion of 1.3. Lastly you can link directly to the version you want to use.

Link to current subversion of version 1

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Link to current subversion of version 1.3

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Link to current version 1.3.2

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Link to older version 1.3.1

http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

2. Add the script to your site

I recommend you link to the current version that you know works with all of your code. So below is the script tag that you can place in the head section of your site. The script tag loads the current version as of this posting jQuery 1.3.2.


This will get you started on your path to learning jQuery. Look for more jQuery basics to come and also check out some of the resources listed below.