Integrating Isotope with WordPress

Isotope is a very powerful jQuery plugin that allows you to create sortable, filterable (I’m sure that’s a word) masonry layouts (although you can have other layouts as well). Isotope is free for personal use (a commercial license costs $25, and an organizational license $90).

In this tutorial I will show how to add the Isotope code and scripts to a  template. In my example, I will use the categories to filter a list of posts.

  1. Download the script from the Isotope repository, and upload it to your theme’s folder (for example /js/libs/jquery.isotope.min.js)
  2. Added a list of categories that will serve as filters (following the filtering instructions in istotope):
  3. I made a custom  loop to load a bunch of blog post. Each blog posts must share a class (in my case, I used ‘item’), and additional classes to filter (from the list of categories from Setp 2):
  4. Go check. At this point your page should have a list with all your categories, and a bunch of posts. View the page source to make sure the blog posts have the proper classes (‘item’, plus all the categories it belongs to).
  5. Create a file with the necessary JavaScript to launch and set up Isotope, and place it in your theme folder:
  6. There is some optional, but recommended CSS that you should add to animate the filtering. Place a CSS file with the code in your theme folder. Feel free to add additional styles to make your posts look nice:
  7. In functions.php, load the scripts and CSS:

That’s it!

Advanced Custom Fields Image Object Tutorial

When creating an image custom field in Advanced Custom Fields, it gives you the option of setting the “Return Value” as an “Image Object”.

Advanced Custom Field Adding an Image Screen

Advanced Custom Field Adding an Image Screen

If you choose the “Image Object”,  get_field() will get a multidimensional array with all of the image’s values in it (instead of just the URL for the full size version, or the attachment ID), which will look something like this:

As you can see, this is a lot of information, which means, power! You can now use all that information to properly display that image in your templates.

To get a specific value, for example the ‘alt’, and ‘thumbnail’ size, you would have the following code:

If, for example, you wanted to do a lightbox with your images, you would do this:

My new best friend: ajax_query_attachments_args

I’m working on a site were users will have extra fields in their profiles, among them, a user picture. To achieve this, I used Advanced Custom Fields. Easy peasy lemon squeezy!

The problem was that when a user went to upload or chose a file for their picture profile, it showed all media files, from every user. Not ideal for this particular site (we are using some custom roles that let people upload pictures, but not create entries).

After some googlin’ I found many references (here, and here, for example ) to this code:

It works quite well when you want people to only see their own uploads in the media library. You can even modify it to also work in other pages, so I changed the code to apply also in the user.php page.

My problem was that those handy fields I added with Advanced Custom Fields count as posts authored by another user, therefore, no new user fields. Darn! So close…

Not too happy, I looked far and wide online, but found nothing useful, until rummaging through the, I found ajax_query_attachments_args:

Filter the arguments passed to WP_Query during an AJAX call for querying attachments.
@since 3.7.0
@param array $query An array of query variables. @see WP_Query::parse_query()

Which means that the filter will only affect the list of attachments when viewed with the ajax image uploader, which is exactly what would happen in user.php.

I would still need the first code to limit the list of posts in the media library (uploads.php), but now I have a way to filter for the ajax media library only.