Design, Development, and Consulting » Wordpress

Three Steps for Using JQuery in Your WordPress Theme

Peter — Mon, 31 May 2010 05:58:39 +0000

This is a quick post on using Javascript and the JQuery framework in particular within your WordPress theme. It’s quick and pretty painless. This is just for regular themes, not admin themes, plugins, or posts.

Step 1:

Load JQuery and your custom JS onto your page with wp_enqueue_script(). It’s better to use wp_enqueue_script than hard coding it into your page. This is because WordPress comes with JQuery, so you won’t have to worry about updating JQuery as new versions come out. WordPress will do the work for you. Make sure wp_enqueue script is before wp_head(), or it won’t work.

Here’s a snippet from my template file (let’s say index.php). I’ve created my custom JQuery functions in my themes “scripts” directory with the file name “custom-js.js”. You also have to make up a handle or name for your collection of custom JQuery functions. I called mine custom:

```
    wp_enqueue_script('jquery');
```

    wp_enqueue_script('custom', get_bloginfo('stylesheet_directory') . '/scripts/custom-js.js');

```
    wp_head(); // WP API Hook
```
```
?>
```

get_bloginfo is your friend. If you hard code your themes directory into your code anywhere, you won’t be able to share it with others, and you’ll break everything if you ever move hosts or just directories.

Here’s another example. Let’s say you want to use Google Maps on your page. Here is the line of WP code that makes that possible:

    wp_enqueue_script('googleMaps', 'http://maps.google.com/maps/api/js?sensor=false');

```
?>
```

Finally, if you just want plain JS with no JQuery, you can simply leave out the line that calls JQuery but leave in the line that enqueues your custom functions. WordPress comes with a lot of other JS goodies besides JQuery. Scroll down to the bottom of this page to look at all the other stuff included with WordPress.

Step 2:
Write your JQuery. The only thing you have to look out for is that wp_enqueue_script() calls JQuery in no conflict mode. This means that $ will not work as a shortcut for JQuery functions. There are two simple solutions.

Define another shortcut for JQuery functions.
Use a wrapper around your JQuery code.

Here is how to define a new shortcut for JQuery functions, $j in this case. The script shown is a very effective test to see if you’ve got JQuery working in your theme. It’s a little blunt, but it’s effects are hard to miss.

```
var $j = jQuery.noConflict();
```
```
$j(document).ready(function(){
```

 $j("body").html("Your page is belong to us... just kidding, but you can use JQuery now.");

```
});
```

Here is how to use a wrapper in order to use the default JQuery shortcut:

```
jQuery(document).ready(function($) {
```

    $("body").html("Your page is belong to us... just kidding, but you can use JQuery now.");

```
});
```

Make sure you pay attention to all the curly brackets and parentheses. If the long and multiple parenthetical expressions annoy you, go check out Lisp.

Anyway, the second method is nice, since it let’s you use previously written code easily.

Step 3:

Enjoy!

Creating your first WordPress theme – Part 1

Peter — Wed, 26 May 2010 19:26:46 +0000

Content Management Systems and WordPress is so powerful because it allows site owners to update their sites efficiently and to customize their sites and their CMS experience. WordPress themes control both the look of a site and the options a site owner has in terms of customizing this look.

That sounds pretty good and rather vague. It’s hard to describe what you can do with WordPress themes, since they can do a lot. It’s like trying to describe all the things you can do with a nail. It all depends on how you use it.

In light of this, it seems like the best thing to do would be to go through an example of building a WordPress theme. I’ll go through a theme as I develop it, and I’ll try to build it starting at the simplest level and working to progressively more complicated iterations.

Before we begin, there’s a few things that I’m going to assume:

You’ve got WordPress installed on your site. It’s usually pretty easy to install WordPress.
You can access the files in your WordPress install.
You can access your WordPress admin panel.

You can usually access your files through FTP, SSH, or even your web host’s control panel. On Windows I usually use PuTTY for SSH. I’ve heard good things about FileZilla for FTP, but I’ve personally never tried it. You can edit your files with anything from Notepad (ugh) to Notepad++ (yay!) to Dreamweaver (for all the flack Dreamweaver gets, it sure can speed up a lot of things), Emacs (hang on, let me grow a beard and put on my glasses)…

Actually, in spite of the beard and glasses joke, if your host offers a Unix or Linux shell, then working on your pages with Emacs can be a great pleasure. I mean you have access to not just your files, but also to your files through one of the most powerful “word processors” in the world. No more worrying about whether your files are on your desktop, laptop, smartphone, or smartbrain. Anyway, Emacs is fun and free (free as in hair, and yanking it out in frustration while you pound your head against the keyboard trying to understand what a Lambda expression is). No, but seriously, using Emacs through SSH courtesy of your web host is fantastic stuff, and lets them work a little for the money you give them. I will shamelessly mention that I use Dreamhost, and so can you by clicking on that link that will earn me money when you sign up.

