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:

<?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>
      
      <div class='oxy-post-image-date-overlay'>
		<?php the_time(get_option('date_format')); ?>
	  </div>
      
	</a>
  
	<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>
		<?php
		printf( '<p><strong>Phone number: </strong><a href="tel:%s">%s</a></p>',
			$phone_number,
			$phone_number
		);
		?>
	</div>

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

	<div class="team-meta">
		<?php
		printf( '<p><strong>Email: </strong><a href="mailto:%s">%s</a></p>',
			$email_address,
			$email_address
		);
		?>
	</div>

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

</div>

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(
  45deg,
  #eee,
  #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?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Excellent content! And so nice to help out a fellow Oxygen user. You demonstrate outstanding leadership and a big reason I become a premium member of your site.

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: