My Philosophy On WordPress Theme Options

Last week on Twitter I engaged in a brief debate with @bradleypotter and @DavidVII about the role of theme options pages in WordPress themes.  The conversation was provoked by me with these two tweets:

I’m not usually one to criticize, but if WP theme options pages simply mimic CSS styles, what’s the point? – Link

font size, padding, link decoration, font-weight… these are basic CSS styles. They belong in a stylesheet, not a web form. – Link

Let me expand on what I was trying to say…

I believe theme options do play an important role in a WordPress theme, especially themes of “premium quality”.  But they only prove useful/necessary to a certain extent, and should not be over-used for things that can easily be controlled elsewhere, like a CSS stylesheet.

What should be controlled via theme options?

Here are some things that I think do belong in a theme options page:

  • Choosing between built-in styles. Some folks simply want to choose a style and go.
  • Choosing to include / exclude page elements. A few examples: Enable/disable featured posts slider, enable/disable footer credit, change the format of an element (like choosing between displaying posts or pages in a slider), etc.
  • Google Analytics integration. It’s such a commonly used tool that it makes sense to embed the tracking code via theme options.
  • Upload a logo. Again, almost every user wants to use their own logo.  This is a useful option to have, and even moreso if they can choose between showing an image or text.
  • Inputting select pieces of content. 95+% of content should be controlled via posts, pages, and widgets.  However, there are some instances when it makes sense to provide an extra option or two to control some text.  For example, control your footer copyright / credit text.  Or control the text of a special button or other unique feature within your theme.
  • There are certainly other creative and necessary uses of theme options that I haven’t listed…

What should NOT be controlled via theme options?

Basically anything that can be changed via basic CSS:

  • Text / link colors
  • Border widths
  • Padding of elements
  • Background colors
  • Font choices
  • The list goes on…

I’ve seen quite a few themes bombard users with tons of text input boxes, essentially mimicing a CSS stylesheet.  What’s the point?  It makes for a bulky theme in terms of file size and database interaction, and more importantly, doesn’t make things much easier for users.

Jason Schuller, of Press75.com and ThemeGarden.com describes his theme options pages as “everything you need, nothing you don’t.”  I couldn’t agree more.

Consider who your users are

I find that consumers of WordPress themes generally fall into 2 categories:

The web developer serving a client

Many web developers turn to premium themes to use as a basis for their client’s sites.  They purchase a theme, then customize it, tweak styles, layout, and functionality to fully suit their client’s requirements.

I am a developer.  If I’m customizing a site for a client, I’d much rather use firebug + my text editor of choice (Coda) to whip up my own custom CSS changes for the site than fiddle with a cumbersome theme options web form.  Enter a value for border thickness, select border style from the dropdown, cut and paste a hexadecimal color code into this box, press the save button, wait for the admin page to reload… Thanks, but no thanks.

Of course, not everyone is a developer… which brings us to the second type of user:

The DIY website owner

This person has little or no knowledge of web development and CSS.  They turn to a WordPress theme because it delivers a great design, a feature set they’re looking for, and allows them to get up and running quickly at low cost.  With the thousands of available WordPress themes, both free and paid, many of which come packaged with multiple pre-designed style options, it’s doubtful they won’t find a design that suits their needs.

But let’s say they do need to tweak a few things.  Why not let them tweak a few lines of basic CSS (gasp!).  You can offer basic tutorials for your customers, provide assistance – even for minor customizations – in your customer support forums, or direct them to a web developer who would be happy to help them achieve their tweaks in under 1-2 work hours.

I’ve seen some themes word their theme options page with the following:

“H2 Font Size: [text input]px”

You’re telling me that if a user can understand what this theme option means, they’re unable able to – or can’t be instructed how to code:

h2 { font-size: 18px; }

Seems like a stretch, in my opinion.

Making assumptions about users

The common assumption about the DIY WordPress user is that if they’re not a developer, they are non-technical.  Generally speaking, I believe this assumption is wrong.