Ok, you’ve got WordPress installed, and you can access the files on your server. Let’s start building a theme.

The way WordPress works is that it runs a bunch of PHP create the HTML for your web pages. These PHP pages will often look into an associated MySQL database for info. The PHP will also look (ok, I’m definitely anthropomorphizing) in specific directories for certain things.

One of these special directories contain all the themes that you have installed. Each theme is in its own folder, and you can pick the theme to use through the WordPress admin panel.

You can find the theme choices on the left side of the adminn panel under “Appearance”:

The directory that the themes you can pick from are in is:

/wp-content/themes/

Each directory in themes is a theme you can use. Understanding how WordPress knows that the contents of these directories are themes will help us create our first theme.

WordPress looks at the main stylesheet in each directory, and from this style sheet it reads the information about the theme. You have to know that convention that for WordPress the main style sheet is a file called, “style.css”. So the simplest theme is just a style sheet in a directory. Let’s see how to make one of these themes…

Let’s look at this in practice. Here’s is what the themes page looks like when /wp-content/themes only has the Classic theme in it. In other words /wp-content/themes only has a directory named “classic” in it, and the index.php file:

As you can see, I’m currently redoing Evergreen Ice Sports web page. Soon it’ll look nicer and be easier to maintain for the site owners. Anyway, as you can see currently Classic is the only available theme.

If we create a directory with only a style sheet called “style.css” in it, we can use that style sheet to:

Tell WordPress that the directory the style sheet is in contains a WordPress theme.
Tell WordPress that theme is just like another theme with a few modifications (in other words the theme is a child theme).

Ok, let’s step through this and then discuss it. First create a directory called, “mytheme” in wp-content/themes . Now reload the Manage Themes page in the admin panel to see what happened:

This shows you that I was telling the truth about WP looking in the wp-content/themes directory for the available themes. It looked in your empty directory called mythemes, and since it the information about each theme is supposed to be in the main style sheet, and there is no style sheet in mythemes, we have a broken theme.

Let’s add a stylesheet over at wp-content/themes/mytheme/style.css. This style sheet will contain all the necessary information to create a WordPress theme. Here are all of the contents:

```
/*
```
```
Theme Name:     My Theme
```

Theme URI:      http: //netlumination.com/

Description:    Child theme spawned by the Classic theme

```
Author:         Peter Ajtai
```

Author URI:     http: //peter-ajtai.com/

```
Template:       classic
```
```
Version:        1.0
```
```
*/
```

Yup, that’s all it takes, and yeah replace my info with your info, but make sure that line 7 stays untouched. The file contains only CSS comments. WordPress, reads these comments, and when it sees line 7, that says “Template: default”, it understands that mytheme is a child theme of the theme that is in the directory called, “classic”. Let’s reload the Themes admin panel and activate this new theme.

You can see how WordPress used the information in the CSS file to fill in the information about our new theme. You’ll notice that there is no screen shot for My Theme. We’ll do this soon. Anyway, click on “activate” to…. uh….. activate the theme. Since MyTheme is a child of Classic, this means that MyTheme inherits all the characteristics of Classic. We can add to or modify these characteristics, but we haven’t done that yet, so right now our theme should look identical to Classic. Visit your site’s homepage to check on this……

Whoops!

Our page looks like it has no styles! I guess I lied. MyTheme inherits everything from Classic except the style sheet. That’s a little odd right? Especially if you’re used to dealing with inheritance in things like children and object oriented programming, but no matter, it’s easier to fix than your…. well, than, many things. So, let’s grab the style sheet from the classic theme using the line:

```
@import url("../classic/style.css");
```

So now our entire wp-content/themes/mytheme/style.css file looks like:

```
/*
```
```
Theme Name:     My Theme
```

Theme URI:      http: //netlumination.com/

Description:    Child theme spawned by the Classic theme

```
Author:         Peter Ajtai
```

Author URI:     http: //peter-ajtai.com/

```
Template:       classic
```
```
Version:        1.0
```
```
*/
```
```
@import url("../classic/style.css");
```

Ok, now go and check on how your home page looks…. Just like classic, huh? Well, that’s not very interesting, let’s make things a very tiny bit more interesting by adding one more line to prove that we have a theme that uses default but has some of it’s own rules:

```
/*
```
```
Theme Name:     My Theme
```

Theme URI:      http: //netlumination.com/

Description:    Child theme spawned by the Classic theme

```
Author:         Peter Ajtai
```

Author URI:     http: //peter-ajtai.com/

```
Template:       classic
```
```
Version:        1.0
```
```
*/
```
```
@import url("../classic/style.css");
```
```
body {
```
```
	background-color:blue;
```
```
}
```

