Skip to content

Instantly share code, notes, and snippets.

@purzlbaum
Last active March 17, 2024 20:37
Show Gist options
  • Star 31 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save purzlbaum/afa41255afee372128e6 to your computer and use it in GitHub Desktop.
Save purzlbaum/afa41255afee372128e6 to your computer and use it in GitHub Desktop.
Google Font select for WordPress Customizer
<?php
new theme_customizer();
class theme_customizer {
public function __construct() {
add_action( 'customize_register', array(&$this, 'customize_linje' ));
}
/**
* Customizer manager demo
* @param WP_Customizer_Manager $wp_manager
* @return void
*/
public function customize_linje( $wp_manager ) {
$this->linje_fonts_sections( $wp_manager );
}
private function linje_fonts_sections( $wp_manager ) {
$wp_manager->add_section( 'linje_google_fonts_section', array(
'title' => __( 'Google Fonts', 'linje' ),
'priority' => 24,
) );
$font_choices = array(
'Source Sans Pro:400,700,400italic,700italic' => 'Source Sans Pro',
'Open Sans:400italic,700italic,400,700' => 'Open Sans',
'Oswald:400,700' => 'Oswald',
'Playfair Display:400,700,400italic' => 'Playfair Display',
'Montserrat:400,700' => 'Montserrat',
'Raleway:400,700' => 'Raleway',
'Droid Sans:400,700' => 'Droid Sans',
'Lato:400,700,400italic,700italic' => 'Lato',
'Arvo:400,700,400italic,700italic' => 'Arvo',
'Lora:400,700,400italic,700italic' => 'Lora',
'Merriweather:400,300italic,300,400italic,700,700italic' => 'Merriweather',
'Oxygen:400,300,700' => 'Oxygen',
'PT Serif:400,700' => 'PT Serif',
'PT Sans:400,700,400italic,700italic' => 'PT Sans',
'PT Sans Narrow:400,700' => 'PT Sans Narrow',
'Cabin:400,700,400italic' => 'Cabin',
'Fjalla One:400' => 'Fjalla One',
'Francois One:400' => 'Francois One',
'Josefin Sans:400,300,600,700' => 'Josefin Sans',
'Libre Baskerville:400,400italic,700' => 'Libre Baskerville',
'Arimo:400,700,400italic,700italic' => 'Arimo',
'Ubuntu:400,700,400italic,700italic' => 'Ubuntu',
'Bitter:400,700,400italic' => 'Bitter',
'Droid Serif:400,700,400italic,700italic' => 'Droid Serif',
'Roboto:400,400italic,700,700italic' => 'Roboto',
'Open Sans Condensed:700,300italic,300' => 'Open Sans Condensed',
'Roboto Condensed:400italic,700italic,400,700' => 'Roboto Condensed',
'Roboto Slab:400,700' => 'Roboto Slab',
'Yanone Kaffeesatz:400,700' => 'Yanone Kaffeesatz',
'Rokkitt:400' => 'Rokkitt',
);
$wp_manager->add_setting( 'linje_headings_fonts', array(
'sanitize_callback' => 'linje_sanitize_fonts',
)
);
$wp_manager->add_control( 'linje_headings_fonts', array(
'type' => 'select',
'description' => __('Select your desired font for the headings.', 'linje'),
'section' => 'linje_google_fonts_section',
'choices' => $font_choices
)
);
$wp_manager->add_setting( 'linje_body_fonts', array(
'sanitize_callback' => 'linje_sanitize_fonts'
)
);
$wp_manager->add_control( 'linje_body_fonts', array(
'type' => 'select',
'description' => __( 'Select your desired font for the body.', 'linje' ),
'section' => 'linje_google_fonts_section',
'choices' => $font_choices
)
);
}
}
// Setup the Theme Customizer settings and controls...
//add_action( 'customize_register', array( 'theme_customizer', 'customize_linje' ) );
// Output custom CSS to live site
add_action( 'wp_head', array( 'theme_customizer' ) );
<?php
/**
* Enqueue scripts and styles.
*/
function linje_scripts() {
$headings_font = esc_html(get_theme_mod('linje_headings_fonts'));
$body_font = esc_html(get_theme_mod('linje_body_fonts'));
if( $headings_font ) {
wp_enqueue_style( 'linje-headings-fonts', '//fonts.googleapis.com/css?family='. $headings_font );
} else {
wp_enqueue_style( 'linje-source-sans', '//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
}
if( $body_font ) {
wp_enqueue_style( 'linje-body-fonts', '//fonts.googleapis.com/css?family='. $body_font );
} else {
wp_enqueue_style( 'linje-source-body', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,700,600');
}
}
add_action( 'wp_enqueue_scripts', 'linje_scripts' );
/**
* Google Fonts
*/
require get_template_directory() . '/inc/gfonts.php';
<?php
/*
* Props to the BLDR Theme: https://wordpress.org/themes/bldr/
* */
function linje_custom_styles($custom) {
//Fonts
$headings_font = esc_html(get_theme_mod('linje_headings_fonts'));
$body_font = esc_html(get_theme_mod('linje_body_fonts'));
if ( $headings_font ) {
$font_pieces = explode(":", $headings_font);
$custom .= "h1, h2, h3, h4, h5, h6 { font-family: {$font_pieces[0]}; }"."\n";
}
if ( $body_font ) {
$font_pieces = explode(":", $body_font);
$custom .= "body, button, input, select, textarea { font-family: {$font_pieces[0]}; }"."\n";
}
//Output all the styles
wp_add_inline_style( 'linje-css', $custom );
}
add_action( 'wp_enqueue_scripts', 'linje_custom_styles' );
//Sanitizes Fonts
function linje_sanitize_fonts( $input ) {
$valid = array(
'Source Sans Pro:400,700,400italic,700italic' => 'Source Sans Pro',
'Open Sans:400italic,700italic,400,700' => 'Open Sans',
'Oswald:400,700' => 'Oswald',
'Playfair Display:400,700,400italic' => 'Playfair Display',
'Montserrat:400,700' => 'Montserrat',
'Raleway:400,700' => 'Raleway',
'Droid Sans:400,700' => 'Droid Sans',
'Lato:400,700,400italic,700italic' => 'Lato',
'Arvo:400,700,400italic,700italic' => 'Arvo',
'Lora:400,700,400italic,700italic' => 'Lora',
'Merriweather:400,300italic,300,400italic,700,700italic' => 'Merriweather',
'Oxygen:400,300,700' => 'Oxygen',
'PT Serif:400,700' => 'PT Serif',
'PT Sans:400,700,400italic,700italic' => 'PT Sans',
'PT Sans Narrow:400,700' => 'PT Sans Narrow',
'Cabin:400,700,400italic' => 'Cabin',
'Fjalla One:400' => 'Fjalla One',
'Francois One:400' => 'Francois One',
'Josefin Sans:400,300,600,700' => 'Josefin Sans',
'Libre Baskerville:400,400italic,700' => 'Libre Baskerville',
'Arimo:400,700,400italic,700italic' => 'Arimo',
'Ubuntu:400,700,400italic,700italic' => 'Ubuntu',
'Bitter:400,700,400italic' => 'Bitter',
'Droid Serif:400,700,400italic,700italic' => 'Droid Serif',
'Roboto:400,400italic,700,700italic' => 'Roboto',
'Open Sans Condensed:700,300italic,300' => 'Open Sans Condensed',
'Roboto Condensed:400italic,700italic,400,700' => 'Roboto Condensed',
'Roboto Slab:400,700' => 'Roboto Slab',
'Yanone Kaffeesatz:400,700' => 'Yanone Kaffeesatz',
'Rokkitt:400' => 'Rokkitt',
);
if ( array_key_exists( $input, $valid ) ) {
return $input;
} else {
return '';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment