Masonry for Archive with Genesis Framework

[FlorenceNovembre]

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/

[davislee21222]

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.

[FlorenceNovembre]

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.

[FlorenceNovembre]

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

[fasf12f]

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/

[Jelly4567]

Creating a masonry-style archive layout using the Genesis Framework for WordPress is a visually appealing way to display your posts. Masonry layouts feature dynamically organized content, making efficient use of space. Here's a ASK on how to implement a masonry archive layout with the Genesis Framework:

Step 1: Prepare Your WordPress Environment

Ensure You Have Genesis Installed: If you haven't already, install the Genesis Framework on your WordPress website. You'll also need an active child theme compatible with Genesis.

Backup Your Website: Before making any significant changes, it's wise to create a backup of your WordPress website to avoid potential data loss.

[Author]

Posts