We have another post type that needs the proper custom fields applied: the homepage slides. This is the kind of thing that would be easy and tempting to hard-code into the template, but we're going to go the extra mile here and allow Jeff to control everything about the homepage slider. Post new photos of work as a new slide. Delete old ones. Re-order them. Whatever else we want him to have control over.

We take things a bit farther this time and actually output the data we're collecting into the template. We do a WP_Query loop for just our custom post types. Then we use the ACP API to output the data we need to output. In our case, all we need is the URL to the photo we uploaded.


  1. User Avatar
    Permalink to comment#

    The ACF plugin provides sample code specifically for images, there are a few options:

    Working with Images – URL
    <img src="” alt=”” />

    Working with Images – ID, By using the ID, you can retrieve any crop size of the image and even get the name of the file!

    <img src="” alt=”” />

    This is a great plugin with good support. You can read more about the code samples at http://www.advancedcustomfields.com/resources/getting-started/code-examples/

  2. User Avatar
    Daniel Gray

    I might be late to the party here, but I just started working with ACF, outputting images into a slider, much the way you did it (in fact, INSPIRED by the way you did it). I had the same issue with the code returning a whole array of data on each image…even though the ACF site claims that you can simply use:

    <img src="<?php the_field('field_name'); ?>" alt="" /> 

    to show the image. What I just stumbled upon is that when creating (or editing) the field definition in ACF, there is a radio button choice for “return value”, and the choices are Image Object, Image URL and Image ID. I simply ticked “Image URL”, instead of the default “Image Object”. Now using:

    <img src="<?php the_field('field_name'); ?>" alt="" />

    returns just the URL, as promised. No complicated parsing of the array, as you otherwise cleverly worked through in your video.

  3. User Avatar
    Kennedy Otis
    Permalink to comment#

    Nice screencast about such powerful plugins. I checked more on advance custom fields plugin and I found repeater field addon very interesting. Enables you to create an array of data. In this case it would make the slide creation more flexible in a way the admin can delete the slide from the page. Anyway there are more ways to kill a rat :) Good work Chris

  4. User Avatar

    I did a screencast on the advanced custom field plugin which goes through specific uses of the repeater field and the flexible field. The developer has just released a new version of the plugin today and I am looking forward to seeing what changes have been made.

    Advanced Custom Fields add ons in WordPress…

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.