jboullion, Author at JBoullion

ACF Repeater Field Meta Queries

In order to use a meta query to find a value of a post’s repeater field we need to make sure we hook into “posts_where” and swap out a “=” for a “LIKE” so we can find our correct meta keys.

Here is the example code for that.

/**
 * Allow hooking into ACF repeated fields with meta queries
 */
add_filter('posts_where', 'jb_posts_where', 1);
function jb_posts_where( $where ) {
    $where = preg_replace('/meta_key = \'(\w*?)_\{.*?\}_/', "meta_key LIKE '$1_%_", $where);
    return $where;
}

/**

* Allow hooking into ACF repeated fields with meta queries

add_filter('posts_where', 'jb_posts_where', 1);

function jb_posts_where( $where ) {

$where = preg_replace('/meta_key = \'(\w*?)_\{.*?\}_/', "meta_key LIKE '$1_%_", $where);

return $where;

}

Now we can just add a meta query to our WP Query args and search our repeater fields like so.

$args['meta_query'] = array(
	array(
		'key' => 'fields_%_field',
		'value'    => array(1,2,3),
		'compare'    => 'IN'
	),
);

$args['meta_query'] = array(

array(

'key' => 'fields_%_field',

'value' => array(1,2,3),

'compare' => 'IN'

);

Set Custom Facebook Image in Yoast

Display a custom featured image while using the Yoast WP SEO plugin.

//Make sure we display an appropriatly sized image to facebook
add_action( 'wpseo_opengraph', 'pk_change_yoast_seo_og_meta' );
function pk_change_yoast_seo_og_meta() {
	add_filter( 'wpseo_add_opengraph_images', 'pk_facebook_image' );
}

function pk_facebook_image( $object ) {
	global $post;

	$featured_image = get_field('featured_image', $post->ID);

	$image = array();

	if(! empty($featured_image)){
		$image['url'] = $featured_image['sizes']['large'];

		// If we do not provide a width and height facebook doesn't like that. 
		// Adding these values should allow the first post scrape to get the image correct without facebook 
		// first having to scrape the image and generate its internal cache
		$image['width'] = $featured_image['sizes']['large-width'];
		$image['height'] = $featured_image['sizes']['large-height'];

		$object->add_image( $image );
	}

}

//Make sure we display an appropriatly sized image to facebook

add_action( 'wpseo_opengraph', 'pk_change_yoast_seo_og_meta' );

function pk_change_yoast_seo_og_meta() {

add_filter( 'wpseo_add_opengraph_images', 'pk_facebook_image' );

}

function pk_facebook_image( $object ) {

global $post;

$featured_image = get_field('featured_image', $post->ID);

$image = array();

if(! empty($featured_image)){

$image['url'] = $featured_image['sizes']['large'];

// If we do not provide a width and height facebook doesn't like that.

// Adding these values should allow the first post scrape to get the image correct without facebook

// first having to scrape the image and generate its internal cache

$image['width'] = $featured_image['sizes']['large-width'];

$image['height'] = $featured_image['sizes']['large-height'];

$object->add_image( $image );

}

A Better Media Sideload Image

media_sideload_image is a WordPress function I have had to use countless times to upload attachments based on a provided URL. Often from Google Maps, but sometimes just from import scripts pointing to a URL. It has always worked well enough, but it has a couple of issues. The main problem is the lack of an ability to provide a filename separate from the image basename. This was especially ugly when generating static Google Maps…especially after Google Started requiring API keys…which WOULD BE SAVED AS PART THE FILE NAME!!!! Anyway, I looked around for a bit and found a really great solution on WordPress Stack Exchange from user Somatic.

It is a fairly large function so I’ll just provide the link: https://wordpress.stackexchange.com/a/44115/57457

Trust me, if you want to use media_sideload_image, use Somatic’s function instead.

Multiple WP Dropdown

Thanks to Stack Exchange user MahdiY!

See original here.

In functions.php

/**
 * Allow for multiple selects when using wp_dropdown
 */
add_filter( 'wp_dropdown_cats', 'wp_dropdown_cats_multiple', 10, 2 );
function wp_dropdown_cats_multiple( $output, $r ) {

	if( isset( $r['multiple'] ) && $r['multiple'] ) {

		$output = preg_replace( '/^<select/i', '<select multiple', $output );

		$output = str_replace( "name='{$r['name']}'", "name='{$r['name']}[]'", $output );

		foreach ( array_map( 'trim', explode( ",", $r['selected'] ) ) as $value )
			$output = str_replace( "value=\"{$value}\"", "value=\"{$value}\" selected", $output );

	}

	return $output;
}

