Slightly Modded Options Framework

Slighty Modded Options Framework or SMOF is an Options Framework for WordPress theme developers. It was heavily built on helgatheviking’s KIA Options Framework, which was forked from the original Options Framework by Devin Price. Some of the ideas and aesthetics improvements were borrowed from the Options Tree.

The main objective of the SMOF is to offer modern-looking, features rich Options Framework for theme developers.
 

Features:
  • Drag & Drop Slider (slider)
  • Layout Manager (sorter)
  • Background Patterns (tiles)
  • New Clean & Customized Interface
  • Media Library Uploader ( not really a feature, but it was added anyway, soo… )
Future Plans:
  • Simple Backup & Restore (backup)
  • Sanitization!

Who’s already using it?

I will be releasing a free theme that incorporates SMOF extensively for people to learn from. However, you can purchase any of the premium themes below that have already incorporated SMOF. Trust me, there are no better examples than clean-coded, high quality premium themes to learn from!

 

Here’s a video demo for the lazy:

 

 
I welcome any suggestions for any additional features and/or bug reports.

Use and abuse at will :)

Note : If you have coding related questions, please open a ticket at SMOF’s page on Github and I will reply to you there. The comment section really do not have the capacity to handle more than a few lines of code. :)

439 Responses

  • Armand

    Syamil,

    Very nice. I just happened to search for branches of options framework and found yours tonight. Very nice. I love what you did with the sliders and such. The additional options you are looking to add sound great. Very much needed.

    I installed the theme, but the sliders didn’t work on the page. Not sure why, shows the images one under each other. Any ideas?

    Thanks.

    • sy4mil

      Hi Armand.

      The sample page I created was only to demo the output of the slider. The images along with its title, links & description was meant to appear one after another.

      You will need to use something like the Slidesjs or Nivo Slider to have slider on the page.

      Hope that helps :)

      • Armand

        I understand… thanks.

  • AJ

    It’s really great. Thanks for sending me the share link on twitter. I appreciate it :D

    • sy4mil

      Thanks AJ. I’m a big fan of WP Explorer! :)

  • jamie

    I like what you have done. I asked for tutorials on themeforest because there are really no good tutorials on exactly how things work in wordpress. I mean by using do settings section and field. There are so many files in this, it’s hard to see how it all comes together.

    • sy4mil

      No worries. I’ll be posting a thorough tutorial on how to use them soon. Apparently I’d be more motivated to work on this if there is enough interest in them. :)

  • Armand

    How does the new Layout Manager work. I see it there, but not sure how it works.

  • Muhammad Firdaus Noor

    it really great bro….

  • Nimalan

    this is great Framework, thank you
    how do i enable advanced options as in original framework such as advance checkbox ( the one expands with more option once check box ticked)
    I see the code is still there, but i’m not sure how to make it work

    thanks

    • sy4mil

      I’m not aware of this option/function. Can you point to me exactly on which line it was defined?

      • Nimalan

        in admi-interface.php

        line 208 – 236

        this is a useful functinalty I’ve been using original OF for a while because of this function.
        since I really like your framework I’m currently integrating your framework in my currant theme.
        It would be great if I can figure out this.

        thanks for your time & help

        • Syamil

          I looked at the code and I, too, can’t figure out how it is used. Perhaps a working example could help. Can I look at your code and see how you set it up? Thanks

          • Nimalan

            here is the example usage

            in function.php

            add_action(‘optionsframework_custom_scripts’, ‘optionsframework_custom_scripts’);

            function optionsframework_custom_scripts() { ?>

            jQuery(document).ready(function() {

            jQuery(‘#example_showhidden’).click(function() {
            jQuery(‘#section-example_text_hidden’).fadeToggle(400);
            });

            if (jQuery(‘#example_showhidden:checked’).val() !== undefined) {
            jQuery(‘#section-example_text_hidden’).show();
            }

            });

            in options.php

            $options[] = array( “name” => “Check to Show a Hidden Text Input”,
            “desc” => “Click here and see what happens.”,
            “id” => “example_showhidden”,
            “type” => “checkbox”);

            $options[] = array( “name” => “Hidden Text Input”,
            “desc” => “This option is hidden unless activated by a checkbox click.”,
            “id” => “example_text_hidden”,
            “std” => “Hello”,
            “class” => “hidden”,
            “type” => “text”);

  • Denoizzed

    Thanks for sharing! Any update on documentation?

    • Syamil

      I’m working on a theme that will have examples on how each option works. It should be here sometime next week. Still got a few stuff to finish up plus I’ve got a theme submission on queue. Cheers!

  • Syamil

    @Nimalan – Thank you for that. I think you’re using a slightly later version of the OF. Nevertheless, it looks like useful to implement, so I will include this mod into the next version of SMOF. :)

    Also, to make support more streamlined & organized, I would suggest you to open a ticket on Github for coding-related questions in the future.

    Cheers

  • mampranx

    Sweet and awesome.
    Anyway, is there any plan to include google fonts features?
    Such as Wooframework and Uptheme framework.

    • Syamil

      Hmm.. I have mixed feelings about Google Fonts since they don’t seem to look good on anything basically. The fonts were all severely jagged if you go any higher than say 14px. But I suppose if you want to add them, it’s as easy as adding it to the $faces array on line 945 of admin-interface.php.

  • dolores

    hmmm seems like in the latest version 1.2.1, the header upload is missing. can you tell me why that happened please? thanks!

    • Syamil

      Hi Dolores, I’m not sure what you mean by ‘header upload’. Would you care taking a screenshot so I can see it better? Thank you :)

  • zoozoo

    i think she means the logo upload that has been replaced with the media uploads, just use those in you theme from now on :)

    did anyone test this latest version btw? id does not write in my database. it creates the table but does not populate it with the serialized data. if you can confirm it working then i will try to solve it on my setup, or if you have hints about what the problem may be, i’d apreciate any help.

    additional info is that i modified the OPTIONS variable. but i had that before the update to the new version and it worked.

    • Syamil

      Oh, the ajax upload? It’s still in there. In the demo I used it for “Custom Favicon” under General Settings.

      Have you tried a reset? That is usually the case. I can confirm that it is working perfectly fine on my WP3.3 & WP3.2 local setup.

      What modifications did you do on the OPTIONS variable?

  • zoozoo

    also i tested it on a a fresh install of wordpress, and with both 2010 and 2011 theme gives error message when saving

    • Syamil

      Please download the latest version 1.2.2 – I just found out some silly errors which I overlooked in v1.2.1. You should see no more errors now.

  • Andrey

    How I can use link to the some text in a text input field or textarea field ?

    • Syamil

      Just use normal anchor tag.

      • Andrey

        Thanks for the quick response!

        If you can, one more question. How to add in slide the second field to load the image? To be able to download in the slide two different images. Is it possible? Thanks in advance.

  • Syamil

    @Andrey yes, it’s definitely possible to add a second field to upload image. Look from line 1407 of admin-interface.php.

  • Andrey

    Thanks Syamil !!!

  • AJ Clarke

    I like that you are showing off your theme now ;)

    • Syamil

      It’s the only one I have :D

      • Tony Parker

        Agreed. You should put that theme front and center on your website! Awesome theme.

  • Mj

    that is really cool stuff my friend. i was looking for learning how can i start making option panel. you saved me lots of time. also your documentation are really clear and simple.
    good luck my friend;)

    • Syamil

      Glad you found it useful. Feel free to ask questions if any. :)

  • Marc

    Great take on the Options framework. Are you dedicated to supporting it for long-term? Have seen no updates since Nov 11?

    • Syamil

      Hi Marc, thanks for your comment.

      Yes, I’m pretty much dedicated on supporting it. The current one you see on Github is pretty stable enough for use in your themes. The next update would see the SMOF ported into a theme so that users have better idea how to use it and I’m currently still working on that.

      However, for advanced users you would find it quite robust enough for use in themes. There has been some a couple of bug fixes here on my local version, but I don’t feel the rush to release it since it’s quite minor. I’ve seen some Themeforest authors already/currently using SMOF in their themes.

      Only missing feature that I looked to add is sanitization, but not immediately important at the moment.

      Cheers

      • Marc

        Thanks for the reply. Have a done a few little tweaks to it myself (aesthetics wise) to make it look that little more native to the WP admin.

  • Sergey

    Hi Syamil,

    On my theme, options are not showing up. How can I correct this?
    It looks like this, just completely blank — http://imgur.com/BBWaM

    Thanks.

    • Syamil

      Check if your server blocks the jquery.cookie.js file – if it does, change it to something else for example cookie.js and make sure to also change the link inside admin-interface.php

      I know this because I’ve had some customers having the same problem.

      • Sergey

        Thank you very much for your help and for the very quick response ;)

  • Jimmy Quintos

    Just want to say: Thanks!
    I need to learn before move from my older Framework.
    Waiting your theme integrated with this Framework, Syamil…

    • Syamil

      Hi Jimmy, I just added a list of themes already using SMOF. If you can’t wait for my free theme, you can always purchase one the themes in the list to have a better look on how to use SMOF. Cheers ;)

  • Justin

    SMOF looks pretty nice. Any chance you could throw up a full sample code implementation of how the slideshow and layout manager on a sample page or two? I’ve been looking at the documentation and honestly I just can’t get anything to work. I think it’s easier to understand based on real working code rather than bits and pieces being explained.

    • Syamil

      Hi there Justin. That is definitely a work in progress. However, if you urgently need a working sample of SMOF in a theme, I have listed a few of them in the post.

      Cheers :)

      • Justin

        Hi Syamil thanks for the response. I didn’t mean a whole working sample, I just saw you happened to reference an example page for how you used the code for a slideshow on the themeforest forums. But that currently leads to a dead link now.

        • Justin

          Oh man, sorry nevermind! I’m an idiot.. I realized this whole time I wasn’t calling my custom functions file in the correct location. Thanks for the fast response, works like a charm!

  • Wes

    Great mod to the framework Syamil, Keep it up!

  • Jamie

    I just installed this framework and I am getting a bunch of undefined indexes in the admin-interface.php for the example options. Is this normal? I would assume that if I turned debugging off that they wouldn’t show. Did I do something wrong for the installation or is it normal?

    • Syamil

      You need to hit “Options Reset” upon first installation, or each time you added new options. Normally those undefined index errors will go away when u did that.

      • Jamie

        Thanks for the help. One more question. I am sure I am missing something. I have been looking over your documentation and it says in order to get the option, you just do $global data and then echo out the variable with the ID, I get that, but nothing is showing up on my site. where is the table stored in the database with the options? I am looking for it but have not found it yet. I want to see if my options are being stored

        • Jamie

          well, I did figure it out. The information was there, but it was under media upload. For whatever reason, when I changed the ID to “Logo” instead of “media_upload” it didn’t change it in the database.

  • Dallas

    Hi, great job with the options framework!

    I am just starting out trying to learn how to customize the framework and I have a quick question on typography. Say I want to add a new typography option, such as the option to change the font of the title. If I go into the theme-options.php file and add the code block:

    $of_options[] = array( “name” => “Title Typography”,
    “desc” => “Typography option with each property can be called individually for title.”,
    “id” => “title_type”,
    “std” => array(‘size’ => ’12px’,’face’ => ‘arial’,’style’ => ‘normal’,’color’ => ‘#000000′),
    “type” => “typography”);

    I can see a new section on my options page for the “Title Typography” option but there is no options available to change the font size, face, color etc. etc. Do I need to add extra code to the admin-interface.php file or another file?

    Thanks!

    • Syamil

      Hi Dallas, thanks for trying out SMOF. If you need coding-related assistance I’d recommend you to open a ticket on Github. Regarding those options not showing up, try hitting Options Reset.

      Cheers

  • Jamie

    is there a way to create a group of options? for example, if I have to set up 4 or 5 options that are all related. Is there a way to group them together without each one looking separate from the others?

    • Syamil

      Hi Jamie,

      That is currently not a built-in feature, but the way I see how to do this as follows:

      1- Create a custom attribute in the array, for example; ‘mod2′ => ‘group’,

      This is very similar to ‘mod’ => ‘mini’ like you saw in the example theme-options.php for media upload etc.

      2. The look at line 894 that says : if ( $value['type'] != “heading” )
      Add to it && $value['mod2'] != ‘group’

      You can then write your own custom codes for the “else” of the above conditional statement.

      Hope that helps.

      Cheers

      • jamie

        I tried your fix and it didn’t work. It did funky things to the admin area. I might have coded it incorrectly or something. I am to new to php to figure this out. Thanks for the help though.

      • Syamil

        Keep trying and all the best! :)

  • Jamie

    I have been having some problems with the framework. sometimes when I add an option in the array, i get an error when I go back into the admin area to populate that option. When I click the save button, it just throws up a box in the center of my screen that says error. I get an undefined index error on the page. Is there a best way to add and edit these options?

    • Syamil

      You need to reset the options everytime you added a new option in.

      • Jamie

        I found that the reset doesn’t always work. The only real way to reset the options is to delete the row from the database and then press the reset in the admin. I would say that the reset option is buggy. I get different results every time I press it. Eventually it doesn’t work at all and I am forced to delete the row.

        • Syamil

          Please tell me how I can reproduce this bug.

          I spent countless of hours to remove bugs from SMOF, so it kills me a little inside when someone told me that my work is buggy.

          Go on github, post the codes from your theme-options.php over there and we’ll see what kind of bugs you’re experiencing. You may also want to deploy an online version so that I can have a better look at your codes.

  • Rich

    Syamil,

    Thanks so much for this. I’m a developer just getting into developing WordPress themes and this will be a big help! I bought your Burette theme so I can study the code, and get you a few bucks. :)

    Cheers!

    Rich

    • Syamil

      Hey thanks Rich, and really appreciate you buying the theme! ;)

      I hope you have a splendid time implementing SMOF in your theme. If you need any help at all just don’t hesitate to contact me. :)

      Cheers

      • Rich

        Syamil,

        Looked through the code, almost everything in the admin side makes sense though I don’t see how some attributes are pulled into the theme. For example Body Font settings.

        Rich

      • Rich

        I see styles.php but don’t see how it’s called in.

  • Rich

    Nevermind, I see it now in the admin-functions. Wow, there seem to be a lot of moving parts. I’m sure it’ll make sense with more exposure.

    Thanks.

    Rich

    • Syamil

      Ha, don’t worry, you’ll get there soon. It just takes a while to get familiar with the codes. If you need any coding-related help feel free to open a ticket on SMOF’s Github page :)

  • jamie

    how do I do a conditional for the checkbox? I have been trying for two days. have made some options and then put in a checkbox. If the user clicks the checkbox, then it should show the options below. So I go into the page template and do if $data['myoption'] then do something. The checkbox will hide the stuff I want it to but I get undefined index on all options. What am I missing?

    • Syamil

      You’re missing out our Github page – https://github.com/sy4mil/Options-Framework/issues

      Please open a ticket there so I may assist you better.

      The comment section is giving me headache, and I don’t have all day to scroll through the page everytime someone asked a question.

      Thanks

      • Jamie

        Sorry for the headache. Thanks for the heads up on the support site on Github. I forgot about that.

  • elen

    Hi! is there a way to enable wordpress shortcodes in the textarea?

    • Syamil

      You would do this with the do_shortcode function on the front-end. There’s no modification needed for the textarea.

  • Wes

    SMOF has yet another new user under it’s belt:
    http://themeforest.net/item/responser-the-responsive-portfolio-wp-theme/1611342

    Thanks Syamil for a great contribution!

    • Syamil

      Nice to see your theme finally up on TF. Good luck with sales! :)

  • Ales

    Hello,

    Thanks so much for this. I have only one question. Is possible to create backup and then import this backup to new wp install.

    Thank you for answer.

    • Syamil

      Hi,

      That is currently not a supported feature but you can easily tweak the backup/restore options to have this feature.

  • Smith

    Hi,

    i want to add some more extra types in the framework. i add the options but when i’m click the button SAVE ALL CHANGES … it was not saved and it shows Error Notification. can you tell me how to add extra options.

    Thanks

    • Smith

      is there any tutor available for this ???

    • Syamil

      Sorry, but there isn’t any tutor for doing this. If you want to share what you’ve added and let me have a look at it feel free to post it on our Github’s issue page. Cheers

  • Agent

    Good job, Syamil!
    When do you think the template builder & shortcode generator will be released? A sidebar generator (add, delete, extra custom css class, list) might be a good idea too.
    http://wordpress.org/extend/plugins/sidebar-generator/

    • Syamil

      Hi Agent,

      I’ve been playing with a sidebar generator in the framework. It works but not really practical so I ditched it.

      Those template builder & shortcode generator is on the way. No exact time of release as of yet, sorry.

  • Sergey

    Hi Syamil,

    I’am trying to use child theme. Once activated, getting error:

    Warning: require_once(/home/test3/wp-content/themes/wp-theme-child/admin/admin-interface.php) [function.require-once]: failed to open stream: No such file or directory in /home/test3/wp-content/themes/wp-theme/functions.php on line 19

    Fatal error: require_once() [function.require]: Failed opening required ‘/home/test3/wp-content/themes/wp-theme-child/admin/admin-interface.php’ (include_path=’.:/usr/local/lib/php:/usr/local/php5/lib/pear’) in /home/test3/wp-content/themes/wp-theme/functions.php on line 19

    My function functions.php:
    // Paths to admin functions
    define(‘ADMIN_PATH’, STYLESHEETPATH . ‘/admin/’);
    define(‘ADMIN_DIR’, get_template_directory_uri() . ‘/admin/’);
    define(‘LAYOUT_PATH’, ADMIN_PATH . ‘/layouts/’);

    What could be wrong?

    Thanks.

    • Syamil

      Please use the latest version of SMOF, it will fix this error.

  • Safwan Rahman

    Good job and thumbs up! Thanks so much for this mod

  • Smogg

    U’ve extracted admin folder into my theme directory, options page is displayed but it doesn’t save any data! I also don’t see font pickers. And where should I edit my options page? Is ‘admin/functions/functions.options.php’ the right file to do it?

Sorry, but commenting has been disabled.