While creating a new theme for WordPress, I have been looking for a simple way to have a select dropdown menu that would allow the user to choose a web font.
I really wanted that the dropdown to show the preview of the fonts, for a better user experience.
After digging and trying different solutions, I found a very simple way to accomplish this, with only few files.
I am using jquery.fontselect.js, a javascript plugin that allow to preview and choose web fonts from google fonts.
Here is how to proceed:
1) Download jquery.fontselect.js and put the JS and CSS files into your theme folder. Do not forget to also put fa-sprite.png in your CSS folder.
2) Enqueue your scripts for admin in functions.php
|
|
function theme_name_admin_enqueue_scripts() { wp_enqueue_script( 'fontselect-js', get_template_directory_uri() . '/js/jquery.fontselect.js', array(), '1.0.0', true ); wp_enqueue_style( 'fontselect-css', get_template_directory_uri() . '/css/fontselect.css', false, '1.0.0' ); } add_action( 'admin_enqueue_scripts', 'theme_name_admin_enqueue_scripts' ); |
3) Create a custom control function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php class Google_Font_Selector_Custom_Control extends WP_Customize_Control { public function __construct( $manager, $id, $args = array(), $options = array() ) { parent::__construct( $manager, $id, $args ); } public function render_content() { ?> <label> <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> <!-- Hidden input that will get the value of the selected font --> <input id="<?php echo $this->id; ?>" <?php $this->link(); ?> type="hidden" /> <!-- The input that will display the dropdown --> <input class="fontselect" data-id="<?php echo $this->id; ?>" value="<?php echo get_theme_mod( $this->id ); ?>" /> </label> <?php } } |
4) Require this new control in your cuztomizer file, and setup the settings and controls:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function theme_name_customize_register( $wp_customize ) { require_once dirname(__FILE__) . '/google-font-selector-custom-control.php'; $wp_customize -> add_setting( 'theme_name_titles_font', array( 'default' => 'Cantarell', 'type' => 'theme_mod', 'transport' => 'refresh', 'sanitize_callback' => 'sanitize_text_field', 'capability' => 'edit_theme_options' ) ); $wp_customize -> add_control( new Google_Font_Selector_Custom_Control( $wp_customize, 'theme_name_titles_font', array( 'label' => 'Titles font', 'section' => 'theme_name_fonts_section', 'settings' => 'theme_name_titles_font' ) ) ); } add_action( 'customize_register', 'theme_name_customize_register' ); |
5) We need JS to pass the values. Put this in your admin.js file for example, and of course do not forget to enqueue the file to have it loaded in admin
|
|
jQuery( document ).ready( function( $ ) { $('.fontselect').fontselect().change(function(){ // replace + signs with spaces for css var font = $(this).val().replace(/\+/g, ' '); var id = $(this).data('id'); $('#' + id).val(font); // We trigger "change" to have the preview refresh in theme customizer $('#' + id).trigger("change"); }); }); |
6) Finally, we need to load the styles in our theme. I personally use a “custom_styles.php” file that I include in my header, but you can put this anywhere you want.
|
|
<?php $logo_family = get_theme_mod('theme_name_logo_font', 'Cantarell'); $logo_font_name = str_replace(' ', '+', $logo_family); if (get_theme_mod('theme_name_logo_font')) { ?> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=<?php echo $logo_font_name; ?>'); .site-logo-text { font-family: <?php echo $logo_family; ?> !important; } </style> <?php } ?> |
And that’s it !
Now we have a great custom google font dropdown select for our theme 🙂 It should look like this:
