[WordPress] How could this be done?

[Watson90]

Hi everyone

I made a wordpress powered website for a friend of mine about a year ago with a custom built theme that I followed tutorials for on YT.

He would like his [blog page](http://shaunjeffersphotography.com/blog “”) to be kind of like a masonry.js style (featured image of the post, date posted/comments and a little introduction) in its each individual box, however, he does not want it responsive where they all move around the page when the window is resized.

Is there a way to do this with a plugin? Or could I maybe throw in some CSS and float the boxes to the left of each other and apply some margin/padding?

The thing is, the last time a tried to do this, alot of things messed up in IE9 and I couldn’t figure out a fix.

Thanks in advance.

[David_Leitch]

Off the top of my head, whenever I hear masonry, I generally go to [Isotope](http://isotope.metafizzy.co/ “http://isotope.metafizzy.co/”) because it’s fairly easy to set up and use. Not sure how nicely it plays with WordPress, you may need to change some elements in the archive page, but perhaps it could be a jumping point :)

[Alen]

I would download the masonry/isotope or whatever you decide, place the files in your theme folder under `/js/` perhaps, then create `home.php` template and use

``

to load it, then just initiate the masonry by adding:

So this is basically how I would start testing right away… Hope it helps.

[Watson90]

Thanks both @David_Leitch and @AlenAbdula – I will look into both masonry and isotope.

To expand on your answer Alen, I have the index.php file that basically runs the blog page on WordPress for him with the loop as standard…so to use your method do I add the first script tag in the header.php file and then add the initializing script tag in the index.php file itself?

[Alen]

Just copy `index.php` file and save as `home.php`. WordPress will first look for home.php then index.php for your blog posts. Then in your header or footer.php template use conditional statement to load the script, this way if something goes wrong you can just delete home.php an everything is back to normal. Depending on how this plug-in interacts with the DOM you might need to change DOM structure. So creating `home.php` seems logical to me.

[Watson90]

Hi @AlenAbdula

I have made [this CodePen](http://codepen.io/Watson90/pen/Hwupz “”) for some further help as I am struggling to get this to slightly work…

Thanks in advance :)

[Author]

Posts