How to add Options Framework to WordPress Theme

When a WordPress Theme developer takes up any new theme development, he has to think about some neat and unique design and what all features he is going to offer in the new theme. It’s not quantity but quality and configuration usability that makes user to choose your theme over others. If you start to code for admin configuration in your theme, it will take you ages to come up with some descent design and options.

When I gave a try to WordPress theme development, first thing I looked for is that “How I am going to provide all those options which I have in mind with minimal code?” I stumbled up on few plugins that were available in market and could have worked very well with my theme. Of all such plugins one stood out in simplicity and functionality and that is Options Framework Plugin by Devin. The Options Framework Plugin makes it easy to include a full featured options panel in any WordPress theme.

My aim was to use same functionality as an in-built feature of my theme and not as a plugin. This would have saved a great deal of time of theme. So I did some search and trials and I was able to implement the framework inside my theme. I am going to share the same here in this article.

First you need to copy the plugin copy from GitHub to your local drive. Once you have the zipped archive on your machine, unzip it and copy files and folders as displayed in below image to to one “admin” folder.

Admin Directory

Next task is to initiate the framework and provide options.php to this framework. Basically this framework uses a php file to get its options data. By default the name of the file is “options.php” but you can override this by simply adding simple filter. Now I will show you my theme’s includes/inc folder where I am going to put above admin folder

Include Directory

You can see I have one “options-panel.php” which is going to initiate the framework and “options.php” which stores my actual options. Here is the code for framework initiation

The code is simply locating the options framework and invoking i. The above code also shows you how to put in the filter to override the options file name. Now this framework supports almost all of the options types, these are listed below

  • text
  • textarea
  • checkbox
  • select
  • radio
  • upload (an image uploader)
  • images (use images instead of radio buttons)
  • background (a set of options to define a background)
  • multicheck
  • color (a jquery color picker)
  • typography (a set of options to define typography)
  • editor

The framework provides you nicely grouped options. All options belonging to one group are displayed in one tab. Tabs shown as below.

Basic Settings - Admin Panel

Basic Settings – Admin Panel

And above can be achieved using the options.php

The first element with type as heading will be treated as one tab and all other options that follows will be added under that tab till we encounter next element of type heading. Isn’t it easy? Now if you want to add next tab, just add one more element with type heading in and you will get your next tab. e.g.

You can find details of other options that is available in the downloaded folder. With all this information I think you will be able to add options framework to your theme with ease and make your theme powerful than ever.

Please subscribe to our feed for more such informative articles and tutorials.

12 Comments
  1. October 15, 2014 | Reply
  2. Dmiitry
    October 21, 2013 | Reply
    • Pavan
      October 21, 2013 | Reply
      • Dmitry
        October 23, 2013 | Reply
        • Pavan
          October 24, 2013 | Reply
  3. Patrik
    September 5, 2013 | Reply
    • Pavan
      September 5, 2013 | Reply
      • Patrik
        September 5, 2013 | Reply
        • Pavan
          September 7, 2013 | Reply
          • Patrik
            September 7, 2013 |
          • Pavan
            September 10, 2013 |
          • Patrik
            September 10, 2013 |

Leave a Reply to domain Cancel reply

Your email address will not be published. Required fields are marked *