6. CREATING AN ADMIN PAGE
// Hook to create the menu
add_action(
'admin_menu', WORDPRESS CORE HOOK FOR CREATING MENUS
'wcsd2013_admin_menu' OUR CALLBACK FUNCTION TO CREATE OUR MENU
);
http://codex.wordpress.org/Administration_Menus
7. CREATING AN ADMIN PAGE
// Create top-level menu item
function wcsd2013_admin_menu() {
add_menu_page(
'WordCamp San Diego 2013', TEXT SHOWS IN THE BROWSER TITLE BAR
'WCSD 2013', TEXT SHOWS IN THE MENU
'update_core', MINIMUM CAPABILITIES REQUIRED FOR ACCESS
'wcsd2013', PAGE SLUG
'wcsd2013_page' CALLBACK FUNCTION FOR PAGE OUTPUT
);
}
http://codex.wordpress.org/Administration_Menus
8. CREATING AN ADMIN PAGE
// Page output
function wcsd2013_page() {
if ( ! current_user_can( 'update_core' ) )
wp_die( __( 'Access Denied.' ) );
require_once( plugin_dir_path( __FILE__ ).'page.php' );
}
SECURITY TIP: DOUBLE CHECK THAT THE USER HAS ACCESS TO VIEW YOUR PAGE
SANITY TIP: KEEP PAGE STRUCTURE IN A SEPARATE FILE SO IT’S EASIER TO MAINTAIN
http://codex.wordpress.org/Administration_Menus
11. BASIC HTML STRUCTURE
<div class="wrap">
<?php screen_icon(); ?>
<h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?></h2>
</div>
div.wrap
SETS UP MARGINS AROUND OUR PAGE CONTENT
12. BASIC HTML STRUCTURE
<div class="wrap">
<?php screen_icon(); ?>
<h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?></h2>
</div>
screen_icon()
CREATES THE HTML STRUCTURE TO HOLD OUR CUSTOM PAGE ICON
http://codex.wordpress.org/Function_Reference/screen_icon
13. BASIC HTML STRUCTURE
<div class="wrap">
<?php screen_icon(); ?>
<h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?></h2>
</div>
<h2>
THE PAGE TITLE
20. BONUS ROUND: SETTINGS API
function wcsd2013_section_name_callback() {
_e( 'Describe this section a bit so people know what to do.' );
}
http://kovshenin.com/2012/the-wordpress-settings-api/
29. ADDING A CUSTOM BADASS ICON
MENU ICON PAGE ICON
NORMAL NORMAL
ICON: 16x16 ICON: 32x32
FILE: 56x28 FILE: 32x32
HIDPI HIDPI
ICON: 32x32 ICON: 64x64
FILE: 112x56 FILE: 64x64
Fugue Icons: http://p.yusukekamiyamane.com/ | PSD: http://bdove.me/wcsd2013-psd.zip
30. ADDING A CUSTOM BADASS ICON
// Hook to load the css
add_action(
'admin_enqueue_scripts', WORDPRESS CORE HOOK FOR LOADING CSS
'wcsd2013_scripts' OUR CALLBACK FUNCTION TO ENQUEUE OUR CSS
);
http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
31. ADDING A CUSTOM BADASS ICON
// Enqueue the styles
function wcsd2013_scripts() {
wp_enqueue_style(
'wcsd-admin', STYLESHEET IDENTIFIER
plugin_dir_url( __FILE__ ).'admin.css' PATH TO OUR CSS FILE
);
}
http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts