Elementor Loop Grid: How to Sort Custom Post Type Posts by Custom Order

The Elementor Loop Grid is great until you need your posts in a specific order that is not newest-first or alphabetical. A portfolio that should lead with your best project, a team page where the founder goes first, a product list arranged by priority: by default the Loop Grid will not do any of that. The good news is the fix is not a hack, it is just a matter of controlling the query the grid runs on.

What you’ll learn: why the Loop Grid ignores the order you want, and three reliable ways to sort custom post type posts by a custom order, from a no-code drag-and-drop method to a developer query filter.

 

Table Of Contents

 

Why the Loop Grid Will Not Sort the Way You Want

The Loop Grid is an Elementor Pro widget. It renders a template once and repeats it for every item returned by a WordPress query. That last part is the key: the grid does not decide the order, the query does. So whatever you tell the underlying query to sort by is what the grid shows.

By default that query sorts by publish date, descending. For a blog feed that is fine. For a custom post type where the sequence carries meaning (case studies, services, team members, products) date order is almost never what you want. To get a custom order you have to change the query, and there are three dependable ways to do it.

Elementor loop grid widget, an elementor pro feature
The Loop Grid is an Elementor Pro widget that repeats a template for every item a query returns.

 

The Three Ways to Control Loop Grid Order

  • Method A, drag and drop (no code). Use a reorder plugin to set each post’s menu_order, then sort the grid by menu order. Best for clients and visual control.
  • Method B, a custom field. Add a numeric “sort priority” field to each post and sort the grid by that value. Best when order should travel with the content or be edited in bulk.
  • Method C, a query filter (code). Give the Loop Grid a custom query ID and set the order in a small PHP snippet. Best for developers who want full control.

Pick one based on who maintains the site. The mechanism underneath is the same in every case: you are changing what the query sorts by.

 

Method A: Drag-and-Drop Manual Order (No Code)

WordPress already has a field built for manual ordering called menu_order. It is the same field that orders pages. Posts and custom post types have it too, they just do not expose a drag-and-drop interface for it out of the box. A reorder plugin adds that interface.

  1. Install a drag-and-drop ordering plugin such as Intuitive Custom Post Order or Post Types Order.
  2. Enable it for your custom post type in the plugin settings.
  3. Go to your post type list in the admin and drag the posts into the order you want. The plugin writes that sequence to menu_order.
  4. Make the grid order by menu order, ascending: set it in the Loop Grid’s query if that option is available in your version, or force it with the snippet in Method C.
Intuitive custom post order drag-and-drop reorder plugin
A drag-and-drop reorder plugin writes your manual sequence to the WordPress menu_order field.

 

This is the method to hand a client, because reordering is just dragging rows in the admin. No fields, no code, and the grid updates the moment you save.

 

Method B: Order by a Custom Field

If you would rather store the order as data on each post (handy when content gets migrated, exported, or edited in a spreadsheet), use a numeric custom field.

  1. Add a numeric field to your post type, for example sort_priority, using Advanced Custom Fields or the field tool you already use.
  2. Give each post a number (10, 20, 30, so you can slot new items between later).
  3. Sort by that field with the query snippet in Method C (set orderby to meta_value_num and the meta_key to your field). The Loop Grid’s built-in order options do not cover arbitrary custom fields, so the snippet is what makes this method work.

Numbering in tens instead of 1, 2, 3 is a small trick that saves rework: when you need to insert an item between two existing ones, you give it 15 instead of renumbering the whole list.

 

Method C: A Query Filter for Developers

Elementor lets you name a Loop Grid’s query with a custom Query ID. Once a query has an ID, you can modify it with a standard Elementor query hook. Set the Query ID in the Loop Grid settings (for example custom_order), then add a snippet:

// Sort a Loop Grid (Query ID: custom_order) by menu order
add_action( 'elementor/query/custom_order', function( $query ) {
    $query->set( 'orderby', 'menu_order' );
    $query->set( 'order', 'ASC' );
} );

