How to Use TimThumb to Automatically Resize WordPress Post Images Part 5: Integrating TimThumb with WordPress Theme

Step 4: Integrating TimThumb with Our WordPress Theme

Now, we need to tell our theme that it needs to use TimThumb to display our images. This step requires PHP (Hypertext Preprocessor). PHP allows us to create dynamic content on our website. By “dynamic,” I mean the content changes depending on the data/variables.

You DON’T Need To Know PHP!

Don’t worry – you don’t need to be a PHP whiz to complete step 4. In fact, I’m going to provide you with the exact code you need and explain a little about what it means.

We need to add a few lines of code to whichever theme template page we want our images to be displayed on. If you want to display post images on your home page, you will add the code to either your “home.php” file or your “index.php” file. If you want to add them to your blog posts, you will add the code to your “index.php” file.

A. Add Code to Theme

Let’s add the code to our home page so that we can show posts’ images along with their excerpts.

1. Go to Appearance > Edit
2. On the right hand side, click the “home.php” file
3. Scroll down until you find the following code:

This is the WordPress Loop – it’s what displays your blog posts. We need to add our PHP code AFTER this line.

4. Add the following code:

5. Click “Update Post”

B. Understand the Code

Let’s break this code down so that we can understand it better. Here’s what it says…

1.

“If this post has a Custom Field named “thumb.”

2.

“Add a div here with a class that we can use to style this section.”

3.

“Add our image. It should be resized to 150px by 150px and have a zoom crop of 1.”

4.

“Close our div.”

5.

“If this post does NOT have a Custom Field titled “thumb,” do nothing.”

6.

“Thanks, that’s it.”

C. Customize the Code

Let’s take a closer look at one particular line…

In this section, we specify the height (h) and width (w) in pixels and the zoom crop (zc). You can change the measurement numbers to anything you would like. The zoom crop can either be 0 or 1.

D. Check It Out

Now, visit your home page and refresh it to see the changes. Without any CSS styling, your picture will probably look something like this:

Notice it lays above our post excerpt. We need to style our image now so that it aligns to the left of our excerpt. Let’s move on to part 6.

Topic Tags:

blog design, filezilla, images, php, timthumb, tutorial, wordpress