wp/wp-content/plugins/option-tree/includes/ot-functions-docs-page.php
changeset 5 5e2f62d02dcd
parent 0 d970ebf37754
child 11 bf1778c34b9a
equal deleted inserted replaced
4:346c88efed21 5:5e2f62d02dcd
    71         echo '<p>' . __( 'Add a comma separated list of options in the following format <code>0,100,1</code> (slide from <code>0-100</code> in intervals of <code>1</code>). The three values represent the minimum, maximum, and step options and will only affect the Numeric Slider option type.', 'option-tree' ) . '</p>';
    71         echo '<p>' . __( 'Add a comma separated list of options in the following format <code>0,100,1</code> (slide from <code>0-100</code> in intervals of <code>1</code>). The three values represent the minimum, maximum, and step options and will only affect the Numeric Slider option type.', 'option-tree' ) . '</p>';
    72         
    72         
    73         echo '<h4>'. __( 'CSS Class', 'option-tree' ) . ':</h4>';
    73         echo '<h4>'. __( 'CSS Class', 'option-tree' ) . ':</h4>';
    74         echo '<p>' . __( 'Add and optional class to any option type.', 'option-tree' ) . '</p>';
    74         echo '<p>' . __( 'Add and optional class to any option type.', 'option-tree' ) . '</p>';
    75         
    75         
       
    76         echo '<h4>'. __( 'Condition', 'option-tree' ) . ':</h4>';
       
    77         echo '<p>' . sprintf( __( 'Add a comma separated list (no spaces) of conditions in which the field will be visible, leave this setting empty to always show the field. In these examples, %s is a placeholder for your condition, which can be in the form of %s.', 'option-tree' ), '<code>value</code>', '<code>field_id:is(value)</code>, <code>field_id:not(value)</code>, <code>field_id:contains(value)</code>, <code>field_id:less_than(value)</code>, <code>field_id:less_than_or_equal_to(value)</code>, <code>field_id:greater_than(value)</code>, or <code>field_id:greater_than_or_equal_to(value)</code>' ) . '</p>';
       
    78         
       
    79         echo '<h4>'. __( 'Operator', 'option-tree' ) . ':</h4>';
       
    80         echo '<p>' . sprintf( __( 'Choose the logical operator to compute the result of the conditions. Your options are %s and %s.', 'option-tree' ), '<code>and</code>', '<code>or</code>' ) . '</p>';
       
    81         
    76       echo '</div>';
    82       echo '</div>';
    77       
    83       
    78     echo '</div>';
    84     echo '</div>';
    79     
    85     
    80   }
    86   }
   100       
   106       
   101       /* description */
   107       /* description */
   102       echo '<div class="description">';
   108       echo '<div class="description">';
   103         
   109         
   104         echo '<h4>'. __( 'Background', 'option-tree' ) . ':</h4>';    
   110         echo '<h4>'. __( 'Background', 'option-tree' ) . ':</h4>';    
   105         echo '<p>' . __( 'The Background option type is for adding background styles to your theme either dynamically via the CSS option type below or manually with <code>ot_get_option()</code>. Background has filters that allow you to change the defaults. For example, you can filter on <code>ot_recognized_background_repeat</code>, <code>ot_recognized_background_attachment</code>, and <code>ot_recognized_background_position</code>. These filters allow you to fine tune the select lists for your specific CSS needs.', 'option-tree' ) . '</p>';
   111         echo '<p>' . sprintf( __( 'The Background option type is for adding background styles to your theme either dynamically via the CSS option type below or manually with %s. The Background option type has filters that allow you to remove fields or change the defaults. For example, you can filter %s to remove unwanted fields from all Background options or an individual one. You can also filter %s. These filters allow you to fine tune the select lists for your specific needs.', 'option-tree' ), '<code>ot_get_option()</code>', '<code>ot_recognized_background_fields</code>', '<code>ot_recognized_background_repeat</code>, <code>ot_recognized_background_attachment</code>, <code>ot_recognized_background_position</code>, ' . __( 'and', 'option-tree' ) . ' <code>ot_type_background_size_choices</code>' ) . '</p>';
       
   112         
       
   113         echo '<h4>'. __( 'Border', 'option-tree' ) . ':</h4>';      
       
   114         echo '<p>' . sprintf( __( 'The Border option type is used to set width, unit, style, and color values. The text input excepts a numerical value and the unit select lets you choose the unit of measurement to add to that value. Currently the default units are %s, %s, %s, and %s. However, you can change them with the %s filter. The style select lets you choose the border style. The default styles are %s, %s, %s, %s, %s, %s, %s, and %s. However, you can change them with the %s filter. The colorpicker saves a hexadecimal color code.', 'option-tree' ), '<code>px</code>', '<code>%</code>', '<code>em</code>', '<code>pt</code>', '<code>ot_recognized_border_unit_types</code>', '<code>hidden</code>', '<code>dashed</code>', '<code>solid</code>', '<code>double</code>', '<code>groove</code>', '<code>ridge</code>', '<code>inset</code>', '<code>outset</code>', '<code>ot_recognized_border_style_types</code>' ) . '</p>';
       
   115         
       
   116         echo '<h4>'. __( 'Box Shadow', 'option-tree' ) . ':</h4>';      
       
   117         echo '<p>' . sprintf( __( 'The Box Shadow option type is used to set %s, %s, %s, %s, %s, and %s values.', 'option-tree' ), '<code>inset</code>', '<code>offset-x</code>', '<code>offset-y</code>', '<code>blur-radius</code>', '<code>spread-radius</code>', '<code>color</code>' ) . '</p>';
       
   118         
       
   119         echo '<h4>'. __( 'Category Checkbox', 'option-tree' ) . ':</h4>';      
       
   120         echo '<p>' . __( 'The Category Checkbox option type displays a list of category IDs. It allows the user to check multiple category IDs and will return that value as an array for use in a custom function or loop.', 'option-tree' ) . '</p>';
   106         
   121         
   107         echo '<h4>'. __( 'Category Select', 'option-tree' ) . ':</h4>';    
   122         echo '<h4>'. __( 'Category Select', 'option-tree' ) . ':</h4>';    
   108         echo '<p>' . __( 'The Category Select option type displays a list of category IDs. It allows the user to select only one category ID and will return that value for use in a custom function or loop.', 'option-tree' ) . '</p>';
   123         echo '<p>' . __( 'The Category Select option type displays a list of category IDs. It allows the user to select only one category ID and will return that value for use in a custom function or loop.', 'option-tree' ) . '</p>';
   109         
   124         
   110         echo '<h4>'. __( 'Category Checkbox', 'option-tree' ) . ':</h4>';      
       
   111         echo '<p>' . __( 'The Category Checkbox option type displays a list of category IDs. It allows the user to check multiple category IDs and will return that value as an array for use in a custom function or loop.', 'option-tree' ) . '</p>';
       
   112         
       
   113         echo '<h4>'. __( 'Checkbox', 'option-tree' ) . ':</h4>';       
   125         echo '<h4>'. __( 'Checkbox', 'option-tree' ) . ':</h4>';       
   114         echo '<p>' . __( 'The Checkbox option type is fairly self explanatory. Typically used to ask questions. For example, "Do you want to activate asynchronous Google analytics?" would be a single checkbox with a value of yes. You could have more complex usages but the idea is that you can easily grab the value of the checkbox and use it in you theme. In this situation you would test if the checkbox has a value and execute a block of code if it does and do nothing if it doesn\'t.', 'option-tree' ) . '</p>';
   126         echo '<p>' . __( 'The Checkbox option type displays a group of choices. It allows the user to check multiple choices and will return that value as an array for use in a custom function or loop.', 'option-tree' ) . '</p>';
   115         
   127         
   116         echo '<h4>'. __( 'Colorpicker', 'option-tree' ) . ':</h4>'; 
   128         echo '<h4>'. __( 'Colorpicker', 'option-tree' ) . ':</h4>'; 
   117         echo '<p>' . __( 'The Colorpicker option type saves a hexadecimal color code for use in CSS. Use it to modify the color of something in your theme.', 'option-tree' ) . '</p>';
   129         echo '<p>' . __( 'The Colorpicker option type saves a hexadecimal color code for use in CSS. Use it to modify the color of something in your theme.', 'option-tree' ) . '</p>';
   118         
   130         
       
   131         echo '<h4>'. __( 'Colorpicker Opacity', 'option-tree' ) . ':</h4>'; 
       
   132         echo '<p>' . sprintf( __( 'The Colorpicker Opacity option type saves a hexadecimal color code with an opacity value from %s to %s in increments of %s. Though the value is saved as hexadecimal, if used within the CSS option type the color and opacity values will be converted into a valid RGBA CSS value.', 'option-tree' ), '<code>0</code>', '<code>1</code>', '<code>0.01</code>' ) . '</p>';
       
   133         
   119         echo '<h4>'. __( 'CSS', 'option-tree' ) . ':</h4>'; 
   134         echo '<h4>'. __( 'CSS', 'option-tree' ) . ':</h4>'; 
   120         echo '<p>' . __( 'The CSS option type is a textarea that when used properly can add dynamic CSS to your theme from within OptionTree. Unfortunately, due server limitations you will need to create a file named <code>dynamic.css</code> at the root level of your theme and change permissions using chmod so the server can write to the file. I have had the most success setting this single file to 0777 but feel free to play around with permissions until everything is working. A good starting point is 0666. When the server can save to the file CSS will automatically be updated each time you save your theme options.', 'option-tree' ) . '</p>';
   135         echo '<p>' . sprintf( __( 'The CSS option type is a textarea that when used properly can add dynamic CSS to your theme from within OptionTree. Unfortunately, due server limitations you will need to create a file named %s at the root level of your theme and change permissions using %s so the server can write to the file. I have had the most success setting this single file to %s but feel free to play around with permissions until everything is working. A good starting point is %s. When the server can save to the file, CSS will automatically be updated when you save your Theme Options.', 'option-tree' ), '<code>dynamic.css</code>', '<code>chmod</code>', '<code>0777</code>', '<code>0666</code>' ) . '</p>';
   121         
   136         
   122         echo '<p class="aside">' . __( 'An example of the CSS option type: This assumes you have an option with the ID of <code>custom_background_css</code> which will display the saved values for that option.', 'option-tree' ) . '</p>';
   137         echo '<p class="aside">' . sprintf( __( 'This example assumes you have an option with the ID of %1$s. Which means this option will automatically insert the value of %1$s into the %2$s when the Theme Options are saved.', 'option-tree' ), '<code>demo_background</code>', '<code>dynamic.css</code>' ) . '</p>';
   123         
   138         
   124         echo '<p>'. __( 'Input', 'option-tree' ) . ':</p>'; 
   139         echo '<p>'. __( 'Input', 'option-tree' ) . ':</p>'; 
   125         echo '<pre><code>body {
   140         echo '<pre><code>body {
   126   {{custom_background_css}}
   141   {{demo_background}}
   127   background-color: {{custom_background_css|background-color}};
   142   background-color: {{demo_background|background-color}};
   128 }</code></pre>';
   143 }</code></pre>';
   129 
   144 
   130         echo '<p>'. __( 'Output', 'option-tree' ) . ':</p>'; 
   145         echo '<p>'. __( 'Output', 'option-tree' ) . ':</p>'; 
   131         echo '<pre><code>/* BEGIN custom_background_css */
   146         echo '<pre><code>/* BEGIN demo_background */
   132 body {
   147 body {
   133   background: color image repeat attachment position;
   148   background: color image repeat attachment position;
   134   background-color: color;
   149   background-color: color;
   135 }
   150 }
   136 /* END custom_background_css */</code></pre>';
   151 /* END demo_background */</code></pre>';
       
   152         
       
   153         echo '<h4>'. __( 'Custom Post Type Checkbox', 'option-tree' ) . ':</h4>'; 
       
   154         echo '<p>' . sprintf( __( 'The Custom Post Type Select option type displays a list of IDs from any available WordPress post type or custom post type. It allows the user to check multiple post IDs for use in a custom function or loop. Requires at least one valid %1$s in the %1$s field.', 'option-tree' ), '<code>post_type</code>' ) . '</p>';
   137         
   155         
   138         echo '<h4>'. __( 'Custom Post Type Select', 'option-tree' ) . ':</h4>'; 
   156         echo '<h4>'. __( 'Custom Post Type Select', 'option-tree' ) . ':</h4>'; 
   139         echo '<p>' . __( 'The Custom Post Type Select option type displays a list of IDs from any available WordPress post type or custom post type. It will return a single post ID for use in a custom function or loop. Requires at least one valid <code>post_type</code> when created in the settings. For some reason <code>any</code> does not work correctly and will looked into in future version.', 'option-tree' ) . '</p>';
   157         echo '<p>' . sprintf( __( 'The Custom Post Type Select option type displays a list of IDs from any available WordPress post type or custom post type. It will return a single post ID for use in a custom function or loop. Requires at least one valid %1$s in the %1$s field.', 'option-tree' ), '<code>post_type</code>' ) . '</p>';
   140         
   158         
   141         echo '<h4>'. __( 'Custom Post Type Checkbox', 'option-tree' ) . ':</h4>'; 
   159         echo '<h4>'. __( 'Date Picker', 'option-tree' ) . ':</h4>'; 
   142         echo '<p>' . __( 'The Custom Post Type Select option type displays a list of IDs from any available WordPress post type or custom post type. It allows the user to check multiple post IDs for use in a custom function or loop. Requires at least one valid <code>post_type</code> when created in the settings. For some reason <code>any</code> does not work correctly and will looked into in future version.', 'option-tree' ) . '</p>';
   160         echo '<p>' . __( 'The Date Picker option type is tied to a standard form input field which displays a calendar pop-up that allow the user to pick any date when focus is given to the input field. The returned value is a date formatted string.', 'option-tree' ) . '</p>';
       
   161         
       
   162         echo '<h4>'. __( 'Date Time Picker', 'option-tree' ) . ':</h4>'; 
       
   163         echo '<p>' . __( 'The Date Time Picker option type is tied to a standard form input field which displays a calendar pop-up that allow the user to pick any date and time when focus is given to the input field. The returned value is a date and time formatted string.', 'option-tree' ) . '</p>';
       
   164         
       
   165         echo '<h4>'. __( 'Dimension', 'option-tree' ) . ':</h4>';
       
   166         echo '<p>' . sprintf( __( 'The Dimension option type is used to set width and height values. The text inputs except numerical values and the select lets you choose the unit of measurement to add to that value. Currently the default units are %s, %s, %s, and %s. However, you can change them with the %s filter.', 'option-tree' ), '<code>px</code>', '<code>%</code>', '<code>em</code>', '<code>pt</code>', '<code>ot_recognized_dimension_unit_types</code>' ) . '</p>';
       
   167         
       
   168         echo '<h4>'. __( 'Gallery', 'option-tree' ) . ':</h4>'; 
       
   169         echo '<p>' . __( 'The Gallery option type saves a comma separated list of image attachment IDs. You will need to create a front-end function to display the images in your theme.', 'option-tree' ) . '</p>';
       
   170 
       
   171         echo '<h4>'. __( 'Google Fonts', 'option-tree' ) . ':</h4>';
       
   172         echo '<p>' . sprintf( __( 'The Google Fonts option type will dynamically enqueue any number of Google Web Fonts into the document %1$s. As well, once the option has been saved each font family will automatically be inserted into the %2$s array for the Typography option type. You can further modify the font stack by using the %3$s filter, which is passed the %4$s, %5$s, and %6$s parameters. The %6$s parameter is being passed from %7$s, so it will be the ID of a Typography option type. This will allow you to add additional web safe fonts to individual font families on an as-need basis.', 'option-tree' ), '<code>HEAD</code>', '<code>font-family</code>', '<code>ot_google_font_stack</code>', '<code>$font_stack</code>', '<code>$family</code>', '<code>$field_id</code>', '<code>ot_recognized_font_families</code>' ) . '</p>';
       
   173 
       
   174         echo '<h4>'. __( 'JavaScript', 'option-tree' ) . ':</h4>'; 
       
   175         echo '<p>' . sprintf( __( 'The JavaScript option type is a textarea that uses the %s code editor to highlight your JavaScript and display errors as you type.', 'option-tree' ), '<code>ace.js</code>' ) . '</p>';
       
   176 
       
   177         echo '<h4>'. __( 'Link Color', 'option-tree' ) . ':</h4>';
       
   178         echo '<p>' . __( 'The Link Color option type is used to set all link color states.', 'option-tree' ) . '</p>';
   143         
   179         
   144         echo '<h4>'. __( 'List Item', 'option-tree' ) . ':</h4>'; 
   180         echo '<h4>'. __( 'List Item', 'option-tree' ) . ':</h4>'; 
   145         echo '<p>' . __( 'The list Item replaced the old Slider option type. It allows for a great deal of customization. You can add settings to the List Item and those settings will be displayed to the user when they add a new List Item. Typical use is for creating sliding content or blocks of code for custom layouts.', 'option-tree' ) . '</p>';
   181         echo '<p>' . __( 'The List Item option type replaced the Slider option type and allows for a great deal of customization. You can add settings to the List Item and those settings will be displayed to the user when they add a new List Item. Typical use is for creating sliding content or blocks of code for custom layouts.', 'option-tree' ) . '</p>';
   146         
   182         
   147         echo '<h4>'. __( 'Measurement', 'option-tree' ) . ':</h4>'; 
   183         echo '<h4>'. __( 'Measurement', 'option-tree' ) . ':</h4>'; 
   148         echo '<p>' . __( 'The Measurement option type is a mix of input and select fields. The text input excepts a value and the select lets you choose the unit of measurement to add to that value. Currently the default units are <code>px</code>, <code>%</code>, <code>em</code>, <code>pt</code>. However, you can change them with the <code>ot_measurement_unit_types</code> filter.', 'option-tree' ) . '</p>';
   184         echo '<p>' . sprintf( __( 'The Measurement option type is a mix of input and select fields. The text input excepts a value and the select lets you choose the unit of measurement to add to that value. Currently the default units are %s, %s, %s, and %s. However, you can change them with the %s filter.', 'option-tree' ), '<code>px</code>', '<code>%</code>', '<code>em</code>', '<code>pt</code>', '<code>ot_measurement_unit_types</code>' ) . '</p>';
   149         
   185         
   150         echo '<p>' . __( 'Example filter to add new units to the Measurement option type. Added to <code>functions.php</code>.', 'option-tree' ) . '</p>';
   186         echo '<p>' . sprintf( __( 'Example filter to add new units to the Measurement option type. Added to %s.', 'option-tree' ), '<code>functions.php</code>' ) . '</p>';
   151         echo '<pre><code>function filter_measurement_unit_types( $array, $field_id ) {
   187         echo '<pre><code>function filter_measurement_unit_types( $array, $field_id ) {
   152   
   188   
   153   /* only run the filter on measurement with a field ID of my_measurement */
   189   /* only run the filter on measurement with a field ID of my_measurement */
   154   if ( $field_id == \'my_measurement\' ) {
   190   if ( $field_id == \'my_measurement\' ) {
   155     $array[\'in\'] = \'inches\';
   191     $array[\'in\'] = \'inches\';
   176 add_filter( \'ot_measurement_unit_types\', \'filter_measurement_unit_types\', 10, 2 );</code></pre>';
   212 add_filter( \'ot_measurement_unit_types\', \'filter_measurement_unit_types\', 10, 2 );</code></pre>';
   177         
   213         
   178         echo '<h4>'. __( 'Numeric Slider', 'option-tree' ) . ':</h4>'; 
   214         echo '<h4>'. __( 'Numeric Slider', 'option-tree' ) . ':</h4>'; 
   179         echo '<p>' . __( 'The Numeric Slider option type displays a jQuery UI slider. It will return a single numerical value for use in a custom function or loop.', 'option-tree' ) . '</p>';
   215         echo '<p>' . __( 'The Numeric Slider option type displays a jQuery UI slider. It will return a single numerical value for use in a custom function or loop.', 'option-tree' ) . '</p>';
   180         
   216         
       
   217         echo '<h4>'. __( 'On/Off', 'option-tree' ) . ':</h4>'; 
       
   218         echo '<p>' . sprintf( __( 'The On/Off option type displays a simple switch that can be used to turn things on or off. The saved return value is either %s or %s.', 'option-tree' ), '<code>on</code>', '<code>off</code>' ) . '</p>';
       
   219         
       
   220         echo '<h4>'. __( 'Page Checkbox', 'option-tree' ) . ':</h4>'; 
       
   221         echo '<p>' . __( 'The Page Checkbox option type displays a list of page IDs. It allows the user to check multiple page IDs for use in a custom function or loop.', 'option-tree' ) . '</p>';
       
   222         
   181         echo '<h4>'. __( 'Page Select', 'option-tree' ) . ':</h4>'; 
   223         echo '<h4>'. __( 'Page Select', 'option-tree' ) . ':</h4>'; 
   182         echo '<p>' . __( 'The Page Select option type displays a list of page IDs. It will return a single page ID for use in a custom function or loop.', 'option-tree' ) . '</p>';
   224         echo '<p>' . __( 'The Page Select option type displays a list of page IDs. It will return a single page ID for use in a custom function or loop.', 'option-tree' ) . '</p>';
   183         
   225         
   184         echo '<h4>'. __( 'Page Checkbox', 'option-tree' ) . ':</h4>'; 
   226         echo '<h4>'. __( 'Post Checkbox', 'option-tree' ) . ':</h4>'; 
   185         echo '<p>' . __( 'The Page Select option type displays a list of page IDs. It allows the user to check multiple page IDs for use in a custom function or loop.', 'option-tree' ) . '</p>';
   227         echo '<p>' . __( 'The Post Checkbox option type displays a list of post IDs. It allows the user to check multiple post IDs for use in a custom function or loop.', 'option-tree' ) . '</p>';
   186         
   228         
   187         echo '<h4>'. __( 'Post Select', 'option-tree' ) . ':</h4>'; 
   229         echo '<h4>'. __( 'Post Select', 'option-tree' ) . ':</h4>'; 
   188         echo '<p>' . __( 'The Post Select option type displays a list of post IDs. It will return a single post ID for use in a custom function or loop.', 'option-tree' ) . '</p>';
   230         echo '<p>' . __( 'The Post Select option type displays a list of post IDs. It will return a single post ID for use in a custom function or loop.', 'option-tree' ) . '</p>';
   189         
   231         
   190         echo '<h4>'. __( 'Post Checkbox', 'option-tree' ) . ':</h4>'; 
       
   191         echo '<p>' . __( 'The Post Select option type displays a list of post IDs. It allows the user to check multiple post IDs for use in a custom function or loop.', 'option-tree' ) . '</p>';
       
   192         
       
   193         echo '<h4>'. __( 'Radio', 'option-tree' ) . ':</h4>'; 
   232         echo '<h4>'. __( 'Radio', 'option-tree' ) . ':</h4>'; 
   194         echo '<p>' . __( 'The Radio option type could ask a question. For example, "Do you want to activate the custom navigation?" could require a yes or no answer with a radio option. In this situation you would test if the radio has a value of \'yes\' and execute a block of code, or if it\'s \'no\' execute a different block of code.', 'option-tree' ) . '</p>';
   233         echo '<p>' . __( 'The Radio option type displays a group of choices. It allows the user to choose one and will return that value as a string for use in a custom function or loop.', 'option-tree' ) . '</p>';
   195         
   234         
   196         echo '<h4>'. __( 'Radio Image', 'option-tree' ) . ':</h4>'; 
   235         echo '<h4>'. __( 'Radio Image', 'option-tree' ) . ':</h4>'; 
   197         echo '<p>' . __( 'the Radio Images option type is primarily used for layouts. However, you can filter the image list using <code>ot_radio_images</code>. As well, you can add your own custom images using the choices array.', 'option-tree' ) . '</p>';
   236         echo '<p>' . sprintf( __( 'the Radio Images option type is primarily used for layouts. However, you can filter the image list using %s. As well, you can add your own custom images using the choices array.', 'option-tree' ), '<code>ot_radio_images</code>' ) . '</p>';
   198         
   237         
   199         echo '<p>' . __( 'This example executes the <code>ot_radio_images</code> filter on layout images attached to the <code>my_radio_images</code> field. Added to <code>functions.php</code>.', 'option-tree' ) . '</p>';
   238         echo '<p>' . __( 'This example executes the <code>ot_radio_images</code> filter on layout images attached to the <code>my_radio_images</code> field. Added to <code>functions.php</code>.', 'option-tree' ) . '</p>';
   200         echo '<pre><code>function filter_radio_images( $array, $field_id ) {
   239         echo '<pre><code>function filter_radio_images( $array, $field_id ) {
   201   
   240   
   202   /* only run the filter where the field ID is my_radio_images */
   241   /* only run the filter where the field ID is my_radio_images */
   222         
   261         
   223         echo '<h4>'. __( 'Select', 'option-tree' ) . ':</h4>'; 
   262         echo '<h4>'. __( 'Select', 'option-tree' ) . ':</h4>'; 
   224         echo '<p>' . __( 'The Select option type is used to list anything you want that would be chosen from a select list.', 'option-tree' ) . '</p>';
   263         echo '<p>' . __( 'The Select option type is used to list anything you want that would be chosen from a select list.', 'option-tree' ) . '</p>';
   225         
   264         
   226         echo '<h4>'. __( 'Sidebar Select', 'option-tree' ) . ':</h4>';
   265         echo '<h4>'. __( 'Sidebar Select', 'option-tree' ) . ':</h4>';
   227         echo '<p>' . __( 'This option type makes it possible for users to select a WordPress registered sidebar to use on a specific area. By using the two provided filters, <code>ot_recognized_sidebars</code>, and <code>ot_recognized_sidebars_{$field_id}</code> we can be selective about which sidebars are available on a specific content area.', 'option-tree' ) . '</p>';
   266         echo '<p>' . sprintf(  __( 'This option type makes it possible for users to select a WordPress registered sidebar to use on a specific area. By using the two provided filters, %s, and %s we can be selective about which sidebars are available on a specific content area.', 'option-tree' ), '<code>ot_recognized_sidebars</code>', '<code>ot_recognized_sidebars_{$field_id}</code>' ) . '</p>';
   228         echo '<p>' . __( 'For example, if we create a WordPress theme that provides the ability to change the Blog Sidebar and we don\'t want to have the footer sidebars available on this area, we can unset those sidebars either manually or by using a regular expression if we have a common name like <code>footer-sidebar-$i</code>.', 'option-tree' ) . '</p>';
   267         echo '<p>' . sprintf( __( 'For example, if we create a WordPress theme that provides the ability to change the Blog Sidebar and we don\'t want to have the footer sidebars available on this area, we can unset those sidebars either manually or by using a regular expression if we have a common name like %s.', 'option-tree' ), '<code>footer-sidebar-$i</code>' ) . '</p>';
   229         
   268         
   230         echo '<h4>'. __( 'Slider', 'option-tree' ) . ':</h4>';
   269         echo '<h4>'. __( 'Slider', 'option-tree' ) . ':</h4>';
   231         echo '<p>' . __( 'The Slider option type is technically deprecated. Use the List Item option type instead, as it\'s infinitely more customizable. Typical use is for creating sliding image content.', 'option-tree' ) . '</p>';
   270         echo '<p>' . __( 'The Slider option type is technically deprecated. Use the List Item option type instead, as it\'s infinitely more customizable. Typical use is for creating sliding image content.', 'option-tree' ) . '</p>';
   232         
   271         
       
   272         echo '<h4>'. __( 'Social Links', 'option-tree' ) . ':</h4>';
       
   273         echo '<p>' . sprintf( __( 'The Social Links option type utilizes a drag & drop interface to create a list of social links. There are a few filters that make extending this option type easy. You can set the %s filter to %s and turn off loading default values. Use the %s filter to change the default values that are loaded. To filter the settings array use the %s filter.', 'option-tree' ), '<code>ot_type_social_links_load_defaults</code>', '<code>false</code>', '<code>ot_type_social_links_defaults</code>', '<code>ot_social_links_settings</code>' ) . '</p>';
       
   274         
       
   275         echo '<h4>'. __( 'Spacing', 'option-tree' ) . ':</h4>';
       
   276         echo '<p>' . sprintf( __( 'The Spacing option type is used to set spacing values such as padding or margin in the form of top, right, bottom, and left. The text inputs except numerical values and the select lets you choose the unit of measurement to add to that value. Currently the default units are %s, %s, %s, and %s. However, you can change them with the %s filter.', 'option-tree' ), '<code>px</code>', '<code>%</code>', '<code>em</code>', '<code>pt</code>', '<code>ot_recognized_spacing_unit_types</code>' ) . '</p>';
       
   277         
       
   278         echo '<h4>'. __( 'Tab', 'option-tree' ) . ':</h4>';      
       
   279         echo '<p>' . __( 'The Tab option type will break a section or metabox into tabbed content.', 'option-tree' ) . '</p>';
       
   280         
   233         echo '<h4>'. __( 'Tag Checkbox', 'option-tree' ) . ':</h4>';      
   281         echo '<h4>'. __( 'Tag Checkbox', 'option-tree' ) . ':</h4>';      
   234         echo '<p>' . __( 'The Tag Checkbox option type displays a list of tag IDs. It allows the user to check multiple tag IDs and will return that value as an array for use in a custom function or loop.', 'option-tree' ) . '</p>';
   282         echo '<p>' . __( 'The Tag Checkbox option type displays a list of tag IDs. It allows the user to check multiple tag IDs and will return that value as an array for use in a custom function or loop.', 'option-tree' ) . '</p>';
   235         
   283         
   236         echo '<h4>'. __( 'Tag Select', 'option-tree' ) . ':</h4>';    
   284         echo '<h4>'. __( 'Tag Select', 'option-tree' ) . ':</h4>';    
   237         echo '<p>' . __( 'The Tag Select option type displays a list of tag IDs. It allows the user to select only one tag ID and will return that value for use in a custom function or loop.', 'option-tree' ) . '</p>';
   285         echo '<p>' . __( 'The Tag Select option type displays a list of tag IDs. It allows the user to select only one tag ID and will return that value for use in a custom function or loop.', 'option-tree' ) . '</p>';
   240         echo '<p>' . __( 'The Taxonomy Checkbox option type displays a list of taxonomy IDs. It allows the user to check multiple taxonomy IDs and will return that value as an array for use in a custom function or loop.', 'option-tree' ) . '</p>';
   288         echo '<p>' . __( 'The Taxonomy Checkbox option type displays a list of taxonomy IDs. It allows the user to check multiple taxonomy IDs and will return that value as an array for use in a custom function or loop.', 'option-tree' ) . '</p>';
   241         
   289         
   242         echo '<h4>'. __( 'Taxonomy Select', 'option-tree' ) . ':</h4>';    
   290         echo '<h4>'. __( 'Taxonomy Select', 'option-tree' ) . ':</h4>';    
   243         echo '<p>' . __( 'The Taxonomy Select option type displays a list of taxonomy IDs. It allows the user to select only one taxonomy ID and will return that value for use in a custom function or loop.', 'option-tree' ) . '</p>';
   291         echo '<p>' . __( 'The Taxonomy Select option type displays a list of taxonomy IDs. It allows the user to select only one taxonomy ID and will return that value for use in a custom function or loop.', 'option-tree' ) . '</p>';
   244         
   292         
   245         echo '<h4>'. __( 'Text (Input)', 'option-tree' ) . ':</h4>'; 
   293         echo '<h4>'. __( 'Text', 'option-tree' ) . ':</h4>'; 
   246         echo '<p>' . __( 'The Text option type would be used to save a string value. For example, a link to feedburner, your Twitter username, or Google Analytics ID are all good candidates. Any optional or required text that is of reasonably short character length.', 'option-tree' ) . '</p>';
   294         echo '<p>' . __( 'The Text option type is used to save string values. For example, any optional or required text that is of reasonably short character length.', 'option-tree' ) . '</p>';
   247         
   295         
   248         echo '<h4>'. __( 'Textarea', 'option-tree' ) . ':</h4>'; 
   296         echo '<h4>'. __( 'Textarea', 'option-tree' ) . ':</h4>'; 
   249         echo '<p>' . __( 'The Textarea option type is a large string value used for custom code or text in the theme. The new Textarea has a WYSIWYG editor that can be filtered to change the buttons shown. For example, you can filter on <code>wpautop</code>, <code>media_buttons</code>, <code>tinymce</code>, and <code>quicktags</code>.', 'option-tree' ) . '</p>';
   297         echo '<p>' . sprintf( __( 'The Textarea option type is a large string value used for custom code or text in the theme and has a WYSIWYG editor that can be filtered to change the how it is displayed. For example, you can filter %s, %s, %s, and %s.', 'option-tree' ), '<code>wpautop</code>', '<code>media_buttons</code>', '<code>tinymce</code>', '<code>quicktags</code>' ) . '</p>';
   250         
   298         
   251         echo '<p class="aside">' . __( 'Example filters to alter the Textarea option type. Added to <code>functions.php</code>.', 'option-tree' ) . '</p>';
   299         echo '<p class="aside">' . __( 'Example filters to alter the Textarea option type. Added to <code>functions.php</code>.', 'option-tree' ) . '</p>';
   252         
   300         
   253         echo '<p>' . __( 'This example keeps WordPress from executing the <code>wpautop</code> filter on the line breaks. The default is <code>true</code> which means it wraps line breaks with an HTML <code>p</code> tag.', 'option-tree' ) . '</p>';
   301         echo '<p>' . __( 'This example keeps WordPress from executing the <code>wpautop</code> filter on the line breaks. The default is <code>true</code> which means it wraps line breaks with an HTML <code>p</code> tag.', 'option-tree' ) . '</p>';
   254         echo '<pre><code>function filter_textarea_wpautop( $content, $field_id ) {
   302         echo '<pre><code>function filter_textarea_wpautop( $content, $field_id ) {
   259   }
   307   }
   260   
   308   
   261   return $content;
   309   return $content;
   262   
   310   
   263 }
   311 }
   264 add_filter( \'ot_wpautop\', \'filter_textarea_wpautop\', 10, 1 );</code></pre>';
   312 add_filter( \'ot_wpautop\', \'filter_textarea_wpautop\', 10, 2 );</code></pre>';
   265 
   313 
   266         echo '<p>' . __( 'This example keeps WordPress from executing the <code>media_buttons</code> filter on the textarea WYSIWYG. The default is <code>true</code> which means show the buttons.', 'option-tree' ) . '</p>';
   314         echo '<p>' . __( 'This example keeps WordPress from executing the <code>media_buttons</code> filter on the textarea WYSIWYG. The default is <code>true</code> which means show the buttons.', 'option-tree' ) . '</p>';
   267         echo '<pre><code>function filter_textarea_media_buttons( $content, $field_id ) {
   315         echo '<pre><code>function filter_textarea_media_buttons( $content, $field_id ) {
   268   
   316   
   269   /* only run the filter on the textarea with a field ID of my_textarea */
   317   /* only run the filter on the textarea with a field ID of my_textarea */
   303   
   351   
   304 }
   352 }
   305 add_filter( \'ot_quicktags\', \'filter_textarea_quicktags\', 10, 1 );</code></pre>';
   353 add_filter( \'ot_quicktags\', \'filter_textarea_quicktags\', 10, 1 );</code></pre>';
   306 
   354 
   307         echo '<h4>'. __( 'Textarea Simple', 'option-tree' ) . ':</h4>'; 
   355         echo '<h4>'. __( 'Textarea Simple', 'option-tree' ) . ':</h4>'; 
   308         echo '<p>' . __( 'The Textarea Simple option type is a large string value used for custom code or text in the theme. The new Textarea Simple does not have a WYSIWYG editor. But you can still filter on <code>wpautop</code>.', 'option-tree' ) . '</p>';
   356         echo '<p>' . __( 'The Textarea Simple option type is a large string value used for custom code or text in the theme. The Textarea Simple does not have a WYSIWYG editor.', 'option-tree' ) . '</p>';
   309         
   357         
   310         echo '<p class="aside">' . __( 'This example tells WordPress to execute the <code>wpautop</code> filter on the line breaks. The default is <code>false</code> which means it does not wraps line breaks with an HTML <code>p</code> tag. Added to <code>functions.php</code>.', 'option-tree' ) . '</p>';
   358         echo '<p class="aside">' . sprintf( __( 'This example tells WordPress to execute the %s filter on the line breaks. The default is %s which means it does not wraps line breaks with an HTML %s tag. Added to %s.', 'option-tree' ), '<code>wpautop</code>', '<code>false</code>', '<code>p</code>', '<code>functions.php</code>' ) . '</p>';
   311         echo '<pre><code>function filter_textarea_simple_wpautop( $content, $field_id ) {
   359         echo '<pre><code>function filter_textarea_simple_wpautop( $content, $field_id ) {
   312   
   360   
   313   /* only run the filter on the textarea with a field ID of my_textarea */
   361   /* only run the filter on the textarea with a field ID of my_textarea */
   314   if ( $field_id == \'my_textarea\' ) {
   362   if ( $field_id == \'my_textarea\' ) {
   315     return true;
   363     return true;
   319   
   367   
   320 }
   368 }
   321 add_filter( \'ot_wpautop\', \'filter_textarea_simple_wpautop\', 10, 2 );</code></pre>';
   369 add_filter( \'ot_wpautop\', \'filter_textarea_simple_wpautop\', 10, 2 );</code></pre>';
   322         
   370         
   323         echo '<h4>'. __( 'Textblock', 'option-tree' ) . ':</h4>'; 
   371         echo '<h4>'. __( 'Textblock', 'option-tree' ) . ':</h4>'; 
   324         echo '<p>' . __( 'The Textblock option type is used only on the Theme Option page. It will allow you to create & display HTML on your Theme Options page but has no title above the text block. You can then use the Textblock to add a more detailed set of instruction on how the options are used in your theme. You would NEVER use this in your themes template files as it does not save a value.', 'option-tree' ) . '</p>';
   372         echo '<p>' . __( 'The Textblock option type is used only on the Theme Option page. It will allow you to create & display HTML, but has no title above the text block. You can then use the Textblock to add a more detailed set of instruction on how the options are used in your theme. You would never use this in your themes template files as it does not save a value.', 'option-tree' ) . '</p>';
   325         
   373         
   326         echo '<h4>'. __( 'Textblock Titled', 'option-tree' ) . ':</h4>'; 
   374         echo '<h4>'. __( 'Textblock Titled', 'option-tree' ) . ':</h4>'; 
   327         echo '<p>' . __( 'The Textblock Titled option type is used only on the Theme Option page. It will allow you to create & display HTML on your Theme Options page and has a title above the text block. You can then use the Textblock Titled to add a more detailed set of instruction on how the options are used in your theme. You would NEVER use this in your themes template files as it does not save a value.', 'option-tree' ) . '</p>';
   375         echo '<p>' . __( 'The Textblock Titled option type is used only on the Theme Option page. It will allow you to create & display HTML, and has a title above the text block. You can then use the Textblock Titled to add a more detailed set of instruction on how the options are used in your theme. You would never use this in your themes template files as it does not save a value.', 'option-tree' ) . '</p>';
   328         
   376         
   329         echo '<h4>'. __( 'Typography', 'option-tree' ) . ':</h4>';    
   377         echo '<h4>'. __( 'Typography', 'option-tree' ) . ':</h4>';    
   330         echo '<p>' . __( 'The Typography option type is for adding typographic styles to your theme either dynamically via the CSS option type below or manually with <code>ot_get_option()</code>. Typography has filters that allow you to change the defaults. For example, you can filter on <code>ot_recognized_font_styles</code>, <code>ot_recognized_font_weights</code>, <code>ot_recognized_font_variants</code>, and <code>ot_recognized_font_families</code>. These filters allow you to fine tune the select lists for your specific CSS needs. The most important one though is <code>ot_recognized_font_families</code> as you can add your Google Fonts to create custom font stacks.', 'option-tree' ) . '</p>';
   378         echo '<p>' . sprintf( __( 'The Typography option type is for adding typography styles to your theme either dynamically via the CSS option type above or manually with %s. The Typography option type has filters that allow you to remove fields or change the defaults. For example, you can filter %s to remove unwanted fields from all Background options or an individual one. You can also filter %s. These filters allow you to fine tune the select lists for your specific needs.', 'option-tree' ), '<code>ot_get_option()</code>', '<code>ot_recognized_typography_fields</code>', '<code>ot_recognized_font_families</code>, <code>ot_recognized_font_sizes</code>, <code>ot_recognized_font_styles</code>, <code>ot_recognized_font_variants</code>, <code>ot_recognized_font_weights</code>, <code>ot_recognized_letter_spacing</code>, <code>ot_recognized_line_heights</code>, <code>ot_recognized_text_decorations</code> ' . __( 'and', 'option-tree' ) . ' <code>ot_recognized_text_transformations</code>' ) . '</p>';
   331         
   379         
   332         echo '<p class="aside">' . __( 'This example would filter <code>ot_recognized_font_families</code> to build your own font stack. Added to <code>functions.php</code>.', 'option-tree' ) . '</p>';
   380         echo '<p class="aside">' . __( 'This example would filter <code>ot_recognized_font_families</code> to build your own font stack. Added to <code>functions.php</code>.', 'option-tree' ) . '</p>';
   333         echo '<pre><code>function filter_ot_recognized_font_families( $array, $field_id ) {
   381         echo '<pre><code>function filter_ot_recognized_font_families( $array, $field_id ) {
   334   
   382   
   335   /* only run the filter when the field ID is my_google_fonts_headings */
   383   /* only run the filter when the field ID is my_google_fonts_headings */
   345   
   393   
   346 }
   394 }
   347 add_filter( \'ot_recognized_font_families\', \'filter_ot_recognized_font_families\', 10, 2 );</code></pre>';
   395 add_filter( \'ot_recognized_font_families\', \'filter_ot_recognized_font_families\', 10, 2 );</code></pre>';
   348 
   396 
   349         echo '<h4>'. __( 'Upload', 'option-tree' ) . ':</h4>'; 
   397         echo '<h4>'. __( 'Upload', 'option-tree' ) . ':</h4>'; 
   350         echo '<p>' . __( 'The Upload option type is used to upload any WordPress supported media. After uploading, users are required to press the "Send to OptionTree" button in order to populate the input with the URI of that media. There is one caveat of this feature. If you import the theme options and have uploaded media on one site the old URI will not reflect the URI of your new site. You\'ll have to re-upload or FTP any media to your new server and change the URIs if necessary.', 'option-tree' ) . '</p>';
   398         echo '<p>' . sprintf( __( 'The Upload option type is used to upload any WordPress supported media. After uploading, users are required to press the "%s" button in order to populate the input with the URI of that media. There is one caveat of this feature. If you import the theme options and have uploaded media on one site the old URI will not reflect the URI of your new site. You will have to re-upload or %s any media to your new server and change the URIs if necessary.', 'option-tree' ), apply_filters( 'ot_upload_text', __( 'Send to OptionTree', 'option-tree' ) ), 'FTP' ) . '</p>';
   351         
   399         
   352       echo '</div>';
   400       echo '</div>';
   353       
   401       
   354     echo '</div>';
   402     echo '</div>';
   355     
   403     
   599         echo '<p>' . __( 'Once you have created all your different layouts, or theme variations, you can save them to a separate text file for repackaging with your theme. Alternatively, you could just make different variations for yourself and change your theme with the click of a button, all without deleting your previous options data.', 'option-tree' ) . '</p>';
   647         echo '<p>' . __( 'Once you have created all your different layouts, or theme variations, you can save them to a separate text file for repackaging with your theme. Alternatively, you could just make different variations for yourself and change your theme with the click of a button, all without deleting your previous options data.', 'option-tree' ) . '</p>';
   600 
   648 
   601         echo '<p class="aside">' . __( ' Adding a layout is ridiculously easy, follow these steps and you\'ll be on your way to having a WordPress super theme.', 'option-tree' ) . '</p>';
   649         echo '<p class="aside">' . __( ' Adding a layout is ridiculously easy, follow these steps and you\'ll be on your way to having a WordPress super theme.', 'option-tree' ) . '</p>';
   602         
   650         
   603         echo '<h4>' . __( 'For Developers', 'option-tree' ) . ':</h4>';
   651         echo '<h4>' . __( 'For Developers', 'option-tree' ) . ':</h4>';
   604         echo '<p>' . __( '', 'option-tree' ) . '</p>';
       
   605         
   652         
   606         echo '<h5>' . __( 'Creating a Layout', 'option-tree' ) . ':</h5>';
   653         echo '<h5>' . __( 'Creating a Layout', 'option-tree' ) . ':</h5>';
   607         echo '<ul class="docs-ul">';
   654         echo '<ul class="docs-ul">';
   608           echo '<li>'. __( 'Go to the <code>OptionTre->Settings->Layouts</code> tab.', 'option-tree' ) . '</li>';
   655           echo '<li>'. __( 'Go to the <code>OptionTre->Settings->Layouts</code> tab.', 'option-tree' ) . '</li>';
   609           echo '<li>' . __( 'Enter a name for your layout in the text field and hit "Save Layouts", you\'ve created your first layout.', 'option-tree' ) . '</li>';
   656           echo '<li>' . __( 'Enter a name for your layout in the text field and hit "Save Layouts", you\'ve created your first layout.', 'option-tree' ) . '</li>';
   629           echo '<li>' . __( 'Saving theme options data will update the currently active layout, so before you start saving make sure you want to modify the current layout.', 'option-tree' ) . '</li>';
   676           echo '<li>' . __( 'Saving theme options data will update the currently active layout, so before you start saving make sure you want to modify the current layout.', 'option-tree' ) . '</li>';
   630           echo '<li>' . __( 'If you want to edit a new layout, first create it then save your theme options.', 'option-tree' ) . '</li>';
   677           echo '<li>' . __( 'If you want to edit a new layout, first create it then save your theme options.', 'option-tree' ) . '</li>';
   631         echo '</ul>';
   678         echo '</ul>';
   632 
   679 
   633         echo '<h4>' . __( 'End-Users Mode', 'option-tree' ) . ':</h4>';
   680         echo '<h4>' . __( 'End-Users Mode', 'option-tree' ) . ':</h4>';
   634         echo '<p>' . __( '', 'option-tree' ) . '</p>';
       
   635         
   681         
   636         echo '<h5>' . __( 'Creating a Layout', 'option-tree' ) . ':</h5>';
   682         echo '<h5>' . __( 'Creating a Layout', 'option-tree' ) . ':</h5>';
   637         echo '<ul class="docs-ul">';
   683         echo '<ul class="docs-ul">';
   638           echo '<li>'. __( 'Go to the <code>Appearance->Theme Options</code> page.', 'option-tree' ) . '</li>';
   684           echo '<li>'. __( 'Go to the <code>Appearance->Theme Options</code> page.', 'option-tree' ) . '</li>';
   639           echo '<li>' . __( 'Enter a name for your layout in the text field and hit "New Layout", you\'ve created your first layout.', 'option-tree' ) . '</li>';
   685           echo '<li>' . __( 'Enter a name for your layout in the text field and hit "New Layout", you\'ve created your first layout.', 'option-tree' ) . '</li>';
   700         echo '</ul>';
   746         echo '</ul>';
   701         
   747         
   702         echo '<pre><code>/**
   748         echo '<pre><code>/**
   703  * Meta Boxes
   749  * Meta Boxes
   704  */
   750  */
   705 load_template( trailingslashit( get_template_directory() ) . \'includes/meta-boxes.php\' );
   751 require( trailingslashit( get_template_directory() ) . \'includes/meta-boxes.php\' );
   706 </code></pre>';
   752 </code></pre>';
   707         
   753         
   708         echo '<ul class="docs-ul">';
   754         echo '<ul class="docs-ul">';
   709           echo '<li>' . __( 'Add a variation of the following code to your <code>meta-boxes.php</code>. You\'ll obviously need to fill it in with all your custom array values. It\'s important to note here that we use the <code>admin_init</code> filter because if you were to call the <code>ot_register_meta_box</code> function before OptionTree was loaded the sky would fall on your head.', 'option-tree' ) . '</li>';
   755           echo '<li>' . __( 'Add a variation of the following code to your <code>meta-boxes.php</code>. You\'ll obviously need to fill it in with all your custom array values. It\'s important to note here that we use the <code>admin_init</code> filter because if you were to call the <code>ot_register_meta_box</code> function before OptionTree was loaded the sky would fall on your head.', 'option-tree' ) . '</li>';
   710         echo '</ul>';
   756         echo '</ul>';
   770         
   816         
   771         echo '<p>' . __( 'There are a few simple steps you need to take in order to use OptionTree as a theme included module. In the code below I\'ll show you a basic demo of how to include the entire plugin as a module, which will allow you to have the most up-to-date version of OptionTree without ever needing to hack the core of the plugin. If you would like to see some demo code, there is a directory named <code>theme-mode</code> inside the <code>assets</code> directory that contains a file named <code>demo-theme-options.php</code> you can reference.', 'option-tree' ) . '</p>';
   817         echo '<p>' . __( 'There are a few simple steps you need to take in order to use OptionTree as a theme included module. In the code below I\'ll show you a basic demo of how to include the entire plugin as a module, which will allow you to have the most up-to-date version of OptionTree without ever needing to hack the core of the plugin. If you would like to see some demo code, there is a directory named <code>theme-mode</code> inside the <code>assets</code> directory that contains a file named <code>demo-theme-options.php</code> you can reference.', 'option-tree' ) . '</p>';
   772         
   818         
   773         echo '<h5>' . __( 'Step 1: Include the plugin & turn on theme mode.', 'option-tree' ) . '</h5>';
   819         echo '<h5>' . __( 'Step 1: Include the plugin & turn on theme mode.', 'option-tree' ) . '</h5>';
   774         echo '<ul class="docs-ul">';
   820         echo '<ul class="docs-ul">';
   775           echo '<li>'. __( 'Download the latest version of <a href="http://wordpress.org/extend/plugins/option-tree/" rel="nofollow" target="_blank">OptionTree</a>.', 'option-tree' ) . '</li>';
   821           echo '<li>' . sprintf( __( 'Download the latest version of %s and unarchive the %s directory.', 'option-tree' ), '<a href="http://wordpress.org/extend/plugins/option-tree/" rel="nofollow" target="_blank">' . __( 'OptionTree', 'option-tree' ) . '</a>', '<code>.zip</code>' ) . '</li>';
   776           echo '<li>' . __( 'Unpack the ZIP archive.', 'option-tree' ) . '</li>';
   822           echo '<li>' . sprintf( __( 'Put the %s directory in the root of your theme. For example, the server path would be %s.', 'option-tree' ), '<code>option-tree</code>', '<code>/wp-content/themes/theme-name/option-tree/</code>' ) . '</li>';
   777           echo '<li>' . __( 'Put the <code>option-tree</code> directory in the root of your theme. For example, the server path would be <code>/wp-content/themes/theme-name/option-tree/</code>.', 'option-tree' ) . '</li>';
   823           echo '<li>' . sprintf( __( 'Add the following code to the beginning of your %s.', 'option-tree' ), '<code>functions.php</code>' ) . '</li>';
   778           echo '<li>' . __( 'Add the following code to the beginning of your <code>functions.php</code>.', 'option-tree' ) . '</li>';
       
   779         echo '</ul>';
   824         echo '</ul>';
   780         
   825         
   781         echo '<pre><code>/**
   826         echo '<pre><code>/**
   782  * Optional: set \'ot_show_pages\' filter to false.
       
   783  * This will hide the settings & documentation pages.
       
   784  */
       
   785 add_filter( \'ot_show_pages\', \'__return_false\' );
       
   786 
       
   787 /**
       
   788  * Optional: set \'ot_show_new_layout\' filter to false.
       
   789  * This will hide the "New Layout" section on the Theme Options page.
       
   790  */
       
   791 add_filter( \'ot_show_new_layout\', \'__return_false\' );
       
   792 
       
   793 /**
       
   794  * Required: set \'ot_theme_mode\' filter to true.
   827  * Required: set \'ot_theme_mode\' filter to true.
   795  */
   828  */
   796 add_filter( \'ot_theme_mode\', \'__return_true\' );
   829 add_filter( \'ot_theme_mode\', \'__return_true\' );
   797 
   830 
   798 /**
   831 /**
   799  * Required: include OptionTree.
   832  * Required: include OptionTree.
   800  */
   833  */
   801 load_template( trailingslashit( get_template_directory() ) . \'option-tree/ot-loader.php\' );
   834 require( trailingslashit( get_template_directory() ) . \'option-tree/ot-loader.php\' );
   802 </code></pre>';
   835 </code></pre>';
   803         
   836         
   804         echo '<p class="aside">' . __( 'It\'s that simple! You now have OptionTree built into your theme and anytime there\'s an update to the plugin you just replace the old version and you\'re good to go..', 'option-tree' ) . '</p>';
   837         echo '<p>' . sprintf( __( 'For a list of all the OptionTree UI display filters refer to the %s file found in the %s directory of this plugin. This file is the starting point for developing themes with Theme Mode.', 'option-tree' ), '<code>demo-functions.php</code>', '<code>/assets/theme-mode/</code>' ) . '</p>';
       
   838         
       
   839         echo '<p class="aside">' . __( 'You now have OptionTree built into your theme and anytime an update is available replace the old version with the new one.', 'option-tree' ) . '</p>';
   805         
   840         
   806         echo '<h5>' . __( 'Step 2: Create Theme Options without using the UI Builder.', 'option-tree' ) . '</h5>';
   841         echo '<h5>' . __( 'Step 2: Create Theme Options without using the UI Builder.', 'option-tree' ) . '</h5>';
   807         echo '<ul class="docs-ul">';
   842         echo '<ul class="docs-ul">';
   808           echo '<li>'. __( 'Create a file and name it anything you want, maybe <code>theme-options.php</code>, or use the built in file export to create it for you. Remember, you should always check the file for errors before including it in your theme.', 'option-tree' ) . '</li>';
   843           echo '<li>'. __( 'Create a file and name it anything you want, maybe <code>theme-options.php</code>, or use the built in file export to create it for you. Remember, you should always check the file for errors before including it in your theme.', 'option-tree' ) . '</li>';
   809           echo '<li>'. __( 'As well, you\'ll probably want to create a directory named <code>includes</code> to put your <code>theme-options.php</code> into which will help keep you file structure nice and tidy.', 'option-tree' ) . '</li>';
   844           echo '<li>'. __( 'As well, you\'ll probably want to create a directory named <code>includes</code> to put your <code>theme-options.php</code> into which will help keep you file structure nice and tidy.', 'option-tree' ) . '</li>';
   811         echo '</ul>';
   846         echo '</ul>';
   812         
   847         
   813         echo '<pre><code>/**
   848         echo '<pre><code>/**
   814  * Theme Options
   849  * Theme Options
   815  */
   850  */
   816 load_template( trailingslashit( get_template_directory() ) . \'includes/theme-options.php\' );
   851 require( trailingslashit( get_template_directory() ) . \'includes/theme-options.php\' );
   817 </code></pre>';
   852 </code></pre>';
   818         
   853         
   819         echo '<ul class="docs-ul">';
   854         echo '<ul class="docs-ul">';
   820           echo '<li>' . __( 'Add a variation of the following code to your <code>theme-options.php</code>. You\'ll obviously need to fill it in with all your custom array values for contextual help (optional), sections (required), and settings (required).', 'option-tree' ) . '</li>';
   855           echo '<li>' . __( 'Add a variation of the following code to your <code>theme-options.php</code>. You\'ll obviously need to fill it in with all your custom array values for contextual help (optional), sections (required), and settings (required).', 'option-tree' ) . '</li>';
   821         echo '</ul>';
   856         echo '</ul>';
   823         echo '<p>' . __( 'The code below is a boilerplate to get your started. For a full list of the available option types click the "Option Types" tab above. Also a quick note, you don\'t need to put OptionTree in theme mode to manually create options but you will want to hide the docs and settings as each time you load the admin area the settings be written over with the code below if they\'ve changed in any way. However, this ensures your settings do not get tampered with by the end-user.', 'option-tree' ) . '</p>';
   858         echo '<p>' . __( 'The code below is a boilerplate to get your started. For a full list of the available option types click the "Option Types" tab above. Also a quick note, you don\'t need to put OptionTree in theme mode to manually create options but you will want to hide the docs and settings as each time you load the admin area the settings be written over with the code below if they\'ve changed in any way. However, this ensures your settings do not get tampered with by the end-user.', 'option-tree' ) . '</p>';
   824         
   859         
   825         echo "<pre><code>/**
   860         echo "<pre><code>/**
   826  * Initialize the options before anything else. 
   861  * Initialize the options before anything else. 
   827  */
   862  */
   828 add_action( 'admin_init', 'custom_theme_options', 1 );
   863 add_action( 'init', 'custom_theme_options', 1 );
   829 
   864 
   830 /**
   865 /**
   831  * Build the custom settings & update OptionTree.
   866  * Build the custom settings & update OptionTree.
   832  */
   867  */
   833 function custom_theme_options() {
   868 function custom_theme_options() {
       
   869 
       
   870   /* OptionTree is not loaded yet, or this is not an admin request */
       
   871   if ( ! function_exists( 'ot_settings_id' ) || ! is_admin() )
       
   872     return false;
       
   873 
   834   /**
   874   /**
   835    * Get a copy of the saved settings array. 
   875    * Get a copy of the saved settings array. 
   836    */
   876    */
   837   &#36;saved_settings = get_option( 'option_tree_settings', array() );
   877   &#36;saved_settings = get_option( 'option_tree_settings', array() );
   838   
   878   
   959   /* settings are not the same update the DB */
   999   /* settings are not the same update the DB */
   960   if ( &#36;saved_settings !== &#36;custom_settings ) {
  1000   if ( &#36;saved_settings !== &#36;custom_settings ) {
   961     update_option( 'option_tree_settings', &#36;custom_settings ); 
  1001     update_option( 'option_tree_settings', &#36;custom_settings ); 
   962   }
  1002   }
   963   
  1003   
       
  1004   /* Lets OptionTree know the UI Builder is being overridden */
       
  1005   global &#36;ot_has_custom_theme_options;
       
  1006   &#36;ot_has_custom_theme_options = true;
       
  1007   
   964 }
  1008 }
   965 </code></pre>";
  1009 </code></pre>";
   966         
  1010         
   967       echo '</div>';
  1011       echo '</div>';
   968       
  1012