A New Staff Member
In the Staff Members section of the Dashboard Sidebar, click Add New. You can also do this from the New menu in the Admin toolbar.
You will then see this screen. It looks like a traditional post, sort of, but not…
For the first employee use these values:
- Title: Doris Shutt
- Job Title: Bouncer
- Job Description: “Eius adipisci aspernatur excepturi nostrum, doloremque, ducimus dolore expedita at dolorem officiis.”
- Feature Image: Choose one of the women in the Media Library
- Tags: we’ll leave this field empty for now.
Click PUBLISH or UPDATE to Save
Now go to the STAFF MEMBERS section of the Dashboard and choose All Staff Members.
We will see here the single new Staff Member.
Now mouse over the name of the employee. From the menu that drops down, click Duplicate This. This functionality is provided by the Duplicate Page plugin I’ve included in the starter site.
Make ten copies of Doris Schutt.
In Quick Edit mode, edit each one, giving each a new name.
Also edit the permalink or slug, so that the link includes the new person’s name (lower case, with dashes) rather than doris-shutt-2, etc.
Still in quick edit mode, change the staff member status from draft to published.
Here are some names to use, if you can’t think of any.
- Horace Cope
- Levy Tate
- Ken Garu
- Crystal Ball
- Mandy Lynne
- Upton O’Goode
- Lou Tennant
- May O’Nays
- Andy Gravity
- Russel Sprout
- Stanley Cupp
- Kay Oss
- Emma Nate
- Earle E Bird
- Pyloric Stenosis
Be sure to also change the Feature Image and Position for each individual. That can’t be done in quick mode. Make up position titles (cook, waiter, chef, accountant, bouncer, etc).
Feel free to leave the description the same.
View The Staff Member, Sort Of…
Now, open one of the Staff Member Custom Posts and click on View Post.
Here, we’ll be disappointed, probably. All we see is the name of the staff member.
The reason for this will become clear if we look at the admin bar, where the output from the Show Current Template plugin is displayed.
Specifically, we are currently using the index.php template file. If we click on that piece of information, we’ll see what other template files are outputting the page.
One of these is the content.php template part. Since this is a starter theme for the exercise, I didn’t get it to output much other than the title of the post.
Duplicate content.php and rename it content-staff-member.php. In a few minutes, we’ll learn how to output our custom fields.
An aside: in order to keep things simple, I’m going to use more template-parts than is absolutely necessary for this site, in order that we don’t get lost in conditions. But in a production site, you could streamline things a bit.
Make A Staff Member Loop on the Home Page
If you go to the front page of the site, you won’t even see any staff members. Let’s fix that. Open up front-page.php (if we haven’t got that file yet, create it by duplicating index.php).
Make your first custom loop, enclosing it in an HTML Section with a class of staff-members. Notice here how instead of querying by tag or category, we are querying by post_type. This is how we can call our Custom Post Content.
Apart from that difference, this is pretty much the same argument we have probably passed to the WP_Query constructor in other exercises.
In the code below, I am first defining an $args variable and then passing that to the new WP_Query constructor, but you might be used to just putting the $args array inside the constructor. Either way works.
<?php get_header(); ?>
<section class="staff-members">
<?php
$args = array(
'post_type' => 'staff_member',
'posts_per_page' => '3',
'orderby' => 'rand'
);
$my_query = new WP_Query( $args );
if ( $my_query->have_posts() ) :
while ( $my_query->have_posts() ) :
$my_query->the_post();
get_template_part('template-parts/content-staff-member');
endwhile;
else :
get_template_part('template-parts/content-none.php');
endif;
?>
</section>
<?php
get_footer();
Next, edit the content-staff-member template part and make it output just the name and the feature image of the employee.
<?php ?>
<article <?php post_class(); ?>>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<h2><?php the_title(); ?></h2>
</article>
Now reload the home page: just like that, we should be seeing three random employees, with feature image and name output.
Outputting The Custom Fields
Now let’s output the custom fields.
To figure out how to do that, consult the Advanced Custom Fields documentation page and especially the section on displaying field values in your theme.
Edit your staff-member content-part:
<?php ?>
<article <?php post_class(); ?>>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<h2><?php the_title(); ?></h2>
<div class="staff-member-position">
<?php the_field('staff_member_position'); ?>
</div>
<div class="staff-member-description">
<?php the_field('staff_member_description'); ?>
</div>
</article>
Now see your front page. All the data for each staff member should be outputting.
Custom Post Type Archive
When we made our staff member custom post type, we added a value that will be very useful to remember here.
To see what I mean, go to CPT UI in the Dashboard and click Add/Edit Post Types. Make sure you’re in the Edit section for the staff-member custom post type.
Scroll down most of the page, to Custom Rewrite Slug. The value that we put in here is the last part of the URL for the archive for this custom post type.
We also set With Front to false. That means that the URL for the archive will not include anything added in the Permalinks section in Settings in the Dashboard.
In other words, our staff-member custom post type archive URL will be something like localhost:8888/eatery-2020-start-files/staff or www.the-eatery.com/staff
Depending on what you called the folder you installed the starter data into, or whether you’re using Mac or Windows, etc, that development URL may vary a bit, but the end part won’t.
Anyway, go to that URL (modify it if your development environment or folder name is different than mine).
You will see again a listing of names.
To figure out what’s going on, look up though at the output of the Show Current Template plugin.
It’s again index.php that is outputting your content and it’s calling the more generic content.php template part.
Duplicate index.php and call it archive.php. Open it for editing.
Archives, in the traditional WP model, are listings of previous posts in a category, or tagged identically, or written by the same author, or from a date or time, etc.
What we need to do here, though, is call the staff-member content-part if we are in the archive for that custom post type.
To do that we’ll need a condition.
Our loop starts like this:
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part('template-parts/content');
endwhile;
else :
get_template_part('template-parts/content-none.php');
endif;
In the while part of the loop, we need to test what kind of content we are dealing with, so we can output it accordingly.
So we should consult the Developer Theme Handbook list of conditional tags.
The conditional tag we are looking for is not far down from the top of the handbook list: is_post_type_archive().
Into this function, if pass the name of the post-type ( ‘staff_member’ ) that we are looking for, we can get the archive to output the desired content.
Modify your archive loop to include a nested condition:
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
if( is_post_type_archive('staff_member') ) :
get_template_part('template-parts/content-staff-member');
else :
get_template_part('template-parts/content');
endif;
endwhile;
else :
get_template_part('template-parts/content-none.php');
endif;
That leaves us with an if inside a while inside an if.
Test your staff archive page. The URL should be something like this:
localhost:8888/eatery/staff
You should have a working archive of your custom post type.
In part four of this exercise, we will make another Custom Post Type, for our food menus.