Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other [WordPress] How could this be done?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #45625
    Watson90
    Member

    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.

    #139598
    David_Leitch
    Participant

    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 :)

    #139597
    Alen
    Participant

    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.

    #139614
    Watson90
    Member

    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?

    #139639
    Alen
    Participant

    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.


    #139700
    Watson90
    Member

    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 :)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Other’ is closed to new topics and replies.