To sort by the custom field from Method B instead, set the order against the meta value:

// Sort the same grid by a numeric custom field
add_action( 'elementor/query/custom_order', function( $query ) {
    $query->set( 'orderby', 'meta_value_num' );
    $query->set( 'meta_key', 'sort_priority' );
    $query->set( 'order', 'ASC' );
} );

Add the snippet through a code-snippets plugin or your child theme’s functions.php, never by editing a parent theme or plugin file directly. This route gives you the most control and pairs well with multi-field sorting if you ever need it.

 

Sorting and Taxonomy Filtering at the Same Time

A common follow-up: you want the grid filtered to one category or custom taxonomy and still in your custom order. These are two separate query controls, and they coexist. Set the taxonomy condition in the Loop Grid’s query (limit it to the term you want), then apply any of the three ordering methods above on top of it. The filter narrows which posts appear, the order decides their sequence.

If you also want visitors to filter the grid live (by category, tag, or custom field) you move beyond what the stock Loop Grid does on its own, which is the next section.

 

A Simpler Route: The Plus Addons for Elementor Dynamic Listing

If you are reaching for code mainly to get ordering plus front-end filtering, a purpose-built listing widget can cover both without the query-hook plumbing. The Plus Addons for Elementor includes a Dynamic Listing widget described as a grid builder for dynamic content, with live search, 15+ Ajax filters, and multiple post layouts.

That matters for this exact problem in two ways. First, you get ordering and visitor-facing filtering in one widget instead of stacking a Loop Grid, a separate filter widget, and a code snippet. Second, the Ajax filters let users re-sort and narrow the list without a page reload, which the stock Loop Grid does not do by itself. If your custom post type page is really a filterable directory, the Dynamic Listing widget is usually less work than bending the Loop Grid to fit.

The plus addons for elementor dynamic listing widget
The Plus Addons for Elementor Dynamic Listing widget combines ordering with live Ajax filtering.

 

 

Common Mistakes That Break Custom Ordering

A few recurring traps account for most “my order is not applying” support questions:

  • Sorting by a text field as if it were a number. A field holding 1, 2, 10, 20 sorted as text gives you 1, 10, 2, 20. Sort numeric fields as numbers, not strings.
  • Leaving the order direction on descending. Manual and priority orders almost always want ascending, so item 1 comes first. Flipping the direction silently reverses your whole list.
  • A reorder plugin that does not cover your post type. Many only order the post types you explicitly enable in their settings. If dragging does nothing in the grid, confirm the post type is switched on in the plugin.
  • Forgetting that a custom Query ID has to match exactly. The string in the Loop Grid settings and the string in your elementor/query/... hook must be identical, or the snippet never runs.
  • A caching layer serving the old order. After changing the sort, clear your page cache so visitors see the new sequence rather than a stored copy.

 

Quick Decision Guide

  • A client edits the order → Method A, drag and drop.
  • Order should live in the content → Method B, custom field.
  • You want full developer control → Method C, query filter.
  • You also need live front-end filtering → The Plus Addons for Elementor Dynamic Listing.

Whichever you choose, remember the principle that makes all of this make sense: the Loop Grid only ever displays what the query hands it, in the order the query defines. Once you are comfortable shaping the query, ordering a custom post type any way you like stops being a fight.

For more on getting the most out of loops, see our ultimate guide to the Elementor custom loop skin, how to build dynamic content without Elementor Pro, and the trick to hide password-protected posts from the WordPress loop. The custom-field method here pairs naturally with using ACF fields inside Elementor. If performance is also on your mind, our guide to Elementor Core Web Vitals pairs well with cleaning up a heavy listing page, and if you are weighing the new editor, see whether Elementor V4 is production-ready.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO at POSIMYTH Innovations · The Plus Addons for Elementor · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressThemesElementorn8nAIClaudeAutomationServer

Related Frequently Asked Questions