function ot_type_typography($args = array()) { /* turns arguments array into variables */ extract($args); /* verify a description */ $has_desc = $field_desc ? true : false; /* format setting outer wrapper */ echo '<div class="format-setting type-typography ' . ($has_desc ? 'has-desc' : 'no-desc') . '">'; /* description */ echo $has_desc ? '<div class="description">' . htmlspecialchars_decode($field_desc) . '</div>' : ''; /* format setting inner wrapper */ echo '<div class="format-setting-inner">'; /* allow fields to be filtered */ $ot_recognized_typography_fields = apply_filters('ot_recognized_typography_fields', array('font-color', 'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'letter-spacing', 'line-height', 'text-decoration', 'text-transform'), $field_id); /* build font color */ if (in_array('font-color', $ot_recognized_typography_fields)) { /* build colorpicker */ echo '<div class="option-tree-ui-colorpicker-input-wrap">'; /* colorpicker JS */ echo '<script>jQuery(document).ready(function($) { OT_UI.bind_colorpicker("' . esc_attr($field_id) . '-picker"); });</script>'; /* set background color */ $background_color = isset($field_value['font-color']) ? esc_attr($field_value['font-color']) : ''; /* input */ echo '<input type="text" name="' . esc_attr($field_name) . '[font-color]" id="' . esc_attr($field_id) . '-picker" value="' . esc_attr($background_color) . '" class="hide-color-picker ' . esc_attr($field_class) . '" />'; echo '</div>'; } /* build font family */ if (in_array('font-family', $ot_recognized_typography_fields)) { $font_family = isset($field_value['font-family']) ? $field_value['font-family'] : ''; echo '<select name="' . esc_attr($field_name) . '[font-family]" id="' . esc_attr($field_id) . '-font-family" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-family</option>'; foreach (ot_recognized_font_families($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_family, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build font size */ if (in_array('font-size', $ot_recognized_typography_fields)) { $font_size = isset($field_value['font-size']) ? esc_attr($field_value['font-size']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-size]" id="' . esc_attr($field_id) . '-font-size" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-size</option>'; foreach (ot_recognized_font_sizes($field_id) as $option) { echo '<option value="' . esc_attr($option) . '" ' . selected($font_size, $option, false) . '>' . esc_attr($option) . '</option>'; } echo '</select>'; } /* build font style */ if (in_array('font-style', $ot_recognized_typography_fields)) { $font_style = isset($field_value['font-style']) ? esc_attr($field_value['font-style']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-style]" id="' . esc_attr($field_id) . '-font-style" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-style</option>'; foreach (ot_recognized_font_styles($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_style, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build font variant */ if (in_array('font-variant', $ot_recognized_typography_fields)) { $font_variant = isset($field_value['font-variant']) ? esc_attr($field_value['font-variant']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-variant]" id="' . esc_attr($field_id) . '-font-variant" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-variant</option>'; foreach (ot_recognized_font_variants($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_variant, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build font weight */ if (in_array('font-weight', $ot_recognized_typography_fields)) { $font_weight = isset($field_value['font-weight']) ? esc_attr($field_value['font-weight']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-weight]" id="' . esc_attr($field_id) . '-font-weight" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-weight</option>'; foreach (ot_recognized_font_weights($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_weight, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build letter spacing */ if (in_array('letter-spacing', $ot_recognized_typography_fields)) { $letter_spacing = isset($field_value['letter-spacing']) ? esc_attr($field_value['letter-spacing']) : ''; echo '<select name="' . esc_attr($field_name) . '[letter-spacing]" id="' . esc_attr($field_id) . '-letter-spacing" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">letter-spacing</option>'; foreach (ot_recognized_letter_spacing($field_id) as $option) { echo '<option value="' . esc_attr($option) . '" ' . selected($letter_spacing, $option, false) . '>' . esc_attr($option) . '</option>'; } echo '</select>'; } /* build line height */ if (in_array('line-height', $ot_recognized_typography_fields)) { $line_height = isset($field_value['line-height']) ? esc_attr($field_value['line-height']) : ''; echo '<select name="' . esc_attr($field_name) . '[line-height]" id="' . esc_attr($field_id) . '-line-height" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">line-height</option>'; foreach (ot_recognized_line_heights($field_id) as $option) { echo '<option value="' . esc_attr($option) . '" ' . selected($line_height, $option, false) . '>' . esc_attr($option) . '</option>'; } echo '</select>'; } /* build text decoration */ if (in_array('text-decoration', $ot_recognized_typography_fields)) { $text_decoration = isset($field_value['text-decoration']) ? esc_attr($field_value['text-decoration']) : ''; echo '<select name="' . esc_attr($field_name) . '[text-decoration]" id="' . esc_attr($field_id) . '-text-decoration" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">text-decoration</option>'; foreach (ot_recognized_text_decorations($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($text_decoration, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build text transform */ if (in_array('text-transform', $ot_recognized_typography_fields)) { $text_transform = isset($field_value['text-transform']) ? esc_attr($field_value['text-transform']) : ''; echo '<select name="' . esc_attr($field_name) . '[text-transform]" id="' . esc_attr($field_id) . '-text-transform" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">text-transform</option>'; foreach (ot_recognized_text_transformations($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($text_transform, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } echo '</div>'; echo '</div>'; }
function ot_insert_css_with_markers($field_id = '', $insertion = '', $meta = false) { /* missing $field_id or $insertion exit early */ if ('' == $field_id || '' == $insertion) { return; } /* path to the dynamic.css file */ $filepath = get_stylesheet_directory() . '/dynamic.css'; if (is_multisite()) { $multisite_filepath = get_stylesheet_directory() . '/dynamic-' . get_current_blog_id() . '.css'; if (file_exists($multisite_filepath)) { $filepath = $multisite_filepath; } } /* allow filter on path */ $filepath = apply_filters('css_option_file_path', $filepath, $field_id); /* grab a copy of the paths array */ $ot_css_file_paths = get_option('ot_css_file_paths', array()); if (is_multisite()) { $ot_css_file_paths = get_blog_option(get_current_blog_id(), 'ot_css_file_paths', $ot_css_file_paths); } /* set the path for this field */ $ot_css_file_paths[$field_id] = $filepath; /* update the paths */ if (is_multisite()) { update_blog_option(get_current_blog_id(), 'ot_css_file_paths', $ot_css_file_paths); } else { update_option('ot_css_file_paths', $ot_css_file_paths); } /* insert CSS into file */ if (file_exists($filepath)) { $insertion = ot_normalize_css($insertion); $regex = "/{{([a-zA-Z0-9\\_\\-\\#\\|\\=]+)}}/"; $marker = $field_id; /* Match custom CSS */ preg_match_all($regex, $insertion, $matches); /* Loop through CSS */ foreach ($matches[0] as $option) { $value = ''; $option_id = str_replace(array('{{', '}}'), '', $option); $option_array = explode('|', $option_id); $option_type = ot_get_option_type_by_id($option_id); /* get the array value */ if ($meta) { global $post; $value = get_post_meta($post->ID, $option_array[0], true); } else { $options = get_option(ot_options_id()); if (isset($options[$option_array[0]])) { $value = $options[$option_array[0]]; } } if (is_array($value)) { if (!isset($option_array[1])) { /* Measurement */ if (isset($value[0]) && isset($value[1])) { /* set $value with measurement properties */ $value = $value[0] . $value[1]; /* Colorpicker Opacity */ } else { if (isset($value['color']) && isset($value['opacity'])) { /* get the RGB color value */ $color = ot_hex2RGB($value['color']); if (is_array($color)) { $value = 'rgba(' . $color['r'] . ', ' . $color['g'] . ', ' . $color['b'] . ', ' . $value['opacity'] . ')'; } else { if ($color == $value['color']) { $value = $value['color']; } } /* Border */ } else { if (ot_array_keys_exists($value, array('width', 'unit', 'style', 'color')) && !ot_array_keys_exists($value, array('top', 'right', 'bottom', 'left', 'height', 'inset', 'offset-x', 'offset-y', 'blur-radius', 'spread-radius'))) { $border = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['width'])) { $border[] = $value['width'] . $unit; } if (!empty($value['style'])) { $border[] = $value['style']; } if (!empty($value['color'])) { $border[] = $value['color']; } /* set $value with border properties or empty string */ $value = !empty($border) ? implode(' ', $border) : ''; /* Box Shadow */ } else { if (ot_array_keys_exists($value, array('inset', 'offset-x', 'offset-y', 'blur-radius', 'spread-radius', 'color')) && !ot_array_keys_exists($value, array('width', 'height', 'unit', 'style', 'top', 'right', 'bottom', 'left'))) { /* set $value with box-shadow properties or empty string */ $value = !empty($value) ? implode(' ', $value) : ''; /* Dimension */ } else { if (ot_array_keys_exists($value, array('width', 'height', 'unit')) && !ot_array_keys_exists($value, array('style', 'color', 'top', 'right', 'bottom', 'left'))) { $dimension = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['width'])) { $dimension[] = $value['width'] . $unit; } if (!empty($value['height'])) { $dimension[] = $value['height'] . $unit; } /* set $value with dimension properties or empty string */ $value = !empty($dimension) ? implode(' ', $dimension) : ''; /* Spacing */ } else { if (ot_array_keys_exists($value, array('top', 'right', 'bottom', 'left', 'unit')) && !ot_array_keys_exists($value, array('width', 'height', 'style', 'color'))) { $spacing = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['top'])) { $spacing[] = $value['top'] . $unit; } if (!empty($value['right'])) { $spacing[] = $value['right'] . $unit; } if (!empty($value['bottom'])) { $spacing[] = $value['bottom'] . $unit; } if (!empty($value['left'])) { $spacing[] = $value['left'] . $unit; } /* set $value with spacing properties or empty string */ $value = !empty($spacing) ? implode(' ', $spacing) : ''; /* typography */ } else { if (ot_array_keys_exists($value, array('font-color', 'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'letter-spacing', 'line-height', 'text-decoration', 'text-transform'))) { $font = array(); if (!empty($value['font-color'])) { $font[] = "color: " . $value['font-color'] . ";"; } if (!empty($value['font-family'])) { foreach (ot_recognized_font_families($marker) as $key => $v) { if ($key == $value['font-family']) { $font[] = "font-family: " . $v . ";"; } } } if (!empty($value['font-size'])) { $font[] = "font-size: " . $value['font-size'] . ";"; } if (!empty($value['font-style'])) { $font[] = "font-style: " . $value['font-style'] . ";"; } if (!empty($value['font-variant'])) { $font[] = "font-variant: " . $value['font-variant'] . ";"; } if (!empty($value['font-weight'])) { $font[] = "font-weight: " . $value['font-weight'] . ";"; } if (!empty($value['letter-spacing'])) { $font[] = "letter-spacing: " . $value['letter-spacing'] . ";"; } if (!empty($value['line-height'])) { $font[] = "line-height: " . $value['line-height'] . ";"; } if (!empty($value['text-decoration'])) { $font[] = "text-decoration: " . $value['text-decoration'] . ";"; } if (!empty($value['text-transform'])) { $font[] = "text-transform: " . $value['text-transform'] . ";"; } /* set $value with font properties or empty string */ $value = !empty($font) ? implode("\n", $font) : ''; /* background */ } else { if (ot_array_keys_exists($value, array('background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 'background-size'))) { $bg = array(); if (!empty($value['background-color'])) { $bg[] = $value['background-color']; } if (!empty($value['background-image'])) { /* If an attachment ID is stored here fetch its URL and replace the value */ if (wp_attachment_is_image($value['background-image'])) { $attachment_data = wp_get_attachment_image_src($value['background-image'], 'original'); /* check for attachment data */ if ($attachment_data) { $value['background-image'] = $attachment_data[0]; } } $bg[] = 'url("' . $value['background-image'] . '")'; } if (!empty($value['background-repeat'])) { $bg[] = $value['background-repeat']; } if (!empty($value['background-attachment'])) { $bg[] = $value['background-attachment']; } if (!empty($value['background-position'])) { $bg[] = $value['background-position']; } if (!empty($value['background-size'])) { $size = $value['background-size']; } /* set $value with background properties or empty string */ $value = !empty($bg) ? 'background: ' . implode(" ", $bg) . ';' : ''; if (isset($size)) { if (!empty($bg)) { $value .= apply_filters('ot_insert_css_with_markers_bg_size_white_space', "\n ", $option_id); } $value .= "background-size: {$size};"; } } } } } } } } } } else { $value = $value[$option_array[1]]; } } /* If an attachment ID is stored here fetch its URL and replace the value */ if ($option_type == 'upload' && wp_attachment_is_image($value)) { $attachment_data = wp_get_attachment_image_src($value, 'original'); /* check for attachment data */ if ($attachment_data) { $value = $attachment_data[0]; } } // Filter the CSS $value = apply_filters('ot_insert_css_with_markers_value', $value, $option_id); /* insert CSS, even if the value is empty */ $insertion = stripslashes(str_replace($option, $value, $insertion)); } /* create array from the lines of code */ $markerdata = explode("\n", implode('', file($filepath))); /* can't write to the file return false */ if (!($f = ot_file_open($filepath, 'w'))) { return false; } $searching = true; $foundit = false; /* has array of lines */ if (!empty($markerdata)) { /* foreach line of code */ foreach ($markerdata as $n => $markerline) { /* found begining of marker, set $searching to false */ if ($markerline == "/* BEGIN {$marker} */") { $searching = false; } /* keep rewrite each line of CSS */ if ($searching == true) { if ($n + 1 < count($markerdata)) { ot_file_write($f, "{$markerline}\n"); } else { ot_file_write($f, "{$markerline}"); } } /* found end marker write code */ if ($markerline == "/* END {$marker} */") { ot_file_write($f, "/* BEGIN {$marker} */\n"); ot_file_write($f, "{$insertion}\n"); ot_file_write($f, "/* END {$marker} */\n"); $searching = true; $foundit = true; } } } /* nothing inserted, write code. DO IT, DO IT! */ if (!$foundit) { ot_file_write($f, "/* BEGIN {$marker} */\n"); ot_file_write($f, "{$insertion}\n"); ot_file_write($f, "/* END {$marker} */\n"); } /* close file */ ot_file_close($f); return true; } return false; }
function ot_insert_css_with_markers($field_id = '', $insertion = '', $meta = false) { /* missing $field_id or $insertion exit early */ if ('' == $field_id || '' == $insertion) { return; } /* path to the dynamic.css file */ $filepath = get_stylesheet_directory() . '/dynamic.css'; /* allow filter on path */ $filepath = apply_filters('css_option_file_path', $filepath, $field_id); /* grab a copy of the paths array */ $ot_css_file_paths = get_option('ot_css_file_paths', array()); /* set the path for this field */ $ot_css_file_paths[$field_id] = $filepath; /* update the paths */ update_option('ot_css_file_paths', $ot_css_file_paths); /* insert CSS into file */ if (file_exists($filepath)) { $insertion = ot_normalize_css($insertion); $regex = "/{{([a-zA-Z0-9\\_\\-\\#\\|\\=]+)}}/"; $marker = $field_id; /* Match custom CSS */ preg_match_all($regex, $insertion, $matches); /* Loop through CSS */ foreach ($matches[0] as $option) { $value = ''; $option_id = str_replace(array('{{', '}}'), '', $option); $option_array = explode('|', $option_id); /* get the array value */ if ($meta) { global $post; $value = get_post_meta($post->ID, $option_array[0], true); } else { $options = get_option(ot_options_id()); if (isset($options[$option_array[0]])) { $value = $options[$option_array[0]]; } } if (is_array($value)) { if (!isset($option_array[1])) { /* Measurement */ if (isset($value[0]) && isset($value[1])) { /* set $value with measurement properties */ $value = $value[0] . $value[1]; /* typography */ } else { if (ot_array_keys_exists($value, array('font-color', 'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'letter-spacing', 'line-height', 'text-decoration', 'text-transform'))) { $font = array(); if (!empty($value['font-color'])) { $font[] = "color: " . $value['font-color'] . ";"; } if (!empty($value['font-family'])) { foreach (ot_recognized_font_families($marker) as $key => $v) { if ($key == $value['font-family']) { $font[] = "font-family: " . $v . ";"; } } } if (!empty($value['font-size'])) { $font[] = "font-size: " . $value['font-size'] . ";"; } if (!empty($value['font-style'])) { $font[] = "font-style: " . $value['font-style'] . ";"; } if (!empty($value['font-variant'])) { $font[] = "font-variant: " . $value['font-variant'] . ";"; } if (!empty($value['font-weight'])) { $font[] = "font-weight: " . $value['font-weight'] . ";"; } if (!empty($value['letter-spacing'])) { $font[] = "letter-spacing: " . $value['letter-spacing'] . ";"; } if (!empty($value['line-height'])) { $font[] = "line-height: " . $value['line-height'] . ";"; } if (!empty($value['text-decoration'])) { $font[] = "text-decoration: " . $value['text-decoration'] . ";"; } if (!empty($value['text-transform'])) { $font[] = "text-transform: " . $value['text-transform'] . ";"; } /* set $value with font properties or empty string */ $value = !empty($font) ? implode("\n", $font) : ''; /* background */ } else { if (ot_array_keys_exists($value, array('background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 'background-size'))) { $bg = array(); if (!empty($value['background-color'])) { $bg[] = $value['background-color']; } if (!empty($value['background-image'])) { $bg[] = 'url("' . $value['background-image'] . '")'; } if (!empty($value['background-repeat'])) { $bg[] = $value['background-repeat']; } if (!empty($value['background-attachment'])) { $bg[] = $value['background-attachment']; } if (!empty($value['background-position'])) { $bg[] = $value['background-position']; } if (!empty($value['background-size'])) { $size = $value['background-size']; } /* set $value with background properties or empty string */ $value = !empty($bg) ? 'background: ' . implode(" ", $bg) . ';' : ''; if (isset($size)) { if (!empty($bg)) { $value .= apply_filters('ot_insert_css_with_markers_bg_size_white_space', "\n ", $option_id); } $value .= "background-size: {$size};"; } } } } } else { $value = $value[$option_array[1]]; } } // Filter the CSS $value = apply_filters('ot_insert_css_with_markers_value', $value, $option_id); /* insert CSS, even if the value is empty */ $insertion = stripslashes(str_replace($option, $value, $insertion)); } /* create array from the lines of code */ $markerdata = explode("\n", implode('', file($filepath))); /* can't write to the file return false */ if (!($f = ot_file_open($filepath, 'w'))) { return false; } $searching = true; $foundit = false; /* has array of lines */ if (!empty($markerdata)) { /* foreach line of code */ foreach ($markerdata as $n => $markerline) { /* found begining of marker, set $searching to false */ if ($markerline == "/* BEGIN {$marker} */") { $searching = false; } /* keep rewrite each line of CSS */ if ($searching == true) { if ($n + 1 < count($markerdata)) { ot_file_write($f, "{$markerline}\n"); } else { ot_file_write($f, "{$markerline}"); } } /* found end marker write code */ if ($markerline == "/* END {$marker} */") { ot_file_write($f, "/* BEGIN {$marker} */\n"); ot_file_write($f, "{$insertion}\n"); ot_file_write($f, "/* END {$marker} */\n"); $searching = true; $foundit = true; } } } /* nothing inserted, write code. DO IT, DO IT! */ if (!$foundit) { ot_file_write($f, "/* BEGIN {$marker} */\n"); ot_file_write($f, "{$insertion}\n"); ot_file_write($f, "/* END {$marker} */\n"); } /* close file */ ot_file_close($f); return true; } return false; }
function ot_insert_css_with_markers($field_id = '', $insertion = '', $meta = false) { /* missing $field_id or $insertion exit early */ if ('' == $field_id || '' == $insertion) { return; } /* path to the dynamic.css file */ $filepath = get_stylesheet_directory() . '/dynamic.css'; if (is_multisite()) { $multisite_filepath = get_stylesheet_directory() . '/dynamic-' . get_current_blog_id() . '.css'; if (file_exists($multisite_filepath)) { $filepath = $multisite_filepath; } } /* allow filter on path */ $filepath = apply_filters('css_option_file_path', $filepath, $field_id); /* grab a copy of the paths array */ $ot_css_file_paths = get_option('ot_css_file_paths', array()); if (is_multisite()) { $ot_css_file_paths = get_blog_option(get_current_blog_id(), 'ot_css_file_paths', $ot_css_file_paths); } /* set the path for this field */ $ot_css_file_paths[$field_id] = $filepath; /* update the paths */ if (is_multisite()) { update_blog_option(get_current_blog_id(), 'ot_css_file_paths', $ot_css_file_paths); } else { update_option('ot_css_file_paths', $ot_css_file_paths); } /* insert CSS into file */ if (file_exists($filepath)) { $insertion = ot_normalize_css($insertion); $regex = "/{{([a-zA-Z0-9\\_\\-\\#\\|\\=]+)}}/"; $marker = $field_id; /* Match custom CSS */ preg_match_all($regex, $insertion, $matches); /* Loop through CSS */ foreach ($matches[0] as $option) { $value = ''; $option_array = explode('|', str_replace(array('{{', '}}'), '', $option)); $option_id = isset($option_array[0]) ? $option_array[0] : ''; $option_key = isset($option_array[1]) ? $option_array[1] : ''; $option_type = ot_get_option_type_by_id($option_id); $fallback = ''; // Get the meta array value if ($meta) { global $post; $value = get_post_meta($post->ID, $option_id, true); // Get the options array value } else { $options = get_option(ot_options_id()); if (isset($options[$option_id])) { $value = $options[$option_id]; } } // This in an array of values if (is_array($value)) { if (empty($option_key)) { // Measurement if ($option_type == 'measurement') { // Set $value with measurement properties if (isset($value[0]) && isset($value[1])) { $value = $value[0] . $value[1]; } // Border } else { if ($option_type == 'border') { $border = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['width'])) { $border[] = $value['width'] . $unit; } if (!empty($value['style'])) { $border[] = $value['style']; } if (!empty($value['color'])) { $border[] = $value['color']; } /* set $value with border properties or empty string */ $value = !empty($border) ? implode(' ', $border) : ''; // Box Shadow } else { if ($option_type == 'box-shadow') { /* set $value with box-shadow properties or empty string */ $value = !empty($value) ? implode(' ', $value) : ''; // Dimension } else { if ($option_type == 'dimension') { $dimension = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['width'])) { $dimension[] = $value['width'] . $unit; } if (!empty($value['height'])) { $dimension[] = $value['height'] . $unit; } // Set $value with dimension properties or empty string $value = !empty($dimension) ? implode(' ', $dimension) : ''; // Spacing } else { if ($option_type == 'spacing') { $spacing = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['top'])) { $spacing[] = $value['top'] . $unit; } if (!empty($value['right'])) { $spacing[] = $value['right'] . $unit; } if (!empty($value['bottom'])) { $spacing[] = $value['bottom'] . $unit; } if (!empty($value['left'])) { $spacing[] = $value['left'] . $unit; } // Set $value with spacing properties or empty string $value = !empty($spacing) ? implode(' ', $spacing) : ''; // Typography } else { if ($option_type == 'typography') { $font = array(); if (!empty($value['font-color'])) { $font[] = "color: " . $value['font-color'] . ";"; } if (!empty($value['font-family'])) { foreach (ot_recognized_font_families($marker) as $key => $v) { if ($key == $value['font-family']) { $font[] = "font-family: " . $v . ";"; } } } if (!empty($value['font-size'])) { $font[] = "font-size: " . $value['font-size'] . ";"; } if (!empty($value['font-style'])) { $font[] = "font-style: " . $value['font-style'] . ";"; } if (!empty($value['font-variant'])) { $font[] = "font-variant: " . $value['font-variant'] . ";"; } if (!empty($value['font-weight'])) { $font[] = "font-weight: " . $value['font-weight'] . ";"; } if (!empty($value['letter-spacing'])) { $font[] = "letter-spacing: " . $value['letter-spacing'] . ";"; } if (!empty($value['line-height'])) { $font[] = "line-height: " . $value['line-height'] . ";"; } if (!empty($value['text-decoration'])) { $font[] = "text-decoration: " . $value['text-decoration'] . ";"; } if (!empty($value['text-transform'])) { $font[] = "text-transform: " . $value['text-transform'] . ";"; } // Set $value with font properties or empty string $value = !empty($font) ? implode("\n", $font) : ''; // Background } else { if ($option_type == 'background') { $bg = array(); if (!empty($value['background-color'])) { $bg[] = $value['background-color']; } if (!empty($value['background-image'])) { // If an attachment ID is stored here fetch its URL and replace the value if (wp_attachment_is_image($value['background-image'])) { $attachment_data = wp_get_attachment_image_src($value['background-image'], 'original'); // Check for attachment data if ($attachment_data) { $value['background-image'] = $attachment_data[0]; } } $bg[] = 'url("' . $value['background-image'] . '")'; } if (!empty($value['background-repeat'])) { $bg[] = $value['background-repeat']; } if (!empty($value['background-attachment'])) { $bg[] = $value['background-attachment']; } if (!empty($value['background-position'])) { $bg[] = $value['background-position']; } if (!empty($value['background-size'])) { $size = $value['background-size']; } // Set $value with background properties or empty string $value = !empty($bg) ? 'background: ' . implode(" ", $bg) . ';' : ''; if (isset($size)) { if (!empty($bg)) { $value .= apply_filters('ot_insert_css_with_markers_bg_size_white_space', "\n ", $option_id); } $value .= "background-size: {$size};"; } } } } } } } } } else { $value = $value[$option_key]; } } // If an attachment ID is stored here fetch its URL and replace the value if ($option_type == 'upload' && wp_attachment_is_image($value)) { $attachment_data = wp_get_attachment_image_src($value, 'original'); // Check for attachment data if ($attachment_data) { $value = $attachment_data[0]; } } // Attempt to fallback when `$value` is empty if (empty($value)) { // We're trying to access a single array key if (!empty($option_key)) { // Link Color `inherit` if ($option_type == 'link-color') { $fallback = 'inherit'; } } else { // Border if ($option_type == 'border') { $fallback = 'inherit'; } // Box Shadow if ($option_type == 'box-shadow') { $fallback = 'none'; } // Colorpicker if ($option_type == 'colorpicker') { $fallback = 'inherit'; } // Colorpicker Opacity if ($option_type == 'colorpicker-opacity') { $fallback = 'inherit'; } } /** * Filter the `dynamic.css` fallback value. * * @since 2.5.3 * * @param string $fallback The default CSS fallback value. * @param string $option_id The option ID. * @param string $option_type The option type. * @param string $option_key The option array key. */ $fallback = apply_filters('ot_insert_css_with_markers_fallback', $fallback, $option_id, $option_type, $option_key); } // Let's fallback! if (!empty($fallback)) { $value = $fallback; } // Filter the CSS $value = apply_filters('ot_insert_css_with_markers_value', $value, $option_id); // Insert CSS, even if the value is empty $insertion = stripslashes(str_replace($option, $value, $insertion)); } // Can't write to the file so we error out if (!is_writable($filepath)) { add_settings_error('option-tree', 'dynamic_css', sprintf(__('Unable to write to file %s.', 'option-tree'), '<code>' . $filepath . '</code>'), 'error'); return false; } // Create array from the lines of code $markerdata = explode("\n", implode('', file($filepath))); // Can't write to the file return false if (!($f = ot_file_open($filepath, 'w'))) { return false; } $searching = true; $foundit = false; // Has array of lines if (!empty($markerdata)) { // Foreach line of code foreach ($markerdata as $n => $markerline) { // Found begining of marker, set $searching to false if ($markerline == "/* BEGIN {$marker} */") { $searching = false; } // Keep searching each line of CSS if ($searching == true) { if ($n + 1 < count($markerdata)) { ot_file_write($f, "{$markerline}\n"); } else { ot_file_write($f, "{$markerline}"); } } // Found end marker write code if ($markerline == "/* END {$marker} */") { ot_file_write($f, "/* BEGIN {$marker} */\n"); ot_file_write($f, "{$insertion}\n"); ot_file_write($f, "/* END {$marker} */\n"); $searching = true; $foundit = true; } } } // Nothing inserted, write code. DO IT, DO IT! if (!$foundit) { ot_file_write($f, "/* BEGIN {$marker} */\n"); ot_file_write($f, "{$insertion}\n"); ot_file_write($f, "/* END {$marker} */\n"); } // Close file ot_file_close($f); return true; } return false; }
function ot_type_typography($args = array()) { /* turns arguments array into variables */ extract($args); /* format setting outer wrapper */ echo '<div class="format-setting type-typography">'; /* format setting inner wrapper */ echo '<div class="format-setting-inner">'; /* allow fields to be filtered */ $ot_recognized_typography_fields = apply_filters('ot_recognized_typography_fields', array('font-color', 'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'letter-spacing', 'line-height', 'text-decoration', 'text-transform'), $field_id); /* build background colorpicker */ if (in_array('font-color', $ot_recognized_typography_fields)) { echo '<div class="option-tree-ui-colorpicker-input-wrap">'; /* colorpicker JS */ echo '<script>jQuery(document).ready(function($) { OT_UI.bind_colorpicker("' . esc_attr($field_id) . '-picker"); });</script>'; /* set background color */ $background_color = isset($field_value['font-color']) ? esc_attr($field_value['font-color']) : ''; /* set border color */ $border_color = in_array($background_color, array('#FFFFFF', '#FFF', '#ffffff', '#fff')) ? '#ccc' : $background_color; /* input */ echo '<input maxlength="7" type="text" name="' . esc_attr($field_name) . '[font-color]" id="' . esc_attr($field_id) . '-picker" value="' . esc_attr($background_color) . '" class="widefat option-tree-ui-input cp_input ' . esc_attr($field_class) . '" autocomplete="off" placeholder="font-color" />'; echo '<div id="cp_' . esc_attr($field_id) . '-picker" class="cp_box"' . ($background_color ? " style='background-color:{$background_color}; border-color:{$border_color};'" : '') . '></div>'; echo '</div>'; } /* build font family */ if (in_array('font-family', $ot_recognized_typography_fields)) { $font_family = isset($field_value['font-family']) ? $field_value['font-family'] : ''; echo '<select name="' . esc_attr($field_name) . '[font-family]" id="' . esc_attr($field_id) . '-font-family" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-family</option>'; foreach (ot_recognized_font_families($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_family, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build font size */ if (in_array('font-size', $ot_recognized_typography_fields)) { $font_size = isset($field_value['font-size']) ? esc_attr($field_value['font-size']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-size]" id="' . esc_attr($field_id) . '-font-size" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-size</option>'; foreach (ot_recognized_font_sizes($field_id) as $option) { echo '<option value="' . esc_attr($option) . '" ' . selected($font_size, $option, false) . '>' . esc_attr($option) . '</option>'; } echo '</select>'; } /* build font style */ if (in_array('font-style', $ot_recognized_typography_fields)) { $font_style = isset($field_value['font-style']) ? esc_attr($field_value['font-style']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-style]" id="' . esc_attr($field_id) . '-font-style" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-style</option>'; foreach (ot_recognized_font_styles($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_style, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build font variant */ if (in_array('font-variant', $ot_recognized_typography_fields)) { $font_variant = isset($field_value['font-variant']) ? esc_attr($field_value['font-variant']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-variant]" id="' . esc_attr($field_id) . '-font-variant" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-variant</option>'; foreach (ot_recognized_font_variants($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_variant, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build font weight */ if (in_array('font-weight', $ot_recognized_typography_fields)) { $font_weight = isset($field_value['font-weight']) ? esc_attr($field_value['font-weight']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-weight]" id="' . esc_attr($field_id) . '-font-weight" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-weight</option>'; foreach (ot_recognized_font_weights($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_weight, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build letter spacing */ if (in_array('letter-spacing', $ot_recognized_typography_fields)) { $letter_spacing = isset($field_value['letter-spacing']) ? esc_attr($field_value['letter-spacing']) : ''; echo '<select name="' . esc_attr($field_name) . '[letter-spacing]" id="' . esc_attr($field_id) . '-letter-spacing" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">letter-spacing</option>'; foreach (ot_recognized_letter_spacing($field_id) as $option) { echo '<option value="' . esc_attr($option) . '" ' . selected($letter_spacing, $option, false) . '>' . esc_attr($option) . '</option>'; } echo '</select>'; } /* build line height */ if (in_array('line-height', $ot_recognized_typography_fields)) { $line_height = isset($field_value['line-height']) ? esc_attr($field_value['line-height']) : ''; echo '<select name="' . esc_attr($field_name) . '[line-height]" id="' . esc_attr($field_id) . '-line-height" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">line-height</option>'; foreach (ot_recognized_line_heights($field_id) as $option) { echo '<option value="' . esc_attr($option) . '" ' . selected($line_height, $option, false) . '>' . esc_attr($option) . '</option>'; } echo '</select>'; } /* build text decoration */ if (in_array('text-decoration', $ot_recognized_typography_fields)) { $text_decoration = isset($field_value['text-decoration']) ? esc_attr($field_value['text-decoration']) : ''; echo '<select name="' . esc_attr($field_name) . '[text-decoration]" id="' . esc_attr($field_id) . '-text-decoration" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">text-decoration</option>'; foreach (ot_recognized_text_decorations($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($text_decoration, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build text transform */ if (in_array('text-transform', $ot_recognized_typography_fields)) { $text_transform = isset($field_value['text-transform']) ? esc_attr($field_value['text-transform']) : ''; echo '<select name="' . esc_attr($field_name) . '[text-transform]" id="' . esc_attr($field_id) . '-text-transform" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">text-transform</option>'; foreach (ot_recognized_text_transformations($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($text_transform, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } echo '</div>'; echo '</div>'; }
function ot_type_typography($args = array()) { /* turns arguments array into variables */ extract($args); /* verify a description */ $has_desc = $field_desc ? true : false; /* format setting outer wrapper */ echo '<div class="format-setting type-typography ' . ($has_desc ? 'has-desc' : 'no-desc') . '">'; /* description */ echo $has_desc ? '<div class="description">' . htmlspecialchars_decode($field_desc) . '</div>' : ''; /* format setting inner wrapper */ echo '<div class="format-setting-inner">'; /* build background colorpicker */ echo '<div class="option-tree-ui-colorpicker-input-wrap">'; /* colorpicker JS */ echo '<script>jQuery(document).ready(function($) { OT_UI.bind_colorpicker("' . esc_attr($field_id) . '-picker"); });</script>'; /* set background color */ $background_color = isset($field_value['font-color']) ? esc_attr($field_value['font-color']) : ''; /* set border color */ $border_color = in_array($background_color, array('#FFFFFF', '#FFF', '#ffffff', '#fff')) ? '#ccc' : $background_color; /* input */ echo '<input type="text" name="' . esc_attr($field_name) . '[font-color]" id="' . esc_attr($field_id) . '-picker" value="' . esc_attr($background_color) . '" class="widefat option-tree-ui-input cp_input ' . esc_attr($field_class) . '" autocomplete="off" />'; echo '<div id="cp_' . esc_attr($field_id) . '-picker" class="cp_box"' . ($background_color ? " style='background-color:{$background_color}; border-color:{$border_color};'" : '') . '></div>'; echo '</div>'; /* build font family */ $font_family = isset($field_value['font-family']) ? esc_attr($field_value['font-family']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-family]" id="' . esc_attr($field_id) . '-family" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-family</option>'; foreach (ot_recognized_font_families($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_family, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; /* build font style */ $font_style = isset($field_value['font-style']) ? esc_attr($field_value['font-style']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-style]" id="' . esc_attr($field_id) . '-style" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-style</option>'; foreach (ot_recognized_font_styles($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_style, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; /* build font variant */ $font_variant = isset($field_value['font-variant']) ? esc_attr($field_value['font-variant']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-variant]" id="' . esc_attr($field_id) . '-variant" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-variant</option>'; foreach (ot_recognized_font_variants($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_variant, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; /* build font weight */ $font_weight = isset($field_value['font-weight']) ? esc_attr($field_value['font-weight']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-weight]" id="' . esc_attr($field_id) . '-weight" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-weight</option>'; foreach (ot_recognized_font_weights($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_weight, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; /* build font size */ $font_size = isset($field_value['font-size']) ? esc_attr($field_value['font-size']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-size]" id="' . esc_attr($field_id) . '-size" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-size</option>'; for ($i = 8; $i <= 72; $i++) { $size = $i . 'px'; echo '<option value="' . esc_attr($size) . '" ' . selected($font_size, $size, false) . '>' . esc_attr($size) . '</option>'; } echo '</select>'; echo '</div>'; echo '</div>'; }
static function _get_output_item_css($fields, $settings) { $option_id = $fields['id']; $output = $fields['output']; $marker = $fields['id']; $value = $settings; if (is_array($value)) { /* Measurement */ if (isset($value[0]) && isset($value[1])) { /* set $value with measurement properties */ $value = $value[0] . $value[1]; /* Border */ } else { if (ot_array_keys_exists($value, array('width', 'unit', 'style', 'color')) && !ot_array_keys_exists($value, array('top', 'right', 'bottom', 'left', 'height', 'inset', 'offset-x', 'offset-y', 'blur-radius', 'spread-radius'))) { $border = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['width'])) { $border[] = $value['width'] . $unit; } if (!empty($value['style'])) { $border[] = $value['style']; } if (!empty($value['color'])) { $border[] = $value['color']; } /* set $value with border properties or empty string */ $value = !empty($border) ? implode(' ', $border) : ''; /* Box Shadow */ } else { if (ot_array_keys_exists($value, array('inset', 'offset-x', 'offset-y', 'blur-radius', 'spread-radius', 'color')) && !ot_array_keys_exists($value, array('width', 'height', 'unit', 'style', 'top', 'right', 'bottom', 'left'))) { /* set $value with box-shadow properties or empty string */ $value = !empty($value) ? implode(' ', $value) : ''; /* Dimension */ } else { if (ot_array_keys_exists($value, array('width', 'height', 'unit')) && !ot_array_keys_exists($value, array('style', 'color', 'top', 'right', 'bottom', 'left'))) { $dimension = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['width'])) { $dimension[] = $value['width'] . $unit; } if (!empty($value['height'])) { $dimension[] = $value['height'] . $unit; } /* set $value with dimension properties or empty string */ $value = !empty($dimension) ? implode(' ', $dimension) : ''; /* Spacing */ } else { if (ot_array_keys_exists($value, array('top', 'right', 'bottom', 'left', 'unit')) && !ot_array_keys_exists($value, array('width', 'height', 'style', 'color'))) { $spacing = array(); $unit = !empty($value['unit']) ? $value['unit'] : 'px'; if (!empty($value['top'])) { $spacing[] = $value['top'] . $unit; } if (!empty($value['right'])) { $spacing[] = $value['right'] . $unit; } if (!empty($value['bottom'])) { $spacing[] = $value['bottom'] . $unit; } if (!empty($value['left'])) { $spacing[] = $value['left'] . $unit; } /* set $value with spacing properties or empty string */ $value = !empty($spacing) ? implode(' ', $spacing) : ''; /* typography */ } else { if (ot_array_keys_exists($value, array('font-color', 'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'letter-spacing', 'line-height', 'text-decoration', 'text-transform'))) { $font = array(); if (!empty($value['font-color'])) { $font[] = "color: " . $value['font-color'] . ";"; } if (!empty($value['font-family'])) { foreach (ot_recognized_font_families($marker) as $key => $v) { if ($key == $value['font-family']) { $font[] = "font-family: " . $v . ";"; } } } if (!empty($value['font-size'])) { $font[] = "font-size: " . $value['font-size'] . ";"; } if (!empty($value['font-style'])) { $font[] = "font-style: " . $value['font-style'] . ";"; } if (!empty($value['font-variant'])) { $font[] = "font-variant: " . $value['font-variant'] . ";"; } if (!empty($value['font-weight'])) { $font[] = "font-weight: " . $value['font-weight'] . ";"; } if (!empty($value['letter-spacing'])) { $font[] = "letter-spacing: " . $value['letter-spacing'] . ";"; } if (!empty($value['line-height'])) { $font[] = "line-height: " . $value['line-height'] . ";"; } if (!empty($value['text-decoration'])) { $font[] = "text-decoration: " . $value['text-decoration'] . ";"; } if (!empty($value['text-transform'])) { $font[] = "text-transform: " . $value['text-transform'] . ";"; } /* set $value with font properties or empty string */ $value = !empty($font) ? implode("\n", $font) : ''; /* background */ } else { if (ot_array_keys_exists($value, array('background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 'background-size'))) { $bg = array(); if (!empty($value['background-color'])) { $bg[] = $value['background-color']; } if (!empty($value['background-image'])) { /* If an attachment ID is stored here fetch its URL and replace the value */ if (wp_attachment_is_image($value['background-image'])) { $attachment_data = wp_get_attachment_image_src($value['background-image'], 'original'); /* check for attachment data */ if ($attachment_data) { $value['background-image'] = $attachment_data[0]; } } $bg[] = 'url("' . $value['background-image'] . '")'; } if (!empty($value['background-repeat'])) { $bg[] = $value['background-repeat']; } if (!empty($value['background-attachment'])) { $bg[] = $value['background-attachment']; } if (!empty($value['background-position'])) { $bg[] = $value['background-position']; } if (!empty($value['background-size'])) { $size = $value['background-size']; } /* set $value with background properties or empty string */ $value = !empty($bg) ? 'background: ' . implode(" ", $bg) . ';' : ''; if (isset($size)) { if (!empty($bg)) { $value .= apply_filters('ot_insert_css_with_markers_bg_size_white_space', "\n ", $option_id); } $value .= "background-size: {$size};"; } } } } } } } } } return "\r\n{$output}{\r\n {$value}\r\n }\r\n"; }
function ot_type_typography_heading($args = array()) { /* turns arguments array into variables */ extract($args); /* verify a description */ $has_desc = $field_desc ? true : false; /* format setting outer wrapper */ echo '<div class="format-setting type-typography ' . ($has_desc ? 'has-desc' : 'no-desc') . '">'; /* description */ echo $has_desc ? '<div class="description">' . htmlspecialchars_decode($field_desc) . '</div>' : ''; /* format setting inner wrapper */ echo '<div class="format-setting-inner">'; /* allow fields to be filtered */ $ot_recognized_typography_fields = apply_filters('ot_recognized_typography_fields', array('font-color', 'font-family', 'font-style'), $field_id); /* build font color */ if (in_array('font-color', $ot_recognized_typography_fields)) { /* build colorpicker */ echo '<div class="option-tree-ui-colorpicker-input-wrap">'; /* colorpicker JS */ echo '<script>jQuery(document).ready(function($) { OT_UI.bind_colorpicker("' . esc_attr($field_id) . '-picker"); });</script>'; /* set background color */ $background_color = isset($field_value['font-color']) ? esc_attr($field_value['font-color']) : ''; /* input */ echo '<input type="text" name="' . esc_attr($field_name) . '[font-color]" id="' . esc_attr($field_id) . '-picker" value="' . esc_attr($background_color) . '" class="hide-color-picker ' . esc_attr($field_class) . '" />'; echo '</div>'; } /* build font family */ if (in_array('font-family', $ot_recognized_typography_fields)) { $font_family = isset($field_value['font-family']) ? $field_value['font-family'] : ''; echo '<select name="' . esc_attr($field_name) . '[font-family]" id="' . esc_attr($field_id) . '-font-family" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-family</option>'; foreach (ot_recognized_font_families($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_family, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } /* build font style */ if (in_array('font-style', $ot_recognized_typography_fields)) { $font_style = isset($field_value['font-style']) ? esc_attr($field_value['font-style']) : ''; echo '<select name="' . esc_attr($field_name) . '[font-style]" id="' . esc_attr($field_id) . '-font-style" class="option-tree-ui-select ' . esc_attr($field_class) . '">'; echo '<option value="">font-style</option>'; foreach (ot_recognized_font_styles($field_id) as $key => $value) { echo '<option value="' . esc_attr($key) . '" ' . selected($font_style, $key, false) . '>' . esc_attr($value) . '</option>'; } echo '</select>'; } echo '</div>'; echo '</div>'; }