Options Framework Theme

The Options Framework Theme has all the code included to build a out a full featured options panel. It’s a bundled version of the Options Framework Plugin for those folks who want to build the options directly into the theme (rather than relying on a plugin).

Available Options

  • 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

Instructions

Copy the “inc” directory, options.php, and the code snippet in functions.php from the “Options Framework Theme” into the theme of your choice. Hack away. You can also watch the video above to see how it is done.

When to Use Theme Version vs. Plugin Version

The code is 99% the same between the plugin and theme version. If you can do what you need with the plugin version, I think that’s the best route. If you find that you need to make significant modifications that aren’t possible with the plugin, go ahead and use the theme version.

Change the Menu Location

It’s highly recommended that you leave theme options under the “Appearance” menu where users expect them.

But, if you do decide to change the menu location it will break the media uploader. This is because the media uploader scripts are enqueued on $of_page= ‘appearance_page_options-framework’ in options-medialibrary-uploader.php. If you change the name or location of the menu, you’ll need to update the hook to be accurate, e.g. $of_page= ‘toplevel_page_options-framework’ and those scripts will load properly again.

Sanitization Filters

If you’re interested in how the options data is verified, or if you’re wondering why your script and embed tags are stripped out in the Options Framework, read this post.

Can I Use This Code in Commercial Themes

Yes! This code is 100% GPL. Please read the included license for more details.

Development Version on GitHub

The development version of the Options Framework Theme is available on GitHub.

Additional Tutorials

Purchase the Options Framework Theme Kit

The Options Framework Theme Kit, which includes the latest released version of the Options Framework Theme plus a collection of demonstrations themes is available for $30. You’ll be able to download updates and get new child themes as they are released.

If you only plan on using the plugin version of the Options Framework, the Options Kit might be what you’re looking for.

