How To Integrate Font Options In Your WordPress Theme

Once I was looking for change my font style  through while going through WordPress theme customization for one of our client, but I haven’t found the font options in my admin panel. I have found many plugin regarding on this but I would like to have this time in our WordPress Theme dashboard without using any plugin.

WordPress Theme Font Options

So, in this wordpress theme customization article, we’ll integrate font options directly into the WordPress Theme’s options. We would like to use Google Web Fonts in our font directory, which is more significant to use as web font in present day for our website because it is easy to import from http://www.google.com/fonts , fast and surprisingly free as like as all of Google utility product.

So let’s start to integrate the font options. First we need to open our functions.php file and add a typography setting page:

add_action( 'admin_menu', 'my_fonts' );  

function my_fonts() {  

    add_theme_page( 'Fonts', 'Fonts', 'edit_theme_options', 'fonts', 'fonts' );  

typography page

WordPress Admin Panel

Now we have to add code for some basic settings _fields


function fonts() {  

?>  

    <div class="wrap">  

        <div><br></div>  

        <h2>Fonts</h2>  

  

        <form method="post" action="options.php">  

            <?php wp_nonce_field( 'update-fonts' ); ?>  

            <?php settings_fields( 'fonts' ); ?>  

            <?php do_settings_sections( 'fonts' ); ?>  

            <?php submit_button(); ?>  

        </form>  

    </div>  

<?php  

}  

font form

This code allow to shows a dropdown of all the fonts that users can choose and allow them to change it.


add_action( 'admin_init', 'font_init' );  

function font_init() {  

    register_setting( 'fonts', 'fonts' );  

  

    // Settings fields and sections  

    add_settings_section( 'font_section', 'Typography Options', 'font_description', 'fonts' );  

    add_settings_field( 'body-font', 'Body Font', 'body_font_field', 'fonts', 'font_section' );  

So, we have added setting section and setting field here. Now we have to add setting called fonts. Here we will be stored our font data or options. So paste the following code


function font_description() {  

    echo 'Choose the body font.';  

}  

function body_font_field() {  

    $options = (array) get_option( 'fonts' );  

    $fonts = get_fonts();  

  

    if ( isset( $options['body-font'] ) )  

        $current = $options['body-font'];  

    else  

        $current = 'arial';  

  

    ?>  

        <select name="fonts[body-font]">  

        <?php foreach( $fonts as $key => $font ): ?>  

            <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>  

        <?php endforeach; ?>  

        </select>  

    <?php  

Now we have to get font options which we made in the init action. We need to set current font , otherwise it will default to Arial. Then we create the array with google web fonts and using a foreach loop which go through our array of available fonts. So, add this following code


function get_fonts() {  

    $fonts = array(  

        'arial' => array(  

            'name' => 'Arial',  

            'font' => '',  

            'css' => "font-family: Arial, sans-serif;"  

        ),  

        'Port Lligat Slab' => array(  

            'name' => 'Port Lligat Slab',  

            'font' => ' @import url(http://fonts.googleapis.com/css?family=Port+Lligat+Slab);',  

            'css' => " font-family: 'Port Lligat Slab', serif;"  

        ),  

        'Roboto' => array(  

            'name' => 'Roboto',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=Roboto);',  

            'css' => "font-family: 'Roboto', sans-serif;"  

        ),

      'Happy Monkey' => array(  

            'name' => 'Happy Monkey ',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);',  

            'css' => "font-family: 'Happy Monkey', cursive;"

),

'Crushed' => array(  

            'name' => 'Crushed',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=Crushed);',  

            'css' => " font-family: 'Crushed', cursive;"

),

'New Rocker ' => array(  

            'name' => 'New Rocker ',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=New+Rocker);',  

            'css' => "font-family: 'New Rocker', cursive;"

),

'Rosario' => array(  

            'name' => 'Rosario',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=Rosario);',  

            'css' => "font-family: 'Rosario', sans-serif;"

  )

    );  

     return apply_filters( 'get_fonts', $fonts );  

TIPS2

If you want to use a custom font, then will be hosted on your FTP and replace the portion of code @import with @font-face and change the url where your fonts file is hosted

Now we have to create wp_head action that will be added the font style to our WordPress theme. Paste the following code


add_action( 'wp_head', 'font_head' );  

