binarymoon

<p>Quickly and easily edit fonts and colors in your WordPress themes using the WordPress Customizer so that you can get live previews before saving the new settings.</p>
<p>Perfect for giving your website a unique look without having to hire a designer or make code changes yourself.</p>
<p>All default WordPress themes are fully supported and support for more themes will be added in the future. All other themes can customize fonts.</p>
<p>Styleguide uses a carefully chosen selection of the top 45 Google Fonts to give you a lot of options for personalising your site.</p>
<h4>Features</h4>
<ul>
<li>Choose from a varied selection of the top Google fonts in any theme</li>
<li>Additional themes (listed below) support editing colors</li>
<li>Filter fonts based on character set – great for non latin languages such as Russian</li>
<li>Developer functionality for adding support to other themes, and for adding additional fonts.</li>
</ul>
<h4>Supported Character Sets</h4>
<p>Styleguide supports fonts that have a variety of different character sets. This makes selecting a font for your language super easy. The supported character sets are:</p>
<ul>
<li>Cyrillic</li>
<li>Devanagari</li>
<li>Greek</li>
<li>Hebrew</li>
<li>Latin</li>
<li>Vietnamese</li>
</ul>
<p>By default Styleguide uses Latin. To limit the font choice to those supporting your character set you should go to <em>Settings → General → Character Set</em> and select your set there.</p>
<h4>Supported Themes</h4>
<ul>
<li><a href="https://wordpress.org/themes/kent" rel="ugc">Kent</a></li>
<li><a href="https://wordpress.org/themes/bromley" rel="ugc">Bromley</a></li>
<li><a href="https://prothemedesign.com/theme/romero/" rel="nofollow ugc">Romero</a></li>
<li><a href="https://prothemedesign.com/theme/puzzle/" rel="nofollow ugc">Puzzle</a></li>
<li><a href="https://prothemedesign.com/theme/chronicle/" rel="nofollow ugc">Chronicle</a></li>
<li><a href="https://prothemedesign.com/theme/broadsheet/" rel="nofollow ugc">Broadsheet</a></li>
<li><a href="https://prothemedesign.com/theme/lens/" rel="nofollow ugc">Lens</a></li>
<li><a href="https://prothemedesign.com/theme/monet/" rel="nofollow ugc">Monet</a></li>
<li><a href="https://prothemedesign.com/theme/mimbopro/" rel="nofollow ugc">Mimbo Pro</a></li>
<li><a href="https://prothemedesign.com/theme/opti/" rel="nofollow ugc">Opti</a></li>
<li><a href="https://themetry.com/shop/adaline/" rel="nofollow ugc">Adaline</a></li>
<li><a href="https://wordpress.org/themes/twentyten" rel="ugc">Twenty Ten</a></li>
<li><a href="https://wordpress.org/themes/twentyeleven" rel="ugc">Twenty Eleven</a></li>
<li><a href="https://wordpress.org/themes/twentytwelve" rel="ugc">Twenty Twelve</a></li>
<li><a href="https://wordpress.org/themes/twentythirteen" rel="ugc">Twenty Thirteen</a></li>
<li><a href="https://wordpress.org/themes/twentyfourteen" rel="ugc">Twenty Fourteen</a></li>
<li><a href="https://wordpress.org/themes/twentyfifteen" rel="ugc">Twenty Fifteen</a></li>
<li><a href="https://wordpress.org/themes/twentysixteen" rel="ugc">Twenty Sixteen</a></li>
</ul>
<p>Developers can add support for their themes quite easily – see the ‘Other Notes’ tab for more info.</p>
<p>If you’re in the market for a WordPress theme then you could check out my Premium GPL WordPress themes site here: https://prothemedesign.com/</p>
<h3>How To</h3>
<p>After downloading and installing the plugin you can go to the Customizer (Appearance > Customizer) and edit fonts and colors in the ‘Colors & Fonts’ panel.</p>
<h4>Adding Theme Support</h4>
<p>Styleguide allows any theme to add support through the <code>add_theme_support</code> command. For examples check out the theme-styles directory.</p>
<p>I have added an example of a basic implementation below. This code would be placed in your themes functions.php</p>
<pre><code>function prefix_add_styleguide_support() {

  // for properties check out the included theme styles as seen here:
  // https://github.com/BinaryMoon/styleguide/tree/master/theme-styles
  $properties = array(
    ...
  );
  add_theme_support( 'styleguide', $properties );

}

add_filter( 'after_setup_theme', 'prefix_add_styleguide_support' );
</code></pre>
<h4>Extra Fonts</h4>
<p>Styleguide currently offers developers a filter for adding additional fonts. You can use it as shown below</p>
<pre><code>function my_fonts( $font_list ) {
    $font_list['Cormorant Infant'] = array(
        'name' => 'Cormorant Infant',
        'family' => '"Cormorant Infant", serif',
        'weight' => '400,700',
        'sets' => array( 'latin' ),
    );
    $font_list['Poppins'] = array(
        'name' => 'Poppins',
        'family' => 'Poppins, sans-serif',
        'weight' => '400,700',
        'sets' => array( 'latin' ),
    );
    return $font_list;
}
add_filter( 'styleguide_get_fonts', 'my_fonts' );
</code></pre>


Styleguide – Custom Fonts and Colors

Styleguide allows you to customize fonts and colors in WordPress themes through the Customizer - no need to touch any code!

ghuger

richardgabriel

Hal Gatewood

<p>Finally a cool way to display color palettes on your site. This tiny little plugin gives you a cool way to display color palette on your pages.</p>
<p>Example of what it looks like:<br />
http://halgatewood.com/palettes/</p>
<p>Use the shortcode to and pass in a list of colors:</p>
<pre><code>[awe_palette colors="434858,5886c5,#f2674a,c6006d"]
</code></pre>
<p>Or you can call it directly with PHP in your theme:</p>
<pre><code><?php awesome_color_palettes( array('#cccccc', 'efefef', '666') ); ?>
</code></pre>
<p>You can include the # or not, it doesn’t care what you do.</p>
<p>Wait, there’s more. Create an <code>awesome-color-palette.php</code> file and put it in your theme folder and you can custom palettes for whatever you need.</p>
<p>It can handle 10 colors out of the box. To add more, simply create some CSS like below and add it to your style.css file in your theme.</p>
<pre><code>.awe-color-palette.count-20 .color { width: 5%; }
</code></pre>


Awesome Color Palettes

A cool way to display color palettes on your WordPress site.

Styleguide – Custom Fonts and Colors vs Awesome Color Palettes