752 thoughts on “Options Framework Theme

  1. imon themes wrote:

    Hi,
    Nice work

    i am using your option framework in my project but the problem is when i active my theme 1st time and try to load .its hang my website

    but after going to theme option and click option . then the theme or website load well .

    pls help me for this issue

  2. Peter Hammer wrote:

    Do you know when you’ll update the Options Framework plugin for the latest version of WordPress?

    • Devin wrote:

      It’s compatible with the latest version. I just bumped the readme.txt on WordPress.org.

  3. Saulo Padilha wrote:

    Hi there,

    I’ve just bought the Theme Kit and it’s really cool. I’m using some fields to upload images (or select them from the media library) but I can’t figure out how can I select the size of the image. Suppose I have added an image size in my theme, how can I select this specific size to show in the front end?

    thanks!

    • Devin wrote:

      Hi Saulo. Ideally we’d be storing the image ID into the option, but I haven’t built out that option yet. So, instead you’d need to pull the ID from the URL, and then use that to display out the image at a certain size. Here’s a little discussion about this: https://github.com/devinsays/options-framework-plugin/issues/138

  4. Jeff wrote:

    Hi,

    Great plugin. Love this thing. I can’t seem to find where or how I can do the background of a menu div. Is that documentation somewhere? Anyone have any idea?

    Thanks
    Jeff

  5. JL wrote:

    Just upgraded to 1.8.2, but it won’t activate due to this error:

    ‘Plugin could not be activated because it triggered a fatal error.
    Fatal error: Cannot redeclare optionsframework_init() in /nas/wp/www/cluster-1032/wlia/wp-content/plugins/options-framework/options-framework.php on line 29

    Using WordPress 3.9.1. Any thoughts?

    • Devin wrote:

      It looks like your theme already has the plugin bundled- so, the plugin probably isn’t needed.

      • JL wrote:

        That would make sense. Guess I’ve been upgrading it before when it wasn’t necessary. Keep up the good work Devin.

  6. daniel wrote:

    Hi Devin,
    Thanks for creating the Options Framework Theme. I love it.

    Are you thinking in adding metabox and list item to the framework?

    Thanks again.

  7. vektor wrote:

    How can show field in my theme? in header.php for example. If i upload a image in Uploader Test, how can show it in front?

    thanks!

    • vektor wrote:

      really thanks!!! My Panel is cool.

      Only one more question. Is possible format this? i want add paragraphs automatic like in widget.

      $options[] = array(
      “name” => __( ‘Caja Estacionamiento Regulado’, ‘portfolio-press’ ),
      “desc” => __( ‘Custom text that will appear in the footer of your theme.’,’portfolio-press’ ),
      “id” => “reguladobox_text”,
      “type” => “textarea”
      );

      Really thanks!

      • vektor wrote:

        I have the solution! finally add wysiwyg editor for this.

  8. vektor wrote:

    I wish to know if i can do textareas, texts… translatable with WPML and if i can do textarea with automatic paragraph. If is possible i buy your package of course!

    thanks

    • vektor wrote:

      I have the solution for textarea with wpautop, only i need to know if i can make this textarea translatable with WPML.

      Thanks!

      • Devin wrote:

        I have not tested with WPML. You’ll just have to try it. Feel free to download the version on GitHub or the plugin to test it.

  9. xeeone wrote:

    Hi, this is a very satisfactory framework for me. Thanks so much!
    Now I’m creating a wordpress theme, and I use this framework in it. I need to insert hyperlink(anchor tag) into the value of an option’s /desc/ property. How could I do that?

    • Devin wrote:

      Same as your would output any HTML. Just make sure to escape your quotes if needed.

  10. Edmund wrote:

    Devin:
    I installed options framework and then uninstalled. I then tried to reinstall it and I got the following message:
    Fatal error: Cannot redeclare optionsframework_init() (previously declared in /home4/ssun/public_html/wp-content/themes/wpex-photo/admin/options-framework.php:60) in /home4/ssun/public_html/wp-content/plugins/options-framework/options-framework.php on line 57

    Any ideas how to fix?
    Thanks

    • Devin wrote:

      The theme is loading it’s own version of the Options Framework, so, if you disable the plugin you should be fine.

      • Edmund wrote:

        Thanks for the reply , Devin
        Edmund

  11. vektor wrote:

    Hi again!

    Sorry, but one last simple question.

    I have this code for implement a link to image

    $options['linklogo'] = array(
    “name” => __( ‘Link Logotipo’, ‘portfolio-press’ ),
    “desc” => __( ‘Introduce el link del logotipo de la portada’,’portfolio-press’ ),
    “id” => “linklogo”,
    “type” => “editor”);

    The problem is when i add this text to image.

    <a href="” rel=”logolink” target=”_blank”>
    <img src="” alt=””>

    Image logo show, but link to the actual page.

  12. Pradeep wrote:

    Hi Devin,
    Thank you very much for the great script!

    I have a strange issue in one of our site for which used your script for theme options. It happens only in Chrome. On saving the values, All the field values become hidden, that is there the field has the values, But its hidden. If I try to click Inspect Element, As the window resizes, It shows back. I am sure what the issue is. It is working perfect in Firefox.

    Following is the screenshot link after options saving, I have selected the hidden values
    http://postimg.org/image/xcuxkumj7/

    Following is after clicking Inspect Element as the window resizes, the values appear back:
    http://postimg.org/image/kfz7z8bj1/

    Can you please help me on this issue?

    Thanks!

    Pradeep.S

    • Devin wrote:

      I cannot reproduce the issue in Chrome (Mac). But it looks like it might be a font rendering issue. Do you get the same problem if when using a fresh install with the Options Check theme? Perhaps there’s also other fonts/scripts loading and interfering with your admin panel.

  13. Pradeep wrote:

    Hi Devin,
    Thank you very much for your advise. As you said it may be font rendering issue, It got fixed automatically, after some hours :)

    Thanks!

    Pradeep.S

  14. Ed wrote:

    Hi Devin,

    really nice work, thanks for sharing this.
    Can you tell me how I can set this up as a TOP LEVEL menu point and if its possible to “group” options and add a separator below them.
    I would like to group some settings from a tab in categories like “necessary” and “optional”

    Thanks
    ED

  15. Is there any way i can add html directly in the theme options. I want to insert (horizolal row) after some block in the options page. (is it possible)

    • Devin wrote:

      Yes, you can use the “info” option.

  16. Ankish wrote:

    Devin,

    I have a slider in my theme, Can your Option Framework be used to load the slider images through Upload Images Option.

    • Devin wrote:

      I recommend custom post types or tagging posts in order to have slider functionality.

      • Ankish wrote:

        Thanks for replying, I didn’t get you-

        You mean with the combination of custom post types or tagging posts + Option Framework, I can achieve the desired result or Option Framework can’t help me with this.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>