Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1489961

    We have a WordPress website using the Enfold theme, and for years the blog posts have displayed in descending chronological order using the masonry element. Recently, however, several posts are appearing out of order despite having correct publish dates.

    We’ve double-checked the masonry settings and confirmed that sorting by date (descending) is still selected, but the issue persists. We’ve also changed the settings from Flexible to Perfect and the date order to see if it would trigger a correction. Nothing worked. Could you advise on what might be causing this behavior or suggest troubleshooting steps?

    The website URL is included in the private content section for your reference. Thank you.

    #1489975

    Hey GWS,

    Thank you for the inquiry.

    We are not really sure why the items are not sorting correctly, but we do know that there’s a known quirk with the masonry or isotope script where sorting may fail at times, often due to differences in content or image sizes between items.

    Please try this script in the functions.php file and let us know the result:

    add_action('wp_footer', function () {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const masonryContainer = document.querySelector('.av-masonry-container');
            if (!masonryContainer) return;
    
            const masonryItems = Array.from(masonryContainer.querySelectorAll('.av-masonry-entry'));
    
            const masonryWithDates = masonryItems.map(item => {
                const dateElement = item.querySelector('.av-masonry-date');
                const dateText = dateElement ? dateElement.textContent.trim() : '';
                const parsedDate = new Date(dateText);
                return { element: item, date: parsedDate };
            });
    
            masonryWithDates.sort((a, b) => b.date - a.date);
    
            masonryWithDates.forEach(({ element }) => {
                masonryContainer.appendChild(element);
            });
        });
        </script>
        <?php
    }, 9999);
    
    

    Best regards,
    Ismael

    #1489978

    The name “masonry” actually implies the desire to fill the available space as best as possible. Depending on the settings (Flexible Masonry) , this can mean that for some screen widths, entries with large heights are better suited to a different location.

    Despite the discontinuation of Sort Order the above setting, Masonry attempts to fill the entire area as well as possible.
    This then leads that entries bigger in height, for example, being inserted differently after all.

    If you try it with the “Perfect Grid” setting, that shouldn’t happen.

    #1490224

    @ismael, I had a similar script in functions.php but replaced it with your recommendation. Unfortunately, it did not correct the sort order issue.


    @guenni007
    , I had already changed the settings to Perfect Grid to no avail. Other masonry settings didn’t work either. I’m stumped.

    Any other thoughts or ideas?

    #1490225

    Forgot to mention, the only plugin that is in use that might cause a conflict with the masonry would be Molongui Authorship. I don’t know much about that plugin. Have you heard anything about it that might be considered a problem?

    #1490236

    Hi,

    Thank you for the update.

    Did you remove the script? We’re not seeing it in the document. Please add it again so we can check, or provide the login details in the private field.

    with the masonry would be Molongui Authorship.

    We are not familiar with the Molongui Authorship plugin. Is the issue only occurring when this plugin is enabled? We recommend reaching out to the plugin developers for additional assistance.

    Best regards,
    Ismael

    #1490256

    Hi Ismael,

    I’ve reinserted the script you provided, placing it directly beneath the original script in the Enfold child theme functions file (copied/pasted to https://snipboard.io/240r8s.jpg). Please let me know if you see anything helpful there. Thanks.

    Last week I deactivated the Molongui Authorship and it made no difference with the sort order. If there is a conflict, I don’t see it there.

    #1490265

    Hi,

    We adjusted the script a bit. Please try it again:

    add_action('wp_footer', function () {
        ?>
        <script>
        function avResortMasonry() {
            const masonryContainer = document.querySelector('.av-masonry-container');
            if (!masonryContainer) return;
    
            const masonryItems = Array.from(masonryContainer.querySelectorAll('.av-masonry-entry'));
    
            const masonryWithDates = masonryItems.map(item => {
                const dateElement = item.querySelector('.av-masonry-date');
                const dateText = dateElement ? dateElement.textContent.trim() : '';
                const parsedDate = new Date(dateText);
                return { element: item, date: parsedDate };
            });
    
            masonryWithDates.sort((a, b) => b.date - a.date);
    
            masonryWithDates.forEach(({ element }) => {
                masonryContainer.appendChild(element);
            });
        }
    
        document.addEventListener('DOMContentLoaded', avResortMasonry);
        window.addEventListener('av-height-change', avResortMasonry);
        </script>
        <?php
    }, 9999);

    Best regards,
    Ismael

    #1490302

    Thank you for the revision, but it didn’t work. Below is the functions.php with the revision included. I removed everything except what you provided and it didn’t make a difference.

    // masonry read more
    function ava_custom_script_mod(){
    ?>
    <script>
    (function($){
    $(window).on(‘av-height-change’, function() {
    $(‘.av-masonry-entry’).each(function() {
    var more = $(this).find(‘.av-masonry-read-more’);
    var cont = $(this).find(‘.av-inner-masonry-content-pos’);

    if( more.length == 1 ) return;
    $(‘<div class=”av-masonry-read-more”>Read More >></div>’).insertAfter(cont);
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘ava_custom_script_mod’);

    // hide image descriptions on hover
    function remove_title_attr(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘#wrap_all a’).removeAttr(‘title’);
    jQuery(‘#wrap_all img’).removeAttr(‘title’);
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘remove_title_attr’);

    // add selection feature to Blog Posts element to set the post by date order

    if(!function_exists(‘avia_custom_query_extension’))
    {
    function avia_custom_query_extension($query, $params)
    {
    global $avia_config;
    if(!empty($avia_config[‘avia_custom_query_options’][‘order’]))
    {
    $query[‘order’] = $avia_config[‘avia_custom_query_options’][‘order’];
    }

    if(!empty($avia_config[‘avia_custom_query_options’][‘orderby’]))
    {
    $query[‘orderby’] = $avia_config[‘avia_custom_query_options’][‘orderby’];
    }

    unset($avia_config[‘avia_custom_query_options’]);

    return $query;
    }

    add_filter(‘avia_masonry_entries_query’, ‘avia_custom_query_extension’, 10, 2);
    add_filter(‘avia_post_grid_query’, ‘avia_custom_query_extension’, 10, 2);
    add_filter(‘avia_post_slide_query’, ‘avia_custom_query_extension’, 10, 2);
    add_filter(‘avia_blog_post_query’, ‘avia_custom_query_extension’, 10, 2);
    add_filter(‘avf_magazine_entries_query’, ‘avia_custom_query_extension’, 10, 2);

    add_filter(‘avf_template_builder_shortcode_elements’,’avia_custom_query_options’, 10, 1);
    function avia_custom_query_options($elements)
    {
    $allowed_elements = array(‘av_blog’,’av_masonry_entries’,’av_postslider’,’av_portfolio’,’av_magazine’);

    if(isset($_POST[‘params’][‘allowed’]) && in_array($_POST[‘params’][‘allowed’], $allowed_elements))
    {
    $elements[] = array(
    “name” => __(“Custom Query Orderby”,’avia_framework’ ),
    “desc” => __(“Set a custom query orderby value”,’avia_framework’ ),
    “id” => “orderby”,
    “type” => “select”,
    “std” => “”,
    “subtype” => array(
    __(‘Default Order’, ‘avia_framework’ ) =>”,
    __(‘Title’, ‘avia_framework’ ) =>’title’,
    __(‘Random’, ‘avia_framework’ ) =>’rand’,
    __(‘Date’, ‘avia_framework’ ) =>’date’,
    __(‘Author’, ‘avia_framework’ ) =>’author’,
    __(‘Name (Post Slug)’, ‘avia_framework’ ) =>’name’,
    __(‘Modified’, ‘avia_framework’ ) =>’modified’,
    __(‘Comment Count’, ‘avia_framework’ ) =>’comment_count’,
    __(‘Page Order’, ‘avia_framework’ ) =>’menu_order’)
    );

    $elements[] = array(
    “name” => __(“Custom Query Order”,’avia_framework’ ),
    “desc” => __(“Set a custom query order”,’avia_framework’ ),
    “id” => “order”,
    “type” => “select”,
    “std” => “”,
    “subtype” => array(
    __(‘Default Order’, ‘avia_framework’ ) =>”,
    __(‘Ascending Order’, ‘avia_framework’ ) =>’ASC’,
    __(‘Descending Order’, ‘avia_framework’ ) =>’DESC’));
    }

    return $elements;
    }

    add_filter(‘avf_template_builder_shortcode_meta’, ‘avia_custom_query_add_query_params_to_config’, 10, 4);
    function avia_custom_query_add_query_params_to_config($meta, $atts, $content, $shortcodename)
    {
    global $avia_config;
    if(empty($avia_config[‘avia_custom_query_options’])) $avia_config[‘avia_custom_query_options’] = array();

    if(!empty($atts[‘order’]))
    {
    $avia_config[‘avia_custom_query_options’][‘order’] = $atts[‘order’];
    }

    if(!empty($atts[‘orderby’]))
    {
    $avia_config[‘avia_custom_query_options’][‘orderby’] = $atts[‘orderby’];
    }

    return $meta;
    }
    }
    add_action(‘wp_footer’, function () {
    ?>
    <script>
    function avResortMasonry() {
    const masonryContainer = document.querySelector(‘.av-masonry-container’);
    if (!masonryContainer) return;

    const masonryItems = Array.from(masonryContainer.querySelectorAll(‘.av-masonry-entry’));

    const masonryWithDates = masonryItems.map(item => {
    const dateElement = item.querySelector(‘.av-masonry-date’);
    const dateText = dateElement ? dateElement.textContent.trim() : ”;
    const parsedDate = new Date(dateText);
    return { element: item, date: parsedDate };
    });

    masonryWithDates.sort((a, b) => b.date – a.date);

    masonryWithDates.forEach(({ element }) => {
    masonryContainer.appendChild(element);
    });
    }

    document.addEventListener(‘DOMContentLoaded’, avResortMasonry);
    window.addEventListener(‘av-height-change’, avResortMasonry);
    </script>
    <?php
    }, 9999);

    add_filter(‘avf_postgrid_excerpt_length’,’avia_change_postgrid_excerpt_length’, 10, 1);
    function avia_change_postgrid_excerpt_length($length)
    {
    $length = 300;
    return $length;
    }

    #1490314

    Hi,

    We may need to login to the site to properly test the modification or script. Please provide the login details in the private field.

    Best regards,
    Ismael

    #1490465

    That would be great – thanks, Ismael.. The login info is provided in the private field.

    #1490489

    Hi,

    Thank you for the info.

    Did you add the script to the functions.php file? The Appearance > Theme File Editor was not accessible when we checked the dashboard. Please make sure the file editor is enabled so we can test the modification.

    Best regards,
    Ismael

    #1490511

    Sorry about that! I did add the script to the functions.php but did it through cPanel. The theme editor is enabled in WordPress now, if you could please take a look. Thanks.

    #1490526

    Hi,

    Thank you for the update.

    Looks like the script is working, but the isotope script still re-arranges the masonry items, placing the 4th item at the very end of the set. The isotope script is responsible for the masonry effect and sorting. Have you tried deleting that particular post (date August 13, 2025) and recreating it from scratch? You could try rephrasing the title a bit and adjust the image size.

    Best regards,
    Ismael

    #1490605

    Thank you for this suggestion. I’ve shared it with my client and they are going to try this out. If you don’t mind leaving this post open for a few more days, I can let you know how it goes.

    #1490645

    Hi,

    Thank you for your patience. We’ll keep the thread open.

    Best regards,
    Ismael

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.