Published on Apr 1, 2020

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

Sridhar Katakam

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

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right