You must consider the level of tech savviness required for anyone to choose to go the self-hosted WordPress.org route, purchase and set up their own domain and hosting account, install WordPress, and navigate around the WordPress admin interface.  Sure, the UI is very user friendly, but you must admit, this person is a cut above your average web user, who can’t define what a web browser is.

Is it crazy to think that the DIY WordPress user is not motivated and competent enough to learn how to tweak just a few lines of CSS code?  I think not.

If they’re unable or unwilling to tweak basic CSS styles on their own, they have two very viable options:

Hire a web developer

If they’re running a business, then they can afford the relatively low investment to pay someone to tweak their theme.  Remember, this is far less expensive than hiring a freelancer or agency to design and build a website from scratch.  Check out TweakMyTheme.com, a service which specializes in just that – tweaking themes!

Go with a hosted solution

If the person really is not able to make basic tweaks to a CSS file (or child theme file), and they’re looking for a no-cost option, then it’s likely that they haven’t even reached WordPress.org.  These users are much more likely to go with a hosted solution like WordPress.com or Tumblr.  And there’s nothing wrong with that approach, especially if it’s a personal / hobby / “first-timer” website.

To Sum Up

I believe the role of WordPress theme options pages are to provide essential configuration options, making things quick, easy, and flexible for users.  But let’s not forget that WordPress.org blogs are 100% self-hosted, and are meant to be customized by editing theme files, specifically CSS.

As WordPress experts, we should be encouraging and educating the broader community – even if it’s through our commercial products – on the proper way to work with your WordPress-driven website.  We shouldn’t shield users from their own files for sake of “never touching a line of code”.

Enjoyed this?

Get a new tip to help you level up your business in my weekly newsletter.

