Archives for May 2017

May 23, 2017 - No Comments!

Delete Images from Media Gallery when WordPress Post moved to Trash

I have a client who sells unique products on their custom WordPress site. The products listed have limited quantities and once they're sold they won't be available again. From the front end, it's easy enough to just "Trash" a post (product) and they won't display. However, this could quickly lead to unnecessarily large storage on the server since WordPress doesn't delete post attachments (images) when posts are trashed.

Here's a quick code block which will delete images when posts are moved to the trash.

This could be included in functions.php or wrapped inside a custom plugin, it'll work the same either way. Be sure to read the *disclaimer at the bottom before breaking things.

 

This code will delete just the featured image when a post is moved to trash:

add_action( 'trashed_post', 'mtp_delete_attached_thumbnail_for_trashed_product', 20, 1 );

function mtp_delete_attached_thumbnail_for_trashed_product( $post_id ) {
 
 // gets ID of post being trashed
 $post_type = get_post_type( $post_id );
 
 // does not run on other post types
 if ( $post_type != 'post' ) {
 return true;
 }
 
 // get ID of featured image
 $post_thumbnail_id = get_post_thumbnail_id( $post_id );

 // delete featured image
 wp_delete_attachment( $post_thumbnail_id, true );
}

 


In many cases you'll have more images associated with a post or product. This code will also delete gallery images in addition to the featured image.

add_action( 'trashed_post', 'mtp_delete_attached_thumbnail_for_trashed_product', 20, 1 );

function mtp_delete_attached_thumbnail_for_trashed_product( $post_id ) {
 
 // gets ID of post being trashed
 $post_type = get_post_type( $post_id );
 
 // does not run on other post types { $post }
 if ( $post_type != 'post' ) {
 return true;
 }
 
 // get ID of featured image
 $post_thumbnail_id = get_post_thumbnail_id( $post_id );

 // gets array from custom field { $gallery } 
 $gallery_images = get_field('gallery', $post_id);

 // loop through { $gallery } 
 foreach ($gallery_images as $gallery_image) {
 
 // get each attachment ID
 $gallery_id = $gallery_image['id'];

 // delete attachments
 wp_delete_attachment( $gallery_id, true );
 }
 
 // delete featured image
 wp_delete_attachment( $post_thumbnail_id, true );
}

For either example, if you need this to work on a custom post type, i.e. "product". You'll need to replace this line:

if ( $post_type != 'post' ) {

with:

if ( $post_type != 'YOUR_POST_TYPE_NAME' ) {

If you have a gallery associated with the post, you'll also need to change the gallery name. In my case, I'm using an ACF gallery named "Gallery". So you'd update this line:

$gallery_images = get_field('gallery', $post_id);

with

$gallery_images = get_field('YOUR_GALLERY_FIELD_NAME', $post_id);

 


This code is being used on WP 4.7.5
*This will permanently delete your media so as always, be sure to run a backup of your site files and database before testing on your site.

May 2, 2017 - 7 comments

Embed Responsive Full Width Pinterest Board

I have a client who needed to embed a Pinterest board on their website. One problem; Pinterest's widget builder doesn't allow for setting "100% width". I spent time searching CodePen, Stack Overflow and random Pinterest forums but just couldn't find a solution.

 

Here's a super simple CSS fix that'll get you up and running with a true responsive and full width board embed.

1. Create your Pinterest Board Widget

Pinterest offers a Widget builder here: https://developers.pinterest.com/tools/widget-builder/ 

Full Width Responsive Pinterest Board Embed

One note, you'll want to choose Create your own option under the Size drop-down menu. Be sure to change the width to something like 1920, or whatever your minimum container size happens to be.

2. Add two <div> wrappers

<div class="super-responsive-wrapper">
  <div class="board-wrapper">
    <!-- Your embed code here -->
  </div>
</div>

3. Add some custom CSS

.super-responsive-wrapper {
  width: 100%;
  margin: auto;
}

.board-wrapper {
  margin: auto;
  text-align: center;
}

.board-wrapper span {
  overflow: hidden;
  max-width: 100%!important;
}

 

That's all you'll need, just be sure to name the classes in your HTML to correspond with your CSS classes.

 


Surprisingly, EmbedResponsively doesn't offer a generator for Pinterest—maybe you guys can grab this code an implement sometime in the future? 🙂