Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope and WordPress with Custom Post Type

I have put together a site for a client that contains a custom post type for their project types. I created it using the Bill Erickson Core Functionality Plugin.

The archive page for the projects is a custom page that I've created and it runs through a loop and pulls all the available projects and displays them on the page. See the page here.

I have added isotope to the site and integrated it to load the scripts on this page using register and enqueue functions in the page.

The CPT has multiple metaboxes for different categories of taxonomy. I need to be able to filter the content on the Project Page using a dropdown selection for the different metabox values.

I need someone who can do the following:

  1. Create filter drop down for the different taxonomy (project-type, program, country, and start date). These should filter the projects using the isotope script.

  2. Adjust isotope display to fit the styles that I want for the different screen sizes. The script appears to be responsive, but there are some adjustments to sizes and positions in order to look right on smaller screens.

Thanks, Alan Smith

User Gravatar

media317

Posted Sep 27 2013 11:05 UTC

$100


  • Assigned To guyisra
  • Solved
  • wordpress
  • 4535 Views

10 Replies


Hey

for the filters - do you want it to be a drop down per taxonomy? (like a list of all countries, a list of all programs, project types etc?)

for the 2nd issue, the problem is caused (or at least solved) by changing the layout to fitRows. in cellsByRow, the items get centered on the defined size, and since it is too small its get cut away. Increasing the size would solve on small screens, but will mess the layout of regular size screens. fitRows seems to solve this nicely. Tell me what you think

var mycontainer = jQuery('#container');
    mycontainer.isotope({
    layoutMode: 'fitRows'
    });
User Gravatar

guyisra

Posted Sep 27 2013 14:35 UTC

for the first issue, I am guess that it is what you want

step 1: add drop downs

<select id="filters-countries" class="filter">
  <option value="*" selected="selected">all</option>
  <option value=".bolivia">bolivia</option>
  <option value=".cambodia">cambodia</option>
  <option value=".colombia">colombia</option>
  <option value=".ecuador">ecuador</option>
</select>

<select id="filters-program" class="filter">
  <option value="*" selected="selected">all</option>
  <option value=".medical">medical</option>
  <option value=".dental">dental</option>
</select>

I've only added some dropdowns, add countries and stuff according to your needs

step 2: Make sure that isotope items have the relevant classes (for bolivia have .bolivia and etc)

step 3: add/replace this JS where the filter code is

var $container = $('#container');
    $container.isotope({})
    $('.filter').change(function () {
     var selected = [];
    $('.filter option').filter(':selected').each(function () {
            if (this.value != "*") {
                selected.push(this.value);
            }
        });
        if (selected.length == 0) {
            selected.push("*");
        }
        selected = $(selected.join(''));
        $container.isotope({
            filter: selected
        });
    });

basically what it does is take each .filter and see what is selected. Then it joins that so the resulting filter would be something like .bolivia.dental and then tells isotope to filter by it

you can see it working here http://fiddle.jshell.net/9pSyj/12/

User Gravatar

guyisra

Posted Sep 27 2013 15:15 UTC

This is a WordPress install and the use of $ is an issue and my knowledge of javascript/jQuery is so bad that I can't convert the code in step 3 correctly.

I have added the dropdown, the classes are on the relevant div, but the script is not working. Please advise.

This is what I've added as the script to make it WordPress safe:

jQuery(funtion($) {
var $container = $('#container');
    $container.isotope({})
    $('.filter').change(function () {
     var selected = [];
    $('.filter option').filter(':selected').each(function () {
            if (this.value != "*") {
                selected.push(this.value);
            }
        });
        if (selected.length == 0) {
            selected.push("*");
        }
        selected = $(selected.join(''));
        $container.isotope({
            filter: selected
        });
    });
});

Please Advise.

Alan

User Gravatar

media317

Posted Sep 28 2013 11:35 UTC

Hey,

put this code instead

jQuery(document).ready(function($) {
var $container = $('#container');
    $container.isotope({})
    $('.filter').change(function () {
     var selected = [];
    $('.filter option').filter(':selected').each(function () {
            if (this.value != "*") {
                selected.push(this.value);
            }
        });
        if (selected.length == 0) {
            selected.push("*");
        }
        selected = $(selected.join(''));
        $container.isotope({
            filter: selected
        });
    });
});

what this does is load the code on a jquery event once the document is done loading.

Tell me if it worked out for you (if you copy and paste this code in the chrome console, you should see if it works or not.

User Gravatar

guyisra

Posted Sep 28 2013 11:45 UTC

for completeness sake, I forgot to add a ; at the end of the third line

$container.isotope({});

so don't forget to add it (its not a must tho)

User Gravatar

guyisra

Posted Sep 28 2013 11:47 UTC

also note that the classes are case sensitive

so the selection option should correspond to the classes. At the moment, the classes are Dental and Medical Change the options to

<option value=".Medical">medical</option>
  <option value=".Dental">dental</option>

or replace the classes to lower case, which ever suits you, as long as you are consistent

User Gravatar

guyisra

Posted Sep 28 2013 11:52 UTC

So far so good. . .

Where would I add the Layout mode cellsByRow?

User Gravatar

media317

Posted Sep 28 2013 12:33 UTC

Seems you deleted that part.

Basically, this line

$container.isotope({});

initializes isotope. since no parameters are there, it defaults to masonry, and since all items in your layout have the same height you don't see a difference

At the moment the 2nd issue seems to be solved, but I would suggest adding some margin to the items so they won't be so close together

User Gravatar

guyisra

Posted Sep 28 2013 12:43 UTC

Solution

This didn't solve your task? Get your own custom solution.

Thanks!

User Gravatar

media317

Posted Sep 28 2013 17:50 UTC

Hi Alan,

I am wondering if you are still reading this post, I'm trying to have something almost EXACTLY what you've built for your client.. I am wondering if I can pay you for the same installation.

Please email me at kukkjacky@gmail.com if you are interested.

User Gravatar

jsk13

Posted Oct 30 2013 15:51 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions