[Video] Custom meta query, writing PHP and outputting custom fields in Oxygen

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:

<?php

// WP_Query arguments.
$args = array(
	'post_type' => array( 'casino_review' ),
	'meta_query' => array(
		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() ) {
		$query->the_post();
		// 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(); ?>);'>
				</div>
			</a>

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

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

			<?php
				$ios_store_link = get_field( 'ios_store_link' );

				if ( $ios_store_link ) {
					printf( '<h3 class="ios-store-link"><a href="%s">%s</a></h3>',
						$ios_store_link,
						$ios_store_link
					 );
				}
				
				$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() ),
						$logo,
						esc_attr( get_the_title() )
					 );
				}
			?>

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

// Restore original Post Data.
wp_reset_postdata();

?>

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

References

https://wpdevdesign.com/how-to-query-posts-by-true-false-acf-field/

https://gist.github.com/luetkemj/2023628#file-wp-query-ref-php

https://www.advancedcustomfields.com/resources/query-posts-custom-fields/

https://wordpress.stackexchange.com/questions/10881/how-can-i-show-posts-only-if-meta-value-is-not-empty#comment445598_11090