function font_head() {  

    $options = (array) get_option( 'fonts' );  

    $fonts = get_fonts();  

    $body_key = 'arial';  

  

    if ( isset( $options['body-font'] ) )  

        $body_key = $options['body-font'];  

  

    if ( isset( $fonts[ $body_key ] ) ) {  

        $body_font = $fonts[ $body_key ];  

  

        echo '<style>';  

        echo $body_font['font'];  

        echo 'body { ' . $body_font['css'] . ' } ';  

        echo '</style>';  

    }  

Finally we have the font options in our WordPress Theme, where from we can select our blogs body font. The font panel looks like below picture

created Font panel

Also you have find all the code together below. You just copy the code and paste into function.php of your WordPress theme and find the font option under Appearance of WordPress Dashboard.


<?php

/*Typography settings*/

add_action( 'admin_menu', 'my_fonts' );  

function my_fonts() {  

    add_theme_page( 'Fonts', 'Fonts', 'edit_theme_options', 'fonts', 'fonts' );  



function fonts() {  

?>  

    <div class="wrap">  

        <div><br></div>  

        <h2>Fonts</h2>    

        <form method="post" action="options.php">  

            <?php wp_nonce_field( 'update-fonts' ); ?>  

            <?php settings_fields( 'fonts' ); ?>  

            <?php do_settings_sections( 'fonts' ); ?>  

            <?php submit_button(); ?>  

        </form>  

    </div>  

<?php  


 
add_action( 'admin_init', 'font_init' );  

function font_init() {  

    register_setting( 'fonts', 'fonts' );  

  

    // Settings fields and sections  

    add_settings_section( 'font_section', 'Typography Options', 'font_description', 'fonts' );  

    add_settings_field( 'body-font', 'Body Font', 'body_font_field', 'fonts', 'font_section' );  



function font_description() {  

    echo 'Choose the body font.';  



function body_font_field() {  

    $options = (array) get_option( 'fonts' );  

    $fonts = get_fonts();  

 
    if ( isset( $options['body-font'] ) )  

        $current = $options['body-font'];  

    else  

        $current = 'arial';  
  
    ?>  

        <select name="fonts[body-font]">  

        <?php foreach( $fonts as $key => $font ): ?>  

            <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>  

        <?php endforeach; ?>  

        </select>  

    <?php  

 
function get_fonts() {  

    $fonts = array(  

        'arial' => array(  

            'name' => 'Arial',  

            'font' => '',  

            'css' => "font-family: Arial, sans-serif;"  

        ),  

        'Port Lligat Slab' => array(  

            'name' => 'Port Lligat Slab',  

            'font' => ' @import url(http://fonts.googleapis.com/css?family=Port+Lligat+Slab);',  

            'css' => " font-family: 'Port Lligat Slab', serif;"  

        ),  

        'Roboto' => array(  

            'name' => 'Roboto',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=Roboto);',  

            'css' => "font-family: 'Roboto', sans-serif;"  

        ),

      'Happy Monkey' => array(  

            'name' => ' Happy Monkey ',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);',  

            'css' => "font-family: 'Happy Monkey', cursive;"

),

'Crushed' => array(  

            'name' => 'Crushed',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=Crushed);',  

            'css' => " font-family: 'Crushed', cursive;"

),

'New Rocker ' => array(  

            'name' => 'New Rocker ',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=New+Rocker);',  

            'css' => "font-family: 'New Rocker', cursive;"

),

'Rosario' => array(  

            'name' => 'Rosario',  

            'font' => '@import url(http://fonts.googleapis.com/css?family=Rosario);',  

            'css' => "font-family: 'Rosario', sans-serif;"

      )                       

    );  

    return apply_filters( 'get_fonts', $fonts );  



 add_action( 'wp_head', 'font_head' );  

function font_head() {  

    $options = (array) get_option( 'fonts' );  

    $fonts = get_fonts();  

    $body_key = 'arial';  

  
    if ( isset( $options['body-font'] ) )  

        $body_key = $options['body-font'];  
  

    if ( isset( $fonts[ $body_key ] ) ) {  

        $body_font = $fonts[ $body_key ];  
  
        echo'<style>';  

        echo $body_font['font'];  

        echo 'body { ' . $body_font['css'] . ' } ';  

        echo '</style>';  
    }  

 ?>

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

Leave a Reply

Your email address will not be published. Required fields are marked *