Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Jonathan Davies
Jonathan Davies
2,162 Points
Posted by Jonathan Davies
Jonathan Davies
2,162 Points

Isotope + Wordpress Tutorial.

Hey. I've followed the tutorial by Zac on creating a wordpress site and it works great. Now i'm trying to use a jquery plugin called "isotope". The problem i'm having calling the catagories and the posts for those catagories and then having the filtering look on my portfolio.php/ work.php.

If followed external guide that i have found online with no avail. The simple ones where you enter in the html for everything works fine, but when I want to use wordpress so i can add more work future i just dont know how to do.

Any help would be amazing!

10 Answers

Jonathan Davies
Jonathan Davies
2,162 Points
Jonathan Davies
Jonathan Davies
2,162 Points

Awesome I solved it!!

My html code was correct and so was the method i was trying to include through my function theme_js in my functions.php

but isotope wouldn't work because there was conflict between the jquery i was trying to include, but doing the following fixed it.

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11); function my_jquery_enqueue() { wp_deregister_script('jquery'); wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null); wp_enqueue_script('jquery'); }

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Hi Jonathan Davies. What is it exactly you're trying to acheive?

You'll find that, taking something written for outside of WordPress and just trying to put it in WordPress, often doesn't work. Or so I've found.

Quite frequently, I've built something that with raw HTML etc, and it works, it then takes the same amount of time again to covert it/integrate it into WordPress.

Bit of explanation what you want to achieve would be great, can help you out then.

Jonathan Davies
Jonathan Davies
2,162 Points
Jonathan Davies
Jonathan Davies
2,162 Points

The isotope js is compatible with wordpress, there are existing themes that use it.

What i'm trying to figure out exactly is how I generate the html mark up throught wordpress rather than having to write the html for each project in my portfolio.php.

I've been using CPT UI to create the custom fields and custom taxonomy, and then using ACF for the content.

So far i've tried almost every single tutorial on the net, and no have worked for me...

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

You'll likely have to edit your theme template files for this

Jonathan Davies
Jonathan Davies
2,162 Points
Jonathan Davies
Jonathan Davies
2,162 Points

Yeah I have changed my portfolio.php which does display the filter menu and the items that need to be filtered but it just doesn't want to do anything else than just display everything.

Jonathan Davies
Jonathan Davies
2,162 Points
Jonathan Davies
Jonathan Davies
2,162 Points

So my code is this at the moment. It's on pastebin http://pastebin.com/2WXQVKuM

Any help would be great, I've followed Isotopes demos, guides, docs & GitHub but no dice. Also as I said previously I've followed many tutorials using search engines without any working results.

So far I've gotten my code too output the filters, as well as the work. It just will not filter or animate.

Jonathan Davies
Jonathan Davies
2,162 Points
Jonathan Davies
Jonathan Davies
2,162 Points

Right i've solved it, the code is apparently 100% correct, but when i put the isotope.js and the latest version into my function it refuses to work.

So i have had to include them like so

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="<?php bloginfo('url'); ?>/wp-content/themes/idea/js/jquery.isotope.min.js" type="text/javascript"></script>
Daniel Armatis
Daniel Armatis
7,691 Points
Daniel Armatis
Daniel Armatis
7,691 Points

I'm developing an isotope plugin and will update you when it's stable. I created a dog breed selector using isotope using a custom template. It does the job but it hasn't been updated for over a year. Can you share with us how you are using isotope?

Dog breed selector: http://bunkblog.net/dog-breed-selector

Ben Usher Smith
PLUS
Ben Usher Smith
Courses Plus Student 5,669 Points
Ben Usher Smith
Ben Usher Smith
Courses Plus Student 5,669 Points

This tutorial seems a really good starting point to integrating isotope into WordPress. I was going to use it for a project I'm working on but timings and spec have changed so I'm now doing something else: http://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/