How ease make typography settings usage Unyson wordpress framework.
Let’s show an example font setting for h1.
1 step – Get typography settings by id from theme settings Unyson.
if(!function_exists('max_them_google_fonts')) { function max_them_google_fonts(){ $include_from_google = array(); $google_fonts = fw_get_google_fonts(); $h1_font = fw_get_db_settings_option('h1'); // if is google font if( isset($google_fonts[$h1_font['family']])){ $include_from_google[$h1_font['family']] = $google_fonts[$h1_font['family']]; } $google_fonts_links = fw_theme_get_remote_fonts($include_from_google); // set a option in db for save google fonts link update_option( 'fw_theme_google_fonts_link', $google_fonts_links ); } add_action('fw_settings_form_saved', 'max_them_google_fonts', 999, 2); }
After you have received the required font settings. Will generate the google font link from custom font.
if (!function_exists('fw_theme_get_remote_fonts')) : function fw_theme_get_remote_fonts($include_from_google) { /** * Get remote fonts * @param array $include_from_google */ if ( ! sizeof( $include_from_google ) ) { return ''; } $html = "<link href='//fonts.googleapis.com/css?family="; foreach ( $include_from_google as $font => $styles ) { $html .= str_replace( ' ', '+', $font ) . ':' . implode( ',', $styles['variants'] ) . '|'; } $html = substr( $html, 0, - 1 ); $html .= "' rel='stylesheet' type='text/css'>"; return $html; } endif;
2 step – Print in head ready Google Font Link.
if (!function_exists('max_theme_print_google_fonts_link')) : function max_theme_print_google_fonts_link() { /** * Print google fonts link */ $google_fonts_link = get_option('fw_theme_google_fonts_link', ''); if($google_fonts_link != ''){ echo max_html_trans($google_fonts_link); } } add_action('wp_head', 'max_theme_print_google_fonts_link'); endif;
3 step – Print inline styles by custom typography.
Create an empty file css custom_typography.css
. Because without of this file do not work inline style in wordpress, it is important.
Getting custom settings for font and will print them.
Exemple: fw_get_db_settings_option('h1')['size'];
function max_typo_settings() { wp_enqueue_style('custom-typo-style', get_template_directory_uri() . '/css/custom_typography.css'); $custom_typo_css = ""; $h1size = (fw_get_db_settings_option('h1')['size']) ? 'font-size:'.fw_get_db_settings_option('h1')['size'].'px;' : ''; $h1family = (fw_get_db_settings_option('h1')['family']) ? 'font-family:'.fw_get_db_settings_option('h1')['family'].', sans-serif;' : ''; $h1color = (fw_get_db_settings_option('h1')['color']) ? 'color:'.fw_get_db_settings_option('h1')['color'].';' : ''; $h1specing = (fw_get_db_settings_option('h1')['letter-spacing']) ? 'letter-spacing:'.fw_get_db_settings_option('h1')['letter-spacing'].'em;' : ''; /*Font Weight and Syles Hook*/ $current_style = fw_get_db_settings_option('h1')['variation']; if ( $current_style === 'regular' ) { $current_style = '400'; } if ( $current_style == 'italic' ) { $current_style = '400italic'; } $font_style = ( strpos( $current_style, 'italic' ) ) ? 'font-style: italic;' : ''; $font_weight = 'font-weight: ' . intval( $current_style ) . ';'; $custom_typo_css .= " h1{ {$h1size} {$h1family} {$h1color} {$font_style} {$font_weight} {$h1specing} }"; wp_add_inline_style( 'custom-typo-style', $custom_typo_css ); } add_action( 'wp_enqueue_scripts', 'max_typo_settings' );
This short code solve problem with typography option style/weight.
/*Font Weight and Syles Hook*/ $current_style = fw_get_db_settings_option('h1')['variation']; if ( $current_style === 'regular' ) { $current_style = '400'; } if ( $current_style == 'italic' ) { $current_style = '400italic'; } $font_style = ( strpos( $current_style, 'italic' ) ) ? 'font-style: italic;' : ''; $font_weight = 'font-weight: ' . intval( $current_style ) . ';';