We learned how to do a custom loop and output custom data from our custom post types and custom fields in the last video. This time we need to do it again, only for the slightly more complex Events section. We'll need a custom page template just for the events area so we have a place we can write all this custom code.

The query:

$the_query = new WP_Query(array(
  'post_type' => 'events',  // This is the name of our custom post type
  'posts_per_page' => -1    // -1 means "all of them"

The loop:

while ($the_query->have_posts()) : $the_query->the_post(); ?>

  // we're in the loop!


And inside the loop, we can use the ACP API to output custom fields:


All that's left now is styling it up right and making sure we're outputting every last bit of data we want to display.


  1. eugenia masllorens
    Permalink to comment#

    Hi Chris. Thanks for this. It’s been very useful so far. With the new ACF 4.0 I’m trying to get a field inside a scrollbar and spanning some titles for the fields I created, on the php file. The titles are displaying fine but not the content. For example: Project title: (this would be the spanned txt on the php page-projects template) and then the custom field displays whatever the owner of the site types in (this is not displaying) I’m using the repeater field and I’m wondering if the loop needs to be different to the one used above?

    Can you help with this.
    Thanks so much,

  2. lex
    Permalink to comment#

    Could anybody help to display pagination for this Events section.


  3. Christian Beer
    Permalink to comment#

    Hi Chris, first of: thanks a lot for the whole series. I’m learning a lot and have a lot of fun with it. Not always the case.

    There is one question I have, which might be answered quickly as I am a Webnewbie: If I output the date like you do in your video it appears like a code on the screen: 20141101. Much nicer it would be like it happens in your video: Mar 3, 2013. Where did I overlook the important bit?

    Thanks a lot in advance for an answer.

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.