Making Drupal Admin UI feel a little like Wordpress

drupal Admin UI

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

  • Select 'show only on listed pages' and add in the textarea:
    admin*
    user*
    node/add*
    node/*/edit
    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.

    Related Posts

    Comments

    check out http://drupal.org/project/vt_default if you are using vertical tabs, it helps adding more of the node form into vertical tabs, not just CCK fieldsets.

    snufkin

    Thanks, that's certainly a nice addition to extend Vertical Tabs.

    Thanks Duvien, this is a really timely post as we've been on the same journey and I've been asking how relevant an in-site editing tool is if it makes the client more confused than before!

    I think a hybrid option is useful, but I'm not sure what that is yet. Interested to chat it through with some other Drupal types in the real world.

    Dan

    Admin module with Admin Tools Module is a far better fit then Admin menu.

    Great post!

    There's an administration theme module which extends the default administration theme functionality to make it more like sections, but I think I like your way of using sections better. There's also a great module called NodeFormCols which I love because I can "hide" things like the "menu options" which aren't used on a lot of my content types. Unfortunately, NodeFormColumns doesn't work with Vertical Tabs :(

    Yes, i agree, certain content-types should not have a menu option settings. For example, a blog content-type does not really require the menu settings if it's only used to post blogs and not add it to a page. I use http://drupal.org/project/ctm this module to handle it. Works well with Vertical tabs and also you can set it on a per content-type basis.

    Also, have a look at this module: http://drupal.org/project/override_node_options which allows you to override node options on certain content-types based on certain role(s).

    Hi, i believe that i saw you visited my web web page thus i came to ??return the favor??.I'm attempting to obtain things to increase my internet site!I suppose its ok to use several of your ideas!!

    Sure, i supposed there's nothing to stop you taking ideas or inspiration from other people's work as a point of reference.

    I don't know if it's just me or if everybody else encountering problems together with your website. It appears as if a number of the written text on your content are running off the screen. Can somebody else please provide feedback and let me know if this is happening to them too? This could possibly be a issue with my internet browser because I've had this take place just before.

    Thank you for letting me know. Which browser were you using?

    In fact this is the issue i wanted to complain about when i saw your response. I'm looking forward to its resolving.

    I had a stab at an wordpress style admin screen for Drupal 7, early stages but kinda cool.

    https://github.com/onemanonelaptop/wpadmin

    Add new comment