This is the recording of a 45 minute call I had yesterday with a user in the Oxygen community where I shared my screen and went over writing custom meta queries, PHP for outputting custom fields created via ACF etc.

It is un-rehearsed, unplanned, raw, long and you’ll find me searching, trying out code, failing and trying again.

Sample code:


// WP_Query arguments.
$args = array(
	'post_type' => array( 'casino_review' ),
	'meta_query' => array(
			'key'   => 'ios_store_link',
			'value' => '',
			'compare' => '!='

// The Query.
$query = new WP_Query( $args );

// The Loop.
if ( $query->have_posts() ) {
	echo '<div class="casino-reviews">';
	while ( $query->have_posts() ) {
		// do something..
		<div class='casino-review'>
			<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(); ?>);'>

			<a class='oxy-post-title' href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

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

				$ios_store_link = get_field( 'ios_store_link' );

				if ( $ios_store_link ) {
					printf( '<h3 class="ios-store-link"><a href="%s">%s</a></h3>',
				$logo = get_field( 'logo' );

				if ( $logo ) {
					printf( '<div class="logo"><a href="%s"><img src="%s" alt="%s" /></a></div>',
						esc_url( get_the_permalink() ),
						esc_attr( get_the_title() )

			<a href='<?php the_permalink(); ?>' class='oxy-read-more'>Read More</a>
	<?php }
} else {
	// no posts found.

// Restore original Post Data.

.casino-reviews {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

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

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

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

.casino-review .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;

.casino-review .oxy-post-title {
  font-size: 1.5em;
  line-height: 1.2em;

.casino-review .oxy-post-content {
  margin-top: 1em;
  margin-bottom: 1em;

.casino-review .oxy-post-content p {
  margin: 0;

Hope some of you find it helpful.


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


Find the article helpful and wish to donate?

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