Documentation

Everything you need to use WP Theme Options

Google Fonts

Illustrative image for the component output.

Illustrative image for the component output.

Defining in the Array

To insert this component on the Theme Options you’ll need to put the following code in the file functions.array.php.

$fuse_options[] = array(
  'name' => __('Google Font - Title','textdomain'),
  'description' => __('Some description here (not mandatory)','textdomain'),
  'id' => 'themeoptions_googletextID1',
  'std' => 'Oswald',
  'type' => 'google_font',
  'options' => array(
    'values' => array('PT Sans', 'Lato', 'Oswald'),
    'text' => 'This is a title preview',
    'font_size' => '42px'
  )
);

It’s really easy to configure, basically the array of values is for the Google Font names (should be exactly the same name as Google Fonts).

The text is the preview text that will appear in the box (as you can see in the image above).

The font_size it’s for the font size, it’s really cool for separate text from titles (as you can see in the image above).

How to use on your theme

Make sure you already defined the global variable in the file you want to use the Theme Options values (without this it won’t return the values):

global $fuseData;

After this, you just need to call the unique ID, for example:

echo $fuseData['themeoptions_googletextID1'];

How to queue dynamically:

add_action('wp_enqueue_scripts', 'fusecoders_frontend_enqueue');

function fusecoders_frontend_enqueue() {
  $protocol = is_ssl() ? 'https' : 'http';
  $fontID = str_replace(' ', '', $fuseData['themeoptions_googletextID1']);
  wp_enqueue_style( $fontID, "$protocol://fonts.googleapis.com/css?family=" . $fuseData['themeoptions_googletextID1'] );
}

Some ideas for you

This component can be used for multiple purposes, we highly recommend for this ones:

  • Change site fonts
  • Change specific text fonts