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 . 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-dir


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 folderinc-dir


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

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.

abu murad
Abu Murad , is fascinated by the constantly changing, complex, layered world of SEO, & content marketing’s ability to reach potential buyers on their terms, in their timing, and in the ways that are most relevant to them.

Leave a Comment