Earlier today I had a Zoom session with a user from the Oxygen community where I shared my screen and showed how to

  • register a team Custom Post Type using CPT UI plugin
  • add a fields group having a few custom fields attached to the team post type using Advanced Custom Fields plugin
  • create a Template for the CPT archive
  • modify Easy Posts’ Template PHP to show the value of the custom fields

Here’s a recording of it:

Template PHP:


$position = get_field( 'position' );
$phone_number = get_field( 'phone_number' );
$email_address = get_field( 'email_address' );


<div class='oxy-post'>
    <a class='oxy-post-image' href='<?php the_permalink(); ?>'>
      <div class='oxy-post-image-fixed-ratio' style='background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);'>
      <div class='oxy-post-image-date-overlay'>
		<?php the_time(get_option('date_format')); ?>
	<a class='oxy-post-title' href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

	<div class="team-meta">
		<p><strong>Position:</strong> <?php echo $position; ?></p>
		printf( '<p><strong>Phone number: </strong><a href="tel:%s">%s</a></p>',

	<div class='oxy-post-content'>
		<?php the_excerpt(); ?>

	<div class="team-meta">
		printf( '<p><strong>Email: </strong><a href="mailto:%s">%s</a></p>',

	<a href='<?php the_permalink(); ?>' class='oxy-read-more'>Read More</a>


Template CSS:

%%EPID%% .oxy-posts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

%%EPID%% .oxy-post {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  margin-bottom: 3em;
  width: 33.33%;
  padding: 1em;

%%EPID%% .oxy-post-image {
  margin-bottom: 1em;
  position: relative;
  background-color: grey;
  background-image: repeating-linear-gradient(
  #eee 10px,
  #ddd 10px,
  #ddd 20px);
  width: 100%;

%%EPID%% .oxy-post-image-fixed-ratio {
  padding-bottom: 100%;
  background-size: cover;
  background-position: center center;

%%EPID%% .oxy-post-image-date-overlay {
  position: absolute;
  top: 1em;
  right: 1em;
  font-size: .7em;
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: .7em 1em;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;

%%EPID%% .oxy-post-title {
  font-size: 1.5em;
  line-height: 1.2em;

%%EPID%% .oxy-post-content {
  margin-top: 1em;
  margin-bottom: 1em;

%%EPID%% .oxy-post-content p {
  margin: 0;

@media (max-width: 1120px) {
  %%EPID%% .oxy-post-meta {
    display: none;

.team-meta {
	background: #ccc;
  padding: 20px;
  border-radius: 4px;
  margin: 20px 0;

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: