'Arial', 'Segoe UI, Helvetica, Arial, sans-serif' => 'Segoe UI', 'Impact, Charcoal, sans-serif' => 'Impact', '"Lucida Sans Unicode", "Lucida Grande", sans-serif' => 'Lucida Sans Unicode', 'Tahoma, Geneva, sans-serif' => 'Tahoma', 'Verdana, Geneva, sans-serif' => 'Verdana', '"Trebuchet MS", Helvetica, sans-serif' => 'Trebuchet MS', 'Georgia, serif' => 'Georgia', 'Times New Roman, Times, serif' => 'Times New Roman', '"Courier New", Courier, monospace' => 'Courier New', '"Lucida Console", Monaco, monospace' => 'Lucida Console' ); return $os_faces; } /** * Returns a select list of Google fonts * Feel free to edit this, update the fallbacks, etc. */ function arete_options_typography_get_google_fonts() { // Google Font Defaults $google_faces = array( 'Droid Sans, sans-serif' => 'Droid Sans (Sans Serif)', 'Open Sans, sans-serif' => 'Open Sans (Sans Serif)', 'Cuprum, sans-serif' => 'Cuprum (Sans Serif)', 'Mako, sans-serif' => 'Mako (Sans Serif)', 'Lato, sans-serif' => 'Lato Light (Sans Serif)', 'Quicksand, sans-serif' => 'Quicksand (Sans Serif)', 'Open Sans Condensed, sans-serif' => 'Open Sans Condensed (Sans Serif)', 'Lora, serif' => 'Lora (Serif)', 'Merriweather, serif' => 'Merriweather (Serif)', 'Donegal One, serif' => 'Donegal One (Serif)', 'Gravitas One, serif' => 'Gravitas One (Serif)', 'Playfair Display, serif' => 'Playfair Display (Serif)', 'Anton, sans-serif' => 'Anton (Sans Serif)' ); return $google_faces; } /* * Outputs the selected option panel styles inline into the */ function arete_options_typography_styles() { // It's helpful to include an option to disable styles. If this is selected // no inline styles will be outputted into the if ( ! of_get_option( 'disable_styles' ) ) { $output = ''; $input = ''; // BACKGROUNDS ////////////////////////////////////////////////////////////// // Header Background $arete_header_background = of_get_option( 'arete_header_background' ); if ( of_get_option( 'arete_header_background' ) ) { $output .= ' .header-inner { background-color:' . $arete_header_background['color'] . '; background-image:url( ' . $arete_header_background['image'] . ' ); }'; } // Menu Background $arete_menu_background = of_get_option( 'arete_menu_background' ); if ( of_get_option( 'arete_menu_background' ) ) { $output .= ' #dropdown-menu-wrapper, .dropdown-menu ul { background-color:' . $arete_menu_background['color'] . '; background-image:url( ' . $arete_menu_background['image'] . ' ); }'; } if ( of_get_option( 'arete_menu_border' ) ) { $output .= ' #dropdown-menu-wrapper, .footer { border-color:' . of_get_option( 'arete_menu_border' ) . '}'; } // Page Title Background $arete_page_title_background = of_get_option( 'arete_page_title_background' ); if ( of_get_option( 'arete_page_title_background' ) ) { $output .= ' .page-title { background-color:' . $arete_page_title_background['color'] . '; background-image:url( ' . $arete_page_title_background['image'] . ' ); }'; } if ( of_get_option( 'arete_page_title_border' ) ) { $output .= ' .page-title { border-color:' . of_get_option( 'arete_page_title_border' ) . '}'; } // Container Background $arete_container_background = of_get_option( 'arete_container_background' ); if ( of_get_option( 'arete_container_background' ) ) { $output .= ' textarea, input, .container { background-color:' . $arete_container_background['color'] . '; background-image:url( ' . $arete_container_background['image'] . ' ); }'; } // Content Background $arete_content_background = of_get_option( 'arete_content_background' ); if ( of_get_option( 'arete_content_background' ) ) { $output .= ' .posts-utilities > li, .comment-respond, .box, #calendar_wrap { background-color:' . $arete_content_background['color'] . '; background-image:url( ' . $arete_content_background['image'] . ' ); }'; } // Elements Background $arete_elements_background = of_get_option( 'arete_elements_background' ); if ( of_get_option( 'arete_elements_background' ) ) { $output .= ' button, .button, input[type="submit"], input[type="reset"], input[type="button"], .searchform input[type="submit"], select, .pagination a, .pagination span, .previous-post:before, .next-post:after, .dropdown-menu ul { background-color:' . $arete_elements_background['color'] . '; background-image:url( ' . $arete_elements_background['image'] . ' ); }'; } // TYPOGRAPHY ////////////////////////////////////////////////////////////////////// // Header if ( of_get_option( 'arete-header-font' ) ) { $input = of_get_option( 'arete-header-font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete-header-font' ) , 'h2.site-description, .header-sidebar, .header .searchform #s' ); } if ( of_get_option( 'arete-header-link-color' ) ) { $output .= ' .header-sidebar a:link, .header-sidebar a:visited, .header-sidebar a:active, #menu-icon-main { color:' . of_get_option( 'arete-header-link-color' ) . '}'; } if ( of_get_option( 'arete-header-link-hover-color' ) ) { $output .= ' .site-title a:hover, .header-sidebar a:hover { color:' . of_get_option( 'arete-header-link-hover-color' ) . '}'; } if ( of_get_option( 'arete-site-title-font' ) ) { $input = of_get_option( 'arete-site-title-font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete-site-title-font' ) , 'h1.site-title a' ); } // Menu if ( of_get_option( 'arete-menu-font' ) ) { $input = of_get_option( 'arete-menu-font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete-menu-font' ) , '.dropdown-menu li a:link, .dropdown-menu li a:visited, .dropdown-menu li a:active' ); } if ( of_get_option( 'arete-menu-hover-color' ) ) { $output .= ' .dropdown-menu li a:hover { color:' . of_get_option( 'arete-menu-hover-color' ) . '}'; } // Headline if ( of_get_option( 'arete-headline-h1' ) ) { $input = of_get_option( 'arete-headline-h1' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete-headline-h1' ) , 'h1, div.slideshow_title' ); } if ( of_get_option( 'arete-page-title-h1' ) ) { $input = of_get_option( 'arete-page-title-h1' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete-page-title-h1' ) , '.page-title h1' ); } // Body if ( of_get_option( 'arete-body-font' ) ) { $input = of_get_option( 'arete-body-font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete-body-font' ) , 'body, input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea, blockquote cite, blockquote small, cite, button, input[type="submit"], .site-description' ); } if ( of_get_option( 'arete-link-color' ) ) { $output .= ' a:link, a:visited, a:active { color:' . of_get_option( 'arete-link-color' ) . '}'; } if ( of_get_option( 'arete-link-color' ) ) { $output .= ' .tagcloud a, .tags a { border-color:' . of_get_option( 'arete-link-color' ) . '}'; } if ( of_get_option( 'arete-link-hover-color' ) ) { $output .= ' a:hover, #menu-icon-main:hover, .tagcloud a:hover { color:' . of_get_option( 'arete-link-hover-color' ) . '}'; } if ( of_get_option( 'arete-link-hover-color' ) ) { $output .= ' .tagcloud a:hover, .tags a:hover { border-color:' . of_get_option( 'arete-link-hover-color' ) . '}'; } // Elements if ( of_get_option( 'arete_elements_font_color' ) ) { $output .= ' button, .button, input[type="submit"], input[type="reset"], input[type="button"], .searchform input[type="submit"], select, .pagination span, .previous-post:before, .next-post:after { color:' . of_get_option( 'arete_elements_font_color' ) . '}'; } if ( of_get_option( 'arete_elements_link_color' ) ) { $output .= ' button a, .button a, input[type="submit"], input[type="reset"], input[type="button"], .searchform input[type="submit"], select, .pagination a, .pagination span a, .previous-post:before, .next-post:after, .dropdown-menu ul li a:link, .dropdown-menu ul li a:visited, .dropdown-menu ul li a:active { color:' . of_get_option( 'arete_elements_link_color' ) . '}'; } if ( of_get_option( 'arete_elements_link_hover_color' ) ) { $output .= ' .tabs-content a:hover, .tabs li a:hover, .dropdown-menu ul li a:hover { color:' . of_get_option( 'arete_elements_link_hover_color' ) . '}'; } // WIDGETABLE ////////////////////////////////////////////////////////////////////// // Sidebar 1 $arete_tw_sidebar_1_background = of_get_option( 'tw_sidebar_1_background' ); if ( of_get_option( 'tw_sidebar_1_background' ) ) { $output .= ' .tw-sidebar-1-inner { background-color:' . $arete_tw_sidebar_1_background['color'] . '; background-image:url( ' . $arete_tw_sidebar_1_background['image'] . ' ); }'; } if ( of_get_option( 'arete_tw_sidebar_1_headline_font' ) ) { $input = of_get_option( 'arete_tw_sidebar_1_headline_font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete_tw_sidebar_1_headline_font' ) , '.tw-sidebar-1-inner h1' ); } if ( of_get_option( 'arete_tw_sidebar_1_font' ) ) { $input = of_get_option( 'arete_tw_sidebar_1_font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete_tw_sidebar_1_font' ) , '.tw-sidebar-1-inner, .tw-sidebar-2-inner #s' ); } if ( of_get_option( 'arete_tw_sidebar_1_link_color' ) ) { $output .= ' .tw-sidebar-1-inner a { color:' . of_get_option( 'arete_tw_sidebar_1_link_color' ) . '}'; } if ( of_get_option( 'arete_tw_sidebar_1_link_hover_color' ) ) { $output .= ' .tw-sidebar-1-inner a:hover { color:' . of_get_option( 'arete_tw_sidebar_1_link_hover_color' ) . '}'; } // Sidebar 2 $arete_tw_sidebar_2_background = of_get_option( 'tw_sidebar_2_background' ); if ( of_get_option( 'tw_sidebar_2_background' ) ) { $output .= ' .tw-sidebar-2-inner { background-color:' . $arete_tw_sidebar_2_background['color'] . '; background-image:url( ' . $arete_tw_sidebar_2_background['image'] . ' ); }'; } if ( of_get_option( 'arete_tw_sidebar_2_headline_font' ) ) { $input = of_get_option( 'arete_tw_sidebar_2_headline_font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete_tw_sidebar_2_headline_font' ) , '.tw-sidebar-2-inner h1' ); } if ( of_get_option( 'arete_tw_sidebar_2_font' ) ) { $input = of_get_option( 'arete_tw_sidebar_2_font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete_tw_sidebar_2_font' ) , '.tw-sidebar-2-inner, .tw-sidebar-2-inner #s' ); } if ( of_get_option( 'arete_tw_sidebar_2_link_color' ) ) { $output .= ' .tw-sidebar-2-inner a { color:' . of_get_option( 'arete_tw_sidebar_2_link_color' ) . '}'; } if ( of_get_option( 'arete_tw_sidebar_2_link_hover_color' ) ) { $output .= ' .tw-sidebar-2-inner a:hover { color:' . of_get_option( 'arete_tw_sidebar_2_link_hover_color' ) . '}'; } // Sidebar 3 $arete_tw_sidebar_3_background = of_get_option( 'tw_sidebar_3_background' ); if ( of_get_option( 'tw_sidebar_3_background' ) ) { $output .= ' .tw-sidebar-3-inner { background-color:' . $arete_tw_sidebar_3_background['color'] . '; background-image:url( ' . $arete_tw_sidebar_3_background['image'] . ' ); }'; } if ( of_get_option( 'arete_tw_sidebar_3_headline_font' ) ) { $input = of_get_option( 'arete_tw_sidebar_3_headline_font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete_tw_sidebar_3_headline_font' ) , '.tw-sidebar-3-inner h1' ); } if ( of_get_option( 'arete_tw_sidebar_3_font' ) ) { $input = of_get_option( 'arete_tw_sidebar_3_font' ); $output .= arete_options_typography_font_styles( of_get_option( 'arete_tw_sidebar_3_font' ) , '.tw-sidebar-3-inner, tw-sidebar-3-inner #s' ); } if ( of_get_option( 'arete_tw_sidebar_3_link_color' ) ) { $output .= ' .tw-sidebar-3-inner a { color:' . of_get_option( 'arete_tw_sidebar_3_link_color' ) . '}'; } if ( of_get_option( 'arete_tw_sidebar_3_link_color' ) ) { $output .= ' .tagcloud a, .tags a, #wp-calendar td { border-color:' . of_get_option( 'arete_tw_sidebar_3_link_color' ) . '}'; } if ( of_get_option( 'arete_tw_sidebar_3_link_hover_color' ) ) { $output .= ' .tw-sidebar-3-inner a:hover { color:' . of_get_option( 'arete_tw_sidebar_3_link_hover_color' ) . '}'; } if ( of_get_option( 'arete_tw_sidebar_3_link_hover_color' ) ) { $output .= ' .tagcloud a:hover, .tags a:hover { border-color:' . of_get_option( 'arete_tw_sidebar_3_link_hover_color' ) . '}'; } if ( $output != '' ) { $output = "\n\n"; echo $output; } } } add_action('wp_head', 'arete_options_typography_styles'); /* * Returns a typography option in a format that can be outputted as inline CSS */ function arete_options_typography_font_styles($option, $selectors) { $output = $selectors . ' {'; $output .= ' color:' . $option['color'] .'; '; $output .= 'font-family:' . $option['face'] . '; '; $output .= 'font-weight:' . $option['style'] . '; '; $output .= 'font-size:' . $option['size'] . '; '; $output .= '}'; $output .= "\n"; return $output; } /** * Checks font options to see if a Google font is selected. * If so, options_typography_enqueue_google_font is called to enqueue the font. * Ensures that each Google font is only enqueued once. */ if ( !function_exists( 'arete_options_typography_google_fonts' ) ) { function arete_options_typography_google_fonts() { $all_google_fonts = array_keys( arete_options_typography_get_google_fonts() ); // Define all the options that possibly have a unique Google font $arete_site_title_font = of_get_option('arete-site-title-font', false); $arete_header_font = of_get_option('arete-header-font', false); $arete_page_title = of_get_option('arete-page-title-h1', false); $arete_headline_h1 = of_get_option('arete-headline-h1', false); $arete_menu_font = of_get_option('arete-menu-font', false); $arete_body_font = of_get_option('arete-body-font', false); $arete_tw_sidebar_1_font = of_get_option('arete_tw_sidebar_1_font', false); $arete_tw_sidebar_1_headline_font = of_get_option('arete_tw_sidebar_1_headline_font', false); $arete_tw_sidebar_2_font = of_get_option('arete_tw_sidebar_2_font', false); $arete_tw_sidebar_2_headline_font = of_get_option('arete_tw_sidebar_2_headline_font', false); $arete_tw_sidebar_3_font = of_get_option('arete_tw_sidebar_3_font', false); $arete_tw_sidebar_3_headline_font = of_get_option('arete_tw_sidebar_3_headline_font', false); $arete_tw_sidebar_4_font = of_get_option('arete_tw_sidebar_4_font', false); $arete_tw_sidebar_4_headline_font = of_get_option('arete_tw_sidebar_4_headline_font', false); // Get the font face for each option and put it in an array $selected_fonts = array( $arete_site_title_font['face'], $arete_site_title_font['face'], $arete_page_title['face'], $arete_headline_h1['face'], $arete_menu_font['face'], $arete_body_font['face'], $arete_tw_sidebar_1_font['face'], $arete_tw_sidebar_1_headline_font['face'], $arete_tw_sidebar_2_font['face'], $arete_tw_sidebar_2_headline_font['face'], $arete_tw_sidebar_3_font['face'], $arete_tw_sidebar_3_headline_font['face'], $arete_tw_sidebar_4_font['face'], $arete_tw_sidebar_4_headline_font['face'] ); // Remove any duplicates in the list $selected_fonts = array_unique($selected_fonts); // Check each of the unique fonts against the defined Google fonts // If it is a Google font, go ahead and call the function to enqueue it foreach ( $selected_fonts as $font ) { if ( in_array( $font, $all_google_fonts ) ) { arete_options_typography_enqueue_google_font($font); } } } } add_action( 'wp_enqueue_scripts', 'arete_options_typography_google_fonts' ); /** * Enqueues the Google $font that is passed */ function arete_options_typography_enqueue_google_font($font) { $font = explode(',', $font); $font = $font[0]; // Certain Google fonts need slight tweaks in order to load properly if ( $font == 'Lato' ) $font = 'Lato:300'; if ( $font == 'Playfair Display' ) $font = 'Playfair Display:400'; $font = str_replace(" ", "+", $font); wp_enqueue_style( "options_typography_$font", "http://fonts.googleapis.com/css?family=$font", false, null, 'all' ); }