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:

[screenr id=Mycs width=590]
 
[col]
[col12]
[button link="https://github.com/sy4mil/Options-Framework" class="green large center left" style="margin-right:20px"]Download it from Github[/button][/col12]
[col12][button link="http://aquagraphite.com/2011/11/smof-documentation/" class="blue large center left"]Documentation[/button][/col12]
[/col]
 
I welcome any suggestions for any additional features and/or bug reports.

Use and abuse at will :)

[box type=info]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. :)[/box]

Discussions — 525 Responses

  • Armand October 2, 2011 on 7:26 am

    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 Armand October 2, 2011 on 8:47 am

      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 sy4mil October 2, 2011 on 11:41 pm

        I understand… thanks.

  • AJ October 9, 2011 on 10:45 pm

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

    • sy4mil AJ October 10, 2011 on 8:40 am

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

  • jamie November 3, 2011 on 1:51 am

    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 jamie November 4, 2011 on 7:30 pm

      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 November 6, 2011 on 3:31 am

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

  • Muhammad Firdaus Noor November 7, 2011 on 12:35 pm

    it really great bro….

  • Nimalan November 13, 2011 on 3:04 pm

    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 Nimalan November 13, 2011 on 4:26 pm

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

      • Nimalan sy4mil November 13, 2011 on 11:31 pm

        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 Nimalan November 14, 2011 on 5:18 am

          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 Syamil November 19, 2011 on 9:00 pm

            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 November 19, 2011 on 4:12 pm

    Thanks for sharing! Any update on documentation?

    • Syamil Denoizzed November 19, 2011 on 7:27 pm

      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 November 19, 2011 on 9:31 pm

    @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 November 20, 2011 on 7:46 pm

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

    • Syamil mampranx November 20, 2011 on 11:16 pm

      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 November 23, 2011 on 11:24 pm

    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 dolores November 24, 2011 on 12:23 am

      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 November 24, 2011 on 5:58 pm

    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 zoozoo November 24, 2011 on 7:34 pm

      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 November 24, 2011 on 6:21 pm

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

    • Syamil zoozoo November 25, 2011 on 6:07 pm

      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 November 30, 2011 on 10:33 pm

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

    • Syamil Andrey December 1, 2011 on 6:34 am

      Just use normal anchor tag.

      • Andrey Syamil December 1, 2011 on 9:37 pm

        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 December 2, 2011 on 10:54 am

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

  • Andrey December 5, 2011 on 5:22 pm

    Thanks Syamil !!!

  • AJ Clarke December 7, 2011 on 7:16 am

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

    • Syamil AJ Clarke December 7, 2011 on 8:15 am

      It’s the only one I have :D

      • Tony Parker Syamil January 3, 2012 on 4:13 pm

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

  • Mj January 3, 2012 on 4:38 pm

    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 Mj January 3, 2012 on 5:13 pm

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

  • Marc January 7, 2012 on 10:07 pm

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

    • Syamil Marc January 7, 2012 on 11:37 pm

      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 Syamil January 9, 2012 on 9:31 am

        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 January 9, 2012 on 9:33 pm

    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 Sergey January 9, 2012 on 9:38 pm

      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 Syamil January 9, 2012 on 9:52 pm

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

  • Jimmy Quintos January 10, 2012 on 12:47 am

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

    • Syamil Jimmy Quintos January 10, 2012 on 4:17 pm

      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 January 13, 2012 on 12:28 am

    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 Justin January 13, 2012 on 7:03 am

      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 Syamil January 13, 2012 on 8:38 pm

        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 Justin January 13, 2012 on 9:01 pm

          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 January 13, 2012 on 10:53 am

    Great mod to the framework Syamil, Keep it up!

  • Jamie January 27, 2012 on 7:37 am

    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 Jamie January 28, 2012 on 1:17 am

      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 Syamil January 29, 2012 on 8:04 am

        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 Jamie January 29, 2012 on 8:12 am

          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 January 28, 2012 on 1:11 am

    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 Dallas January 28, 2012 on 1:21 am

      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 January 29, 2012 on 8:16 am

    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 Jamie January 29, 2012 on 9:48 am

      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 Syamil January 30, 2012 on 7:22 am

        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 Syamil January 31, 2012 on 2:02 am

        Keep trying and all the best! :)

  • Jamie February 1, 2012 on 8:25 am

    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 Jamie February 1, 2012 on 1:49 pm

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

      • Jamie Syamil February 2, 2012 on 5:23 am

        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 Jamie February 2, 2012 on 12:10 pm

          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 February 1, 2012 on 2:19 pm

    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 Rich February 1, 2012 on 2:34 pm

      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 February 1, 2012 on 4:49 pm

        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 Syamil February 1, 2012 on 5:10 pm

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

  • Rich February 1, 2012 on 6:47 pm

    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 Rich February 2, 2012 on 2:01 am

      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 February 2, 2012 on 6:21 am

    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 jamie February 2, 2012 on 11:16 am

      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 Syamil February 3, 2012 on 4:09 am

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

  • elen February 5, 2012 on 10:48 pm

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

    • Syamil elen February 6, 2012 on 1:28 am

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

  • Wes February 21, 2012 on 3:26 pm

    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 Wes February 21, 2012 on 3:44 pm

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

  • Ales February 24, 2012 on 7:35 am

    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 Ales March 2, 2012 on 10:54 pm

      Hi,

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

  • Smith March 10, 2012 on 7:08 pm

    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 Smith March 10, 2012 on 7:09 pm

      is there any tutor available for this ???

    • Syamil Smith March 11, 2012 on 10:46 am

      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 March 11, 2012 on 2:26 am

    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 Agent March 11, 2012 on 10:50 am

      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 April 17, 2012 on 5:17 pm

    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 Sergey April 20, 2012 on 5:39 pm

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

  • Safwan Rahman April 22, 2012 on 8:44 am

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

  • Smogg May 6, 2012 on 8:40 pm

    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.