• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Masonry for Archive with Genesis Framework

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › General Genesis Framework Discussions › Masonry for Archive with Genesis Framework

This topic is: not resolved

Tagged: #masonry #jquery #loop #childtheme #genesisframework

  • This topic has 4 replies, 3 voices, and was last updated 3 weeks, 4 days ago by fasf12f.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 22, 2023 at 7:26 am #507027
    FlorenceNovembre
    Participant

    Hello !
    I am using my child Theme on Genesis Framework.
    I need help to figure out how to apply Masonry on Posts loop, general archive page (my home page) and Category Archives.
    The plugin Simple Masonry Layout by Raju Tako works well BUT is incredibly and unacceptably slow.
    How can i apply a real masonry layout directly in my functions?
    Masonry is already available in wordpress right?
    Any clue please?
    Google and Ecosia are not really answering on this...
    Have a nice day,
    Florence

    https://dorotheecaradec.eu/
    April 3, 2023 at 2:42 pm #507145
    davislee21222
    Participant

    Hi Florence,

    Yes, you can apply Masonry layout directly in your functions without using a plugin. You can use the Masonry library that is included with WordPress.

    Here are the steps to apply Masonry layout to your posts loop and archives:

    Enqueue the Masonry library in your functions.php file. You can add the following code:
    php
    Copy code
    function enqueue_masonry() {
    wp_enqueue_script( 'masonry' );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_masonry' );
    In your archive.php or index.php file (depending on which one you use for your home page), add a class of "masonry" to your container element. For example:
    html
    Copy code
    <div class="masonry">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- Your post loop code here -->
    <?php endwhile; endif; ?>
    </div>
    Finally, you need to initialize the Masonry layout in your JavaScript file. You can add the following code:
    javascript
    Copy code
    jQuery(document).ready(function($) {
    $('.masonry').masonry({
    itemSelector: '.post',
    columnWidth: '.post',
    percentPosition: true
    });
    });
    Make sure to adjust the "itemSelector" and "columnWidth" selectors to match your HTML structure.

    You can use the same code for your category archives by adding the "masonry" class to your category archive template file.

    I hope this helps you to implement the Masonry layout without using a slow plugin. Let me know if you have any questions or concerns.

    April 4, 2023 at 3:13 am #507156
    FlorenceNovembre
    Participant

    Hello Davislee21222,
    Thank you so much for your answer!
    I understand for part 1 and 3.
    But for part 2 : do i need to write my own loop in a index.php or a archive.php in the purpose of adding the class masonry?
    Because i use directly the genesis parent template, just modified by hooks in my functions.
    Is there a way to add masonry class with a hook or something like this, without creating a child archive with the loop? Something like "php please take the original loop and any loop and add masonry class on it please php thank you"
    ?
    Have a nice day!
    F.

    May 8, 2023 at 1:47 pm #507383
    FlorenceNovembre
    Participant

    Hello!
    Okay just
    `add_action( 'genesis_before_loop', 'iso_apply_div_before' );
    function iso_apply_div_before() {
    echo '<div id="grid-container" class="transitions-enabled fluid masonry js-masonry grid">';
    }

    add_action( 'genesis_after_loop', 'iso_apply_div_after' );
    function iso_apply_div_after() {
    echo '</div>';
    }
    thanks to joycegrace on wordpress ACF support

    May 9, 2023 at 4:09 pm #507393
    fasf12f
    Participant

    The Impact of COVID-19 on Small Barber Shops: The COVID-19 pandemic has had a major impact on small businesses across the USA, including barber shops. In this essay, we'll explore how small barber shops have adapted to the challenges of the pandemic, including through the adoption of new safety measures, the use of online tools, and creative marketing strategies. https://premiumbarbershop.com/302-e-52th-st/

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Log In

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble