├── .gitignore
├── assets
    ├── style.css
    └── script.js
├── plugin.php
├── google-font.php
├── control.php
├── README.md
└── google-font-collection.php


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .AppleDouble
 3 | .LSOverride
 4 | Icon
 5 | 
 6 | 
 7 | # Thumbnails
 8 | ._*
 9 | 
10 | # Files that might appear on external disk
11 | .Spotlight-V100
12 | .Trashes


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
 1 | .fontPickerCustomControl .fancyDisplay{
 2 | 	display: none;
 3 | }
 4 | 	.fontPickerCustomControl .fancyDisplay ul{
 5 | 		list-style: none;
 6 | 		margin: 0;
 7 | 		padding: 0;
 8 | 	}
 9 | 		.fontPickerCustomControl .fancyDisplay ul li{
10 | 			cursor: pointer;
11 | 			float: left;
12 | 			font-size:1.6em;
13 | 			margin: .3em 5% .3em 0;
14 | 			padding: 2% 0;
15 | 			padding-right: 2%;
16 | 			width: 40%;
17 | 		}


--------------------------------------------------------------------------------
/plugin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 | Plugin Name: Google Font Picker Control
 4 | Plugin URI:
 5 | Description: This plugin creates a new control in the theme customizer to help users pick Google Web Fonts.
 6 | Version: 1.1
 7 | Author: Patrick Rauland
 8 | Author URI: http://www.patrickrauland.com
 9 | 
10 | Copyright (C) 2012 Patrick Rauland
11 | 
12 | */
13 | 
14 | /**
15 |  * Include font classes
16 | **/ 
17 | require_once( 'google-font.php' );
18 | require_once( 'google-font-collection.php' );
19 | 
20 | /**
21 |  * Include control
22 |  * only load this class when the theme customizer is loaded
23 | **/
24 | add_action( 'customize_register', 'google_font_picker_control_customize_register' );
25 | function google_font_picker_control_customize_register()
26 | {
27 | 	require_once( 'control.php' );
28 | }


--------------------------------------------------------------------------------
/google-font.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Google_Font Class
 4 | **/
 5 | class Google_Font
 6 | {
 7 | 	private $title; // the name of the font
 8 | 	private $location; // the http location of the font file
 9 | 	private $cssDeclaration; // the css declaration used to reference the font
10 | 	private $cssClass; // the css class used in the theme customizer to preview the font
11 | 
12 | 	/**
13 | 	 * Constructor
14 | 	**/
15 | 	public function __construct($title, $location, $cssDeclaration, $cssClass)
16 | 	{
17 | 		$this->title = $title;
18 | 		$this->location = $location;
19 | 		$this->cssDeclaration = $cssDeclaration;
20 | 		$this->cssClass = $cssClass;
21 | 	}
22 | 
23 | 	/**
24 | 	 * Getters
25 | 	 * taken from: http://stackoverflow.com/questions/4478661/getter-and-setter
26 | 	**/
27 | 	public function __get($property) 
28 | 	{
29 | 		if (property_exists($this, $property)) {
30 | 			return $this->$property;
31 | 		}
32 | 	}
33 | } // Custom_Font


--------------------------------------------------------------------------------
/assets/script.js:
--------------------------------------------------------------------------------
 1 | /**
 2 | * Hide default select box, replace with fancy font picker
 3 | */
 4 | jQuery(document).ready(function($) {
 5 | 	// initialize the custom control for the font picker
 6 | 	$(".fontPickerCustomControl").fontPickerCustomControl();
 7 | });
 8 | 
 9 | /**
10 | * A small jquery plugin that does all of the hard work
11 | */
12 | (function( $ ) {
13 | 	$.fn.fontPickerCustomControl = function() {
14 | 
15 | 		//return the 'this' selector to maintain jquery chainability
16 | 		return this.each(function() {
17 | 
18 | 			// cache this selector for further use
19 | 			thisFontPickerCustomControl = this;
20 | 
21 | 			// hide select box
22 | 			$("select", this).hide();
23 | 
24 | 			// show fancy content
25 | 			$(".fancyDisplay", this).show();
26 | 
27 | 			// add event listeners to fancy display
28 | 			$(".fancyDisplay ul li").on("click", function(event){
29 | 				// get index of clicked element
30 | 				var index = $(".fancyDisplay ul li", thisFontPickerCustomControl).index(this);
31 | 				
32 | 				// unselect all options
33 | 				$('select option', thisFontPickerCustomControl).removeAttr('selected');
34 | 
35 | 				// select new element
36 | 				// simulate a change
37 | 				$('select :nth-child('+(index+1)+')', thisFontPickerCustomControl).attr('selected', 'selected').change();
38 | 			});
39 | 
40 | 		});
41 | 
42 | 	};
43 | })( jQuery );


