All Posts table lists view customize for mobile (edit.php)

This customize is how to edit the better show posts list table for the mobile.

 

Complete screen of Mobile

Complete screen of Mobile

 

 

 

Step1 Include CSS for customization of mobile

 

This will be include the CSS file on only this screen.
Please add to code of functions.php of your theme.

And, please create the posts-mobile.css to your theme directory.

 

add_action( 'admin_print_styles-edit.php' , 'my_load_edit' );

function my_load_edit() {
	
	wp_enqueue_style( 'posts-mobile-style' , get_template_directory_uri() . '/posts-mobile.css' , array( 'wp-admin' ) , '1.0' );
	
}

 

 

Step2 Customize the Posts Lists Table

 

The default mobile display looks like this. It will be when the screen width 782px and fewer.

Reference: /wp-admin/css/list-tables.css

 

Default Posts lists

Default Posts lists

 

Not necessary to show the comment column on the mobile.
Please add the following code to the CSS.

 

@media screen and (max-width: 782px) {

     body.edit-php .fixed .column-title {
         width: auto;
     }
     body.edit-php .fixed .column-comments {
         display: none;
     }

}

 

It looks like this.

 

Hide comment of Posts lists

Hide comment of Posts lists

 

But it is different to be exact the display of the mobile.

Following screenshot is exact the display of the mobile.

 

 

Mobile diaplay

Mobile diaplay

 

If screen of mobile, showing to the quick edit as such items.

 

 

 

Step3 Hide the row actions(quick edit, trash, …etc)

 

Please add the following code to the CSS.

    body.mobile.edit-php .fixed .row-actions {
        display: none;
    }

 

It looks like this.

 

Hide the row actions

Hide the row actions

 

 

 

If you want to show the Date

 

Please add the following code to the CSS.

    body.edit-php .fixed .column-title {
        width: auto;
    }
    body.edit-php .fixed .column-date {
        width: auto;
        display: table-cell;
    }

 

It looks like this.

 

Add date column

Add date column

 

 

 

If you want to show the Edit/View button

 

In this case, you need to add the columns.

Please add the following code to the functions.php

 

add_filter( 'manage_posts_columns' , 'my_manage_posts_columns' );

function my_manage_posts_columns( $columns ) {
	
	$columns['edit_button'] = __( 'Edit' );
	$columns['view_button'] = __( 'View' );
	
	return $columns;
	
}

add_action( 'manage_posts_custom_column' , 'my_manage_posts_custom_column' , 10 , 2 );

function my_manage_posts_custom_column( $column_name , $post_id ) {
	
	if( $column_name == 'edit_button' ) {
		
		printf( '<a href="%1$s" class="button button-small">%2$s</a>' , esc_url( get_edit_post_link( $post_id ) ) , __( 'Edit' ) );

	} elseif( $column_name == 'view_button' ) {
		
		printf( '<a href="%1$s" class="button button-small">%2$s</a>' , esc_url( get_permalink( $post_id ) ) , __( 'View' ) );

	}
	
}

 

It looks like this.

 

Add buttons

Add buttons

 

It looks like this is complete. but,

 

Screen of PC

Screen of PC

 

Button in the screen of PC is not required. Hide the buttons only when show the screen of PC.

Please add the following code to the CSS.

// Outside of the media screen setting

body.edit-php .fixed .column-edit_button,
body.edit-php .fixed .column-view_button {
    display: none;
}

And,

//Inside of the media screen setting

    body.edit-php .fixed .column-edit_button,
    body.edit-php .fixed .column-view_button {
        display: table-cell;
    }

 

It looks like this.

 

Complete screen of PC

Complete screen of PC

 

Complete screen of Mobile

Complete screen of Mobile

 

 

 

This is complete! 🙂

 

 

Full code is here.

 

functions.php

add_action( 'admin_print_styles-edit.php' , 'my_load_edit' );

function my_load_edit() {
	
	wp_enqueue_style( 'posts-mobile-style' , get_template_directory_uri() . '/posts-mobile.css' , array( 'wp-admin' ) , '1.0' );
	
}

add_filter( 'manage_posts_columns' , 'my_manage_posts_columns' );

function my_manage_posts_columns( $columns ) {
	
	$columns['edit_button'] = __( 'Edit' );
	$columns['view_button'] = __( 'View' );
	
	return $columns;
	
}

add_action( 'manage_posts_custom_column' , 'my_manage_posts_custom_column' , 10 , 2 );

function my_manage_posts_custom_column( $column_name , $post_id ) {
	
	if( $column_name == 'edit_button' ) {
		
		printf( '<a href="%1$s" class="button button-small">%2$s</a>' , esc_url( get_edit_post_link( $post_id ) ) , __( 'Edit' ) );

	} elseif( $column_name == 'view_button' ) {
		
		printf( '<a href="%1$s" class="button button-small">%2$s</a>' , esc_url( get_permalink( $post_id ) ) , __( 'View' ) );

	}
	
}

 

posts-mobile.css

@media screen and (max-width: 782px) {

    body.edit-php .fixed .column-title {
        width: auto;
    }
    body.edit-php .fixed .column-comments {
        display: none;
    }
    body.mobile.edit-php .fixed .row-actions {
        display: none;
    }
    
    /*
    If you want
    body.edit-php .fixed .column-date {
        width: auto;
        display: table-cell;
    }
    */

	/*
    If you want
    body.edit-php .fixed .column-edit_button,
    body.edit-php .fixed .column-view_button {
        display: table-cell;
    }
    */

}

/*
If you want

body.edit-php .fixed .column-edit_button,
body.edit-php .fixed .column-view_button {
    display: none;
}
*/