/**

* Allow for multiple selects when using wp_dropdown

add_filter( 'wp_dropdown_cats', 'wp_dropdown_cats_multiple', 10, 2 );

function wp_dropdown_cats_multiple( $output, $r ) {

if( isset( $r['multiple'] ) && $r['multiple'] ) {

$output = preg_replace( '/^<select/i', '<select multiple', $output );

$output = str_replace( "name='{$r['name']}'", "name='{$r['name']}[]'", $output );

foreach ( array_map( 'trim', explode( ",", $r['selected'] ) ) as $value )

$output = str_replace( "value=\"{$value}\"", "value=\"{$value}\" selected", $output );

}

return $output;

}

When using wp_dropdown_categories just add the “multiple” argument:

$cat_args = array(
	'orderby'	=> 'name',
	'id' 		=> 'cat-select',
	'name' 		=> 'cats',
	'selected'  => $_GET['cats']? implode(',', $_GET['cats']):'',
	'multiple' 	=> true
);
wp_dropdown_categories( $cat_args );

$cat_args = array(

'orderby' => 'name',

'id' => 'cat-select',

'name' => 'cats',

'selected' => $_GET['cats']? implode(',', $_GET['cats']):'',

'multiple' => true

);

wp_dropdown_categories( $cat_args );

Add Lazy Load and Lity Lightbox to content images

We had a client who has thousands of images in their blog posts over the years.

We needed to make sure all of those images have lazy load and appear in a lightbox when clicked.

Obviously this requires you to install a lazy load plugin and a light box plugin. I recommend these:

Lazy Load: http://jquery.eisbehr.de/lazy/

Lity Lightbox: https://sorgalla.com/lity/

Now the code!

//Lazy load and Lity Lightbox content images
//https://macarthur.me/posts/build-your-own-simple-lazy-loading-functionality-in-wordpress/
add_filter('the_content', function ($content) {
	//-- Change src/srcset to data attributes.
	$content = preg_replace("/<img(.*?)(src=|srcset=)(.*?)>/i", '<img$1data-$2$3>', $content);

	//-- Add .lazy-load class to each image that already has a class.
	$content = preg_replace('/<img.*?class=\"(.*?)\"(.*?)>/i', '<img class="$1 lazy"$2>', $content);

	//-- Add .lazy-load class to each image that doesn't have a class.
	//$content = preg_replace('/<img(.*?)(?!\bclass\b)(.*?)/i', '<img$1 class="lazy"$2', $content);

	// Add Lity Lightbox to images
	$content = preg_replace('/<a(.*?)<img/i', '<a data-lity $1<img', $content);
	
	return $content;
});

//Lazy load and Lity Lightbox content images

//https://macarthur.me/posts/build-your-own-simple-lazy-loading-functionality-in-wordpress/

add_filter('the_content', function ($content) {

//-- Change src/srcset to data attributes.

$content = preg_replace("/<img(.*?)(src=|srcset=)(.*?)>/i", '<img$1data-$2$3>', $content);

//-- Add .lazy-load class to each image that already has a class.

$content = preg_replace('/<img.*?class=\"(.*?)\"(.*?)>/i', '<img class="$1 lazy"$2>', $content);

//-- Add .lazy-load class to each image that doesn't have a class.

//$content = preg_replace('/<img(.*?)(?!\bclass\b)(.*?)/i', '<img$1 class="lazy"$2', $content);

// Add Lity Lightbox to images

$content = preg_replace('/<a(.*?)<img/i', '<a data-lity $1<img', $content);

return $content;

});

Custom Woocommerce ACF Category Filters

We had a client recently that needed to be able to create product filters based on the product categories they were assigned to. This presented a problem because we didn’t want to clog up the taxonomy / category pages with a bunch of filter options and the user also needed to be able to edit these categories in the future.

We took the approach of adding some ACF fields to the product categories and then inserting a meta box on the products based on their selected categories which would list the ACF fields as checkboxes, similar to selecting a taxonomy.

It is hard to explain so here is a bunch of code and images to explain.

Here is our custom meta box displaying the filters that were created in the category page. Notice this is actually displaying the filters from ALL selected categories.

Here are the filters created in one category.

This is what the front end looks like. The checkboxes are FontAwesome icons.

Finally, here is the code needed to accomplish this.

All of this code goes into your “functions.php” file

/**
 * Adds a metabox to the product pages to list the available filters
 * @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/
 */
add_action( 'add_meta_boxes', 'jb_add_filter_metaboxes' );
function jb_add_filter_metaboxes() {
	add_meta_box(
		'jb_product_filters',
		'Product Filters',
		'jb_product_filters',
		'product',
		'side',
		'default'
	);
}

