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

This project was released long before the Customizer was a part of WordPress. The Customizer is now the recommended way to add theme options and you can read more about it here.

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

The demo themes associated with these tutorials are also available on GitHub.

866 Responses

  1. Xeeone Kim

    Hi, now I’m trying to create my own plugin and its options, but I have no idea about the line of code ” $location = apply_filters( ‘options_framework_location’, array(‘options.php’) );” in class-options-framework.php file. Once I included options.php into the THEME folder then it works, but I need to include options.php file in my PLUGIN folder(now this causes an error like this: Your current theme does not have support for the Options Framework plugin.). How can I edit to do so? I had changed the line above into “$location = plugin_dir_path( __FILE__ ) . ‘/options.php’;”, but It didn’t worked. Thanks!

  2. Adeel

    I’m using options framework for my premium theme, everything was going well but I just realised today, it saves only first few options and just ignores last few options. May be I have too many options in my options panel page. Is there any limit to add maximum number of options? How can I increase the limit so that I could add unlimited options. For now may be I have more than 500 options added to my options panel. Please help.

    Thanks.

  4. Muninder

    Hi, i am using Options Framework Plugin with my custom theme. Its works fine with it. But after installing Image Gallery Plugin, I am unable to see the Image Gallery Plugin setting options. If i disabled Options Framework Plugin, it works fine. I think, Options Framework Plugin conflicts with the Image Gallery Plugin.

    1. Devin

      Can you provide me the URL for the Image Gallery Plugin? It’s definitely possible there’s a conflict.

      The Gallery plugin I generally recommend to people is the one included in the JetPack plugin.

  5. Javier

    I just wanna say thanks (not just in words but with money too) because your framework has helped me really really a lot.

    Simple, fast, asesome, nothing more to say but huge many THANKS!

  6. MasterBip

    Hi there. Many thanks for the awesome thing you have here. Ok here is the issue.
    I got defined an imagen size “CATEGORY (550×550)” in my functions.php
    I got an upload field in the Options Framework.

    Now … I want to get the image in that size.

    How can I do that?

    Thanks!

      2. MasterBip

        By the way. I have followed the steps but at the final part there is some missing images (inhttps://github.com/devinsays/options-framework-plugin/issues/138) so i can’t figure out what I really have to do!

      3. MasterBip

        This happens to me a lot. After ask i figure it out by myself.
        Ok:

        1.- Paste this into your functions.php

        /* Obtenemos ID de las imagenes */
        function mb_get_attachment_id_from_url( $attachment_url = ” ) {

        global $wpdb;
        $attachment_id = false;

        // If there is no url, return.
        if ( ” == $attachment_url )
        return;

        // Get the upload directory paths
        $upload_dir_paths = wp_upload_dir();

        // Make sure the upload path base directory exists in the attachment URL, to verify that we’re working with a media library image
        if ( false !== strpos( $attachment_url, $upload_dir_paths[‘baseurl’] ) ) {

        // If this is the URL of an auto-generated thumbnail, get the URL of the original image
        $attachment_url = preg_replace( ‘/-\d+x\d+(?=\.(jpg|jpeg|png|gif)$)/i’, ”, $attachment_url );

        // Remove the upload path base directory from the attachment URL
        $attachment_url = str_replace( $upload_dir_paths[‘baseurl’] . ‘/’, ”, $attachment_url );

        // Finally, run a custom database query to get the attachment ID from the modified attachment URL
        $attachment_id = $wpdb->get_var( $wpdb->prepare( “SELECT wposts.ID FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta WHERE wposts.ID = wpostmeta.post_id AND wpostmeta.meta_key = ‘_wp_attached_file’ AND wpostmeta.meta_value = ‘%s’ AND wposts.post_type = ‘attachment'”, $attachment_url ) );

        }

        return $attachment_id;
        }

        2.- Get the image normally to a var:
        $catimg_01 = of_get_option(‘mb_cat_01_img’);

        3.- Use this var to get the Attachment ID:
        $catimgID_01 = mb_get_attachment_id_from_url($catimg_01);

        4.- Get the TAG image with the size you need
        $catimgTAG_01 = wp_get_attachment_image($catimgID_01,’medium’);

        And … done!!!

        Many thanks for the clue Devin!

  7. Paolo

    Hi! I installed theme option plugin. I tried to modify the option like the color pucker, background color, etc… However when I tried to change the color of my background nothing is happening. What sort of step do I need to achieve this?

  8. Som Nath

    Hi there,

    I would like to thank first for this wonderful tutorial.
    Well, Please let me tell. How I can add Number range slider in it ?
    Can I use this in commercial uses like on Marketplaces ?

    Thank You,
    Som

  9. Steve

    Hi
    Im developing theme option panel for my own theme. There I have a options like for example I have to display option values based on the selection like if user selects Gender Male in the option panel then pass the values for Male. If selects Female, then pass the values and display option values for Female.

    How to achieve this. Pls help me im struggling to achieve this.

  11. helena

    Hey Devin! I dropped the options check into the theme directory itself and also into the specific theme I wanted it in. I also installed the plugin and it is activated, but it is still not showing theme options. I have been stuck on this for a week now unfortunately. Your help is greatly appreciated!! Or if you know someone who can help me and walk me through it that would also be great too, thank you again!

  12. César

    Hi, thanks for this framework, I’ve tried but I can not get the data stored in the configuration, of_get_option(‘id’); it does not work, thanks

  13. D5 Creation

    We have been using Options Framework for our Themes for a long time. We are really Grateful to Devin for this Wonderful Framework. Our users also love this. But, some of our users wanted to Export/Import the Theme Options/Settings. We developed a small plugin for Exporting/Importing the Theme Options?settings. Though it is basically designed for our Themes, It will work for any WordPress Sites who are using the Latest Options Framework Theme or Options Framework Plugin. After activating The Plugin will add an extra Tab ‘Export/Import’. So, you can try the Plugin for Backup/Restore the Options for your site.

    You can learn more and download the Plugin from http://d5creation.com/2016/02/13/theme-options-export-import/

  14. Aleksandr

    Hello everyone! Please help me. I create a child-theme to the parent-theme “InDreams”. These theme uses Devin`s Options Framework Theme.

    I want to change “textarea” type to “texteditor” type option in the admin panel on tab “Theme Option”. But when I open “theme-option.php” and set there “type” => “textarea” to “type” => “texteditor” nothing change!

    Why It is? How can I fix it? How can be texteditor setted in Theme Option?

    1. Devin

      I think you either want type “textarea” or type “editor”. Please view types above under “Available Options”, or see the examples in “Options Check” theme.

  17. HuaZi

    Hello, thank you very much for your provide the framework；
    Could you tell me how to apply this framework to category and single for Add custom fields？
    Excuse me, can achieve?

  19. Michael Mann

    Daniel, absolutely. You will need to either give the publisher role (if you wish all publishers to do it) or particular users the ability to edit_theme_options. You can use a plugin such as User Role Editor over at WordPress.org, which allows for either adding this capability to the publisher role or adding it to particular users on an individual capabilities option.

  20. Chris

    Hi this framework is great for my themes but, an it be used for plugin options. I have tried embedding both the ‘Options Framework Plugin’ which fails to load the options and states the the theme does not support the options and the ‘Options Framework Theme’ but neither will display the options. i would be grateful for pointer on using the options framework for my plugins.

  26. Nitin

    Hi Devin,

    I’m trying to use theme framework in my custom theme and the Framework is inside another directory like this “My_Theme / AdminOptions / all-framework-files”.

    But the issue is that if I put all the framework file inside theme it is showing in dashboard but if I’m putting inside another directory it is not showing.

    Please help this my first attempt to build theme using framework and don’t know what I’m doing wrong.

    1. Devin

      You need to make sure your file paths are correct to the files, and also that options.php is either in the base of the directory or you change the location with a filter.

  27. Sinha Verma

    This project was released long before the Customizer was a part of WordPress. The Customizer is now the recommended way to add theme options and you can read more about it here. → what does this means that options Framework is outdated, and should not be used in the premium or commercial theme ready to be sold?

  29. aan

    hello,

    I use the framework in my theme.
    I get the option using of_get_option(‘setting’)

    I have a question, how I can call the option in of_get_option(‘setting’) in my plugin?
    I want to use the option in my plugin option.
    I hope you can help me
    many thanks

  30. rakesh kumar

    Hi Davin, I am trying to use your option framework for the first time and I am facing issue while using TextArea Field. When I feed any code in this area it automatically removes all the code. How can I preserve this code? Please guide me.

Leave a Reply