Ok, that was 3 lines, but I could have made it one line. Does it work? Yup. Does it work with all themes…… uh, no. For example, if you try the same thing with the Default theme, you’ll notice that some of the background images that are used in the Default theme will not be used in your child theme. This is because the CSS for these background images are created by PHP that looks for them in the wrong directory. It’s easy to fix, but it illustrates why I’m using so many words to explain this one simple thing of how to make a child theme. If you know how all of this works, you can probably track down these problems. If you don’t know how it works, you’re lost. But these details aren’t important right now, since we want to create our own theme, not look for weird little leaks in the inheritance abstraction for WordPress themes.

You’ve just created your own WP theme! Don’t worry it gets better. We’ll do stuff that’s more useful. We’ll push pixels around around like they’re not our boss. We’ll meld code to our mind’s desire, but you’ll have to wait for the next part of this series for that… until then we’ll….. well, we’ll see you later.

Using Multiple Loops in WordPress with query_posts() and get_categories()

Peter — Tue, 05 May 2009 20:12:53 +0000

This is a tutorial to demonstrate how to show entire posts from multiple categories in WordPress. This would be especially useful for blogs that contain very short posts like a photo with a short description. This is a very simple problem and solution, but I didn’t find many posts describing how to do it, so I thought it may help a few people out.

In some blogs, it can be useful to show entire posts from multiple categories on one page. For instance for a recipe blog you may want to list the name of each of your recipe categories and the recipes in each of those categories. This would look something like:

Breakfast Recipes
- [Eggs Benedicts Recipe Post]
- [Pancakes Recipe Post]
Lunch Recipes
- [Grilled Cheese Sandwish Recipe Post]
Dinner Recipes
- [Fettucini Alfredo Recipe Post]
- [Lasagna Recipe Post]

WordPress uses The Loop to display posts. In this case we want to first retrieve all the categories from the database, then we want to cycle through each category and use The Loop to display all the posts in that category.

For most pages on your WordPress site, the url of the page will contain a query string which will dictate which posts are shown with The Loop. We can overide any existing query string using the query_posts() function to display the specific posts we want. The nice thing is that we can use the query_posts() function multiple times in order to run The Loop multiple times on the same page.

There are several ways of using multiple Loops in WordPress. With using multiple query_posts, the only trick is that you should save and reset the original query for the page. This is so that later down the page (like in the Sidebar) you can use all the functions that apply to the page you’re on and not on the last query_post you performed. The query is stored in $wp_query, so we can use before the Loops to save the query, and we can use at the end of the Loops to retrieve it. This is like in Multiple Loops Example 2 from The Loops WordPress page.

There are basically two important parts of this loop. First we must create an array that lists all the categories. Then we cycle through that array and retrieve all the posts from each category, one category at a time. To create an array of all the categories we’ll use get_categories(). This simply returns an array with all the categories. Now, this array has a lot of information associated with it. To get an idea of what it looks like you can always print the array out in readable form with . There’s information like the name and category ID for each category. We’ll make use of those.

To show the posts in a category we have to use query_posts and an identifying characteristic of the category we want. The name of the category isn’t always the best solution. For example if you have a category called, “Breakfast & Juices,” the ampersand will trip the PHP up, so we’ll just use the ID number of the category. If we make our category array like this: . Then we can retrieve the category ID from the created array with category->cat_ID. We can retrieve the name of the category with $category->name.

Finally, putting everything together we get:

```
  
```
```
  foreach($categories as $category)
```
```
  { ?>
```
```
    name); ?>
```
```
    cat_ID"); ?>
```
```
    
```

      [ YOUR POST DISPLAYING CODE GOES HERE ]

```
    
```
```
  } ?>
```

If you want to see what happens if you don’t reassign the original query just remove the last line. It will probably make your sidebar say something odd… though the particulars will depend on the theme you’re using.

This solution will work if you do not have child categories. If you do have child categories (an example would be Ice Cream category in the Deserts parent category), then you will get repetition of posts, since this will display all the posts from all parent categories then the posts for child categories. There are several ways to resolve this. The simplest way is to only display parent categories and not child categories. To do this we must check if a category is a child before we display it’s posts. To do this we’ll use $category->parent. This returns the parent of the category. If it returns nothing, or false, we know that the category is not a child but a parent. We’ll put an if statement that only proceeds if there is no parent of the category inside the foreach loop. Here we go:

```
foreach($categories as $category)
```
```
{
```
```
  if(!$category->parent)
```
```
  { ?>
```
```
    name); ?>
```
```
    cat_ID"); ?>
```
```
    
```

      [ YOUR POST DISPLAYING CODE GOES HERE ]

```
    
```
```
  } ?>
```
```
}
```

