Masonry & WordPress

[mintertweed]

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!

[chrisburton]

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

[chrisburton]

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.

[chrisburton]

> 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?

[chrisburton]

On my iPhone at the moment.

F12 > Console tab

[chrisburton]

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

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

[chrisburton]

@mintertweed `:last-child`?

[chrisburton]

Well, for one, you haven’t told the `:last-child` to have a 0 right margin.

[chrisburton]

Nope, you have to specify. All you’re doing is targeting the last child and telling it to do something else (perhaps). Checking what might be the problem. I’ll post back or update this.

[chrisburton]

add this

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

[chrisburton]

The only thing I see that seems to be an issue is the header. Can you confirm that whenever you get time? If so, this should be quite easy to figure out.

I’m also heading out so I’ll come back tomorrow.

[Paulie_D]

https://css-tricks.com/how-nth-child-works/

As for your second thought, you will probably need JS/JQ. The effect you linked requires fixed pixel values and positioning.

http://codepen.io/mintertweed/pen/qgbJr

I would assume that your posts will not be of equal height….although how that would interact with Masonry (assuming that’s still a requirement), I have no idea.

[chrisburton]

I really have no idea what you’re trying to accomplish now. You should read about box-sizing before just removing it.

[Author]

Posts