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 }