How to Re-Order WordPress Posts By Custom Field?

Do you want to change the order of WordPress posts on the blog page of the website? Then you are in the right place to learn this functionality and change the order of posts. So, in this article, I will show you how you can change the order of the posts by custom field.

The default order of posts in WordPress is based on the publish date and it displays in the reverse chronological order. This means it will show the latest post at the top.

By adding a custom field for WordPress posts, you can change the order based on that custom field.

I will explain in the step-by-step guide below, how you can create a custom field and change the order of the posts on your blog page.

Re-Order WordPress Posts By Custom Field

Let’s start to create a custom field in the post and save the value with the post id and show them.

Create Custom Field in Publish Meta Box

We will create a numeric custom field in the Publish meta box at the right sidebar of the edit post page. The field value will save in the post meta table and we will use it later to change the post order.

See the code below for the custom field in Publish meta box.

add_action('post_submitbox_misc_actions', 'add_publish_meta_custom_field');
function add_publish_meta_custom_field($post_obj) {
 
  	global $post;
  	$post_type = 'post';
  	$value = get_post_meta($post_obj->ID, 'post_order', true); 
  	$val = ($value) ? $value : "0";
  	if($post_type==$post->post_type) {

	    echo '<div class="misc-pub-section misc-pub-section-last">'
	         .'<label>Post Order <input name="post_order" type="number" step="1" min="0" id="post_order" value="'.$val.'" class="small-text"></label>'
	         .'</div>';
  	}
}

The above will create the custom field in the Publish meta box and you will see the field like in the below image.

Save the Value of Custom Field

Now, we have to save the value of that Post Order field. So we will run the save_post action hook before saving the post and use update_post_meta() for save the value of the field for the respective post.

The update_post_meta() action save the value in the wp_postmeta table with the post ID.

OK. See the code to save the value of that custom field.

add_action( 'save_post', 'save_publish_meta_custom_field', 10 , 3);
function save_publish_meta_custom_field($post_id, $post, $update) {
 
  	$post_type = 'post';
  	if ( $post_type != $post->post_type ) {
    	return;
  	}
 
  	if ( wp_is_post_revision( $post_id ) ) {
    	return;
  	}

  	if(isset($_POST['post_order'])) {
    	update_post_meta($post_id, 'post_order', $_POST['post_order']);
  	}

}

The above code will save the custom field value in the database and it will show in that input numeric field.

Change the Order of WordPress Posts By Custom Field

Now, we will change the default order of WordPress posts with our own order value. We will run the pre_get_posts action hook to modify the existing WP_Query for posts, before show the results.

The pre_get_posts give us some solutions to modify the wp_query without writing the custom WP_Query.

function pre_custom_post_order_sort( $query ){
  if ( is_home() && $query->is_main_query() ){
    $query->set( 'orderby', 'meta_value' );
    $query->set( 'meta_key', 'post_order' );
    $query->set( 'order' , 'ASC' );
  }
}
add_action( 'pre_get_posts' , 'pre_custom_post_order_sort' );

The above code example will change the WordPress posts order on the blog page or homepage.

We checked in this post is a main query and homepage and then set the query order by with meta value and if the meta_key is this. It will check if the post has a custom field value and make them on top according to field values.

Orderby WordPress Posts By Custom Field in Template File

You can also create your own custom WP_Query to display the posts by order.

You have to create a WordPress custom template page and then you can write your own query in that template.

Check here step by step guide on how to create a custom page template in WordPress.

OK. You have now a custom template file. So write the following code in that template.

$args = array(
    'post_type' => 'post',
    'meta_key' => 'post_order',
    'orderby' => 'meta_value',
    'order' => 'ASC'
);

$query = new WP_query ( $args );

if ( $query->have_posts() ) {
    while ($query->have_posts() ) {
        $query->the_post();

        if ( !empty(get_post_meta( $post->ID, 'post_order', true )) ) {
            the_title();
        }

    wp_reset_postdata();
}

The above code will show the post title order by custom field value and make the post on top according to the custom field value.

You can also create the shortcode of the above code in the functions.php file and use that shortcode in the widget, page, or anywhere you want to show the posts.

That’s it. You are done with display the WordPress posts order by custom field value.

Hope you understand the code above. If you still have any questions ask me in the comment section. I’ll help you with that.