Grow your CSS skills. Land your dream job.

Masonry & WordPress

  • # April 28, 2013 at 12:20 pm

    Edit: I discovered that I actually wanted Masonry rather than Isotope. Scroll down to see my new question.

    Okay, so I have been trying to figure out how to integrate Isotope with WordPress. I found this under WordPress Support.

    I have added the JavaScript file to my theme and I am calling it with this:

    Edit: I can not seem to get the line of code to display properly. It is the same exact code they said to use in the WordPress Support link.

    I would like to use Isotope to display my blog posts on the front page, here.

    In the above link from WordPress Support, they suggest editing loop.php, but this file is non-existent. It is neither in the Starkers theme I am currently using nor in the bundled default WordPress themes. So, I am rather lost as to how to proceed.

    Any help will be greatly appreciated. Thank you in advance!

    # April 28, 2013 at 12:38 pm

    Unrelated: What’s with the pulsating links? That’s horrible for readability.

    # April 28, 2013 at 12:58 pm

    Pulsating? You mean the color shift on rollover?

    # April 28, 2013 at 1:01 pm

    On my iPhone it was pulsating, not changing colors. I couldn’t even read the paragraph text.

    Anyway, instead of loop.php, edit the file that has the loop for your blog posts.

    # April 28, 2013 at 2:45 pm

    Hrm, iPhone and pulsating. That is a new one. I wonder what is causing it. I wonder if it is the Starkers theme I am using. Anywho, okay, I’ll target the loop in the index.php and report back if anything arises.

    # April 28, 2013 at 4:17 pm

    Okay, so I actually want Masonry, rather than Isotope. I found this page, here, and I am trying to implement it with my current theme, here. So, I followed the tutorial and it completely crashed my site. Now, I need to figure out what I did wrong.

    I downloaded the JavaScript file and it is now nestled in my theme’s /js/ folder. Then the guy says to enqueue jQuery. Now, I already know my site is running jQuery, so would placing:

    < ?php wp_enqueue_script('jquery'); ?>

    Before wp_head mess anything up? Because that may be my issue. So that is my first question.

    This is all that’s in my html-header.php file:

    < !DOCTYPE HTML>






    Edit #1: I went through each piece of the code. My site seems to crash when I add:

# April 29, 2013 at 8:57 am

> I wonder what is causing it. I wonder if it is the Starkers theme I am using.

It has nothing to do with PHP or HTML. It was due to the effects you had applied to the links via CSS.

Anyway, try doing what you did to make your site crash. What does the console say?

# April 29, 2013 at 12:21 pm

First, try disabling all unnecessary plugins while you iron out masonry. Some plugin authors don’t properly enqueue the scripts and it can just add the pile of errors you’re trying to debug.

Secondly, it appears your loop is spitting out 5 posts wrapped in #linky. That’s no grood.

Move the masonry container div (#linky) outside of the loop and apply the “item” classes (boxy) in the loop.

As @chrisburton pointed out, if you could attempt to put the JS snippet back in and relink us / give us the error message we’d be able to help you more.

Lastly, if you could post up a pen / gist / pastebin of your modified loop, that’d be infinitely helpful.

# April 29, 2013 at 6:45 pm

@chrisburton and @mcjohnst: Okay, I placed the jQuery function back in the html-header.php and I believe #linky is outside of the loop now. Go here to see the broken website. How do I check error messages with Google Chrome?

# April 29, 2013 at 7:13 pm

On my iPhone at the moment.

F12 > Console tab

# April 29, 2013 at 9:22 pm

This is all it says: Uncaught SyntaxError: Unexpected token.

# April 29, 2013 at 9:53 pm

@mintertweed You have to click on the link on the far right of that.

It seems as if you missed a closing `` tag here:

# April 29, 2013 at 11:18 pm

Okay. Closing script tag done. I apologize for that one. Website is back to normal apart from my blog posts missing on the front page. In the tutorial it says that he is “using WP_Query to specifically fetch the latest 15 posts from [his] Links category.” Two things. I looked up WP_Query and found it in the codex. It says that the class is defined in a file located at wp-includes/query.php. Great! That file does indeed exist. But within the tutorial’s PHP, he is asking for the last fifteen posts from a specific category. I am currently using no categories on my blog posts. So, here is my question, what do I need to change in this:

< ?php
$linksPosts = new WP_Query();
$linksPosts->query(‘showposts=15&cat=7′);
?>
< ?php while ($linksPosts->have_posts()) : $linksPosts->the_post(); ?>

< ?php endwhile; ?>

To make it work properly? I see linksPosts being used everywhere. Is it a simple switching of names? Thank you for your help thus far!

# April 30, 2013 at 11:53 am

The query in your loop is still filtering on category with ID 7. Dig through that codex entry you listed and check [this article](http://wp.smashingmagazine.com/2013/01/14/using-wp_query-wordpress/ “Smash WP_Query”) out. Should give you a good idea of how to construct queries and all the fun stuff you can fetch / exclude.

This should get you going:

< ?php
$linksPosts = new WP_Query(‘showposts=15′); // creates a new query for wp
?>
< ?php if($linksPosts->have_posts()) : ?>
< ?php while ($linksPosts->have_posts()) : $linksPosts->the_post(); ?>

< ?php endwhile; ?>
< ?php endif; ?>

# April 30, 2013 at 7:11 pm

Thank you so much, @mcjohnst! I now have something to look at. One quick question though (and I believe this is a CSS question): Each .boxy has a margin-right of 10px. Well, that is all fine and dandy for the first three divs, but what if I want my content to span across the entire 960 pixels of my website? I need to figure out some way to null the ten pixel right margin on the last div. Any suggestions?

Edit: Here is my website if you would like to see it.

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".