Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ReBrand
WordPress Admin
WordPress Meet Up
August 2014
By : Chandra Prakash Thapa
Before we start ?
At a minimum, you need to know:
 WordPress Hooks
 functions.php
WordPress Hooks?
Hooks allows us to “hook into” WordPress System to retrieve,
insert or modify data or perform certain act...
functions.php
 Template.
 Acts like a WordPress plugin.
 Define functions, classes, actions and
filters.
 Add features...
Modify the Login Logo
Modify the Login Logo
function wpnepal_admin_logo() {
echo '<style>
.login h1 a {background-
image:url('.get_template_dire...
Modify the Login Logo
Modify the Login Logo
Remove Logo from Admin Bar
Remove Logo from Admin Bar
function wpnepal_admin_bar_remove() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('wp-logo...
Remove Logo from Admin Bar
Customize the Dashboard
Customize the Dashboard
function wpnepal_custom_dashboard_widgets() {
// Quick Press
remove_meta_box('dashboard_quick_pres...
Customize the Dashboard
function wpnepal_custom_dashboard_help() {
echo '<p> Your custom message.</p>';
}
add_action('wp_d...
Customize the Dashboard
Custom admin footer text
Custom admin footer text
function custom_admin_footer() {
echo "<p>Powered by : <a
href='http://merobox.com/' >MeroBox </a...
Custom admin footer version
Custom admin footer version
add_filter('update_footer','wpnepal_footer_version',11);
function wpnepal_footer_version() {
r...
Change the Default Gravatar
Change the Default Gravatar
add_filter('avatar_defaults','wpnepal_newgravatar');
function wpnepal_newgravatar($avatar_defa...
Change the Default Gravatar
[ Go to > Dashboard-> Settings -> Discussion ]
Change the Default Gravatar
Custom Admin Style
Custom Admin Style
function wpnepal_admin_css() {
wp_enqueue_style('admin_css',
get_template_directory_uri().'/css/admin.c...
Custom Admin Style
/* Custom Amazing Background */
#wpwrap{
background-image: url(../images/bk1.jpg);
background-size: 100...
Custom Admin Style
Custom Admin Style
/* Text, Heading color */
body,h2, #footer-upgrade, #adminmenu div.wp-menu-
image:before{
color: #eee;
...
Custom Admin Style
/* Transparent Menu, White color */
#adminmenuwrap, .wp-submenu ,.wp-submenu-wrap{
background-color: tr...
Reference
[ For more ]
• http://code.tutsplus.com/articles/the-beginners-guide-to-wordpress-actions-and-
filters--wp-27373...
Thank You!
QUESTIONS?
Chandra Prakash Thapa
@cpthapa
cpthapa@gmail.com
cpthapa.com.np
MeroBox.com
Upcoming SlideShare
Loading in …5
×

Rebrand WordPress Admin

1,614 views

Published on

The Re-brand WordPress Admin is for developers who want to give their clients a more personalized and less confusing content management system with amazing look and feel.

Published in: Technology
  • Be the first to comment

Rebrand WordPress Admin

  1. 1. ReBrand WordPress Admin WordPress Meet Up August 2014 By : Chandra Prakash Thapa
  2. 2. Before we start ? At a minimum, you need to know:  WordPress Hooks  functions.php
  3. 3. WordPress Hooks? Hooks allows us to “hook into” WordPress System to retrieve, insert or modify data or perform certain actions, without modifying the core files. Two types :  Actions : Perform Tasks  Filters : Manipulate Data Ref: • http://code.tutsplus.com/articles/the-beginners-guide-to-wordpress-actions-and-filters--wp-27373 • http://www.smashingmagazine.com/2011/10/07/definitive-guide-wordpress-hooks/ • http://blog.teamtreehouse.com/getting-aquainted-with-wordpress-action-hooks
  4. 4. functions.php  Template.  Acts like a WordPress plugin.  Define functions, classes, actions and filters.  Add features and extend the functionality. Ref: • http://www.wpbeginner.com/glossary/functions-php/
  5. 5. Modify the Login Logo
  6. 6. Modify the Login Logo function wpnepal_admin_logo() { echo '<style> .login h1 a {background- image:url('.get_template_directory_uri(). '/images/logo.png) !important; background-size:100%; width:185px; height:58px; }</style>'; } add_action('login_head', 'wpnepal_admin_logo'); Ref: • http://diythemes.com/thesis/rtfm/add-image-logo-wordpress-login/
  7. 7. Modify the Login Logo
  8. 8. Modify the Login Logo
  9. 9. Remove Logo from Admin Bar
  10. 10. Remove Logo from Admin Bar function wpnepal_admin_bar_remove() { global $wp_admin_bar; $wp_admin_bar->remove_menu('wp-logo'); } add_action('wp_before_admin_bar_render', 'wpnepal_admin_bar_remove', 0); Ref: • http://www.staroneweb.co.in/remove-wordpress-logo-admin-bar-pages/
  11. 11. Remove Logo from Admin Bar
  12. 12. Customize the Dashboard
  13. 13. Customize the Dashboard function wpnepal_custom_dashboard_widgets() { // Quick Press remove_meta_box('dashboard_quick_press', 'dashboard', 'side'); // WordPress blog remove_meta_box('dashboard_primary', 'dashboard', 'side'); wp_add_dashboard_widget('custom_help_widget', 'Help and Support', 'wpnepal_custom_dashboard_help'); } Ref: • http://codex.wordpress.org/Function_Reference/remove_meta_box
  14. 14. Customize the Dashboard function wpnepal_custom_dashboard_help() { echo '<p> Your custom message.</p>'; } add_action('wp_dashboard_setup', 'wpnepal_custom_dashboard_widgets');
  15. 15. Customize the Dashboard
  16. 16. Custom admin footer text
  17. 17. Custom admin footer text function custom_admin_footer() { echo "<p>Powered by : <a href='http://merobox.com/' >MeroBox </a></p> "; } add_filter('admin_footer_text','custom_admin_footer');
  18. 18. Custom admin footer version
  19. 19. Custom admin footer version add_filter('update_footer','wpnepal_footer_version',11); function wpnepal_footer_version() { return 'mBox Theme Frameork v1.0'; }
  20. 20. Change the Default Gravatar
  21. 21. Change the Default Gravatar add_filter('avatar_defaults','wpnepal_newgravatar'); function wpnepal_newgravatar($avatar_defaults) { $myavatar = get_bloginfo('template_directory') . '/images/merobox.png'; $avatar_defaults[$myavatar] = "MeroBox"; return $avatar_defaults; }
  22. 22. Change the Default Gravatar [ Go to > Dashboard-> Settings -> Discussion ]
  23. 23. Change the Default Gravatar
  24. 24. Custom Admin Style
  25. 25. Custom Admin Style function wpnepal_admin_css() { wp_enqueue_style('admin_css', get_template_directory_uri().'/css/admin.css'); } add_action('admin_print_styles', 'wpnepal_admin_css' );
  26. 26. Custom Admin Style /* Custom Amazing Background */ #wpwrap{ background-image: url(../images/bk1.jpg); background-size: 100% 100%; }
  27. 27. Custom Admin Style
  28. 28. Custom Admin Style /* Text, Heading color */ body,h2, #footer-upgrade, #adminmenu div.wp-menu- image:before{ color: #eee; } .hndle, p{ color: #222; }
  29. 29. Custom Admin Style /* Transparent Menu, White color */ #adminmenuwrap, .wp-submenu ,.wp-submenu-wrap{ background-color: transparent !important; } #adminmenu, .wp-submenu ,.wp-submenu-wrap{ background-color: rgba(255, 255, 255, 0.18); }
  30. 30. Reference [ For more ] • http://code.tutsplus.com/articles/the-beginners-guide-to-wordpress-actions-and- filters--wp-27373 • http://www.smashingmagazine.com/2011/10/07/definitive-guide-wordpress- hooks/ • http://blog.teamtreehouse.com/getting-aquainted-with-wordpress-action-hooks • http://www.wpbeginner.com/glossary/functions-php/ • http://diythemes.com/thesis/rtfm/add-image-logo-wordpress-login/  Google.com 
  31. 31. Thank You! QUESTIONS? Chandra Prakash Thapa @cpthapa cpthapa@gmail.com cpthapa.com.np MeroBox.com

×