/**
 * Build the filter selection functionality
 * @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/
 */
function jb_product_filters() {
	global $post;
	$terms = wp_get_post_terms($post->ID, 'product_cat', array( 'fields' => 'ids' ));

	$filters = array();
	foreach($terms as $term_id){
		$filter = get_field('filters', 'term_'. $term_id);
		if(! empty($filter)){
			$filters = array_merge($filters, $filter);
		}
	}

	if(! empty($filters)){
		foreach($filters as $filter){
			$meta_key = sanitize_title( $filter['filter_name'] );
			$current_filters = get_post_meta( $post->ID, $meta_key, true );

			if(! empty($current_filters)){
				$current_filters = explode(',',$current_filters);
			}else{
				$current_filters = array();
			}

			echo '<p style="font-weight: bold; margin: 0;">'.$filter['filter_name'].'</p>';

			echo '<ul id="product_filters" class="categorychecklist form-no-clear" style="margin: 0 0 20px;">';
			
			if(! empty($filter['filter_options'])){
				foreach($filter['filter_options'] as $option){
					echo '<li class="wpseo-term-unchecked">
							<label class="selectit">
								<input value="'.$option['option'].'" '.(in_array($option['option'], $current_filters)?'checked="checked"':'').' type="checkbox" name="jb_filter['.$meta_key.'][]"> '.$option['option'].'</label>
							</li>';
				}
			}
				
			echo '</ul>';
		}
	}
}

/**
 * Save the filter information as meta_data that we can query later
 * @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/
 */
add_action( 'save_post', 'jb_save_filter_meta', 1, 2 );
function jb_save_filter_meta( $post_id, $post ) {
	if ( 'revision' === $post->post_type ) {
		return;
	}

	// Return if the user doesn't have edit permissions.
	if ( ! current_user_can( 'edit_post', $post_id ) ) {
		return $post_id;
	}

	// Now that we're authenticated, time to save the data.
	$filter_meta = $_POST['jb_filter'];

	// Cycle through the $filter_meta array.
	foreach ( $filter_meta as $key => $value ) :
		
		$value = implode(',',$value);

		if ( get_post_meta( $post_id, $key, false ) ) {
			// If the custom field already has a value, update it.
			update_post_meta( $post_id, $key, $value );
		} else {
			// If the custom field doesn't have a value, add it.
			add_post_meta( $post_id, $key, $value);
		}
		if ( ! $value ) {
			// Delete the meta key if there's no value
			delete_post_meta( $post_id, $key );
		}
	endforeach;
}

/**
 * Filter products based on submitted filters
 */
add_action( 'pre_get_posts', 'jb_filter_products' );
function jb_filter_products( $query ) {
	if(is_tax()){

		if(! empty($_POST['psearch'])){
			$query->set('s', $_POST['psearch'] );
		}

		if(! empty($_POST['jb_filter'])){
			$meta_query = array('relation' => 'AND');

			foreach($_POST['jb_filter'] as $key => $filter){
				foreach($filter as $value){
					$meta_query[] = array(
						'key'     => $key,
						'compare' => 'LIKE',
						'value'   => $value
					);
				}
				
			}

			$query->set( 'meta_query', $meta_query );
		}

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

/**

* Adds a metabox to the product pages to list the available filters

* @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/

add_action( 'add_meta_boxes', 'jb_add_filter_metaboxes' );

function jb_add_filter_metaboxes() {

add_meta_box(

'jb_product_filters',

'Product Filters',

'jb_product_filters',

'product',

'side',

'default'

);

}

/**

* Build the filter selection functionality

* @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/

function jb_product_filters() {

global $post;

$terms = wp_get_post_terms($post->ID, 'product_cat', array( 'fields' => 'ids' ));

$filters = array();

foreach($terms as $term_id){

$filter = get_field('filters', 'term_'. $term_id);

if(! empty($filter)){

$filters = array_merge($filters, $filter);

}

if(! empty($filters)){

foreach($filters as $filter){

$meta_key = sanitize_title( $filter['filter_name'] );

$current_filters = get_post_meta( $post->ID, $meta_key, true );

if(! empty($current_filters)){

$current_filters = explode(',',$current_filters);

}else{

$current_filters = array();

}

echo '<p style="font-weight: bold; margin: 0;">'.$filter['filter_name'].'</p>';

echo '<ul id="product_filters" class="categorychecklist form-no-clear" style="margin: 0 0 20px;">';

if(! empty($filter['filter_options'])){

foreach($filter['filter_options'] as $option){

echo '<li class="wpseo-term-unchecked">

<input value="'.$option['option'].'" '.(in_array($option['option'], $current_filters)?'checked="checked"':'').' type="checkbox" name="jb_filter['.$meta_key.'][]"> '.$option['option'].'</label>

</li>';

}

echo '</ul>';

}

/**

* Save the filter information as meta_data that we can query later

* @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/

add_action( 'save_post', 'jb_save_filter_meta', 1, 2 );

function jb_save_filter_meta( $post_id, $post ) {

if ( 'revision' === $post->post_type ) {

return;

}

// Return if the user doesn't have edit permissions.

if ( ! current_user_can( 'edit_post', $post_id ) ) {

return $post_id;

}

// Now that we're authenticated, time to save the data.

$filter_meta = $_POST['jb_filter'];

// Cycle through the $filter_meta array.

foreach ( $filter_meta as $key => $value ) :

$value = implode(',',$value);

if ( get_post_meta( $post_id, $key, false ) ) {

// If the custom field already has a value, update it.

update_post_meta( $post_id, $key, $value );

} else {

// If the custom field doesn't have a value, add it.

add_post_meta( $post_id, $key, $value);

}

if ( ! $value ) {

// Delete the meta key if there's no value

delete_post_meta( $post_id, $key );

}

endforeach;

}

/**

* Filter products based on submitted filters

add_action( 'pre_get_posts', 'jb_filter_products' );

function jb_filter_products( $query ) {

if(is_tax()){

if(! empty($_POST['psearch'])){

$query->set('s', $_POST['psearch'] );

}

if(! empty($_POST['jb_filter'])){

$meta_query = array('relation' => 'AND');

foreach($_POST['jb_filter'] as $key => $filter){

foreach($filter as $value){

$meta_query[] = array(

'key' => $key,

'compare' => 'LIKE',

'value' => $value

);

}

$query->set( 'meta_query', $meta_query );

}

Here is an example of what the front end HTML might look like.

<form id="filter-form" action="<?php echo $_SERVER[REQUEST_URI]; ?>" method="post">
	<div class="search-input">
		<div class="input-group mb-3">
			<input type="text" maxlength="30" class="form-control" id="basic-url" placeholder="Search" name="psearch" value="<?php echo $_POST['psearch']; ?>">
			<div class="input-group-append">
				<button type="submit" class="input-group-text" id="basic-addon2"><i class="far fa-search"></i></button>
			</div>
		</div>
	</div>
	<?php if(! empty($filters)): ?>
		<div class="filter-wrapper">
			<?php 
				foreach($filters as $filter){
					$meta_key = sanitize_title( $filter['filter_name'] );

					echo '<p style="font-weight: bold; margin: 0;">'.$filter['filter_name'].'</p>';

					echo '<ul id="product_filters" class="categorychecklist form-no-clear" style="margin: 0 0 20px;">';
					
					//'.(in_array($option['option'], $current_filters)?'checked="checked"':'').'
					if(! empty($filter['filter_options'])){
						foreach($filter['filter_options'] as $okey => $option){
							echo '<li>
									<input value="'.$option['option'].'" '.(is_array($_POST['jb_filter'][$meta_key]) && in_array($option['option'], $_POST['jb_filter'][$meta_key])?'checked="checked"':'').' id="'.$meta_key.'-'.$okey.'" type="checkbox" class="awesomebox" name="jb_filter['.$meta_key.'][]"><label for="'.$meta_key.'-'.$okey.'" class="selectit">'.$option['option'].'</label>
								</li>';
						}
					}
						
					echo '</ul>';
				}
			?>
		</div>
	<?php endif; ?>
</form>

<form id="filter-form" action="<?php echo $_SERVER[REQUEST_URI]; ?>" method="post">

</div>

<?php if(! empty($filters)): ?>

<?php

foreach($filters as $filter){

$meta_key = sanitize_title( $filter['filter_name'] );

echo '<p style="font-weight: bold; margin: 0;">'.$filter['filter_name'].'</p>';

echo '<ul id="product_filters" class="categorychecklist form-no-clear" style="margin: 0 0 20px;">';

//'.(in_array($option['option'], $current_filters)?'checked="checked"':'').'

if(! empty($filter['filter_options'])){

foreach($filter['filter_options'] as $okey => $option){

echo '<li>

<input value="'.$option['option'].'" '.(is_array($_POST['jb_filter'][$meta_key]) && in_array($option['option'], $_POST['jb_filter'][$meta_key])?'checked="checked"':'').' id="'.$meta_key.'-'.$okey.'" type="checkbox" class="awesomebox" name="jb_filter['.$meta_key.'][]"><label for="'.$meta_key.'-'.$okey.'" class="selectit">'.$option['option'].'</label>

</li>';

}

echo '</ul>';

}

</div>

<?php endif; ?>

</form>