Custom Image and Link for Each Post using WordPress Custom Fields

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

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) ): ?>

<p><a href="<?php echo get_post_meta($post->ID, "imglink", true); ?>"><img src="<?php echo get_post_meta($post->ID, "img", true); ?>"></a></p>

<?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

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

Custom Fields in Action

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

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

14 Comments.

  1. That’s really interesting. I have an custom image field in my blog, but it does not have the link aspect – so I might try this.

    • I wonder how you can be online all the time, I am posting at different times a day to see the difference and you seem to be the first to see it. lol. Thanks btw πŸ™‚

      Personally, I don’t like using custom fields, lesser is better πŸ˜‰

  2. Pubudu Kodikara says:

    Wow… thanks for this great tutorial mate! πŸ˜€ earlier i used to do these thing from plugins! πŸ˜€

  3. Christian Schuster says:

    Thanks for this hint:

    ID, ‘preview’, $single = true)) { ?>
    <a href="ID, “imglink”, true); ?>”><img src="/timthumb.php?src=&h=245&w=440&zc=1″ alt=””/>

    I really was searching for hours – here I found the answer!!

    Thanks for sharing Your knowledge
    Loce from the better part of Germany
    C.S.

  4. Scott says:

    Is that bottom image supposed to link somewhere as per the tutorial?

    Thanks!

  5. Alex says:

    And how would you solve this issue if you’d want to loop this in a foreach statement?

    What mean is something like this:

    ID, ‘links’, false); ?>
    ID, ‘urls’, false); ?>

    <?php foreach($links as $link) {
    echo '’.$link.”;
    } ?>
    I’m not a programmer and i’m trying to create a link (anchor + url) using custom fields…

  6. Cliff says:

    I am trying this but it’s not working. Maybe I’m not putting the code in the right place or something, but I can’t for the life of me figure this out.

    I’m using the Photogrid them from Dessigns.net – the homepage features grid photos that come from featured images. Instead of those images linking to their respective posts, I’d like them to be linked to another URL. All of this PHP stuff confuses the heck out me.

  7. Sayzar Rahman Akash says:

    ”Each post gets a same image but a different link” Can it possible to do????

    I jusr want to change link in each post but iamge will be same. Thank You.

  8. Viktor says:

    It’s all very cool, but… Where the description of the function allowing to create a custom field of this type? I spent a lot of time before I realized that something was not making good.

    • I am not sure if I know your point. You do not have to define a custom field with a function. You just add it via the Post Editor. Does that make sense?

Leave a Reply

Your email address will not be published. Required fields are marked *

*