WordPress Admin Checklist

While working on DP Dashboard, I created a checklist to redesign the WordPress admin pages. The WordPress admin system is massive. Most that attempts to redesign it ends up creating their own layer simply to not deal with the headaches. That method has its own pros and cons. The following checklist is for anyone who has or choose to deal with the headaches. The tricky part to re-designing the WordPress admin is triple checking. Check your design in:

  • desktop or wide screen view
  • desktop, but javascript turned off view
  • mobile and small screen (small screen and mobile are related, but different still). You need to test hover activated actions with an actual mobile device or simulator.

My checklist isn’t definitive. I’m sure I’ll have more to add as DP Dashboard development moves along and as WordPress changes with each version. And here’s the actual checklist:

components:
	* alerts / notifications
		* message
		* error
		* update nag
		* login error
	* admin bar
		* first level
			* second level
				* third level
			* second level secondary
				* third level secondary
		* first level secondary item
			* second level
				* third level
			* second level secondary
				* third level secondary
		* buddypress menu items
	* left admin panel
		* normal view
			* icons
			* menu-name
			* pending updates / moderation indicators
			* sub menus
			* sub menu of currently expanded parent item
		* collapsed view
		* auto collapsed view
	* headings
		* h2 heading tabs
		* h3 heading tabs
		* reset headings inside of comments
		* headings in popups and iframes
	* lists
		* custom unordered lists
		* custom ordered lists
		* .categorychecklist
		* .tagchecklist
		* #plugin header tabs
		* .subsubsub
	* descriptions
		* .howto
		* .description
		* .indicator-hint
	* form fields
		* buttons
			* .button-primary
			* .button-secondary (for backward compatibility)
			* .button-large
			* .button-small
			* .button-group (an example of it is available on the media frame Insert From URL view after you've given a valid image address)
	* forms
	* tables
		* fixed
		* form table
		* widefat
		* wp list table
	* editors
		* text
		* visual
		* comment submission editor
		* press this editor
	* wp pointers
		* up
		* down
		* left
		* right
	* media frame
		* media library
		* insert from url
		* set featured image
	* color picker

pages (and their components):
	* about
		* changelog
		* credits
		* freedoms
		* back to dashboard link
	* dashboard:
		* home
			* browser nag (not displayed by default unless your browser is out of date)
			* right now stats
			* recent comments
				* pending styles
				* undo row
			* rss widget
				* simple view
				* detailed view
			* links
			* plugins
			* quickpress
			* recent drafts
			* welcome screen
		* updates
	* posts
		* all posts
			* subsubsub
			* search
			* tablenav
			* row actions
			* bulk edit
			* quick edit
		* add new
			* global 
			* visual editor
				* buttons
				* split buttons
				* mceText
				* help window
				* editor style inside visual editor frame
			* text editor
				* buttons
			* no js editor
			* post boxes:
				* publish
					* post status
					* post time stamp / scheduling
					* move to trash link
					* publish / update button
					* no js view
				* post formats
				* categories
					* tabs
					* tab panels
					* add new category link
					* add new category fields
					* no js view
				* tags
					* add new tag
					* tag suggestion results
					* tag cloud
					* no js view
				* featured image
					* image
					* remove image link
				* custom fields
					* table
					* add new button
					* custom fields in side sortable view
				* comments
				* author
				* discussion
				* revisions
					* revision comparison
		* categories
			* add category form
			* categories listing
				* quick edit
			* mobile view
		* tags
			* tag cloud
	* media:
		* library
			* attach image window
		* add new
			* drag drop area
			* list of uploaded images
			* html uploader
	* links:
		* all links
		* add new
			* links table
		* link categories
	* pages:
		* all pages
			* bulk edit
			* quick edit
		* add new
	* comments:
		* all
		* pending
		* approved
		* spam
		* trash
	* appearance
		* themes
			* current theme
			* available theme
			* action buttons
			* individual theme details
			* theme preview iframe
			* broken themes listing
			* theme search/install
				* update link in action buttons area, in case the theme listed is already installed
			* theme installer iframe (different from theme preview iframe)
		* widgets
			* available widgets
			* inactive widgets
			* widgets within available sidebars
			* expanded widget view
			* no js view
			* accessibility enabled view
			* accessibility enabled, individual widget edit page
		* menus
			* menu settings column
				* theme locations
				* custom link
				* pagination of available links (for example, the posts box cannot list all posts if there are too many so it provides pagination when you're trying to view all posts on Menus page)
			* menu edit column
				* menu tabs
					* menu tabs pagination
				* menu header
				* menu body
					* menu items
						* name
						* edit link
						* edit fields
						* wide edit fields
						* link to original
						* remove/cancel links
					* no js view of menu items
				* menu footer
		* background
		* theme settings
		* editor
	* plugins:
		* installed plugins
			* row actions
			* inactive plugins
			* update notification
		* add new
			* plugin details window
		* editor
			* textarea
			* files listing column
			* documentations
	* users:
		* all users
		* add new
		* your profile
	* tools:
		* available tools
			* press this button
		* import
		* export
		* press this popup window
	* settings
		* general
		* writing
		* reading
		* discussion
		* media
		* privacy
		* permalinks

* check everything above on a multisite install

6 Responses

  1. WordPress admin styles checklist : Post Status
    WordPress admin styles checklist : Post Status

    [...] WordPress admin styles checklist » [...]

  2. Frank
    Frank

    Maybe it is a good idea to read all IDs and classes via JS and output in a helper plugin?
    perhaps a additional function to this plugin (WP Admin Style). Maybe you will fork it and write the enhancement.
    best

  3. Rudd
    Rudd

    Wow. A very huge list. Just read again about this plugin over Justintadlock’s website. Since I already have the membership, it’s time to download and install it on my own site.

  4. Paul Bonnici
    Paul Bonnici

    Hello all,

    I thought I might give some info on why I joined. :)

    I’ve just become a member. :) I was mainly interested in the DP Dashboard to help me spend far less time trying to manage WP and more time using it! :D

    Then I saw your templates, and I like them. Nice and clean, but quite functional (and not several megabytes like many others). ;) :)

    That is quite an impressive list and a nice logical structure. It will be fun and interesting to watch DPD grow and develop. :)

    I actually moved away from WP a few years ago to Drupal because I found WP to be too inflexible for my needs. However, while Drupal is very flexible and quite powerful, it can be too much so! Especially if people just want a blog and nothing more. I saw that 3.5 has improved, and decided to go back to WP for blogging. :) I’ve just begun setting up my VPS, and have some work to do yet, then I will install WP & DP Dashboard, and the themes and have a play. :D Should be fun! (I will have two WP installations on separate VPS’s, one for my personal blog, and one for development/design/testing work.)

    I like what I’ve seen here, and look forward to helping out when I can.

    Thanks, and good luck to us all! :D
    Paul.

  5. Zach Smith
    Zach Smith

    thanks for the info! will share…

Post Comment