Support » Theme: Museum Core » Additional Google Fonts

  • Resolved mrcangrejero

    (@mrcangrejero)


    The functions.php file in Museum Core fully explains how you register and enqueue several Google Fonts and how you add them to the list in Customize –> Typography Options. Upon using a child theme, I would like to be able to add Google Fonts to Customize –> Typography Options without breaking (modifying) the parent’s functions.php file. Any guidance is appreciated. Thanks!!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Chris Reynolds

    (@jazzs3quence)

    I don’t have any specific example code on hand, but I do have a demo child theme for Museum Core which adds Bootswatch skins in a dropdown to the theme customizer: https://github.com/jazzsequence/supercoreswatch

    Adding a dropdown with different Google Webfonts would be pretty similar to that. The customizer also allows you to remove elements and add new ones, so you could potentially remove the existing font options and replace them with your own. Here’s the code used for the Bootswatch skins: https://github.com/jazzsequence/supercoreswatch/blob/master/functions.php

    There are lots of tutorials (just google it) on how to use and add things to the theme customizer. I found Otto’s to be the best place to start:
    http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/

    Making a custom control for the Theme Customizer

    Chris, thanks for your response. I’ll dig into this immediately. Also, thanks for Museum Core. I’m having a blast with it. Take care!

    Theme Author Chris Reynolds

    (@jazzs3quence)

    Awesome, glad to hear it! 🙂
    If you’re interested (now or in the future) in contributing, there’s a GitHub repo: https://github.com/jazzsequence/museum-core

    Will do. Thanks again!

    Chris … edited the child’s function.php as follows. Hope it meets with your approval. The best to you and yours!

    <?php
    if (!function_exists('ap_core_load_scripts')) {
        function ap_core_load_scripts() {
          if ( !is_admin() ) { // instruction to only load if it is not the admin area
            global $is_IE;
    
            $theme = wp_get_theme();
            // load the theme options and defaults
            $defaults = ap_core_get_theme_defaults();
            $options = get_option( 'ap_core_theme_options' );
            if ( isset( $options['font_subset'] ) ) {
                $font_subset = $options['font_subset'];
            } else {
                $font_subset = $defaults['font_subset'];
            }
    
            // this loads jquery (for bootstrap, among other things)
            wp_enqueue_script('jquery');
            // load boostrap
            wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array( 'jquery' ), '3.0.0', true );
            wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css', false, '3.0.0' );
            // loads modernizr for BPH5
            wp_register_script('modernizr',get_template_directory_uri() . '/assets/js/modernizr-2.5.3.min.js',false,'2.5.3');
            wp_enqueue_script('modernizr');
            // register fonts
            wp_register_style('droidsans','http://fonts.googleapis.com/css?family=Droid+Sans&subset=' . $font_subset,false,$theme['Version']);
            wp_register_style('ptserif','http://fonts.googleapis.com/css?family=PT+Serif&subset=' . $font_subset,false,$theme['Version']);
            wp_register_style('inconsolata','http://fonts.googleapis.com/css?family=Inconsolata&subset=' . $font_subset,false,$theme['Version']);
            wp_register_style('ubuntu','http://fonts.googleapis.com/css?family=Ubuntu&subset=' . $font_subset,false,$theme['Version']);
            wp_register_style('lato','http://fonts.googleapis.com/css?family=Lato&subset=' . $font_subset,false,$theme['Version'] );
            wp_register_style( 'notoserif','http://fonts.googleapis.com/css?family=Noto+Serif&subset=' . $font_subset,false, $theme['Version']  );
            wp_register_style( 'opensans', 'http://fonts.googleapis.com/css?family=Open+Sans&subset=' . $font_subset, false, $theme['Version'] );
    
            // ********** FONTS NOT REGISTERED IN CORE's functions.php **********
            wp_register_style( 'juliussansone', 'http://fonts.googleapis.com/css?family=Julius+Sans+One&subset=' . $font_subset, false, $theme['Version'] );
            wp_register_style( 'josefinslab', 'http://fonts.googleapis.com/css?family=Josefin+Slab&subset=' . $font_subset, false, $theme['Version'] );
            wp_register_style( 'orbitron', 'http://fonts.googleapis.com/css?family=Orbitron&subset=' . $font_subset, false, $theme['Version'] );
            wp_register_style( 'dancingscript', 'http://fonts.googleapis.com/css?family=Dancing+Script&subset=' . $font_subset, false, $theme['Version'] );
            wp_register_style( 'sacramento', 'http://fonts.googleapis.com/css?family=Sacramento&subset=' . $font_subset, false, $theme['Version'] );
            // ^^^^^^^^^^ FONTS NOT REGISTERED IN CORE's functions.php ^^^^^^^^^^
    
            // only enqueue fonts that are actually being used
            $heading = ( isset( $options['heading'] ) ) ? $options['heading'] : $defaults['heading'];
            $body = ( isset( $options['body'] ) ) ? $options['body'] : $defaults['body'];
            $alt = ( isset( $options['alt'] ) ) ? $options['alt'] : $defaults['alt'];
            $corefonts = array( $heading, $body, $alt );
            // if any of these fonts are selected, load their stylesheets
            if ( in_array( 'Droid Sans', $corefonts ) ) {
                wp_enqueue_style( 'droidsans' );
            }
            if ( in_array( 'PT Serif', $corefonts ) ) {
                wp_enqueue_style( 'ptserif' );
            }
            if ( in_array( 'Inconsolata', $corefonts ) ) {
                wp_enqueue_style( 'inconsolata' );
            }
            if ( in_array( 'Ubuntu', $corefonts ) ) {
                wp_enqueue_style( 'ubuntu' );
            }
            if ( in_array( 'Lato', $corefonts ) ) {
                wp_enqueue_style( 'lato' );
            }
            if ( in_array( 'Open Sans', $corefonts ) ) {
                wp_enqueue_style( 'opensans' );
            }
            if ( in_array( 'Noto Serif', $corefonts ) ) {
                wp_enqueue_style( 'notoserif' );
            }
    
            // ********** FONTS NOT ENQUEUED IN CORE's functions.php **********
            if ( in_array( 'Julius Sans One', $corefonts ) ) {
                wp_enqueue_style( 'juliussansone' );
            }
            if ( in_array( 'Josefin Slab', $corefonts ) ) {
                wp_enqueue_style( 'josefinslab' );
            }
            if ( in_array( 'Orbitron', $corefonts ) ) {
                wp_enqueue_style( 'orbitron' );
            }
            if ( in_array( 'Dancing Script', $corefonts ) ) {
                wp_enqueue_style( 'dancingscript' );
            }
            if ( in_array( 'Sacramento', $corefonts ) ) {
                wp_enqueue_style( 'sacramento' );
            }
            // ^^^^^^^^^^ FONTS NOT ENQUEUED IN CORE's functions.php ^^^^^^^^^^
    
            // this loads the style.css
            wp_enqueue_style( 'fontawesome', get_template_directory_uri() . '/assets/css/font-awesome.min.css', false, $theme['Version'] );
    
            wp_register_style('corecss', get_stylesheet_uri(),false,$theme['Version']);
            wp_enqueue_style('corecss');
            // loads the comment reply script
            if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
                wp_enqueue_script( 'comment-reply' );
            }
          }
        }
        add_action( 'wp_enqueue_scripts', 'ap_core_load_scripts' );
    }
    
    if (!function_exists('ap_core_setup')) {
        function ap_core_setup() {
    
            // load up the theme options
            require_once ( get_template_directory() . '/inc/theme-options.php' );
            // include theme hook alliance hooks
            require_once( get_template_directory() . '/inc/hooks.php' );
            // include bootstrap nav walker class
            require_once( get_template_directory() . '/inc/class-bootstrap-nav-walker.php' );
            // ************** INCLUED TO ADD CUSTOM COPYRIGHT IN CORE **************
            // include my optional functions
            require_once( get_template_directory() . '/inc/kid-func.php' );
            // ^^^^^^^^^^^^^^ INCLUDED TO ADD CUSTOM COPYRIGHT IN CORE ^^^^^^^^^^^^^^
    
            // i18n stuff
            $locale = get_locale();
            if ( file_exists( WP_LANG_DIR . '/museum-core/' . $locale . '.mo' ) ) {
                load_theme_textdomain( 'museum-core', WP_LANG_DIR . '/museum-core' );
            } else {
                load_theme_textdomain('museum-core', get_template_directory() .'/lang');
            }
    
            // html5 theme support
            add_theme_support( 'html5' );
    
            // post thumbnail support
            add_theme_support( 'post-thumbnails' );
            set_post_thumbnail_size( 150, 150 ); // 150 pixels wide by 150 pixels tall, box resize mode
            // post formats
            // register all post formats -- child themes can remove some post formats as they so desire
            add_theme_support('post-formats',array('aside','gallery','link','image','quote','status','video','audio','chat'));
    
            // automatic feed links
            add_theme_support('automatic-feed-links');
    
            // custom nav menus
            // This theme uses wp_nav_menu() in three (count them, three!) locations.
            register_nav_menus( array(
            	'top' => __( 'Top Header Navigation', 'museum-core' ),
            	'main' => __( 'Main Navigation', 'museum-core' ),
            	'footer' => __( 'Footer Navigation', 'museum-core' ),
            ) );
    
            // This theme allows users to set a custom background
            add_theme_support( 'custom-background', array() );  // 'nuff said. there are no defaults here, so we'll move on to headers
    
            add_theme_support( 'custom-header', array(
                // default header image
                'default-image' => get_template_directory_uri() . '/images/headers/nature.jpg',
                // header text? no, because we're doing it a different way (though it would probably be good to fix this later)
                'header-text' => false,
                // header image width
                'width' => 1140,
                // flexible height?  sure
                'flex-height' => true,
                // header image height
                'height' => 200,
                // admin head callback
                'admin-head-callback' => 'core_admin_header_style' )
            );
    
                // Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
                register_default_headers( array(
                	'nature' => array(
                		'url' => '%s/images/headers/nature.jpg',
                		'thumbnail_url' => '%s/images/headers/nature-thumbnail.jpg',
                		/* translators: header image description */
                		'description' => __( 'Nature', 'museum-core' )
                	),
                	'smoke' => array(
                		'url' => '%s/images/headers/smoke.jpg',
                		'thumbnail_url' => '%s/images/headers/smoke-thumbnail.jpg',
                		/* translators: header image description */
                		'description' => __( 'Smoke', 'museum-core' )
                	),
                	'lights1' => array(
            			'url' => '%s/images/headers/lights1.jpg',
                		'thumbnail_url' => '%s/images/headers/lights1-thumbnail.jpg',
                		/* translators: header image description */
                		'description' => __( 'Lights 1', 'museum-core' )
            		),
                    'lights2' => array(
                        'url' => '%s/images/headers/lights2.jpg',
                        'thumbnail_url' => '%s/images/headers/lights2-thumbnail.jpg',
                        /* translators: header image description */
                        'description' => __( 'Lights 2', 'museum-core' )
                    ),
                	'lights3' => array(
                		'url' => '%s/images/headers/lights3.jpg',
            			'thumbnail_url' => '%s/images/headers/lights3-thumbnail.jpg',
                		/* translators: header image description */
                		'description' => __( 'Lights 3', 'museum-core' )
                	)
                ) );
    
                function core_admin_header_style() {
                    // I don't have any custom header styles...yet.
                }
    
        	// this changes the output of the comments
            if (!function_exists('ap_core_comment')) {
            	function ap_core_comment($comment, $args, $depth) {
                    $GLOBALS['comment'] = $comment; ?>
                    <li <?php comment_class( 'media' ); ?> id="li-comment-<?php comment_ID() ?>">
                        <div id="comment-<?php comment_ID(); ?>" class="the_comment">
                            <div class="comment-author vcard">
                                <?php if ( get_avatar($comment) ) : ?>
                                    <div class="thumbnail media-object"><?php echo get_avatar($comment,$size='64',$default='' ); ?></div>
                                <?php endif; ?>
                            </div>
                            <div class="media-body">
                                <label><?php echo sprintf(_x('On %1$s at %2$s, %3$s said:', '1: date, 2: time, 3:author', 'museum-core'),
                                    esc_html( get_comment_date() ),
                                    esc_html( get_comment_time() ),
                                    wp_kses_post( get_comment_author_link() )
                                    ); ?></label>
                                <?php if ($comment->comment_approved == '0') : ?>
                                    <em><?php _e('Your comment is awaiting moderation.', 'museum-core') ?></em>
                                    <br />
                                <?php endif; ?>
                                <?php comment_text() ?>
                                <?php if ( comments_open() ) {
                                    if ( $depth < $args['max_depth'] ) { ?>
                                        <div class="reply"><button class="btn btn-default btn-sm">
                                        <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'reply_text' => __('Respond to this','museum-core'), 'max_depth' => $args['max_depth']))) ?>
                                        </button></div>
                                <?php }
                                } ?>
                                <small>
                                    <div class="comment-meta commentmetadata"><?php edit_comment_link( '<span class="text-danger">' . __('(Edit)', 'museum-core') . '</span>','','') ?></div>
                                    <a href="<?php comment_link(); ?>"><?php _e( 'Permalink', 'museum-core' ); ?></a>
                                </small>
                            </div>
                        </div>
                    </li>
                    <?php
                }
            }
    
        	// this changes the default [...] to be a read more hyperlink
            if (!function_exists('ap_core_new_excerpt_more')) {
            	function ap_core_new_excerpt_more($more) {
                    global $post;
            		return '...&nbsp;(<a href="'. get_permalink($post->ID) . '">' . __('read more','museum-core') . '</a>)';
            	}
            	add_filter('excerpt_more', 'ap_core_new_excerpt_more');
            }
    
        }
        add_action('after_setup_theme','ap_core_setup');
    }
    
    // ************** INCLUED TO ADD FONTS TO CUSTOMIZER **************
    /**
     * Font settings
     * @since 0.4.4
     * @author Chris Reynolds
     * this array handles the font selection
     */
    if (!function_exists('ap_core_fonts')) {
        function ap_core_fonts() {
            $ap_core_fonts = array(
                'Dancing Script' => 'Dancing Script',
                'Droid Sans' => 'Droid Sans',
                'Inconsolata' => 'Inconsolata',
                'Josefin Slab' => 'Josefin Slab',
                'Julius Sans One' => 'Julius Sans One',
                'Lato' => 'Lato',
                'Noto Serif' => 'Noto Serif',
                'Open Sans' => 'Open Sans',
                'Orbitron' => 'Orbitron',
                'PT Serif' => 'PT Serif',
                'Sacramento' => 'Sacramento',
                'Ubuntu' => 'Ubuntu',
            );
            return $ap_core_fonts;
        }
    }
    
    function superhero_load_scripts() {
    	$options = get_option( 'ap_core_theme_options' );
    	if ( isset( $options['bootswatch'] ) || 'none' != $options['bootswatch'] ) {
    		$skin = $options['bootswatch'];
    
    		wp_enqueue_style( $skin, get_stylesheet_directory_uri() . '/css/' . $skin . '.min.css', array( 'bootstrap', 'corecss' ) );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'superhero_load_scripts' );
    
    function superhero_skins_customizer( $wp_customize ) {
    	$wp_customize->add_setting( 'ap_core_theme_options[bootswatch]', array(
    
    		'transport' => 'refresh',
    		'type' => 'option',
    		'default' => 'none'
    
    	) );
    
    	$wp_customize->add_control( 'ap_core_theme_options[bootswatch]', array(
    
    		'label' => __( 'Skin', 'museum-superhero' ),
    		'section' => 'colors',
    		'settings' => 'ap_core_theme_options[bootswatch]',
    		'choices' => superhero_skins(),
    		'type' => 'select'
    
    	) );
    }
    add_action( 'customize_register', 'superhero_skins_customizer' );
    
    function superhero_skins() {
    	$skins = array(
    		'none' => __( '- Default -', 'museum-superhero' ),
    		'amelia' => __( 'Amelia', 'museum-superhero' ),
    		'cerulean' => __( 'Cerulean', 'museum-superhero' ),
    		'cosmo' => __( 'Cosmo', 'museum-superhero' ),
    		'cyborg' => __( 'Cyborg', 'museum-superhero' ),
    		'darkly' => __( 'Darkly', 'museum-superhero' ),
    		'flatly' => __( 'Flatly', 'museum-superhero' ),
    		'journal' => __( 'Journal', 'museum-superhero' ),
    		'lumen' => __( 'Lumen', 'museum-superhero' ),
    		'readable' => __( 'Readable', 'museum-superhero' ),
    		'shamrock' => __( 'Shamrock', 'museum-superhero' ),
    		'simplex' => __( 'Simplex', 'museum-superhero' ),
    		'slate' => __( 'Slate', 'museum-superhero' ),
    		'spacelab' => __( 'Spacelab', 'museum-superhero' ),
    		'superhero' => __( 'Superhero', 'museum-superhero' ),
    		'united' => __( 'United', 'museum-superhero' ),
    		'yeti' => __( 'Yeti', 'museum-superhero' )
    	);
    
    	return $skins;
    }
    
    function superhero_body_class_filter( $classes ) {
    	$options = get_option( 'ap_core_theme_options' );
    	if ( isset( $options['bootswatch'] ) || 'none' != $options['bootswatch'] ) {
    		$skin = $options['bootswatch'];
    		$classes[] = $skin;
    	}
    	return $classes;
    }
    add_filter( 'body_class', 'superhero_body_class_filter' );
    
    if ( function_exists( '_checkactive_widgets' ) ) {
    	// do nothing
    }

    Quick question, Chris. The child theme has a function called:
    function superhero_skins_customizer( $wp_customize ) {
    One of its items reads:
    'choices' => superhero_skins(),
    Shouldn’t it read:
    'choices' => 'superhero_skins()',
    Thanks!!!

    Theme Author Chris Reynolds

    (@jazzs3quence)

    Shouldn’t it read:
    ‘choices’ => ‘superhero_skins()’,

    Nope. superhero_skins() is a function that returns an array of choices. 'superhero_skins()' would be a string and throw an error. 😀

    I’ll take a look at the code you added and see about adding it into that child theme. 🙂

    I didn’t do anything scientific but, hope it helps. On the other hand, I can help with translation into Spanish. Let me know how. Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Additional Google Fonts’ is closed to new replies.