0

I am creating a Google Font Control in Customizer. I have created a custom control with two settings - one for font-family and other for font-weight. There will be select dropwdowns for both of them respectively. Now what I want is whenever I change the font-family, the font-weight gets automatically filled with the corresponding weights of the family.

I got the data of the fonts using Google Fonts API which consists of array of objects of all the fonts. I also created a dropdown having all the fonts.

Here is the complete code of the Custom Control -

    class itng_Google_Font_Dropdown_Custom_Control extends WP_Customize_Control {
            
        private $fonts           = false;
        
        private $fontValue       = '';
        
        private $weightValue     = '';
    
        public function __construct( $manager, $id, $args = array(), $options = array() )
        {
            $this->fonts        =   $this->get_fonts();
            
            parent::__construct( $manager, $id, $args );
        }
        
        public function render_content() {
            
            if ( !empty( $this->fonts ) ) {
            
                $this->render_fonts();
                $this->render_weights();
            
            }
        }
    
        /**
         * Render the content of the category dropdown
         *
         * @return HTML
         */
        protected function render_fonts()  {
            
            ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
               
                <select <?php $this->link('font'); ?>>
                    <?php
                        foreach ( $this->fonts as $k => $v ) {
                           
                            printf('<option value="%2$s" %1$s>%2$s</option>', selected($this->value('font'), $v->family, false), $v->family);
                        }
                    ?>
                </select>
            </label>
            <?php
        }
        
        
        protected function render_weights() {
            ?>
           <h4>Weights</h4>
           <?php
            
            $font_weights = ['100', '200', '300', '400', '500', '600', '700', '800', '900'];
            
            //var_dump( $this->fonts );
            foreach( $this->fonts as $font ) {
                if ( $font->family = $this->value('font') ) {
                    $variants = $font->family;
                }
            }
            var_dump( $variants );
             
        }
        
        
    
        /**
         * Get the google fonts from the API or in the cache
         *
         * @param  integer $amount
         *
         * @return String
         */
        public function get_fonts( $amount = 100 ) {
    
            $fontFile = get_template_directory() . '/assets/fonts/cache/google-web-fonts.txt';
    
            //Total time the file will be cached in seconds, set to a week
            $cachetime = 86400 * 7;
    
            if(file_exists($fontFile) && $cachetime < filemtime($fontFile ) )
            {
                $content = json_decode(file_get_contents($fontFile));
            } else {
    
                $googleApi = 'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyA9-9K8wV9KWKWY84Sp5TLSS7p9GguLRh4';
    
                $fontContent = wp_remote_get( $googleApi, array('sslverify'   => false) );
    
                $fp = fopen($fontFile, 'w');
                fwrite($fp, $fontContent['body']);
                fclose($fp);
    
                $content = json_decode($fontContent['body']);
            }
    
            if($amount == 'all')
            {
                return $content->items;
            } else {
                return array_slice($content->items, 0, $amount);
            }
        }
    }

Now I want to know what to put in the render_weights method to get the weights of the selected font in render_font method.

2
  • 1
    I believe the only way to do this is going to be with javascript, otherwise you would need to reload those parts of the customizer whenever the font family dropdown is changed so that the font weight was still accurate
    – Tom J Nowell
    Jul 22, 2021 at 13:19
  • Okay! Let me check it out! Will update if need help with anything. Jul 22, 2021 at 16:09

1 Answer 1

0

In the end, I ended up using Javascript. Solution involved changing the values of second dropdown depending on the value of the first dropdown. The data (an associative array with keys being options for the first dropdown and their corresponding values being options for the second dropdown) is localized using wp_localize_script and made available in javascript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.