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.

761 Responses

  1. 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. Saulo Padilha

    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!

  3. Jeff

    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

  4. JL

    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?

      1. JL

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

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

    1. vektor

      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!

  6. vektor

    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

    1. vektor

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

      Thanks!

  7. xeeone

    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?

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

  9. vektor

    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.

  10. Pradeep

    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

  11. Pradeep

    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

  12. Ed

    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

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

  13. Steve Bman

    I’ve added color scheme options to the live customizer. It correctly updates the values but the customizer does not reload the preview nor does it save any of the changes. Any clue to why?

  14. Kloso

    Hi Devin,

    Nice work there, keep it up. Could you kindly let me know the difference between the Paid version and free Development version of the Options Framework Theme?

    Thanks

  15. Hi,
    It’s possible to set a value for the uploaded images ? Like default wordpress size “large” or “medium”or a custom size, just to prevent high resolution images uploading.
    thanks

Leave a Reply

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>