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. If you want a helper library for the Customizer along with a few other tools for developers, try the Customizer Library.

That said, the Options Framework may still be useful for some projects, and you’re welcome to try it out.

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.

Support the Project

If you’ve found this project useful, consider a $30 donation.

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

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

  4. 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!

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

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

      2. 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!

  6. 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?

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

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

  9. 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!

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

  11. 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/

  12. 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?

Leave a Reply