e6

Options pages are becoming a core part of WordPress themes, particularly in premium ones where the competitive edge it gives is an essential.

Back in June we looked over the state of theme options pages at the time and found a lot of good things were happening. They make working with themes much easier by removing the need to delve into any theme files or code.

Elegant Themes (Who we have reviewed before) are one of the top premium themes sites around and have just recreated their options page entirely.

This is a sponsored review, and as always, we’ll be focusing more on the design than the functionality to see what we can learn from it.

What Makes It Different?

The design of this page is stunning. It looks every bit as good as the theme itself, take a look and see (Click to see full size).

e1

The vast majority of theme options pages and plugin settings pages try to mimic the WordPress admin panel design, with varying degrees of success. The result is rarely cohesive though, we normally end up with a few input boxes and a paragraph or 2 that stretch all the way across the screen.

ePanel (The name for this options panel) is very different to the normal WordPress admin design, but still fits in nicely.

  • Color Scheme – The colors chosen suit the default admin background perfectly. They aren’t used in the exact same way, but the same white, grey, blue set is there and it looks great.
  • Sidebar navigation options – As with the main WordPress navigation, the ePanel navigation is held in a sidebar on the left. No inconsistencies there.

But of course, it improves on the default settings page design in many ways:

  • Stronger background colors – The grey and blue backgrounds could well be overpowering if the entire screen was using them, but with the white WordPress admin panel surrounding it, it looks great.
  • Subtle gradients and careful effects – Every button and box is beautifully designed and always so easy on the eye. Few control panels on the internet look this nice.

e3

  • AJAX everywhere – The only time the page has to be reloaded is when you save your changes. Navigating using either the sidebar or the tabs on top is done with AJAX, which makes getting around all the different settings a much more pleasant experience.
  • Help icons for everything – The little red circles (With question marks) you see in the screenshot above are all clickable help buttons. Every option in the panel has them, taking you straight to the information for that one option. Much easier than opening up an entire support document!

    And of course, it’s using JavaScript to pop up gracefully (Shown below).

e2

What About the Functionality?

The fantastic new design is what really caught my eye, but of course the functionality to back it up there is there as well.

Two of my favorites features are:

  • Color picker – The Colorization page allows you to set the colors for 12 different aspects of the design, as well as specify a child stylesheet. At the top of the page though is a color picker to help you easily work out the hexcodes you want.

e4

  • Postinfo controls – This little tool lets you specify what info you would like displayed on your post pages. The fun part? You click the 4 options to enable/disable them. It’s just a very nice user interface touch.

e5

Aside from these 2, all of the options you would hope for (and a few more!) are present. Things like FeedBurner integration, page navigation controls, and code sections for the head and footer are all there.

For more info on what’s covered, check out the Elegant Themes blog post.

Conclusion

The new options page looks great and it’s going to be a real treat for all current and future Elegant Themes customers. But more so than that, it’s a perfect example of how a settings page can be done well.

With so many plugins and themes trying to create a pleasant admin experience, maybe they can learn something from what has been done here.

Nick from Elegant Themes is in the middle of adding this options page to all of his themes. Obviously this takes some time to do, so he’s rolling out the updates in batches of 6 themes at a time. The first 6 are done now, and of course, you can expect all future themes to come packed with this page as well.

If you want to join the Elegant Themes club and get full access to Nick’s whole collection of 26 beautiful themes, you can do it for just $19.95 a year. That’s less than $1 per theme, so it’s hard to beat the value. The signup page is here if you’re interested!

So what do you think of the page? Is the entirely custom design a step up from the normal theme and plugin settings pages we see? Or will it get annoying if every plugin and theme starts coming up with their own designs?

Enjoy this post? You should follow me on Twitter!