How to use a custom field in a custom post type archive? (Explanation video)

[ilkweb]

Hello StudioPress support,

I've got a question regarding custom post types, specifically about how to use the echo function to print a custom field I have set up in the front end of my custom post archive.

I used the Custom Post Types UI plugin, and Advanced Custom Fields plugin, and set the archive settings to true. My posts display as expected under the slug I set.

If you need some clarification - and you might do since my explanation may be somewhat vague, I've recorded this quick, unlisted YouTube video to demo what I mean:

(Please note, I will remove the video once the question has been answered)

https://www.youtube.com/watch?v=0PDRb2ys5P4

I've included the code from my single-events.php template as well as my archive-events.php template.

What I want to do is use a line of code from single-events.php inside archive-events.php

The custom field I want to use is called 'date' and is displaying nicely inside single-events.php and doing what I want it to do, which is to print the date of an event just below the custom post title.

Here's the snippet I'm referring to:

echo '<header class="entry-header"><p class="entry-meta">Event date: <time class="entry-time"> ' . get_field('date') . ' </time></p></header>';

And here it is inside the entire single-events.php template:

<?php
/**
 * Template Name: Events
 *
 * @author StudioPress
 * @package Executive Pro
 * @subpackage Customizations
 */
 

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'colaw_events_loop' );

function colaw_events_loop() { ?>

<article itemtype="http://schema.org/CreativeWork" itemscope="itemscope" class="post-<?php print $pageid; ?> page type-page status-publish entry">
<div class="entry-content" itemprop="text">

<div class="events-content">

<?php if(have_posts()) : while(have_posts()) : the_post();

echo '<header class="entry-header"><h1 class="entry-title"> ' . get_the_title() . ' </h1></header>';

/* The following code displays the Advanced Custom Fields meta boxes */
echo '<header class="entry-header"><p class="entry-meta">Event date: <time class="entry-time"> ' . get_field('date') . ' </time></p></header>';
echo '<div class="event-image"> ' . get_field('picture') . ' </div>';
echo '<div class="event-summary"> <b>Summary:</b> ' . get_field('summary') . ' </div>';
echo '<div class="event-cost"> <b>Cost:</b> ' . get_field('price') . ' </div>';
echo '<div class="event-duration"> <b>Duration:</b> ' . get_field('duration') . ' </div>';
echo '<div class="event-venue"> ' . get_field('venue') . ' </div>';
echo '<div class="event-description"><h4>Event Description</h4> ' . get_field('description') . ' </div>';
echo '<div class="event-topics"><h4>Topics Covered</h4> ' . get_field('topics') . ' </div>';
echo '<div class="event-book"><h3>Book Now</h3> ' . get_field('book') . ' </div>';

endwhile; endif; 
?>
</div></div></article>

<?php }

genesis();

I want to use the custom field 'date' the same way as I did in the single post. Basically, when a user looks at the custom post types archive for the CPT Events, I'd like WordPress to print the event date below the title in the archive.

Here's my archive template, called archive-events.php and is pretty much the out-of-the-box portfolio template that comes with the Executive Pro Theme:

<?php
/**
 * This file adds the custom portfolio post type archive template to the Executive Pro Theme.
 *
 * @author StudioPress
 * @package Executive Pro
 * @subpackage Customizations
 */

 
 
//* Remove the breadcrumb navigation
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Remove the post info function
remove_action( 'genesis_entry_header', 'genesis_post_info', 5 );

//* Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );

//* Remove the post image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

//* Add the featured image after post title
add_action( 'genesis_entry_header', 'executive_portfolio_grid' );
function executive_portfolio_grid() {

    if ( $image = genesis_get_image( 'format=url&size=portfolio' ) ) {
        printf( '<div class="portfolio-featured-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );

    }

}

//* Remove the post meta function
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

genesis();

I hope my question is clear and that if anyone can help they'll be able to give me some clues. Thanks for reading and/or watching. Help is always appreciated, and I'll pay it forward should I ever be in a position to do so.

[Brad Dalton]

What you can do is hook it in using Genesis Hooks. Try the genesis_entry_header hook first.

You can add the code directly to the archive-events.php file or from your functions file with a conditional tag.

Or

You can modify the default post info in the entry header using a filter conditionally.

Or

You can create your own custom shortcode and use that with the filter to modify the default output.

Tip: Use the existing custom function in archive-events.php as guide to learning how to hook in your code.

---

Tutorials for StudioPress Themes.

[ilkweb]

Hi Brad, thanks for responding.

I've been playing around with this and have created a function containing the fields. However, some of my posts have randomly disappeared from the archive.

I'm sure there's an error in my function. Here it is:

//* Add the event date after post title
add_action( 'genesis_entry_header', 'colaw_display_date' );
function colaw_display_date() {

if(have_posts()) : the_post();

/* The following code displays the Advanced Custom Fields meta boxes */
echo '<header class="entry-header"><p class="entry-meta">Event date: <time class="entry-time"> ' . get_field('date') . ' </time></p></header>';
echo '<div class="event-summary"> <b>Summary:</b> ' . get_field('summary') . ' </div>';
echo '<div class="event-cost"> <b>Cost:</b> ' . get_field('price') . ' </div>';
echo '<div class="event-duration"> <b>Duration:</b> ' . get_field('duration') . ' </div>';

endif; 

}

[Brad Dalton]

Try something like this directly in the archive file:

add_action( 'genesis_entry_header', 'colaw_display_date' );
function colaw_display_date() {
echo '<span class="entry-meta">Event date: <time class="entry-time"> ' . get_field('date') . ' </time></span>';
}

---

Tutorials for StudioPress Themes.

[ilkweb]

Thanks Brad, that did it. I just wondered why you suggest using <span class> instead of <p class> here?

I used <div> and the <p> in my template and it is working well, inheriting the parent containers styles.

By the way, this is not the first time you have helped me, so thanks for your tips. I'm determined to learn as much by myself before I run crying to any support forums! Haha.

[Brad Dalton]

See here http://www.w3schools.com/tags/tag_span.asp

If you want to include custom post info ( meta data ) inline with existing data, span tag is one you can use.

If its on its own line, then p or div are fine.

---

Tutorials for StudioPress Themes.

[Author]

Posts