--------------------------------------------------------------------------------
/control.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Google_Font_Picker_Custom_Control Class
 4 | **/
 5 | class Google_Font_Picker_Custom_Control extends WP_Customize_Control
 6 | {
 7 | 	public $fonts;
 8 | 
 9 | 	/**
10 | 	 * Enqueue the styles and scripts
11 | 	**/
12 | 	public function enqueue()
13 | 	{
14 | 		// styles
15 | 		wp_register_style( 'font-picker-custom-control', plugins_url( 'assets/style.css', __FILE__ ));
16 | 		wp_enqueue_style( 'font-picker-custom-control' );
17 | 	
18 | 		// scripts
19 | 		wp_register_script( 'font-picker-custom-control', plugins_url( 'assets/script.js', __FILE__ ));
20 | 		wp_enqueue_script( 'font-picker-custom-control' );
21 | 	}
22 | 
23 | 	/**
24 | 	 * Render the content on the theme customizer page
25 | 	**/
26 | 	public function render_content()
27 | 	{
28 | 		if ( empty( $this->choices ) )
29 | 		{
30 | 			// if there are no choices then don't print anything
31 | 			return;
32 | 		}
33 | 
34 | 		//print links to css files
35 | 		$this->fonts->printThemeCustomizerCssLocations();
36 | 
37 | 		//print css to display individual fonts
38 | 		$this->fonts->printThemeCustomizerCssClasses();
39 | 		?>
40 | 		<div class="fontPickerCustomControl">
41 | 			<select <?php $this->link(); ?>>
42 | 				<?php
43 | 				foreach ( $this->choices as $value => $label )
44 | 					echo '<option value="' . esc_attr( $label ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
45 | 				?>
46 | 			</select>
47 | 			<div class="fancyDisplay">
48 | 				<ul>
49 | 					<?php
50 | 					$cssClassArray = $this->fonts->getCssClassArray();
51 | 					foreach ($cssClassArray as $key => $value)
52 | 					{
53 | 						?>
54 | 						<li class="<?= $value; ?>">WebFonts</li>
55 | 						<?php
56 | 					}
57 | 					?>
58 | 				</ul>
59 | 			</div>
60 | 		</div>
61 | 		<?php
62 | 	}
63 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Google Font Picker Control
 2 | 
 3 | ## Description
 4 | 
 5 | This WordPress plugin creates a new control type for the [WordPress Theme Customizer](http://codex.wordpress.org/Theme_Customization_API). It will allow you to easily create a fancy looking Google Web Font picker.
 6 | 
 7 | ## Usage
 8 | 
 9 | 1. Include & activate the plugin
10 | 2. Pick out your favorite [Google Web Fonts](http://www.google.com/webfonts)
11 | 3. Open your functions.php file
12 | 4. Save your favorite fonts in an array like so: 
13 | 
14 | 	``` php
15 | 	$customFontFamilies;
16 | 	if (class_exists('Google_Font_Collection'))
17 | 	{
18 | 		$fonts[] = array(
19 | 			"title" => "Ubuntu Condensed", 
20 | 			"location" => "Ubuntu+Condensed", 
21 | 			"cssDeclaration" => "'Ubuntu Condensed', sans-serif", 
22 | 			"cssClass" => "ubuntuCondensed"
23 | 		);
24 | 		$customFontFamilies = new Google_Font_Collection($fonts);
25 | 	}
26 | 	``` 
27 | 	* **title** - the title you wish the user to see.
28 | 	* **location** - the query string on the stylesheet for the google font. If the file name for the font is `http://fonts.googleapis.com/css?family=Ubuntu+Condensed` then the `location` should be `Ubuntu+Condensed`.
29 | 	* **cssDeclaration** - the code to be applied to the `font-family` css property. You can keep is the same as Google suggests or you can set up your own fallbacks.
30 | 	* **cssClass** - the CSS class for the theme cusomizer. You can create any CSS class you want.
31 | 
32 | 5. Create the control
33 | 		
34 | 	``` php
35 | 	if (class_exists('Google_Font_Picker_Custom_Control'))
36 | 	{ 
37 | 		// make sure we have the control included
38 | 		$wp_customize->add_control( new Google_Font_Picker_Custom_Control( $wp_customize, 'font_family_control', array(
39 | 			'label'				=> __( 'Font Family', 'mytheme' ),
40 | 			'section'			=> 'mytheme_new_section_fonts',
41 | 			'settings'			=> 'font_family',
42 | 			'choices' 			=> $customFontFamilies->getFontFamilyNameArray(),
43 | 			'fonts'				=> $customFontFamilies
44 | 		)));
45 | 	}
46 | 	```
47 | 
48 | 
49 | ## Results
50 | 
51 | ![screenshot](http://img.photobucket.com/albums/v357/BFTrick/Web/google-font-picker-custom-tool-for-wordpress_zps76ece86d.png)
52 | 
53 | ## FAQ
54 | 
55 | 1. **Can I only add one font to the $fonts array in step 4?**
56 | 
57 | 	No, you can add as many as you like. IMO eight choices looks pretty and gives the user tons of options.
58 | 
59 | 2. **What's up with the class_exists() functions?**
60 | 
61 | 	Those are there so that if you were to ever deactivate or uninstall the plugin that your site wouldn't crash. If you do uninstall the plugin the control will simply not load. There shouldn't be any errors.
62 | 
63 | ## Version
64 | 
65 | **1.1**
66 | 
67 | * Updated array select box to save font names instead of array indices. See issue #1.
68 | 
69 | **1.0**
70 | 
71 | * Initial release
72 | 


--------------------------------------------------------------------------------
/google-font-collection.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Google Font_Collection Class
  4 | **/
  5 | // this file controls all of the data for the custom fonts used in the theme customizer
  6 | 
  7 | // the Google_Font_Collection object is a wrapper that holds all of the individual custom fonts
  8 | class Google_Font_Collection
  9 | {
 10 | 	private $fonts;
 11 | 
 12 | 	/**
 13 | 	 * Constructor
 14 | 	**/
 15 | 	public function __construct($fonts)
 16 | 	{
 17 | 		if(empty($fonts))
 18 | 		{
 19 | 			//we didn't get the required data
 20 | 			return false;
 21 | 		}
 22 | 
 23 | 		// create fonts
 24 | 		foreach ($fonts as $key => $value) 
 25 | 		{
 26 | 			$this->fonts[$value["title"]] = new Google_Font($value["title"], $value["location"], $value["cssDeclaration"], $value["cssClass"]);
 27 | 		}
 28 | 	}
 29 | 
 30 | 	/**
 31 | 	 * getFontFamilyNameArray Function
 32 | 	 * this function returns an array containing all of the font family names
 33 | 	**/
 34 | 	function getFontFamilyNameArray()
 35 | 	{
 36 | 		$result;
 37 | 		foreach ($this->fonts as $key => $value) 
 38 | 		{
 39 | 			$result[] = $value->__get("title");
 40 | 		}
 41 | 		return $result;
 42 | 	}
 43 | 
 44 | 	/**
 45 | 	 * getTitle
 46 | 	 * this function returns the font title
 47 | 	**/
 48 | 	function getTitle($key)
 49 | 	{
 50 | 		return $this->fonts[$key]->__get("title");
 51 | 	}
 52 | 
 53 | 	/**
 54 | 	 * getLocation
 55 | 	 * this function returns the font location
 56 | 	**/
 57 | 	function getLocation($key)
 58 | 	{
 59 | 		return $this->fonts[$key]->__get("location");
 60 | 	}
 61 | 
 62 | 	/**
 63 | 	 * getCssDeclaration
 64 | 	 * this function returns the font css declaration
 65 | 	**/
 66 | 	function getCssDeclaration($key)
 67 | 	{
 68 | 		return $this->fonts[$key]->__get("cssDeclaration");
 69 | 	}
 70 | 
 71 | 
 72 | 	/**
 73 | 	 * getCssClassArray
 74 | 	 * this function returns an array of css classes
 75 | 	 * this function is used when displaying the fancy list of fonts in the theme customizer
 76 | 	 * this function is used to send a JS file an array for the postMessage transport option in the theme customizer
 77 | 	**/
 78 | 	function getCssClassArray()
 79 | 	{
 80 | 		$result;
 81 | 		foreach ($this->fonts as $key => $value) 
 82 | 		{
 83 | 			$result[$value->__get("title")] = $value->__get("cssClass");
 84 | 		}
 85 | 		return $result;
 86 | 	}
 87 | 
 88 | 	/**
 89 | 	 * getTotalNumberOfFonts
 90 | 	 * this function returns the total number of fonts
 91 | 	**/
 92 | 	function getTotalNumberOfFonts()
 93 | 	{
 94 | 		return count($this->fonts);
 95 | 	}
 96 | 
 97 | 	/**
 98 | 	 * printThemeCustomizerCssLocations
 99 | 	 * this function prints the links to the css files for the theme customizer
100 | 	**/
101 | 	function printThemeCustomizerCssLocations()
102 | 	{
103 | 		foreach ($this->fonts as $key => $value) 
104 | 		{
105 | 			?>
106 | 			<link href="http://fonts.googleapis.com/css?family=<?= $value->__get("location"); ?>" rel='stylesheet' type='text/css'>
107 | 			<?php
108 | 		}
109 | 	}
110 | 
111 | 	/**
112 | 	 * printThemeCustomizerCssClasses
113 | 	 * this function prints the theme customizer css classes necessary to display all of the fonts
114 | 	**/
115 | 	function printThemeCustomizerCssClasses()
116 | 	{
117 | 		?>
118 | 		<style type="text/css">
119 | 			<?php
120 | 			foreach ($this->fonts as $key => $value) 
121 | 			{
122 | 				?>
123 | 				.<?=$value->__get("cssClass")?>{
124 | 					font-family: <?= $value->__get("cssDeclaration"); ?>;
125 | 				}
126 | 				<?php
127 | 			}
128 | 			?>
129 | 		</style>
130 | 		<?php 
131 | 	}
132 | 
133 | } // Font_Collection


--------------------------------------------------------------------------------