Exemple #1
0
function evolve_customizer_register($wp_customize)
{
    /**
     * This is optional, but if you want to reuse some of the defaults
     * or values you already have built in the options panel, you
     * can load them into $options for easy reference
     */
    get_template_part('library/functions/customizer-class');
    $customizer_array = array('layout' => array('name' => __('General', 'evolve'), 'priority' => 101, 'settings' => array('evl_favicon', 'evl_layout', 'evl_width_layout', 'evl_width_px')), 'header' => array('name' => __('Header', 'evolve'), 'priority' => 102, 'settings' => array('evl_header_logo', 'evl_header_image', 'evl_pos_logo', 'evl_blog_title', 'evl_tagline_pos', 'evl_main_menu', 'evl_sticky_header', 'evl_searchbox', 'evl_widgets_header', 'evl_header_widgets_placement')), 'footer' => array('name' => __('Footer', 'evolve'), 'priority' => 103, 'settings' => array('evl_widgets_num', 'evl_footer_content')), 'typography' => array('name' => __('Typography', 'evolve'), 'priority' => 104, 'settings' => array('evl_title_font', 'evl_tagline_font', 'evl_menu_font', 'evl_post_font', 'evl_content_font', 'evl_heading_font')), 'styling' => array('name' => __('Styling', 'evolve'), 'priority' => 105, 'settings' => array('evl_content_back', 'evl_menu_back', 'evl_menu_back_color', 'evl_disable_menu_back', 'evl_header_footer_back_color', 'evl_pattern', 'evl_scheme_widgets', 'evl_scheme_background', 'evl_scheme_background_100', 'evl_scheme_background_repeat', 'evl_general_link', 'evl_button_1', 'evl_button_2', 'evl_widget_background', 'evl_widget_background_image')), 'blog' => array('name' => __('Blog', 'evolve'), 'priority' => 106, 'settings' => array('evl_post_layout', 'evl_excerpt_thumbnail', 'evl_featured_images', 'evl_blog_featured_image', 'evl_author_avatar', 'evl_header_meta', 'evl_category_page_title', 'evl_posts_excerpt_title_length', 'evl_share_this', 'evl_post_links', 'evl_similar_posts', 'evl_pagination_type')), 'social' => array('name' => __('Social Media Links', 'evolve'), 'priority' => 107, 'settings' => array('evl_social_links', 'evl_social_color_scheme', 'evl_social_icons_size', 'evl_show_rss', 'evl_rss_feed', 'evl_newsletter', 'evl_facebook', 'evl_twitter_id', 'evl_instagram', 'evl_skype', 'evl_youtube', 'evl_flickr', 'evl_linkedin', 'evl_googleplus', 'evl_pinterest', 'evl_tumblr')), 'boxes' => array('name' => __('Front Page Content Boxes', 'evolve'), 'priority' => 108, 'settings' => array('evl_content_boxes', 'evl_content_box1_title', 'evl_content_box1_icon', 'evl_content_box1_icon_color', 'evl_content_box1_desc', 'evl_content_box1_button', 'evl_content_box2_title', 'evl_content_box2_icon', 'evl_content_box2_icon_color', 'evl_content_box2_desc', 'evl_content_box2_button', 'evl_content_box3_title', 'evl_content_box3_icon', 'evl_content_box3_icon_color', 'evl_content_box3_desc', 'evl_content_box3_button', 'evl_content_box4_title', 'evl_content_box4_icon', 'evl_content_box4_icon_color', 'evl_content_box4_desc', 'evl_content_box4_button')), 'bootstrap' => array('name' => __('Bootstrap Slider', 'evolve'), 'priority' => 109, 'settings' => array('evl_bootstrap_slider', 'evl_bootstrap_100', 'evl_bootstrap_speed', 'evl_bootstrap_slide_title_font', 'evl_bootstrap_slide_desc_font', 'evl_bootstrap_slide1', 'evl_bootstrap_slide1_img', 'evl_bootstrap_slide1_title', 'evl_bootstrap_slide1_author', 'evl_bootstrap_slide1_desc', 'evl_bootstrap_slide1_button', 'evl_bootstrap_slide2', 'evl_bootstrap_slide2_img', 'evl_bootstrap_slide2_title', 'evl_bootstrap_slide2_author', 'evl_bootstrap_slide2_desc', 'evl_bootstrap_slide2_button', 'evl_bootstrap_slide3', 'evl_bootstrap_slide3_img', 'evl_bootstrap_slide3_title', 'evl_bootstrap_slide3_author', 'evl_bootstrap_slide3_desc', 'evl_bootstrap_slide3_button', 'evl_bootstrap_slide4', 'evl_bootstrap_slide4_img', 'evl_bootstrap_slide4_title', 'evl_bootstrap_slide4_author', 'evl_bootstrap_slide4_desc', 'evl_bootstrap_slide4_button', 'evl_bootstrap_slide5', 'evl_bootstrap_slide5_img', 'evl_bootstrap_slide5_title', 'evl_bootstrap_slide5_author', 'evl_bootstrap_slide5_desc', 'evl_bootstrap_slide5_button')), 'parallax' => array('name' => __('Parallax Slider', 'evolve'), 'priority' => 110, 'settings' => array('evl_parallax_slider', 'evl_parallax_speed', 'evl_parallax_slide_title_font', 'evl_parallax_slide_desc_font', 'evl_show_slide1', 'evl_slide1_img', 'evl_slide1_title', 'evl_slide1_desc', 'evl_slide1_button', 'evl_show_slide2', 'evl_slide2_img', 'evl_slide2_title', 'evl_slide2_desc', 'evl_slide2_button', 'evl_show_slide3', 'evl_slide3_img', 'evl_slide3_title', 'evl_slide3_desc', 'evl_slide3_button', 'evl_show_slide4', 'evl_slide4_img', 'evl_slide4_title', 'evl_slide4_desc', 'evl_slide4_button', 'evl_show_slide5', 'evl_slide5_img', 'evl_slide5_title', 'evl_slide5_desc', 'evl_slide5_button')), 'posts' => array('name' => __('Posts Slider', 'evolve'), 'priority' => 111, 'settings' => array('evl_posts_slider', 'evl_posts_number', 'evl_posts_slider_content', 'evl_posts_slider_id', 'evl_carousel_speed', 'evl_carousel_slide_title_font', 'evl_carousel_slide_desc_font')), 'contact' => array('name' => __('Contact', 'evolve'), 'priority' => 112, 'settings' => array('evl_gmap_type', 'evl_gmap_width', 'evl_gmap_height', 'evl_gmap_address', 'evl_sent_email_header', 'evl_email_address', 'evl_map_zoom_level', 'evl_map_pin', 'evl_map_popup', 'evl_map_scrollwheel', 'evl_map_scale', 'evl_map_zoomcontrol')), 'extra' => array('name' => __('Extra', 'evolve'), 'priority' => 113, 'settings' => array('evl_breadcrumbs', 'evl_nav_links', 'evl_pos_button', 'evl_parallax_slider_support', 'evl_carousel_slider', 'evl_status_gmap', 'evl_animatecss')), 'css' => array('name' => __('Custom CSS', 'evolve'), 'priority' => 114, 'settings' => array('evl_css_content')));
    global $my_image_controls;
    $my_image_controls = array();
    $options = evolve_options();
    $i = 0;
    foreach ($customizer_array as $name => $val) {
        $wp_customize->add_section("evolve-theme_{$name}", array('title' => $val['name'], 'priority' => $val['priority']));
        foreach ($val['settings'] as $setting) {
            $options[$setting]['std'] = isset($options[$setting]['std']) ? $options[$setting]['std'] : '';
            $options[$setting]['type'] = isset($options[$setting]['type']) ? $options[$setting]['type'] : '';
            //evolve_sanitize_typography
            if ($options[$setting]['type'] == 'typography') {
                $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_typography'));
            } else {
                /*             
                	            $wp_customize->add_setting( "evolve-theme[$setting]", array(
                	                'default' => $options[$setting]['std'],
                	                'type' => 'option'
                	            ) );
                */
                //sanitize everything else
                switch ($options[$setting]['id']) {
                    /* image sanitization start */
                    case "evl_favicon":
                    case "evl_header_logo":
                    case "evl_scheme_background":
                    case "evl_bootstrap_slide1_img":
                    case "evl_bootstrap_slide2_img":
                    case "evl_bootstrap_slide3_img":
                    case "evl_bootstrap_slide4_img":
                    case "evl_bootstrap_slide5_img":
                    case "evl_slide1_img":
                    case "evl_slide2_img":
                    case "evl_slide3_img":
                    case "evl_slide4_img":
                    case "evl_slide5_img":
                    case "evl_scheme_background":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_upload'));
                        break;
                        // image sanitization end
                        // hex color sanitization start
                    // image sanitization end
                    // hex color sanitization start
                    case "evl_menu_back_color":
                    case "evl_header_footer_back_color":
                    case "evl_scheme_widgets":
                    case "evl_general_link":
                    case "evl_button_1":
                    case "evl_button_2":
                    case "evl_social_color_scheme":
                    case "evl_content_box1_icon_color":
                    case "evl_content_box2_icon_color":
                    case "evl_content_box3_icon_color":
                    case "evl_content_box4_icon_color":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_hex'));
                        break;
                        // hex color sanitization end
                        // select sanitization start
                    // hex color sanitization end
                    // select sanitization start
                    case "evl_header_image":
                    case "evl_layout":
                    case "evl_width_layout":
                    case "evl_post_links":
                    case "evl_pos_logo":
                    case "evl_tagline_pos":
                    case "evl_widgets_header":
                    case "evl_header_widgets_placement":
                    case "evl_widgets_num":
                    case "evl_content_back":
                    case "evl_menu_back":
                    case "evl_pattern":
                    case "evl_scheme_background_repeat":
                    case "evl_post_layout":
                    case "evl_header_meta":
                    case "evl_share_this":
                    case "evl_similar_posts":
                    case "evl_pagination_type":
                    case "evl_social_icons_size":
                    case "evl_bootstrap_slider":
                    case "evl_parallax_slider":
                    case "evl_posts_slider":
                    case "evl_posts_number":
                    case "evl_posts_slider_content":
                    case "evl_gmap_type":
                    case "evl_nav_links":
                    case "evl_pos_button":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_choices'));
                        break;
                        // select sanitization end
                        // numerical text sanitization start
                    // select sanitization end
                    // numerical text sanitization start
                    case "evl_bootstrap_speed":
                    case "evl_parallax_speed":
                    case "evl_carousel_speed":
                    case "evl_map_zoom_level":
                    case "evl_width_px":
                    case "evl_posts_excerpt_title_length":
                    case "evl_category_page_title":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_numbers'));
                        break;
                        // numerical text sanitization end
                        // pixel sanitization start
                    // numerical text sanitization end
                    // pixel sanitization start
                    case "evl_gmap_width":
                    case "evl_gmap_height":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_pixel'));
                        break;
                        // pixel sanitization end
                        // text url sanitization start
                    // pixel sanitization end
                    // text url sanitization start
                    case "evl_newsletter":
                    case "evl_facebook":
                    case "evl_rss_feed":
                    case "evl_twitter_id":
                    case "evl_instagram":
                    case "evl_skype":
                    case "evl_youtube":
                    case "evl_flickr":
                    case "evl_linkedin":
                    case "evl_googleplus":
                    case "evl_pinterest":
                    case "evl_tumblr":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'esc_url_raw'));
                        break;
                        // text url sanitization end
                        // text field sanitization start
                    // text url sanitization end
                    // text field sanitization start
                    case "evl_content_box1_title":
                    case "evl_bootstrap_slide1_title":
                    case "evl_bootstrap_slide2_title":
                    case "evl_bootstrap_slide3_title":
                    case "evl_bootstrap_slide4_title":
                    case "evl_bootstrap_slide5_title":
                    case "evl_bootstrap_slide1_author":
                    case "evl_bootstrap_slide2_author":
                    case "evl_bootstrap_slide3_author":
                    case "evl_bootstrap_slide4_author":
                    case "evl_bootstrap_slide5_author":
                    case "evl_content_box2_title":
                    case "evl_content_box3_title":
                    case "evl_content_box4_title":
                    case "evl_slide1_title":
                    case "evl_slide2_title":
                    case "evl_slide3_title":
                    case "evl_slide4_title":
                    case "evl_slide5_title":
                    case "evl_posts_slider_id":
                    case "evl_gmap_address":
                    case "evl_sent_email_header":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_text_field'));
                        break;
                        // text field sanitization end
                        // fontawesome fields sanitization start
                    // text field sanitization end
                    // fontawesome fields sanitization start
                    case "evl_content_box1_icon":
                    case "evl_content_box2_icon":
                    case "evl_content_box3_icon":
                    case "evl_content_box4_icon":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_text_field'));
                        break;
                        // fontawesome fields sanitization end
                        // text email field sanitization start
                    // fontawesome fields sanitization end
                    // text email field sanitization start
                    case "evl_email_address":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'sanitize_email'));
                        break;
                        // text email field sanitization end
                        // textarea sanitization start
                    // text email field sanitization end
                    // textarea sanitization start
                    case "evl_footer_content":
                    case "evl_content_box1_desc":
                    case "evl_content_box1_button":
                    case "evl_content_box2_desc":
                    case "evl_content_box2_button":
                    case "evl_content_box3_desc":
                    case "evl_content_box3_button":
                    case "evl_content_box4_desc":
                    case "evl_content_box4_button":
                    case "evl_bootstrap_slide1_desc":
                    case "evl_bootstrap_slide1_button":
                    case "evl_bootstrap_slide2_desc":
                    case "evl_bootstrap_slide2_button":
                    case "evl_bootstrap_slide3_desc":
                    case "evl_bootstrap_slide3_button":
                    case "evl_bootstrap_slide4_desc":
                    case "evl_bootstrap_slide4_button":
                    case "evl_bootstrap_slide5_desc":
                    case "evl_bootstrap_slide5_button":
                    case "evl_slide1_desc":
                    case "evl_slide1_button":
                    case "evl_slide2_desc":
                    case "evl_slide2_button":
                    case "evl_slide3_desc":
                    case "evl_slide3_button":
                    case "evl_slide4_desc":
                    case "evl_slide4_button":
                    case "evl_slide5_desc":
                    case "evl_slide5_button":
                    case "evl_css_content":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_textarea'));
                        break;
                        // textarea sanitization end
                        // checkbox sanitization start
                    // textarea sanitization end
                    // checkbox sanitization start
                    case "evl_blog_title":
                    case "evl_main_menu":
                    case "evl_disable_menu_back":
                    case "evl_scheme_background_100":
                    case "evl_widget_background":
                    case "evl_widget_background_image":
                    case "evl_pagination_type":
                    case "evl_excerpt_thumbnail":
                    case "evl_author_avatar":
                    case "evl_map_pin":
                    case "evl_map_popup":
                    case "evl_map_scrollwheel":
                    case "evl_map_scale":
                    case "evl_map_zoomcontrol":
                        // Following has 1 by default for the checkbox
                    // Following has 1 by default for the checkbox
                    case "evl_sticky_header":
                    case "evl_searchbox":
                    case "evl_featured_images":
                    case "evl_blog_featured_image":
                    case "evl_social_links":
                    case "evl_show_rss":
                    case "evl_content_boxes":
                    case "evl_bootstrap_slide1":
                    case "evl_bootstrap_slide2":
                    case "evl_bootstrap_slide3":
                    case "evl_bootstrap_slide4":
                    case "evl_bootstrap_slide5":
                    case "evl_show_slide1":
                    case "evl_show_slide2":
                    case "evl_show_slide3":
                    case "evl_show_slide4":
                    case "evl_show_slide5":
                    case "evl_breadcrumbs":
                    case "evl_parallax_slider_support":
                    case "evl_carousel_slider":
                    case "evl_status_gmap":
                    case "evl_animatecss":
                    case "evl_bootstrap_100":
                        $wp_customize->add_setting("evolve-theme[{$setting}]", array('default' => $options[$setting]['std'], 'type' => 'option', 'sanitize_callback' => 'evolve_sanitize_checkbox'));
                        break;
                        // checkbox sanitization end
                }
            }
            if ($options[$setting]['type'] == 'radio' || $options[$setting]['type'] == 'select') {
                $wp_customize->add_control("evolve-theme_{$setting}", array('label' => $options[$setting]['name'], 'section' => "evolve-theme_{$name}", 'settings' => "evolve-theme[{$setting}]", 'type' => $options[$setting]['type'], 'choices' => $options[$setting]['options'], 'priority' => $i));
            } elseif ($options[$setting]['type'] == 'text' || $options[$setting]['type'] == 'checkbox') {
                $wp_customize->add_control("evolve-theme_{$setting}", array('label' => $options[$setting]['name'], 'section' => "evolve-theme_{$name}", 'settings' => "evolve-theme[{$setting}]", 'type' => $options[$setting]['type'], 'priority' => $i));
            } elseif ($options[$setting]['type'] == 'color') {
                $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, "evolve-theme_{$setting}", array('label' => $options[$setting]['name'], 'section' => "evolve-theme_{$name}", 'settings' => "evolve-theme[{$setting}]", 'type' => $options[$setting]['type'], 'priority' => $i)));
                /********************************************
                 *
                 * Typography add new by ddo
                 *
                 * code cho class evolve_Customize_Typography_Control dat o :
                 * library/functions/customizer-class.php
                 *
                 *********************************************/
            } elseif ($options[$setting]['type'] == 'typography') {
                $wp_customize->add_control(new evolve_Customize_Typography_Control($wp_customize, "evolve-theme_{$setting}", array('label' => $options[$setting]['name'], 'section' => "evolve-theme_{$name}", 'settings' => "evolve-theme[{$setting}]", 'priority' => $i)));
            } elseif ($options[$setting]['type'] == 'upload') {
                $my_image_controls["evolve-theme_{$setting}"] = evolve_add_image_control($options, $setting, $name, $i);
            } elseif ($options[$setting]['type'] == 'images') {
                $wp_customize->add_control(new evolve_Customize_Image_Control($wp_customize, "evolve-theme_{$setting}", array('label' => $options[$setting]['name'], 'section' => "evolve-theme_{$name}", 'settings' => "evolve-theme[{$setting}]", 'type' => $options[$setting]['type'], 'choices' => $options[$setting]['options'], 'priority' => $i)));
            } elseif ($options[$setting]['type'] == 'textarea') {
                $wp_customize->add_control(new evolve_Customize_Textarea_Control($wp_customize, "evolve-theme_{$setting}", array('label' => $options[$setting]['name'], 'section' => "evolve-theme_{$name}", 'settings' => "evolve-theme[{$setting}]", 'type' => $options[$setting]['type'], 'priority' => $i)));
            }
            $i++;
        }
    }
    foreach ($my_image_controls as $id => $control) {
        $control->add_tab('library', __('Media Library', 'evolve'), 'evolve_library_tab');
    }
}
/**
 * Format Configuration Array.
 *
 * Get an array of all default values as set in
 * options.php. The 'id','std' and 'type' keys need
 * to be defined in the configuration array. In the
 * event that these keys are not present the option
 * will not be included in this function's output.
 *
 * @return    array     Rey-keyed options configuration array.
 *
 * @access    private
 */
