Custom Post Type Archive with Custom Fields in Genesis

In the Genesis Facebook group a user asks:

I am creating a custom archive page for a custom post type (called Faculty). I want to use Advanced Custom Fields to create fields on the post page for the client (a university department) to input Name, Courses Taught, Research, and email address. I want the client to put the bio pic (headshot) of each faculty member as the featured image. I intend to have them type out their biography on the main part of the post page. I want the custom fields (Name, Courses Taught, Research and Email Address) custom fields to show up on the archive page under their picture (the featured image). Can someone shoot me a tutorial on how to do this?

So I want my archive page to output my advanced custom fields under the featured image…

This tutorial provides the steps to register a faculty CPT (Custom Post Type), create three associated custom fields using Advanced Custom Fields plugin and display the values of these custom fields (if not empty) along with the featured image on the CPT archive page.

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

Step 1

Install and activate Custom Post Type UI plugin.

Go to CPT UI > Add/Edit Post Types and add your custom post type.

Scroll down and change “Has Archive” from False to True.

Step 2

Install and activate Advanced Custom Fields. I am using the Pro version in this example.

Go to Custom Fields > Add New and create a new field group named say, Faculty Meta.

Set this field group to appear for Faculty CPT entries.

Step 3

Add the following in child theme’s functions.php:

add_image_size( 'faculty-image', 400, 400, true );

Step 4

Let’s add a template for the faculty CPT archive page.

Create a file named archive-faculty.php in the child theme directory having the following code:

<?php
/**
 * Template for `faculty` CPT archive page.
 */

// Forces full width content.
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Removes post info.
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );

// Removes post image.
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

add_action( 'genesis_entry_content', 'sk_image', 8 );
/**
 * Displays faculty member's photo.
 */
function sk_image() {

    if ( ! has_post_thumbnail() ) {
        return;
    }

    // get the URL of featured image.
    $image_url = genesis_get_image( 'format=url&size=faculty-image' );

    // get the alt text of featured image.
    $thumb_id = get_post_thumbnail_id( get_the_ID() );
    $alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

    // if no alt text is present for featured image, set it to entry title.
    if ( '' === $alt ) {
        $alt = the_title_attribute( 'echo=0' );
    }

    // display the image.
    printf(
        '<a href="%s" class="faculty-member-photo"><img src="%s" alt="%s" /></a>',
        esc_url( get_the_permalink() ),
        esc_url( $image_url ),
        esc_attr( $alt )
    );

    echo '<h3 class="faculty-heading">Bio</h3>';

}

add_action( 'genesis_entry_content', 'sk_fields' );
/**
 * Shows the values of Courses, Research and Email custom fields below the content.
 */
function sk_fields() {

    $courses = get_post_meta( get_the_ID(), 'courses', true );
    $research = get_post_meta( get_the_ID(), 'research', true );
    $email = get_post_meta( get_the_ID(), 'email', true );

    if ( $courses ) {
        echo '<h3 class="faculty-heading">Courses</h3>';

        echo wpautop( $courses );
    }

    if ( $research ) {
        echo '<h3 class="faculty-heading">Research</h3>';

        echo wpautop( $research );
    }

    if ( $email ) {
        echo '<h3 class="faculty-heading">Email</h3>';

        printf( '<a href="mailto:%s">%s</a>',
            $email,
            $email
        );
    }

}

genesis();

Step 5

Add the following in child theme’s style.css above the media queries:

.faculty-heading {
    margin-top: 40px;
}

.faculty .entry-header {
    margin-bottom: 40px;
}

.post-type-archive-faculty .content {
    width: 100%;
}

@media only screen and (min-width: 600px) {

    .post-type-archive-faculty .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }
}

Step 6

Go to Faculty > Add New and add your CPT entries.

Set/upload the featured image. Ensure that the width is at least 400px, the second parameter in add_image_size() from Step 3.

Fill in the values for your custom fields.

That’s it! Visit your CPT’s archive page (Ex.: https://genesis-sample.test/faculty/) to see the entries appearing in 2 columns with each entry showing the image and custom field values.