How to create custom css option in a custom theme.

Adding custom css to a theme which is custom build is very easy, just follow the below steps.

Why custom css?

We can edit css from editor of a theme, but when we save it css will be reformatted with lot's of white space. This action will effect on Page load speed. To avoid this we can use an option called custom css and we can load the css in header which overrides the current css.

Let's make it quite simple with available plugins. i am using OPTION TREE

Step 1:

We will integrate OPTION TREE in the theme

1.Download the latest version of OptionTree and unarchive the .zip directory.
2. Put the option-tree directory in the root of your theme. For example, the server path would be /wp-content/themes/theme-name/option-tree/.
3. You must deactivate and/or delete the plugin version of OptionTree.
4. Add the following code to the beginning of your functions.php.
5. Create a folder (admin) and create a page (theme-options.php).

add_filter( 'ot_theme_mode', '__return_true' );
add_filter( 'ot_show_pages', '__return_false' );
require( trailingslashit( get_template_directory() ) . 'option-tree/ot-loader.php' );
require( trailingslashit( get_template_directory() ) . 'admin/theme-options.php' );

Step 2:

Add the below code to the (theme-options.php).

<?php
/**
 * Initialize the custom Theme Options.
 */
add_action( 'init', 'custom_theme_options' );

/**
 * Build the custom settings & update OptionTree.
 *
 * @return    void
 * @since     2.0
 */
function custom_theme_options() {

  /* OptionTree is not loaded yet, or this is not an admin request */
  if ( ! function_exists( 'ot_settings_id' ) || ! is_admin() )
    return false;

  /**
   * Get a copy of the saved settings array.
   */
  $saved_settings = get_option( ot_settings_id(), array() );

  /**
   * Custom settings array that will eventually be
   * passes to the OptionTree Settings API Class.
   */
  $custom_settings = array(
    'contextual_help' => array(
      'sidebar'       => ''
    ),
    'sections'        => array(
      array(
        'id'          => customcss',
        'title'       => __( 'Custom Css', 'theme-text-domain' )
      )
    ),
    'settings'        => array(
      array(
        'id'          => 'custom_css',
        'label'       => __( 'Custom Css', 'theme-text-domain' ),
        'desc'        => sprintf( __( 'Custom Css', 'theme-text-domain' ), '<code>wpautop</code>', '<code>media_buttons</code>', '<code>tinymce</code>', '<code>quicktags</code>' ),
        'std'         => '',
        'type'        => 'textarea-simple',
        'section'     => 'customcss',
        'rows'        => '15',
        'post_type'   => '',
        'taxonomy'    => '',
        'min_max_step'=> '',
        'class'       => '',
        'condition'   => '',
        'operator'    => 'and'
      )
   
    )
  );

  /* allow settings to be filtered before saving */
  $custom_settings = apply_filters( ot_settings_id() . '_args', $custom_settings );

  /* settings are not the same update the DB */
  if ( $saved_settings !== $custom_settings ) {
    update_option( ot_settings_id(), $custom_settings );
  }

  /* Lets OptionTree know the UI Builder is being overridden */
  global $ot_has_custom_theme_options;
  $ot_has_custom_theme_options = true;

}
?>


Step 3:

Add this below code to your heder.php above </head> tag.
<?php
if ( function_exists('ot_get_option') ) {
$custom_css = ot_get_option( 'custom_css' );
}
?>
<style>
<?php echo $custom_css; ?>
</style>

Step 4:

Done!!

Note: You can find this option under Apperance->Theme Options -> Custom Css