function evolve_get_default_values()
{
    $output = array();
    $config = evolve_options();
    foreach ((array) $config as $option) {
        if (!isset($option['id'])) {
            continue;
        }
        if (!isset($option['std'])) {
            continue;
        }
        if (!isset($option['type'])) {
            continue;
        }
        if (has_filter('evolve_sanitize_' . $option['type'])) {
            $output[$option['id']] = apply_filters('evolve_sanitize_' . $option['type'], $option['std'], $option);
        }
    }
    return $output;
}
/**
 * Generates the options fields that are used in the form.
 */
function evolve_fields()
{
    global $allowedtags;
    $evolve_settings = get_option('evolve');
    // Get the theme name so we can display it up top
    $themename = wp_get_theme();
    $themename = $themename['Name'];
    // Gets the unique option id
    if (isset($evolve_settings['id'])) {
        $option_name = $evolve_settings['id'];
    } else {
        $option_name = 'evolve';
    }
    $settings = get_option($option_name);
    $options = evolve_options();
    $counter = 0;
    $menu = '';
    $output = '';
    foreach ($options as $value) {
        $value['type'] = isset($value['type']) ? $value['type'] : '';
        $counter++;
        $val = '';
        $select_value = '';
        $checked = '';
        // Wrap all options
        if ($value['type'] != "heading" && $value['type'] != "info") {
            // Keep all ids lowercase with no spaces
            $value['id'] = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($value['id']));
            $id = 'section-' . $value['id'];
            $class = 'section ';
            if (isset($value['type'])) {
                $class .= ' section-' . $value['type'];
            }
            if (isset($value['class'])) {
                $class .= ' ' . $value['class'];
            }
            $output .= '<div id="' . esc_attr($id) . '" class="' . esc_attr($class) . '">' . "\n";
            if ($value['type'] == "open-tab" || $value['type'] == "close-tab") {
            } else {
                $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n";
            }
            $output .= '<div class="option">' . "\n" . '<div class="controls">' . "\n";
        }
        // Set default value to $val
        if (isset($value['std'])) {
            $val = $value['std'];
        }
        // If the option is already saved, ovveride $val
        if ($value['type'] != 'heading' && $value['type'] != 'info') {
            if (isset($settings[$value['id']])) {
                $val = $settings[$value['id']];
                // Striping slashes of non-array options
                if (!is_array($val)) {
                    $val = stripslashes($val);
                }
            }
        }
        // If there is a description save it for labels
        $explain_value = '';
        if (isset($value['desc'])) {
            $explain_value = $value['desc'];
        }
        switch ($value['type']) {
            // Basic text input
            case 'text':
                $output .= '<input id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" type="text" value="' . esc_attr($val) . '" />';
                break;
                // Textarea
            // Textarea
            case 'textarea':
                $cols = '8';
                $ta_value = '';
                if (isset($value['options'])) {
                    $ta_options = $value['options'];
                    if (isset($ta_options['cols'])) {
                        $cols = $ta_options['cols'];
                    } else {
                        $cols = '8';
                    }
                }
                $val = stripslashes($val);
                $output .= '<textarea id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" cols="' . esc_attr($cols) . '" rows="8">' . esc_textarea($val) . '</textarea>';
                break;
                // Select Box
            // Select Box
            case $value['type'] == 'select':
                $output .= '<select class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '">';
                foreach ($value['options'] as $key => $option) {
                    $selected = '';
                    if ($val != '') {
                        if ($val == $key) {
                            $selected = ' selected="selected"';
                        }
                    }
                    $output .= '<option' . $selected . ' value="' . esc_attr($key) . '">' . esc_html($option) . '</option>';
                }
                $output .= '</select>';
                break;
                // Radio Box
            // Radio Box
            case "radio":
                $name = $option_name . '[' . $value['id'] . ']';
                foreach ($value['options'] as $key => $option) {
                    $id = $option_name . '-' . $value['id'] . '-' . $key;
                    $output .= '<input class="of-input of-radio" type="radio" name="' . esc_attr($name) . '" id="' . esc_attr($id) . '" value="' . esc_attr($key) . '" ' . checked($val, $key, false) . ' /><label for="' . esc_attr($id) . '">' . esc_html($option) . '</label>';
                }
                break;
                // Image Selectors
            // Image Selectors
            case "images":
                $name = $option_name . '[' . $value['id'] . ']';
                foreach ($value['options'] as $key => $option) {
                    $selected = '';
                    $checked = '';
                    if ($val != '') {
                        if ($val == $key) {
                            $selected = ' t4p-radio-img-selected';
                            $checked = ' checked="checked"';
                        }
                    }
                    $output .= '<input type="radio" id="' . esc_attr($value['id'] . '_' . $key) . '" class="t4p-radio-img-radio" value="' . esc_attr($key) . '" name="' . esc_attr($name) . '" ' . $checked . ' />';
                    $output .= '<div class="t4p-radio-img-label">' . esc_html($key) . '</div>';
                    $output .= '<img src="' . esc_url($option) . '" alt="' . $option . '" class="t4p-radio-img-img' . $selected . '" onclick="document.getElementById(\'' . esc_attr($value['id'] . '_' . $key) . '\').checked=true;" />';
                }
                break;
                // Checkbox
            // Checkbox
            case "checkbox":
                $output .= '<input id="' . esc_attr($value['id']) . '" class="checkbox t4p-input" type="checkbox" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" ' . checked($val, 1, false) . ' />';
                $output .= '<div class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</div>';
                break;
                // Multicheck
            // Multicheck
            case "multicheck":
                foreach ($value['options'] as $key => $option) {
                    $checked = '';
                    $label = $option;
                    $option = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($key));
                    $id = $option_name . '-' . $value['id'] . '-' . $option;
                    $name = $option_name . '[' . $value['id'] . '][' . $option . ']';
                    if (isset($val[$option])) {
                        $checked = checked($val[$option], 1, false);
                    }
                    $output .= '<input id="' . esc_attr($id) . '" class="checkbox of-input" type="checkbox" name="' . esc_attr($name) . '" ' . $checked . ' /><label for="' . esc_attr($id) . '">' . esc_html($label) . '</label>';
                }
                break;
                // Color picker
            // Color picker
            case "color":
                $output .= '<div id="' . esc_attr($value['id'] . '_picker') . '" class="colorSelector"><div style="' . esc_attr('background-color:' . $val) . '"></div></div>';
                $output .= '<input class="t4p-color" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '" type="text" value="' . esc_attr($val) . '" />';
                break;
                // Uploader
            // Uploader
            case "upload":
                $output .= evolve_Framework_Media_Uploader::evolve_uploader($value['id'], $val, null);
                break;
                // Typography
            // Typography
            case 'typography':
                $typography_stored = $val;
                // Font Size
                $output .= '<select class="t4p-typography t4p-typography-size" name="' . esc_attr($option_name . '[' . $value['id'] . '][size]') . '" id="' . esc_attr($value['id'] . '_size') . '">';
                for ($i = 9; $i < 71; $i++) {
                    $size = $i . 'px';
                    $output .= '<option value="' . esc_attr($size) . '" ' . selected($typography_stored['size'], $size, false) . '>' . esc_html($size) . '</option>';
                }
                $output .= '</select>';
                // Font Face
                $output .= '<select class="t4p-typography t4p-typography-face" name="' . esc_attr($option_name . '[' . $value['id'] . '][face]') . '" id="' . esc_attr($value['id'] . '_face') . '">';
                $faces = evolve_recognized_font_faces1();
                //	$faces = $typography_mixed_fonts;
                foreach ($faces as $key => $face) {
                    $output .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['face'], $key, false) . '>' . esc_html($face) . '</option>';
                }
                $faces2 = evolve_recognized_font_faces2();
                //	$faces = $typography_mixed_fonts;
                $output .= '<optgroup label="----- Google Font ------">';
                foreach ($faces2 as $key => $face2) {
                    $output .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['face'], $key, false) . '>' . esc_html($face2) . '</option>';
                }
                $output .= '</optgroup>';
                $output .= '</select>';
                // Font Weight
                $output .= '<select class="t4p-typography t4p-typography-style" name="' . $option_name . '[' . $value['id'] . '][style]" id="' . $value['id'] . '_style">';
                /* Font Style */
                $styles = evolve_recognized_font_styles();
                foreach ($styles as $key => $style) {
                    $output .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['style'], $key, false) . '>' . $style . '</option>';
                }
                $output .= '</select>';
                // Font Color
                $output .= '<div id="' . esc_attr($value['id']) . '_color_picker" class="colorSelector"><div style="' . esc_attr('background-color:' . $typography_stored['color']) . '"></div></div>';
                $output .= '<input class="t4p-color t4p-typography t4p-typography-color" name="' . esc_attr($option_name . '[' . $value['id'] . '][color]') . '" id="' . esc_attr($value['id'] . '_color') . '" type="text" value="' . esc_attr($typography_stored['color']) . '" />';
                break;
                // Background
            // Background
            case 'background':
                $background = $val;
                // Background Color
                $output .= '<div id="' . esc_attr($value['id']) . '_color_picker" class="colorSelector"><div style="' . esc_attr('background-color:' . $background['color']) . '"></div></div>';
                $output .= '<input class="of-color of-background of-background-color" name="' . esc_attr($option_name . '[' . $value['id'] . '][color]') . '" id="' . esc_attr($value['id'] . '_color') . '" type="text" value="' . esc_attr($background['color']) . '" />';
                // Background Image - New AJAX Uploader using Media Library
                if (!isset($background['image'])) {
                    $background['image'] = '';
                }
                $output .= evolve_Framework_Media_Uploader::evolve_uploader($value['id'], $background['image'], null, esc_attr($option_name . '[' . $value['id'] . '][image]'));
                $class = 'of-background-properties';
                if ('' == $background['image']) {
                    $class .= ' hide';
                }
                $output .= '<div class="' . esc_attr($class) . '">';
                // Background Repeat
                $output .= '<select class="of-background of-background-repeat" name="' . esc_attr($option_name . '[' . $value['id'] . '][repeat]') . '" id="' . esc_attr($value['id'] . '_repeat') . '">';
                $repeats = evolve_recognized_background_repeat();
                foreach ($repeats as $key => $repeat) {
                    $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['repeat'], $key, false) . '>' . esc_html($repeat) . '</option>';
                }
                $output .= '</select>';
                // Background Position
                $output .= '<select class="of-background of-background-position" name="' . esc_attr($option_name . '[' . $value['id'] . '][position]') . '" id="' . esc_attr($value['id'] . '_position') . '">';
                $positions = evolve_recognized_background_position();
                foreach ($positions as $key => $position) {
                    $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['position'], $key, false) . '>' . esc_html($position) . '</option>';
                }
                $output .= '</select>';
                // Background Attachment
                $output .= '<select class="of-background of-background-attachment" name="' . esc_attr($option_name . '[' . $value['id'] . '][attachment]') . '" id="' . esc_attr($value['id'] . '_attachment') . '">';
                $attachments = evolve_recognized_background_attachment();
                foreach ($attachments as $key => $attachment) {
                    $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['attachment'], $key, false) . '>' . esc_html($attachment) . '</option>';
                }
                $output .= '</select>';
                $output .= '</div>';
                break;
                // Info
            // Info
            case "info":
                $class = 'section';
                if (isset($value['type'])) {
                    $class .= ' section-' . $value['type'];
                }
                if (isset($value['class'])) {
                    $class .= ' ' . $value['class'];
                }
                $output .= '<div class="' . esc_attr($class) . '">' . "\n";
                if (isset($value['name'])) {
                    $output .= '<h3 class="heading">' . esc_html($value['name']) . '</h3>' . "\n";
                }
                if ($value['desc']) {
                    $output .= apply_filters('evolve_sanitize_info', $value['desc']) . "\n";
                }
                $output .= '<div class="clear"></div></div>' . "\n";
                break;
                // Heading
            // Heading
            case "heading":
                if ($counter >= 2) {
                    $output .= '</div>' . "\n";
                }
                $jquery_click_hook = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($value['name']));
                $jquery_click_hook = "section-" . $jquery_click_hook;
                $menu .= '<a id="' . esc_attr($jquery_click_hook) . '-tab" class="nav-tab" title="' . esc_attr($value['name']) . '" href="' . esc_attr('#' . $jquery_click_hook) . '">' . esc_html($value['name']) . '</a>';
                $output .= '<div class="group" id="' . esc_attr($jquery_click_hook) . '">';
                break;
                // Backup
            // Backup
            case "backup":
                $output .= 'Please visit <a href="' . admin_url() . 'themes.php?page=evolve-options-backup">this page</a> to import / export your theme options';
                break;
            case "open-tab":
                $output .= '<div id="' . $value['id'] . '">';
                break;
            case "close-tab":
                $output .= '<br /></div>';
                break;
        }
        if ($value['type'] != "heading" && $value['type'] != "info") {
            if ($value['type'] != "checkbox") {
                $output .= '<br/>';
            }
            $output .= '</div>';
            if ($value['type'] != "checkbox") {
                $output .= '<div class="explain">' . wp_kses($explain_value, $allowedtags) . '</div>' . "\n";
            }
            $output .= '<div class="clear"></div></div></div>' . "\n";
        }
    }
    $output .= '</div>';
    return array($output, $menu);
}
    public function render_content()
    {
        $output = '';
        $options = evolve_options();
        $optionname = mb_substr($this->id, 13);
        $typography_stored = $options[$optionname];
        $value['id'] = $optionname;
        $name = "evolve-theme[{$optionname}]";
        $value = $this->value();
        ?>
			
			<!--This hidden input is important, do not remove-->
			<input style='display:none' class='typography-font' name='<?php 
        echo $name;
        ?>
' <?php 
        $this->link();
        ?>
 value='' />

			<!-- Font Size -->
			<label>
			<span class="customize-control-title"><?php 
        echo esc_html($this->label);
        ?>
</span>
			<select class="t4p-typography t4p-typography-size">
			<?php 
        for ($i = 9; $i < 71; $i++) {
            $size = $i . 'px';
            printf('<option value="%s" %s>%s</option>', esc_attr($size), selected($value['size'], $size, false), esc_attr($size));
        }
        ?>
			</select>
			</label >

			<!-- Font Face -->			
			<label >
			<?php 
        $faces = evolve_recognized_font_faces();
        ?>
			
			<select class="t4p-typography t4p-typography-face">
			<?php 
        foreach ($faces as $key => $face) {
            printf('<option value="%s" %s>%s</option>', esc_attr($key), selected($value['face'], $key, false), esc_attr($face));
        }
        ?>
			</select>
			</label >

			<!-- Font Weight -->
			<label >
			<?php 
        $styles = evolve_recognized_font_styles();
        ?>
			<select class="t4p-typography t4p-typography-style">
			<?php 
        foreach ($styles as $key => $style) {
            printf('<option value="%s" %s>%s</option>', strtolower(esc_attr($style)), selected(strtolower($value['style']), strtolower($key), false), esc_attr($style));
        }
        ?>
			</select>
			</label>
			
			<!--wpColorPicker input-->
			<div style='margin-top:10px'></div>
			<label>
				<input class="t4p-typography-color" id="" type="text" value="<?php 
        echo $value['color'];
        ?>
">			
			</label>
			
			<script type="text/javascript">
				jQuery(document).ready(function($) {
					//mod by Denzel, wpColorPicker option
					var myOptions = {
					    	//a callback to fire whenever the color changes to a valid color
						    change: function(event, ui){
						    //find the very grandparent of this set of options.
						    var p = $(this).parent().parent().parent().parent();
						    //run the set_json run to grab all values.
							set_json(p);
						    }
						};
					//run wpColorPicker	
				    $('.t4p-typography-color').wpColorPicker(myOptions);	
					
					//typography code by ddo
					$('.t4p-typography').change(function(){
						var p = $(this).parent().parent();
						set_json (p) ;
					});	
					
					//create a set_json function by ddo, 
					//this function grabs all the values of typography size, fontface, style, and color 
					//and insert back the data to input class='typography-font' as it's value, which I think will be pick up by WordPress customizer
					var set_json = function(p){
						var size = p.find('.t4p-typography-size').val();
						var face = p.find('.t4p-typography-face').val();
						var style = p.find('.t4p-typography-style').val();
						var colorpicker = p.find('.t4p-typography-color');
						//this is the colorpicker selected color.
						var color = colorpicker.wpColorPicker('color');
						//construct json variable
						var json = '{"size":"'+size+'","face":"'+face+'","style":"'+style+'","color":"'+color+'"}';
						//inset back json data as value to hidden input at line 67 above.
						p.find('input.typography-font').val(json);
						//manually trigger a keyup event on the hidden input, I think this will tigger WordPress customizer to pick up value.
						p.find('input.typography-font').keyup();
					};
					
				});

			</script>
			<style>
			.t4p-typography{width:100%;}
			</style>
<?php 
    }
    public function render_content()
    {
        $output = '';
        $options = evolve_options();
        $optionname = mb_substr($this->id, 13);
        $typography_stored = $options[$optionname];
        $value['id'] = $optionname;
        $name = "evolve-theme[{$optionname}]";
        $value = $this->value();
        ?>
			<input style = 'display:none' class = 'typography-font' name =<?php 
        echo $name;
        ?>
 <?php 
        $this->link();
        ?>
 value = '' />
			<!-- Font Size -->
			<label>
			<span class="customize-control-title"><?php 
        echo esc_html($this->label);
        ?>
</span>
			<select class="t4p-typography t4p-typography-size">
			
			<?php 
        for ($i = 9; $i < 71; $i++) {
            $size = $i . 'px';
            printf('<option value="%s" %s>%s</option>', esc_attr($size), selected($value['size'], $size, false), esc_attr($size));
            ?>
	

			<?php 
        }
        ?>
			</select>
			</label >
			<label >

			<!-- Font Face -->
			<?php 
        $faces = evolve_recognized_font_faces();
        //print_r ($faces) ;
        ?>
			
			
			<select  class="t4p-typography t4p-typography-face">
			<?php 
        foreach ($faces as $key => $face) {
            printf('<option value="%s" %s>%s</option>', esc_attr($key), selected($value['face'], $key, false), esc_attr($face));
            ?>

			<?php 
        }
        ?>
			</select>
			</label >
			<label >

			<!-- Font Weight -->
			<?php 
        $styles = evolve_recognized_font_styles();
        ?>
			
			
			<select  class="t4p-typography t4p-typography-style">
			<?php 
        foreach ($styles as $key => $style) {
            printf('<option value="%s" %s>%s</option>', strtolower(esc_attr($style)), selected(strtolower($value['style']), strtolower($key), false), esc_attr($style));
            ?>
		
			<?php 
        }
        ?>
			</select>


			<!-- Color -->
			<!--

			$output .= '<div id="' . esc_attr( $value['id'] ) . '_color_picker" class="colorSelector"><div style="' . esc_attr( 'background-color:' . $typography_stored['color'] ) . '"></div></div>';
			$output .= '<input class="t4p-color t4p-typography t4p-typography-color" name="' . esc_attr( $option_name . '[' . $value['id'] . '][color]' ) . '" id="' . esc_attr( $value['id'] . '_color' ) . '" type="text" value="' . esc_attr( $typography_stored['color'] ) . '" />';
			-->
			</label >
			<label >
			<div id="" class="colorSelector"><div style="background:<?php 
        echo $value['color'];
        ?>
"></div></div>
			<input style = 'width:80%;float:left;margin-left:10px;' class="t4p-typography-color"  id="" type="text" value="<?php 
        echo $value['color'];
        ?>
">			
			</label>
			<script type="text/javascript">
				jQuery(document).ready(function($) {
					$('.t4p-typography').change(function(){
						var p = $(this).parent().parent();
						set_json (p) ;
					});	
					var set_json = function(p){
						var size = p.find('.t4p-typography-size').val();
						var face = p.find('.t4p-typography-face').val();
						var style = p.find('.t4p-typography-style').val();
						var color = p.find('.t4p-typography-color').val();
						var json = '{"size":"'+size+'","face":"'+face+'","style":"'+style+'","color":"'+color+'"}';
						p.find('input.typography-font').val(json);
						p.find('input.typography-font').keyup();
					};
					$('.colorSelector').each(function(){
						var Othis = this; //cache a copy of the this variable for use inside nested function
						var initialColor = $(Othis).next('input').attr('value');
						$(this).ColorPicker({
							color: initialColor,
							onShow: function (colpkr) {
							$(colpkr).fadeIn(500);
							return false;
							},
							onHide: function (colpkr) {
							$(colpkr).fadeOut(500);
								var p = $(Othis).parent ().parent () ;
								set_json (p) ;
							return false;
							},
							onChange: function (hsb, hex, rgb) {
								$(Othis).children('div').css('backgroundColor', '#' + hex);
								$(Othis).next('input').attr('value','#' + hex);
							}
						});
					});
					
				});

			</script>
			<style>
			.colorpicker{z-index: 1111111111111111111;}
			.t4p-typography{width:100%;}
			</style>
<?php 
    }