Isotope Posts is a simple WordPress implementation of Metafizzy's javascript Isotope plugin. Use the plugin settings page to customize Isotope options and create loops of WordPress posts, then implement them on your site using simple shortcodes. Magic.
Some features:
- No need to muck around with javascript or theme files – implement Isotope directly in the WordPress editor with a simple shortcode!
- Includes essential Isotope features, including the option for a filter menu, sorting options, and layout options
- Hide posts from displaying based on category, post tag, or custom taxonomy terms
- Grab the post's featured image include with the excerpt (if one is set)
- Minimal included css makes it easier to customize the look and feel of the loop output for your site
New in v2
- Create and save as many Isotope shortcodes as you want to use on multiple pages throughout your site
- Paginate your loop of posts using infinite scrolling (rather than loading them all at once)
- Now uses v2 of the javascript Isotope plugin
- Plays nice with WordPress Multisite
If you're upgrading to v2+ of Isotope Posts from v1.X, you'll need to run the Isotope Posts v2 Migrator plugin first. Be sure to deactivate and delete the migrator plugin before attempting to re-activate of Isotope Posts.
Metafizzy's javascript Isotope plugin is licensed under MIT and free to use for non-commercial, personal, open-source projects only. Find out more about commercial licensing if you plan on using this plugin for commercial purposes.
- Extract the
isotope-posts-master.zipand remove-masterfrom the extracted directory name - Upload the
isotope-postsfolder and its contents to the/wp-content/plugins/directory - Activate the plugin through the 'Plugins' menu in WordPress
- Go to the Settings > Isotope Posts page and adjust the settings as needed.
To implement Isotope Posts on your site, simply head over to the Isotope Posts settings page in your WordPress admin area, create a loop of posts with your preferred options and then save it. Next, grab the unique shortcode for the loop you just saved (e.g. [isotope-posts id="YOUR_UNIQUE_ID"]) and embed it in a page in your site.
You can use do_shortcode to directly embed an Isotope Posts loop in a template file (instead of pasting it into the WYSIWYG editor for a given page on your site).
However, in order to ensure that the Isotope Posts plugin has the smallest possible footprint on your site, the plugin only loads the required Isotope CSS file on pages where it finds an Isotope Posts shortcode inside the_content (i.e. embedded in the WYSIWYG editor).
In order to manually add the required CSS when you use do_shortcode within your theme files, set an additional attribute on your shortcode as follows:
[isotope-posts id="YOUR_UNIQUE_ID" load_css="true"]
NOTE: You do NOT need to add the load_css attribute to your shortcode if you are simply pasting it into a page's WYSIWYG editor.
Isotope Posts takes advantage of a number of the original javascript plugins's options. On the plugin settings page you have the option to:
- Add a filter menu (based on post categories or tags, or a custom taxonomy)
- Arrange your posts descending by date or ascending alphabetically by title
- Choose whether to use display evenly in horizontal rows or masonry-style
- Add pagination to your posts using infinite scrolling
Absolutely. To use a custom post type, simply pick it from the select menu on the plugin settings page. Same goes for using a custom taxonomy for a filter menu.
As the author of the javascript Isotope plugin has pointed out in the past, using infinite scrolling with filtering can create a very odd user experience and you probably want to avoid doing this.
In my experience, the only time that using filters with infinite scrolling isn't completely weird is when you have a lot of posts in your selected post type AND the terms for the taxonomy you use to create your filter menu are more or less evenly spread across your posts. If you must go down this road, please be sure to test this thoroughly before you unleash it on your users.
Play it safe. While you can implement multiple Isotope Posts shortcodes throughout your site, you'll only want to add one at a time on any given page. Things go a little bit sideways in the javascript when you try to load two Isotope Posts shortcodes on a single page.
Yes, but no translations are available quite yet.
- List of saved Isotope Post shortcodes
- Isotope Posts settings modal
- Sample of featured image and excerpt output
- Add
before_isotope_title,before_isotope_content, andafter_isotope_contentaction hooks to allow customization of Isotope item content. - Improve responsiveness of admin settings lightbox.
- Localize additional strings.
- Fix bug where clicking the "See All" filter would jump the browser to the top of the page.
- Fix filter menu so that it doesn't show excluded terms when the filter menu taxonomy is the same as the limiting taxonomy (again)
- Adjust pre-filling behaviour when using filtering and infinite scrolling together (even though this is not advisable) to address JS errors
- Remove old Isotope js file
- Update Isotope library to 2.0.1
- Fix pagination bug when implementing a loop on a static homepage
- Add check on post elements when a filter menu has been added but the post doesn't have any taxonomy terms assigned (props @crondeau)
- Add ability to manually load public CSS when using
do_shortcode - Improve responsiveness of public CSS
- Ensure scripts and styles only load when the shortcode is present (for real this time...)
- Fixed issue with settings array saving incorrectly when plugin options did not exist yet
- Remove automatic activation for new blogs in multisite
- Fixed fatal error on activation
- Refactored all plugin code
- Revamped the plugin settings page to allow users to save multiple post loops (this is a breaking change)
- Add ability to paginate posts using infinite scroll
- Made taxonomy classes conditional on loop items to stop php warning when not using a filter menu (props @jengalas).
- Added else condition to handle post loop with no results.
- Updated call to admin.js file so it only loads where needed.
- Fixed bug when trying to limit post display by category or post tag.
- Changed filter menu to automatically remove user-excluded terms if the selected menu taxonomy is the same as the limiting taxonomy.
- Reversed "Limiting Taxonomy" logic so that entered terms slugs are excluded from display (as opposed to the only terms displayed).
- More code refactoring.
- Added ability to limit post display to specific taxonomy and terms.
- Light code refactoring.
- Plugin initial release.
- Tom McFarlin's time-saving WordPress Plugin Boilerplate. Why start from scratch when you don't have to?
- David DeSandro's (Metafizzy) Isotope jQuery plugin. Minimum js input, maximum interactive fun.
This plugin was originally created by Mandi Wise.
Copyright (c) 2014, Mandi Wise
Isotope Posts is dual licensed under MIT and the GPL v2 or later.
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA