{"id":27,"date":"2011-01-03T07:24:04","date_gmt":"2011-01-03T07:24:04","guid":{"rendered":"http:\/\/hgtas.com\/?p=27"},"modified":"2011-01-03T09:06:39","modified_gmt":"2011-01-03T09:06:39","slug":"how-to-customize-the-wordpress-admin-area","status":"publish","type":"post","link":"https:\/\/508.me\/?p=27","title":{"rendered":"\u5982\u4f55\u5b9a\u5236wordpress\u63a7\u5236\u9762\u677f"},"content":{"rendered":"

\"\"<\/a><\/p>\n

WordPress is one of the best CMSs<\/a> out there \u2014 if not the<\/em> best (but of course, I\u2019m biased because I\u2019m a WordPress fanatic). It has loads of handy features that make site administration a breeze. WordPress is a publishing platform with a comment system, a GUI for creating, editing and managing posts and pages, handy built-in tools like the “Export” feature to back up your content, user roles and permissions, and more.<\/p>\n

But how much of these features do we really use? Though already simple and user-friendly by default, we might want to customize the WordPress Admin interface to make it even simpler and more manageable for our clients, our co-authors, and ourselves.<\/p>\n

Why Customize the WordPress Admin Interface?<\/h3>\n

Lately, WordPress has reached phenomenally high usage rates. There are over 25 million publishers[1<\/a>]<\/sup> who use WordPress, making it a popular publishing platform. This means that its use has been extended outside of just a blogging platform (although it was certainly built for bloggers at the start) to other types of sites such as portfolios, business sites, image galleries, and even e-commerce sites<\/a>.<\/p>\n

Here is the problem, though. A robust publishing platform like WordPress has way more features than a regular user would ever need. Take the “Comments” panel for instance: Not everyone is going to need all the moderation privileges it has. Some sites might not even need commenting capabilities on their content. For example, a static informational site that doesn\u2019t have a blog section might not want people to be able to comment on static pages like their About<\/a> and Contact Us page.<\/p>\n

The following image shows the default WordPress Dashboard \u2014 the first page you\u2019ll see when you log into the Admin area. For tech-savvy folks and power users, it\u2019s great. But imagine a person (such as a paying client of yours) who doesn\u2019t need half of the things they see in this screen. All they want to do is publish a post. Maybe edit it if they make a mistake. That\u2019s it. Nothing else.<\/p>\n

\"\"<\/p>\n

The Solution<\/h3>\n

Luckily, WordPress has a solution. A good one. A completely modular and reversible one, in case you want to quickly revert back to the way things were.<\/p>\n

The solution is called\u00a0Hooks<\/a>, also known as “Filters” and “Actions”. These guys allow us to “hook” into the WordPress core without modifying its files so that we can safely make changes without compromising the integrity of our installation.<\/p>\n

We are going to use WordPress\u2019s different actions<\/a> and some of the\u00a0available filters<\/a> to remove features we do not need. We will also make some basic customization changes to brand our WordPress Admin area for our clients.<\/p>\n

The snippets we will be using are mostly from my site,\u00a0WP Snippets<\/a>, a searchable repository of WordPress snippets (check it out when you have the time).<\/p>\n

WordPress\u2019s functions.php<\/h3>\n

Let\u2019s get started. The first thing you need to do is open up functions.php<\/code> in your theme\u2019s directory. If you don\u2019t have a functions.php<\/code> file, then just create one using your favorite text editor<\/a>.<\/p>\n

functions.php<\/code> is the file where we will put all our code in. WordPress automatically checks this file, allowing you to customize just about everything before it\u2019s rendered on the screen.<\/p>\n

Sounds fuzzy? Here\u2019s how it works. Try out the following code. Don\u2019t worry; it will only affect the Admin area \u2014 so your site visitors won\u2019t see it. However, I do want to advise you to experiment offline<\/strong> by installing WordPress on your computer<\/a> (it\u2019s easier than you think).<\/p>\n

<php\r\nfunction testing() {\r\n  echo 'Hello World!';\r\n}\r\n\r\nadd_action( 'admin_head', 'testing' ); <\/strong>\r\n?>\r\n<\/pre>\n
\"\"<\/p>\n
Explanation<\/h4>\n
The code should print \u2018Hello World!\u2019 inside the <head><\/code> tags in the Admin panel, which isn\u2019t valid HTML code and therefore is printed out at the top of the web page.<\/p>\n
The testing()<\/code> function is our code that we want to run. To hook into WordPress core, we use the add_action()<\/code> function. In this situation, we pass in two parameters. The first parameter is the name of the action you want to hook into ('admin_head'<\/code>). The second parameter is the name of the function you want to run ('testing'<\/code>).<\/p>\n
After you try this code snippet out, be sure to remove this code from your functions.php<\/code> file (we\u2019re done with it).<\/p>\n
Disable Dashboard Widgets<\/h3>\n
The first thing people will see when logging into the Admin area is  the Dashboard. There, you\u2019ll find widgets like\u00a0“WordPress Blog,” “Other  WordPress News,” and “Incoming Links”. Not very interesting for the  average user.<\/p>\n
We will be using the wp_dashboard_setup<\/code> action\u00a0to remove them. In the function we want to execute, we will use the unset()<\/code> function to remove the Dashboard widgets we don\u2019t want to display. Then all we need to do is call add_action()<\/code> using 'wp_dashboard_setup'<\/code> as the first parameter as well as our function, named remove_dashboard_widgets<\/code>, as the second parameter.<\/p>\n
function remove_dashboard_widgets(){\r\n  global$wp_meta_boxes;\r\n  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);\r\n  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);\r\n  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);\r\n  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);\r\n  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);\r\n  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);\u00a0\r\n}\r\n\r\nadd_action('wp_dashboard_setup', 'remove_dashboard_widgets');<\/pre>\n
\"\"<\/p>\n
Check out the WordPress docs entry on removing dashboard widgets<\/a> for more information.<\/p>\n
Disable Standard Widgets<\/h3>\n
WordPress comes with 12 standard widgets<\/a>. Some of these default widgets include Calender (WP_Widget_Calendar<\/code>), Search (WP_Widget_Search<\/code>) and Recent Comments (WP_Widget_Recent_Comments<\/code>).<\/p>\n
\"\"<\/p>\n
You might want to disable the widgets that aren\u2019t needed for your  WordPress installation, again, to simplify and declutter your publishing  platform. For example, you might not need the calendar, or maybe you\u2019ve  used a third-party search service such as Google Custom Search for your  client\u2019s WordPress installation.<\/p>\n
For this one, we will be using widgets_init<\/code> action. We will name our function simply as remove_some_wp_widgets<\/code>. In our function, we will use WordPress\u2019s unregister_widget()<\/code> function using the names of the widgets we don\u2019t want to use as the parameter.<\/p>\n
Then, like before, we just call add_action<\/code>. What you\u2019ll see in this code snippet is a third parameter ('1'<\/code>).  The third parameter is the priority of the action. 10 is the default  priority, meaning that if you don\u2019t pass a value for this optional  parameter, it will assume the value is 10. The lower the number, the  higher the priority. So at 1, this is one of the top priority functions  that will be called first no matter what its position is in functions.php<\/code>.<\/p>\n
function remove_some_wp_widgets(){\r\n  unregister_widget('WP_Widget_Calendar');\r\n  unregister_widget('WP_Widget_Search');\r\n  unregister_widget('WP_Widget_Recent_Comments');\r\n}\r\n\r\nadd_action('widgets_init',remove_some_wp_widgets', 1);<\/pre>\n
Learn more about the Widgets API<\/a> to see other cool stuff you can do with it.<\/p>\n
Removing Menu Items<\/h3>\n
You might want to remove menu items in the Admin panel to simplify the interface.<\/p>\n
This is how you disable top-level menu items such as “Posts,” “Media,” “Appearance,” and “Tools”:<\/p>\n
function remove_menu_items() {\r\n  global $menu;\r\n  $restricted = array(__('Links'), __('Comments'), __('Media'),\r\n  __('Plugins'), __('Tools'), __('Users'));\r\n  end ($menu);\r\n  while (prev($menu)){\r\n    $value = explode(' ',$menu[key($menu)][0]);\r\n    if(in_array($value[0] != NULL?$value[0]:\"\" , $restricted)){\r\n      unset($menu[key($menu)]);}\r\n    }\r\n  }\r\n\r\nadd_action('admin_menu', 'remove_menu_items');<\/pre>\n
This is how you would remove submenu items under the top-level navigation (for example, the “Theme” link under “Appearance”):<\/p>\n
function remove_submenus() {\r\n  global $submenu;\r\n  unset($submenu['index.php'][10]); \/\/ Removes 'Updates'.<\/strong>\r\n  unset($submenu['themes.php'][5]); \/\/ Removes 'Themes'.<\/strong>\r\n  unset($submenu['options-general.php'][15]); \/\/ Removes 'Writing'.<\/strong>\r\n  unset($submenu['options-general.php'][25]); \/\/ Removes 'Discussion'.<\/strong>\r\n  unset($submenu['edit.php'][16]); \/\/ Removes 'Tags'.\u00a0 <\/strong>\r\n}\r\n\r\nadd_action('admin_menu', 'remove_submenus');<\/pre>\n
To find what the submenu names are, just go to wp-admin\/menu.php and search for the item you want to disable.<\/p>\n
Remove the Editor Submenu Item<\/h3>\n
The Editor link (a submenu item under “Appearance”) is a bit tricky to disable. It doesn\u2019t respond to the unset()<\/code> function used above. Thus, if we wanted to remove it from the menu, we\u2019d have to remove the action that displays it.<\/p>\n
\"\"<\/p>\n
We will use the remove_action()<\/code> function which simply removes the action from our theme.<\/p>\n
function remove_editor_menu() {\r\n  remove_action('admin_menu', '_add_themes_utility_last', 101);\r\n}\r\n\r\nadd_action('_admin_menu', 'remove_editor_menu', 1);<\/pre>\n
Disable Meta Boxes in the Editing Pages<\/h3>\n
The “Add New” and “Edit” pages \u2014 the GUI for creating and editing  posts and pages \u2014 is probably the most used feature in the Admin area.  This is what you and\/or your clients will be most exposed to. It serves  us well if we try to clean these pages up by removing things that we do  not need.<\/p>\n
\"\"<\/p>\n
For example, do you use any Custom fields or do you use the Excerpts field? If not, just remove them from this view.<\/p>\n
The following code snippet uses the remove_meta_box()<\/code> function. The first parameter is the meta box\u2019s HTML ID attribute you want to remove.<\/p>\n
To find out the ID, just inspect the source code or use a tool like the Web Developer Toolbar<\/a> to determine the ID attribute value of the section\u2019s containing <div><\/code>. For example, the Custom Fields\u2019 ID is #postcustom<\/code>, so the parameter we use is 'postcustom'<\/code>.<\/p>\n
\"\"<\/p>\n
The second parameter refers to the page you want to remove the meta box from (it can be either 'post'<\/code>, 'page'<\/code>, or 'link'<\/code>).<\/p>\n
We are going to remove the custom field, Trackbacks  checkbox  (because most of the time, we either enable or disable it in all of our  posts), the comments status option, tags (if you don\u2019t tag your posts  with keywords, why have this input field?), and so on.<\/p>\n
function customize_meta_boxes() {\r\n  \/* Removes meta boxes from Posts *\/<\/strong>\r\n  remove_meta_box('postcustom','post','normal');\r\n  remove_meta_box('trackbacksdiv','post','normal');\r\n  remove_meta_box('commentstatusdiv','post','normal');\r\n  remove_meta_box('commentsdiv','post','normal');\r\n  remove_meta_box('tagsdiv-post_tag','post','normal');\r\n  remove_meta_box('postexcerpt','post','normal');\r\n  \/* Removes meta boxes from pages *\/<\/strong>\r\n  remove_meta_box('postcustom','page','normal');\r\n  remove_meta_box('trackbacksdiv','page','normal');\r\n  remove_meta_box('commentstatusdiv','page','normal');\r\n  remove_meta_box('commentsdiv','page','normal');\u00a0\r\n}\r\n\r\nadd_action('admin_init','customize_meta_boxes');<\/pre>\n
Remove Items from the Post and Page Columns<\/h3>\n
WordPress\u2019s Admin area often has tables that give you a quick  overview of a listing of your content. If you wanted to remove columns  from these views, you can.<\/p>\n
\"\"<\/p>\n
This time, we will use the add_filter()<\/code> WordPress function to add a filter instead of an action. A filter<\/a> is simply a function that watches out for data being called from the  database. When it sees something that we want to remove (or modify), it  executes the filter first before rendering the data on the web page.<\/p>\n
In the example below, we will remove the comments count from the Edit Pages and Edit Posts pages.<\/p>\n
function custom_post_columns($defaults) {\r\n  unset($defaults['comments']);\r\n  return $defaults;\r\n}\r\n\r\nadd_filter('manage_posts_columns', 'custom_post_columns');\r\n\r\nfunction custom_pages_columns($defaults) {\r\n  unset($defaults['comments']);\r\n  return $defaults;\r\n}\r\n\r\nadd_filter('manage_pages_columns', 'custom_pages_columns');<\/pre>\n
Customize the Favorites Dropdown<\/h3>\n
Sitting at the top bar of the Admin area is a dropdown called  “favorites” that just lists commonly used Admin tasks such as “New  Post,” “Comments” (which takes you to the comment moderation page), and  so on \u2014 for easy access.<\/p>\n
\"\"<\/p>\n
If we wanted to remove items in this menu, we can easily do so. (Of  course, we can also add stuff here too.) We can do this by adding  another filter and unsetting the link, which is contained in a PHP array  called $actions<\/code>.<\/p>\n
function custom_favorite_actions($actions) {\r\n  unset($actions['edit-comments.php']);\r\n  return $actions;\r\n}\r\n\r\nadd_filter('favorite_actions', 'custom_favorite_actions');<\/pre>\n
The Final Stretch: Miscellaneous Modifications<\/h3>\n
Everything we have done so far is to disable stuff we don\u2019t need. Now we\u2019ll modify a few things.<\/p>\n
Customize the Footer<\/h4>\n
The footer text in WordPress Admin contains links to the Documentation and to WordPress. Let\u2019s change that.<\/p>\n
This snippet just prints out some footer text.<\/p>\n
function modify_footer_admin () {\r\n  echo 'Created by <a href=\"http:\/\/example.com\">Filip<\/a>.';\r\n  echo 'Powered by<a href=\"http:\/\/WordPress.org\">WordPress<\/a>.';\r\n}\r\n\r\nadd_filter('admin_footer_text', 'modify_footer_admin');<\/pre>\n
\"\"<\/p>\n
Change the Logo<\/h4>\n
This one\u2019s an old trick, but a good one nonetheless. You can change  the logo for the login page and the one in the top left located at the  WordPress Admin area pages.<\/p>\n
The subsequent code snippet just prints out the CSS (that will be printed inside the <head><\/code> tags of Admin pages) that hooks into the div of the logo; it has an ID of #header-logo<\/code> in the admin pages and it is the h1 > a<\/code> element for the login page.<\/p>\n
For the url<\/code> property of the style rules, we just feed it  the image location of our logo. If the image is inside your WordPress  theme\u2019s directory, you can simply use the get_bloginfo('template_directory')<\/code> template tag to get the relative path to it, followed by the location  of the images directory (in this case, it\u2019s called “images”) and then  the file name of your image (in this case, admin_logo.png<\/code> and login_logo.png<\/code>).<\/p>\n
function custom_logo() {\r\n  echo '<style type=\"text\/css\">\r\n    #header-logo { background-image: url('.get_bloginfo('template_directory').'\/images\/admin_logo.png) !important; }\r\n    <\/style>';\r\n}\r\n\r\nadd_action('admin_head', 'custom_logo');\r\n\r\nfunction custom_login_logo() {\r\n  echo '<style type=\"text\/css\">\r\n    h1 a { background-image:url('.get_bloginfo('template_directory').'\/images\/login_logo.png) !important; }\r\n    <\/style>';\r\n}\r\n\r\nadd_action('login_head', 'custom_login_logo');<\/pre>\n
Hide the Upgrade Notice to Recent Versions<\/h4>\n
There\u2019s no guarantee that your theme will support the next version of  WordPress, so to prevent your clients from updating their website, you  can ask WordPress to hide this notification.<\/p>\n
First, I have to say that this isn\u2019t advisable. WordPress core  developers put this notification there for a huge reason: Security  updates. But if you must remove it (or modify it), all you have to do is  to add a filter for it.<\/p>\n
add_filter( 'pre_site_transient_update_core', create_function( '$a', \"return null;\" ) );\r\n<\/pre>\n
Customize the WYSIWYG Editor\u2019s CSS<\/h4>\n
If you wanted to customize the appearance of the WYSIWYG editor  (maybe to match the theme of your site), you can create a custom  stylesheet for it (you can call it something like editor-style.css<\/code>)  and then study the HTML markup to see how you can hook into the classes  and IDs of the editor. Then to add your custom stylesheet, you can use  the add_editor_style()<\/code> function.<\/p>\n
add_editor_style('css\/editor-style.css');<\/pre>\n
The reason why you\u2019d want to do this instead of modifying the global.css<\/code> stylesheet that comes with WordPress is ease of updating the core and  modularity. If there\u2019s one major theme to take away in this guide, it\u2019s  that you should never modify WordPress core files \u2014 there are plenty of  ways to hook into them.<\/p>\n
The Outcome<\/h3>\n
Using these snippets of code, you can customize and reduce the Admin  area\u2019s features down to just the essentials, permitting us to benefit  from the advantages of minimalism<\/a> and reductionism<\/a> principles in our work.<\/p>\n
This is what I\u2019ve been doing, and my clients love that all the clutter that they don\u2019t need isn\u2019t there.<\/p>\n
Here\u2019s a final image of my result (for the “Add New Post” page):<\/p>\n
\"\"<\/p>\n
Your Turn<\/h3>\n
Now it\u2019s your turn to talk. Do you customize WordPress in any way for  your customers, and if so, how? The depth of WordPress is incredible,  and I would love to see more tips and tricks about how to make it even  simpler \u2014 share your tips and tricks in the comments.<\/p>\n
\u82f1\u6587\u7248\u539f\u6587\uff1a<\/p>\n
http:\/\/sixrevisions.com\/wordpress\/how-to-customize-the-wordpress-admin-area\/<\/a><\/p>\n
\u4e2d\u6587\u7248:<\/p>\n
http:\/\/www.zhaokunyao.com\/archives\/1257<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress is one of the best CMSs out there \u2014 if not th […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[14,139],"_links":{"self":[{"href":"https:\/\/508.me\/index.php?rest_route=\/wp\/v2\/posts\/27"}],"collection":[{"href":"https:\/\/508.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/508.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/508.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/508.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27"}],"version-history":[{"count":3,"href":"https:\/\/508.me\/index.php?rest_route=\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/508.me\/index.php?rest_route=\/wp\/v2\/posts\/27\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/508.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/508.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/508.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}