Discuss

  • http://wpblogger.com Ben Cook

    I’m sorry, but have you experienced some of the support requests that WordPress users generate?

    A broad majority of WP users are NOT technically savvy and simply want to get their content out there. The reason WP is so popular is because it’s one of the easiest ways for people to do that.

    Furthermore, premium themes are moving in the direction of making things like changing font colors etc easier, not because they like to code more, but because people are asking for it.

    • http://www.briancasel.com/dev Brian

      No doubt that there are many WP users who can’t code but who do want to customize the little details (text colors, padding, etc.). There are themes and frameworks that serve this market and have clearly done very well.

      Personally, I choose not to go this direction. I think it makes more sense to keep CSS in the picture, not hidden behind a theme options form.

      • http://wpblogger.com Ben Cook

        I suppose since this is your philosophy I can hardly argue.

        However, personally I think giving people a way to transition from option CSS to actual CSS is a great way to expand your market and also help educate users.

        I know I only learned CSS (still learning) after switching to the Thesis theme which offers both options.

  • http://wpblogger.com Ben Cook

    I’m sorry, but have you experienced some of the support requests that WordPress users generate?

    A broad majority of WP users are NOT technically savvy and simply want to get their content out there. The reason WP is so popular is because it’s one of the easiest ways for people to do that.

    Furthermore, premium themes are moving in the direction of making things like changing font colors etc easier, not because they like to code more, but because people are asking for it.

    • http://www.briancasel.com/dev Brian

      No doubt that there are many WP users who can’t code but who do want to customize the little details (text colors, padding, etc.). There are themes and frameworks that serve this market and have clearly done very well.

      Personally, I choose not to go this direction. I think it makes more sense to keep CSS in the picture, not hidden behind a theme options form.

      • http://wpblogger.com Ben Cook

        I suppose since this is your philosophy I can hardly argue.

        However, personally I think giving people a way to transition from option CSS to actual CSS is a great way to expand your market and also help educate users.

        I know I only learned CSS (still learning) after switching to the Thesis theme which offers both options.

  • http://contempographicdesign.com Chris Robinson

    I have to disagree. Most inexperienced users would get easily discouraged jumping into a stylesheet even if its commented well. Allowing the user to easily control some key CSS through the options panel is a good thing.

    In my latest premium theme I’ve added a “Create a skin” section in the options panel, allowing the user to create a custom look in under 5 minutes.

    Screencast: http://screenr.com/xYW

    If that same inexperienced user had to jump out of the browser into an editor open up the CSS search for each property one by one, it would take much longer.

    If done right controlling key CSS through an option panel is definitely an advantage.

    • http://www.briancasel.com/dev Brian

      You have a nice theme there, and nice work on the options interface.

      Just my opinion, but I do think the styles portion is overkill. Not in terms of complexity (you laid it out nicely), but the fact that it quite literally mirrors a CSS stylesheet with several code-like elements. You’re asking users to input values like x and y positions, font stacks, and other things. Anyone who knows what these things are can easily make their own CSS edits. If they need to educate themselves by visiting the W3C website, then they should take whatever they learn there and input it in an actual stylesheet, no?

      The part that I do like is your “Extra Styles” section. This makes sense because it allows users to input CSS styles – however basic or complex as they want. This would be a great place to point out the W3C as resource for learning CSS basics.

  • http://contempographicdesign.com Chris Robinson

    I have to disagree. Most inexperienced users would get easily discouraged jumping into a stylesheet even if its commented well. Allowing the user to easily control some key CSS through the options panel is a good thing.

    In my latest premium theme I’ve added a “Create a skin” section in the options panel, allowing the user to create a custom look in under 5 minutes.

    Screencast: http://screenr.com/xYW

    If that same inexperienced user had to jump out of the browser into an editor open up the CSS search for each property one by one, it would take much longer.

    If done right controlling key CSS through an option panel is definitely an advantage.

    • http://www.briancasel.com/dev Brian

      You have a nice theme there, and nice work on the options interface.

      Just my opinion, but I do think the styles portion is overkill. Not in terms of complexity (you laid it out nicely), but the fact that it quite literally mirrors a CSS stylesheet with several code-like elements. You’re asking users to input values like x and y positions, font stacks, and other things. Anyone who knows what these things are can easily make their own CSS edits. If they need to educate themselves by visiting the W3C website, then they should take whatever they learn there and input it in an actual stylesheet, no?

      The part that I do like is your “Extra Styles” section. This makes sense because it allows users to input CSS styles – however basic or complex as they want. This would be a great place to point out the W3C as resource for learning CSS basics.

  • Pingback: My Philosophy On WordPress Theme Options | DistroBlogger | web murah | jasa pembuatan website

  • http://www.twitter.com/bradleypotter Brad Potter

    I think if you look at this purely from an end user’s perspective, style settings within a theme options screen would just be another admin option to them and no different than any other admin settings. They don’t really care if it originates from a style sheet, php code or whatever, its just an option.

  • http://www.twitter.com/bradleypotter Brad Potter

    I think if you look at this purely from an end user’s perspective, style settings within a theme options screen would just be another admin option to them and no different than any other admin settings. They don’t really care if it originates from a style sheet, php code or whatever, its just an option.

  • http://rubiqube.com Adrian

    The guys from WeFunction wrote a similar articles a few days ago. I’m starting to see a trend here and this makes me happy! Happy to know I’m not the only one who thinks that if we can’t use theme options creatively, then we should stick to the basics.

    I wish I could add some more wisdom to support your case, but you already made it bulletproof in my opinion. ;)

    • http://www.briancasel.com/dev Brian

      Thanks Adrian- Yes, and you help me make the point that I’m not against theme options pages in general – quite the contrary. It’s great to have lots of advanced functionality packed into the options, and the themes that get creative in this regard are the ones truly pushing the envelope.

  • http://rubiqube.com Adrian

    The guys from WeFunction wrote a similar articles a few days ago. I’m starting to see a trend here and this makes me happy! Happy to know I’m not the only one who thinks that if we can’t use theme options creatively, then we should stick to the basics.

    I wish I could add some more wisdom to support your case, but you already made it bulletproof in my opinion. ;)

    • http://www.briancasel.com/dev Brian

      Thanks Adrian- Yes, and you help me make the point that I’m not against theme options pages in general – quite the contrary. It’s great to have lots of advanced functionality packed into the options, and the themes that get creative in this regard are the ones truly pushing the envelope.

  • http://www.acosmin.com acosmin

    Great article and I am on the same page with you. All my premium wp themes have simple options pages and because I know that most of my clients are web developers, I don’t add any options which interact with the css stylesheet. If a client has a question, he should use the support forum and I will gladly assist him with his problem.

    • http://www.briancasel.com/dev Brian

      Thanks acosmin – You hit my point exactly. I find customers appreciate when we, the theme authors (or staff) offer a personalized support – not just when things break, but to help them get the most out of their theme. As I say in a previous post, I very rarely (if ever) refuse to offer assistance for customizations/mods. Sometimes I’ll provide code snippets, sometimes I simply point them in the right direction to learn how to do something.

  • http://www.acosmin.com acosmin

    Great article and I am on the same page with you. All my premium wp themes have simple options pages and because I know that most of my clients are web developers, I don’t add any options which interact with the css stylesheet. If a client has a question, he should use the support forum and I will gladly assist him with his problem.

    • http://www.briancasel.com/dev Brian

      Thanks acosmin – You hit my point exactly. I find customers appreciate when we, the theme authors (or staff) offer a personalized support – not just when things break, but to help them get the most out of their theme. As I say in a previous post, I very rarely (if ever) refuse to offer assistance for customizations/mods. Sometimes I’ll provide code snippets, sometimes I simply point them in the right direction to learn how to do something.

  • http://www.wpzoom.com Dumitru Brinzan

    I’m with Brian on this one.

    In my themes I always try to keep the Options Page as small as possible.

    Creating 100 inputs for a few CSS lines, or even having to add inline CSS styling is a no-no for me.

    P.S. has anyone ever benchmarked a theme with 200 options and one with 10 options?

    I would like to see some numbers, how much a big options page affects the site performance-wise.

    Anyone?

    • http://www.briancasel.com/dev Brian

      Thanks Dumitru- That would be interesting to see. However, I’m not sure if theme options alone would have an effect on the overall page load. It would depend on the options themselves, images, templates structure, etc.

      • http://www.wpzoom.com Dumitru Brinzan

        The values for these options are still extracted from the DB.

        Even a bunch of simple if..else conditionals (options like yes/no) on a site that gets a few thousand visitors a day should add an extra strain…

        I’m not good at benchmarking, so I’m hoping somebody will do it in the near future and share the results with the rest of us :)

  • http://www.wpzoom.com Dumitru Brinzan

    I’m with Brian on this one.

    In my themes I always try to keep the Options Page as small as possible.

    Creating 100 inputs for a few CSS lines, or even having to add inline CSS styling is a no-no for me.

    P.S. has anyone ever benchmarked a theme with 200 options and one with 10 options?

    I would like to see some numbers, how much a big options page affects the site performance-wise.

    Anyone?

    • http://www.briancasel.com/dev Brian

      Thanks Dumitru- That would be interesting to see. However, I’m not sure if theme options alone would have an effect on the overall page load. It would depend on the options themselves, images, templates structure, etc.

      • http://www.wpzoom.com Dumitru Brinzan

        The values for these options are still extracted from the DB.

        Even a bunch of simple if..else conditionals (options like yes/no) on a site that gets a few thousand visitors a day should add an extra strain…

        I’m not good at benchmarking, so I’m hoping somebody will do it in the near future and share the results with the rest of us :)

  • Pingback: WordPress Theme Development: Custom versus Commercial | Wordpress Themes Stream

  • Pingback: Der Splog

  • Jaeselle

    I feel as if this article was written about me! (I am the DIY theme lover/buyer/tweaker)!
    I have spent 4 days (20+ hrs each day) installing, uploading, watching video tutorials, googling the sh** out of CSS commands, learning basic code…..understanding padding, containers, margins, sizes and the CSS stylesheet like the back of my hand (for a novice). I have learned the value of plugins and jquery lightboxes and =rel links and how to optimize my site for mobile use (iPhone and iPad) b/c i wanted to own my project. I chose to do it this way.

    I have gotten as far as I can go and am running into a a few advanced issues cannot even figure out with the footer formatting and jquery sliders (turning off the dynamic part of it and actually loading them) and one of my sections isn’t loading properly at all so I’m calling in an expert to spend 2 hours to tweak the rest of it for me.

    I’m very proud of what Ive done so far myself. Its been fun and a great learning experience.
    ps-and for the record none of my theme options that had drop down of hexadecimal colors & border options, just logo and image placement/linking.

    I totally enjoyed this experience and am closer to WP and CSS coding that I ever thought I would get to.

    Just to give you an idea of them theme i bought:http://themeforest.net/item/eclectic-premium-wordpress-theme/full_screen_preview/63212

    vs my site as it exists today: http://jaeselle.com

    Jess

  • Jaeselle

    I feel as if this article was written about me! (I am the DIY theme lover/buyer/tweaker)!
    I have spent 4 days (20+ hrs each day) installing, uploading, watching video tutorials, googling the sh** out of CSS commands, learning basic code…..understanding padding, containers, margins, sizes and the CSS stylesheet like the back of my hand (for a novice). I have learned the value of plugins and jquery lightboxes and =rel links and how to optimize my site for mobile use (iPhone and iPad) b/c i wanted to own my project. I chose to do it this way.

    I have gotten as far as I can go and am running into a a few advanced issues cannot even figure out with the footer formatting and jquery sliders (turning off the dynamic part of it and actually loading them) and one of my sections isn’t loading properly at all so I’m calling in an expert to spend 2 hours to tweak the rest of it for me.

    I’m very proud of what Ive done so far myself. Its been fun and a great learning experience.
    ps-and for the record none of my theme options that had drop down of hexadecimal colors & border options, just logo and image placement/linking.

    I totally enjoyed this experience and am closer to WP and CSS coding that I ever thought I would get to.

    Just to give you an idea of them theme i bought:http://themeforest.net/item/eclectic-premium-wordpress-theme/full_screen_preview/63212

    vs my site as it exists today: http://jaeselle.com

    Jess

    • http://casjam.com/ Brian

      Thanks Jaeselle. It’s always a rollercoaster ride when you’re first learning how to tweak CSS and HTML. But it’s an effort I think is well worth it.

      We just began adding a new theme option to our ThemeJam themes where you can add your own CSS styles within the theme options. It’s just a textarea to add your own code. Plus we’re packaging a blank custom.css stylesheet where you can do so as well.

  • http://www.briancasel.com Brian

    Thanks Jaeselle. It’s always a rollercoaster ride when you’re first learning how to tweak CSS and HTML. But it’s an effort I think is well worth it.

    We just began adding a new theme option to our ThemeJam themes where you can add your own CSS styles within the theme options. It’s just a textarea to add your own code. Plus we’re packaging a blank custom.css stylesheet where you can do so as well.

  • http://zeaks.org Zeaks

    I believe theme options should offer just that, options. Even if they might be something simple to one person, it might be a huge deal to another.

    Sure I wouldn’t add an option to change the size of a post title, but I’ve added options to themes that are only a few lines of CSS that make drastic changes to the layout and I’m sure that made some people want to download it.

    You mentioned Google Analytics integration as something that should be included which is often as easy to add to a theme as changing the font.

    It’s kind of funny how I found this post while searching on how to add font options to a theme, maybe I won’t bother adding them now :P

    • Brian Casel

      Thanks for the comment Zeaks. I guess it really depends on the type of theme and your target users.

      Some themes are more suitable for the casual blogger, others are better for developers (to customize for their clients).