CPT ordered by title still has a couple posts out of order

Support
#1

I have been trying to figure this out and I am stumped. Any thoughts would be appreciated.

On this page: http://urlgone.com/3f6ff6/

The mobile version shows the items in the correct order, but the desktop version doesn’t.

The page shows the items in alphabetical order based on the title except for a couple items. The posts “Judson” and “Jesse” are out of order. Also “Lauren” should be before “Lisa”. There are also a couple more on page 2. I am using the masonry output so I was wondering if that was the issue.

I have this as my code:

// Sort Attorneys on Title // ============================================================================= function sort_attorney_posts( $query ){ if ( is_post_type_archive( 'attorneys' ) && $query->is_main_query() ) { $query->set( 'orderby', 'title' ); $query->set( 'order', 'ASC' ); } } add_action( 'pre_get_posts', 'sort_attorney_posts', 1 );

Attorney CPT attributes are:
has_archive, title, editor, thumbnail, excerpt, custom fields, revisions

I have flushed permalinks (several times).

#2

Hi There,

Yes, it is because of masonry. Note that using masonry, position of the elements are calculated and applies on the fly. See that on this screencast, when I disabled the position the masonry have been added, the order is correct.

#3

Thanks for the screencast. So is this a bug? I dont think I have changed any of the CSS for the masonry calculations.

So adding this css will fix that issue? What about other break points?

@media (min-width: 1200px) {
    .x-iso-container.cols-4>.hentry {
        width: 24.95%;
        position: initial !important;
        left: initial !important;
        top: initial !important;
        float: left;
        transform: initial !important;
    }
}

I tried adding the CSS but now there is a large gap after last row of articles and the pagination. Then on page 2 there is an issue with the second row.

Page 1 Gap

Page 2 Order issue

#4

Hi There,

No this is not a bug. This is how masonry grid works. See this link for more information about masonry grid. Choose standard layout instead of masonry to avoid this issue. No need to add those CSS, it just to show you that how it will be if we choose standard style.

Hope this helps.

#5

@Lely

Ok I see the culprit being the way masonry grid works, even though it seems all my content is the same dimensions.

If I choose standard layout, I then get a fullwidth single column layout which is NOT what I am trying to achieve. How then can I programmatically achieve the same 4 column layout that the masonry grid does?

#6

Hi There,

That is how it works by default for standard layout. Achieving columns with standard layout means customizing the template of the category page. Yes, the CSS fixed you have added is an easy work around:

@media (min-width: 1200px) {
    .x-iso-container.cols-4>.hentry {
        width: 24.95%;
        position: initial !important;
        left: initial !important;
        top: initial !important;
        float: left;
        transform: initial !important;
    }
}
#7

It’s not a “true” workaround as it leaves those big gaps of space as seen in my screen shots posted above.

I have decided to go a with a different temporary workaround by using Essential Grid, but would prefer to not have to rely on a plug-in to make this happen.

To do this with the theme files would I then edit the following and add custom CSS?

/themes/child-theme/framework/views/global/_index.php /themes/child-theme/framework/views/integrity/wp-index.php /themes/child-theme/framework/views/integrity/content.php

#8

Hi there,

Yes, you would need to add CSS and edit those templates. But I’ll check this too to see what else can be improved, and yes, please use grid plugins for now.

Thanks!