How to SEO header meta keywords and descriptions with WordPress

Peter — Fri, 24 Apr 2009 18:23:26 +0000

The default WordPress installation does not produce either a description or keywords meta tag in the header. There are plugins you can use to solve this problem, but why use a plugin when you can solve the problem with a few lines of code? Writing the code yourself with teach you about WordPress, PHP, and XHTML. This will enable you to solve future web site problems easier. Additionally, you’ll have one less plugin to keep track of, giving you a leaner, meaner, WordPress installation.

After a brief introduction, I’ll delve right into the code, and show you how to add these meta tags to your pages by modifying the header.php file of your theme.

While the description and keyword meta tags are not as important for search engine optimization (SEO) as they used to be, they are still important. The description is often used verbatim as the wording under a link to your site by many search engines. Keywords may be less important, since search engine now often rely on the content of your pages, but it can be nice to include them for that extra little boost in SEO and as a reminder to yourself of what words you are trying to optimize a particular page to.

This solution will write out custom keywords and description for all you WordPress pages and individual blog posts. We will make use of the “Custom Fields” area for your posts and pages in the WordPress administration panel. This will allow us to customize each post and page, and the meta information will be readilly visible in the administration panel when we look at a post or page.

The first step is to create two new custom fields, one for the keywords and one for the description. Open your Worpress administration panel and click to edit an existing post or page. Under the Custom Fields area choose “Enter New” and create a field for keywords and a field for the description:

I called mine “seo-description” and “seo-keywords”:

Now, you can go ahead and fill out the meta information for each post and page. I’d suggest only filling out the description and keywords for one post. You can use this one as a test post. Once you see that everything is working correctly, you can go back and fill out the information for all the other pages and posts. Okay, now we’re going to start to add in the code that will make everything display correctly. We’re going to be working witht he “header.php” file of you current theme. So, go ahead and open up the file…. You can check what them you are using in your admin panel. Just click on Appearance >> Themes. Under “Current Theme” there’ll be a line that says, all of this theme’s files are located in, “themes/blah-blah.” Go to that directory and fetch header.php through FTP or just use the built in editor in the admin panel. This is found at Appearance>>Editor. Under “Theme Files” click on “Heder (header.php).” We want our meta information to appear in the header, usually right below the title. The end result we are looking for is something like this:

Your Blogs Title

Let’s start with the description. First we’ll check whether the page or post has a custom description. If it does, we’ll display that. If it doesn’t we’ll just display your blogs tagline. The trick here is that in WordPress there is a get_post_meta function that you can use to retrieve the custom keyword and description info you put in. If you on your site somewhere where you are showing only a single blog post or a single page this function will work. Let’s try:

ID, "seo-description", true); ?>

This will get our meta description, “seo-description” for the post we are displaying and assign it to the variable $seodescription (it’s not good to use variables with hyphens in PHP ). Now we can simply use

This will print out the custom description. So far our solution is:

" />

This is one of the things that is so nice about PHP. You can insert it directly into XHTML wherever you want. The only problem is that we may have a page or post that we haven’t gotten around to adding custom keyword and description meta tags to. The about code will not create an error in this case. It will just print empty quotation marks. This is because the PHP variable $seodescription will be zero if get_post_meta finds nothing. We can make use of this with an if statement. In php an if statement will execute if the condition is not zero, and the if statement will not execute if the condition is zero. In other words

if ( $mynumber = 0 ) { echo "hi!"; } else { echo "bye...";}

Will print “bye…” because the if statement is 0. 0 means false to PHP. So, of course

if ( $mynumber = 8.5 ) { echo "hi!"; } else { echo "bye...";}

Will print “hi!” since the if statement is not 0. Let’s apply this to meta tags. If there is custome meta description, we will display it, and if there is none, we will nothing. It’s not a good idea to put a default description or keywords on pages, since this will make multiple pages have the same description and keywords. This is confusing for search engines, since how can two pages have the same descriptin but different content? We will check if there is a custom description with an if statement. The only tricky part here is that PHP actually goes ahead and assigns a value to the variable inside the if statement. This is because we used “=” which means set equal to. So, here goes:

ID, "seo-description", true)) { ?> } ?>

Now we just do the same for the keywords. So for keywords, using the same idea as above we have:

ID, "seo-keywords", true)) { ?> } ?>

There is one final thing to take care of. If we use this code as is, then on pages that dispaly multiple posts, we’re going to display the description and keywords for just the first post. To get around this we’ll use the WordPress function is_singular() . This function returns true if only one page or post is being displayed and false if not. You can use an else statement to display defualt meta data. This default meta date will only go on pages that show more than one post. Ok, so here we have the whole enchilada starting with the title tag:

CODE-TO-DISPLAY-MY-BLOG-NAME