Alicia asked the following question on the post – WordPress Custom Fields Tutorial for the Total Newbie:

Great article and explanation for newbies!

I have a question though….I have created a custom field to display unique images on each page. I want these images to be links. How do I do this? Each image is customized for each page and the links are different for every page.

Source

Here is the solution.

Understanding WordPress Custom Fields

A custom field is a way for the user to pass values to the theme on a per-post basis. This is how it looks like below WordPress post editor.

WordPress Custom Fields Input Box

If you are totally new to custom fields, this tutorial will guide you through the basics.

Using Custom Fields in your WordPress Theme

You can extract the value of a Custom Field using the following PHP code:

< ?php echo get_post_meta($post->ID, "CustomFieldID", true); ? >

Replace CustomFieldID with a unique text that will act as the KEY of the Custom Field. Two custom fields cannot have the same ID in a theme.

We are going to use this for the solution. Another example of using custom fields to show custom messages to the user is available here, with code.

Implementing Custom Image and Link

The problem is to add an image to the post via custom field and then link to a unique link. So here we need two custom fields, lets say img for image and imglink for the link.

This is what the code will look like:

<?php if( get_post_meta($post->ID, "img", true) ): ?>

<?php endif; ?>


As you can see <?php echo get_post_meta($post->ID, "imglink", true); ?> pulls up the link specified in the custom field and <?php echo get_post_meta($post->ID, "img", true); ?> pulls up the image. The if conditions make sure that the code is executed only if the image custom field exists.

Here are some screenshots:

Custom Fields for Image and Text - Click for Full View

This is the output page. Add some styling and it should look way better:

Custom Fields in Action

Download the PHP code for the page here. Hope it helps. Good luck!