Making Drupal Admin UI feel a little like Wordpress
Recently, i've had a few requests from design companies asking how they can make Drupal Admin UI feel a little like Wordpress because a lot of their clients have become accustom to using Wordpress admin UI and is comfortable with administering their site with a separation of the front and backend. However, these design companies are trying to move away from Wordpress and offer Drupal as a long term solution. Furthermore, the design companies didn't want me to spend a lot of time customizing Drupal so that the admin UI is a bit more like Wordpress.
Thankfully, some attempts have already been made since the days of Drupal 5.
First, Drupal core introduced a way to use a theme for the administration section of the site, though not very complete. This gave way to some theme developers contributing admin themes but often these themes were only to make drupal look different in terms of design style.
A great Drupal specialist company called Developmentseed really step this up and offered both a module and themes for free to make Drupal behave more of a separation of front and backend, as well as adding some usability into it. In doing so, they have really made an excellent professional job of it. The design is a clean modern theme (screenshot above is taken from Cube theme) that comes with a toolbar (the module). So i used this as the basis and through a little research, i came up with a solution. Not a complete solution but enough for what we intended and can easily be set up without any custom coding.
There are 4 modules and a theme that we need. Remember, once this is setup you could create a profile installation to reuse the setup and not have to go through the same procedure each time. Check out this page for more info about creating a Profile installation. Quickest method is to follow Lullabot's article.
This tutorial is certainly not going to turn Drupal into Wordpress (we wouldn't want that anyway) but it'll certainly make it more usable.
Modules required:
Section modules
This is used for assigning the admin theme to all admin pages
Admin Menu
As the name implies, this is to show an administration menu but displayed at the very top of every page as a dropdown menu
Vertical Tabs
To keep the additional information, such as path, comment settings, author information and publishing options in a vertical tab style so you don't get a full long add/edit content page.
Admin Role
A little helper module to maintain an administrator role which has all available permissions.
Themes required:
- Rubik Theme, also comes with a sub theme called Cube which is the one i prefer to use
- Tao Theme This theme doesn't do anything but it required by Rubik theme
Rubik theme
This theme was created by Developmentseed and also has a module called Admin which is designed to be used with Rubik, however it is not a requirement and we wouldn't be using it for this article.
Okay, let's go ahead and set it up.
- Install all three modules listed above including the both themes (Rubik and Tao)
Setting up themes
Start with the easy part, once you have installed the themes, go to theme settings page and enable the Rubik and Tao themes. In the theme list, you will see an additional theme called Cube, enable this as well, it is the one we will use. There really isn't any difference in the Rubik or Cube theme apart from styling and colours (so choose which ever one you prefer).
Admin Menu
Once installed and activated it will appear at the top of your page. I used version 6.x-3.0-alpha4 and found it to be quite stable, at least i've not had issues with it so far. Of course, you can use the admin module by Developmentseed if you want but i find the overlay admin toolbar menu somewhat annoying and gets in the way whether it's position above or to the side of the page.
Admin Role
Once install, remember to go into permission settings page and check all the boxes for each permission access under this role. It helps to keep everything as admin for users under this role.
Configuring section module
Once the section module is installed and activated, it will take over your admin theme core feature so you will need to go into section module to configure it. In the section module, you will notice the administration theme item is there, click on edit and fill the info as given below.
Section Settings:
- Enabled = yes
- Select Theme = Choose Cube or Rubik theme in the dropdown list
Role specific visibility
- Select Admin (choice is yours for which role you want to give access to the admin pages)
Page specific visibility
admin*<br>user*<br>node/add*<br>node/*/edit<br>node/*/track
Finally, click on save button at the bottom. Now the new theme should be viewable under all admin pages.
For the vertical tabs, once activated you'll notice the difference when you go into add/edit node pages. All the information at the bottom page is now in a nice vertical tabbed as opposed to it being a long list of collapsible fieldsets. One thing to bear in mind, each time you create a grouping of cck fields, it will automatically be added to the vertical tabs by default. To remove this behaviour (i find it annoying) and allow you to auto assign any group to the vertical tabs when creating new content types, go to vertical tabs settings and under where is says 'Include new fieldsets in vertical tabs by default.', turn if off.
In addition, you will also notice with the Rubik/Cube theme, save and delete buttons are also present in the right sidebar for add/edit node pages as well as the taxonomy select list or dropdown.
Update (13th Jun 2010):
After writing this article, i had noticed another module just release called Arrange Fields which allows you to reposition your CCK fields anywhere you want on the form. Looks very promising but not tried it yet.