This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

[Theme Options API] How to use the "typography" options type

  • Creator
  • #3984

    Alright so typography and background are a bit complex. Can you show examples on how to implement these features into a theme options tab please?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
  • #4009
    Jason Bobich

    When working with the typography option type, there is essentially three items you can choose to allow the user to set:

    1. Font Size
    2. Font Color
    3. Font Face (standard web font or Google web font)

    With each of the items you can choose which ones you want the user to be able to set them or not. You do this by passing in an array through the “atts” key of larger option array. So, let’s say you wanted to allow the user to set all three items, your complete option array would look like this:

    	'name' 		=> 'Font Example',
    	'desc' 		=> 'Description of option...',
    	'id' 		=> 'my_font_option',
    	'atts'		=> array('size', 'color', 'face'),
    	'type' 		=> 'typography'

    (Make sure to take note of the “atts” key.)

    So, let’s look at how you could utilize this option.

    $font_option = themeblvd_get_option( 'my_font_option' );

    Assuming you’ve allowed the user to set all three attributes, your option is going to end up saved as an array with values something like this:

    	size 	=> 12px,
    	color 	=> #000,
    	face 	=> arial,
    	google 	=> 

    If the user selected a Google font, it will look something like this:

    	size 	=> 12px,
    	color 	=> #000,
    	face 	=> google,
    	google 	=> Google Font Name

    So, now that you’ve got your option, it’s up to you to decide how you want to implement this into your site. Here’s a stripped down example of how I do it in other themes that have font options.

    function my_custom_font() {
    	// Get saved option
    	$font_option = themeblvd_get_option( 'my_font_option' );
    	// If user selected a google font with this option, 
    	// include those font files from google.
    	themeblvd_include_google_fonts( $font_option );
    	// If you had multiple font options, you could 
    	// do this, and let it check all of them:
    	// themeblvd_include_google_fonts( $font_option, $font_option_2 );
    	// Output basic inline styles incorporating 
    	// font options.
    	.whatever {
    		font-family: &lt;?php echo themeblvd_get_font_face($font_option); ?&gt;;
    		font-size: &lt;?php echo $font_option['size'];?&gt;;
    		color: &lt;?php echo $font_option['color'];?&gt;;
    add_action( 'wp_head', 'my_custom_font' );

    This is extremely useful! Thank you for building a brilliant framework!



    This one’s a keeper.

    While we’re on the typography subject, how can I add custom web fonts to the list (or any other font for that matter)?
    I couldn’t find any documentation regarding the typography Formatting Options.


    Jason Bobich

    how can I add custom web fonts to the list (or any other font for that matter)?

    When the option gets displayed it does pull from a filterable list that you can modify if you want. See the function called “themeblvd_recognized_font_faces” found in this file: /framework/admin/options/options-sanitize.php

    You’ll see it has a filter “themeblvd_recognized_font_faces” that you can use to modify the array of selectable font names. Example —

    function my_font_faces( $fonts ){
    	$fonts['my-new-font'] = 'My New Font';
    	return $fonts;
    add_filter( 'themeblvd_recognized_font_faces', 'my_font_faces' );

    And then however you work with the fonts on the frontend of your site you can check for those selected names that you’ve added.


    Thanks for the tip!

    It is worth mentioning that you have a git code on the same subject at this address:

    Jason Bobich

    Wow, I do not remember ever making that.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.