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?



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: