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. Steve
    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. 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. 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. JonathanBeech

    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.