HOW TO: Use WordPress Custom Fields with jQuery Post Carousel

I recently wrote a post explaining how to create a jQuery carousel with WordPress posts and it has received great feedback.

I expand on the original carousel post by quickly showing you how to use the power of WordPress custom fields to expand your output control even further from the WordPress admin panel.

Create a WordPress Post Carousel

If you made it here and haven’t implemented the carousel, please check out the demo (No longer supporting  demo) and HOW TO post.

In the original post, I showed how to use query_posts to specify the category and number of posts you wanted to include in each carousel panel.

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php the_title_attribute(); ?>">< ?php the_title(); ?></a></h2>
< ?php the_excerpt(); >

By reviewing the snippet above, you will see that within the loop, I also included the code to output the post title using an h2 tag, and an excerpt from the post. Now in each panel you have a title and content, both of these are controlled from your WordPress admin panel.

Well what if you want to include a custom image per post? Well, this is where custom fields come in.

Add custom field value

WordPress custom fields allow you to add small snippets into your templates and output some really cool stuff differing by post. You can read the official gauge on custom fields on the WordPress Codex

In our case, we are going to add a spot for each post you define to have it’s own image.

As in the demo, in the image above, you will see some text under a heading on the left side of the carousel. On the right side, there is a picture with a white border and a shadow. I wanted to add some style so with some quick Photoshop imagery and some css I added the static styling to the template markup. Within the nifty white frame using get_post_custom_values(), I defined that an image be output using the custom field option.

I also wanted the image to link back to the main post so I added an anchor with the permalink template tag. I felt this would make it a bit easier for users to get to the meat and potato’s of a post 🙂

After you’ve defined the link back to your post, you need to add that you are looking to define an image, add the custom post value (so WP knows that you want to output a custom field), and a name for your custom field.

<a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php the_title_attribute(); ?>"></a>

In the case above I named it Thumb. The custom field name is important and will come to play when you add the image to the post from your admin panel.

I added an alt tag to the template markup, you can do it here, or in the custom field from the post page.

Add custom field on post page

If you haven’t already, log into your admin panel and go to one of the posts from your carousel.

You may have to scroll down a bit but under your excerpt and trackback fields, you will find an area named Custom Fields just like the picture above.

Once you find it, you should see two distinct areas, one for Name, and the other for Value. If you don’t already have a custom field, you will see to empty fields, one for each area. In the Name field, go ahead and add the name you gave your custom value in the code you added earlier, remember I used “Thumb”.

If you already have a custom field you should see a drop down and a link that says “Enter new”. Click the link and an empty field will appear to add the new custom value as I explained above.

Now, lets add an image. You can pull an image from wherever you’d like. I typically add the image to my WordPress media area, then copy the link. Once you have a path for the image, go ahead and past it into the Value field. Go ahead and save your post and/or publish.

If you go back and check out the post within the carousel, you will see the image you just added using WordPress custom fields.

What? Expecting more? Pretty straight forward right?

Cool thing is you can do this with all sorts of cool information just as easily as you just did with the image. I want to add that all of the elements I talked about in this post and as you see them in the demo have been styled using CSS and a bit of Photoshop.

So get creative and make sure to drop a link in the comments showing your finished product.

Have a question? Would you like more information or something else added? Please comment, this is best way for me to add new posts, based on your input.

Coming soon, how to use this technique in conjunction with a multi-category, multi-post jQuery Post Carousel 🙂

Happy WordPressing!