Presentation by Jesper van Engelen on WordPress admin panel customisation. 2016.geneva.wordcamp.org

1. CUSTOMISING
WORDPRESS’
ADMIN PANEL

#wcgva

2. Hello! I’m
Jesper van Engelen.
Plugin developer
Core contributor
WP translator
AdminColumns.com
WP developer

3. We’re lucky to be
in WordPress
#wcgva @jesperengelen

4. WORDPRESS POWERS 47,847,425 WEBSITES
13%
16%
18%
22%
24%
26%
2011 2012 2013 2014 2015 2016
(give or take)

5. SO WHY IS THE
BACKEND ALWAYS
SO DARN UGLY?

6. What have
you done to
my beautiful
WordPress?

7. Let’s clean
wp-admin
#wcgva @jesperengelen

8. 1.
The Menu (API)
Keep what you need,
discard what you don’t

9. 3 plugins
“
Why do it yourself if somebody has
already done it for you?

10. Or simply do it yourself: The Menu API
add_menu_page( [..] )
add_submenu_page( [..] )
Add
remove_menu_page( $slug )
remove_submenu_page( $slug )
Remove

11. WHAT’S A
SLUG?

12. Removing menu items
add_action( 'admin_menu', 'myplugin_clean_menu' );
function myplugin_clean_menu() {
// Default menu items
remove_menu_page( 'options-general.php' );
remove_menu_page( 'tools.php' );
remove_menu_page( 'edit-comments.php' );
remove_menu_page( 'edit.php' );
remove_menu_page( 'themes.php' );
// Plugin menu items
remove_menu_page( 'wpseo_dashboard' );
}

13. Old New

14. 2.
The Columns (API)
Display information that is
relevant to your content

15. THE
PROBLEM

16. 2 plugins
“
Why do it yourself if somebody has
already done it for you?

17. The Columns API
Add and remove columns
add_filter( 'manage_[post_type]_posts_columns', 'mp_columns' );
function mp_columns( $columns ) {
/* Add or remove columns here */
return $columns;
}
Create column content
add_action( 'manage_[post_type]_custom_column', 'mp_column_rent' );
function mp_column_rent( $column, $post_id ) {
/* Output content for columns */
}

18. The Columns API
Add and remove columns
add_filter( 'manage_[post_type]_posts_columns', 'mp_columns' );
function mp_columns( $columns ) {
/* Add or remove columns here */
return $columns;
}
Create column content
add_action( 'manage_[post_type]_custom_column', 'mp_column_rent' );
function mp_column_rent( $column, $post_id ) {
/* Output content for columns */
}

19. Add and remove columnsReal Estate:
add_filter( 'manage_realestate_posts_columns', 'mp_columns', 100 );
function mp_columns( $columns ) {
// Remove existing columns
unset( $columns['date'] );
unset( $columns['wpseo-score'] );
unset( $columns['wpseo-score-readability'] );
// Add new column)
$columns = array_slice( $columns, 0, 1, true )
+ array( 'image' => __( 'Image' ) )
+ array_slice( $columns, 1, NULL, true )
+ array( 'rent' => __( 'Rent' ) );
return $columns;
}

20. add_action( 'manage_realestate_posts_custom_column', 'mp_column', 10, 2 );
function mp_column( $column, $post_id ) {
// Image column
if ( $column == 'image' ) {
echo get_the_post_thumbnail( $post_id, array(80,80) );
}
// Monthly rent column
if ( $column == 'rent' ) {
$rent = get_post_meta( $post_id, 'rent', true );
if ( ! $rent ) {
_e( 'n/a' );
} else {
echo number_format( $rent, 0, '.', ',' ) . ' CHF';
}
}
}
Add column contentReal Estate:

21. Old New
OH YEAH!

22. THANKS!
Any questions?
…or talk to me on Twitter @jesperengelen