Converting OptionTree into a framework.

Hey WordPress People,

This is a tutorial how to turn OptionTree from a plugin to an options framework (runs within your theme). Therefore your buyers will never have to download it & you can customize it like add your logo which you can’t when its a plugin. And saves you hours developing an options framework.

First you need to download & unzip OptionTree here – http://wordpress.org/extend/plugins/option-tree/

Then place it in your theme’s folder. (The theme your developing not the main themes folder)

Next you open up your functions.php > Then insert this code and replace the necessary paths with your own.

This file path below means your themes folder. Inside the theme 
folder there's a folder called option-tree which you have just placed.

require TEMPLATEPATH . '/option-tree/index.php';

Then open option-tree > index.php. You will see three define function calls. Replace them with this code and replace the necessary paths with your own.

define( 'OT_VERSION', '1.1.4' );
define( 'OT_PLUGIN_DIR', TEMPLATEPATH . '/option-tree' );
define( 'OT_PLUGIN_URL', get_bloginfo('template_url') . '/option-tree' );

That is it your done! Im pretty surprised it was that quick. You’ll have to study the code a bit further to customize the logo, css etc…

Have an awesome day.

P.S – Thank you to Derek Herman for this awesome plugin.

Maybe this would be a good sticky thread?

Very cool! My only concern is handling updates for the plugin, but I suppose you could treat it like a theme update.

This should be a sticky I think. If the majority of authors use OptionTree, the buyers will have a more consistent experience.

I always try to sing Derek’s praises when OptionTree is mentioned. Excellent work Derek! Your hard work doesn’t go unnoticed on this project.

Nice work Phoenix, agreed; should be a sticky.

Great post, Phoenix. Thanks!

After a quick look, it seems that the options have to installed with a new theme by importing an xml. Is that true or is there a way to include the options set up already? It would also be handy to be able to hide the settings and documentation from end users by default.

I think it would be awesome if the plugin was modified to hide the user interface that adds options. I think it might get confusing for customers if they try to add stuff and get lost when it comes time to add the code. This might also cut down on customers sending help requests to the author.

Hi Cybershot. You can comment out the line 275 and it hides the settings pages in classes > class.admin.php

cramdesign said
Great post, Phoenix. Thanks! After a quick look, it seems that the options have to installed with a new theme by importing an xml. Is that true or is there a way to include the options set up already? It would also be handy to be able to hide the settings and documentation from end users by default.

+1 for how to get it to auto-import the XML file upon activation.

As for hiding the settings and documentation – you can do this easily with css.

cramdesign said
Great post, Phoenix. Thanks! After a quick look, it seems that the options have to installed with a new theme by importing an xml. Is that true or is there a way to include the options set up already? It would also be handy to be able to hide the settings and documentation from end users by default.

Im writing out the code for this now and ill post back once im done.

Phoenix you’re a sweet candy! Thank you so much for this!

Adding Auto-Import Of Theme Options & Theme Data

OK. First get an existing theme options xml file and theme data file for testing.

Open classes > class.admin.php

Change the table prefix on line 20 to something else. Why do this? If one of your buyers has OptionTree installed it wont wreck their existing option_tree database table.

For example:

$this->table_name = $table_prefix . 'custom_option_tree';

Then place this at the bottom of classes > class.admin.php

delete_option('option_tree');

This deletes the data from option_tree.

Refresh on the OptionTree theme options page.

Then delete the line of code below again.

delete_option('option_tree');

Now go to line 174 of class.admin.php you’ll see function: option_tree_default_data()

Delete the entire function.

Then replace with this:

You will see you have to change some of the values for example I have stored my theme_options.xml in a folder called option-data in the root of my theme folder.

  function option_tree_default_data() 
  {
      global $wpdb;

      // default data
      $wpdb->query( $wpdb->prepare( " 
      INSERT INTO {$this->table_name}
      ( item_id, item_title, item_type )
      VALUES ( %s, %s, %s ) ", 
      array('general_default','General','heading') ) );

    $wpdb->query( $wpdb->prepare( " 
      INSERT INTO {$this->table_name}
      ( item_id, item_title, item_type )
      VALUES ( %s, %s, %s ) ", 
      array('test_input','Test Input','input') ) );

    $ot_xml_file = get_bloginfo('template_url') . "/option-data/theme-options.xml";          
    $rawdata = file_get_contents(  $ot_xml_file );
    $new_options = new SimpleXMLElement( $rawdata );

    // create table
    $wpdb->query( $this->option_tree_table( 'create' ) );

      // insert data
    foreach ( $new_options->row as $value ) 
    {
    $wpdb->insert( $this->table_name, 
      array( 
        'item_id' => $value->item_id,
        'item_title' => $value->item_title,
        'item_desc' => $value->item_desc,
        'item_type' => $value->item_type,
        'item_options' => $value->item_options
      )
    );

    }

    $string = "theme data text file contents goes here";

    // Unserialize The Array
    $new_options = unserialize( base64_decode( $string ) );

    // check if array()
    if ( is_array( $new_options ) ) 
    {
      // delete old options
      delete_option( 'option_tree' );

      // create new options
      add_option('option_tree', $new_options);

      // redirect
      //die();
    }

  } 

In order to preview the auto import. Delete the new database table for example wp_custom_option_tree. And then run this php code – delete_option(‘option_tree’);

Thats it your done. Hope you find this useful.