vlad.olaru

pixelgrade

George Olaru

Razvan Onofrei

Madalin Gorbanescu

<p>With <a href="https://github.com/pixelgrade/customify" rel="nofollow ugc">Customify</a>, developers can easily create <strong>advanced theme-specific options</strong> inside the WordPress Customizer. Using those options, a user can make presentational changes without having to know or edit the theme code.</p>
<p>This plugin is <strong>primarily intended</strong> to be used together with <a href="https://wordpress.org/themes/author/pixelgrade/" rel="ugc">Pixelgrade themes</a>. So the best way to get acquainted with it’s capabilities is to study the way <a href="https://github.com/pixelgrade/rosa2-lite/tree/master/inc/integrations/customify" rel="nofollow ugc">one of Pixelgrade’s themes</a> integrates with it.</p>
<p><strong>Made with care by Pixelgrade</strong></p>
<h3>Credits</h3>
<ul>
<li><a href="https://select2.github.io" rel="nofollow ugc">Select2</a> JavaScript library – License: MIT</li>
<li><a href="https://github.com/NV/CSSOM" rel="nofollow ugc">CSSOM.js</a> JavaScript library – License: MIT</li>
<li><a href="https://ace.c9.io/" rel="nofollow ugc">Ace Editor</a> JavaScript editor – License: BSD</li>
<li><a href="https://github.com/natedavisolds/jquery-react" rel="nofollow ugc">jQuery React</a> JavaScript jQuery plugin – License: MIT</li>
<li><a href="https://github.com/typekit/webfontloader" rel="nofollow ugc">Web Font Loader</a> JavaScript library – License: Apache 2.0</li>
<li><a href="http://fusejs.io" rel="nofollow ugc">Fuse.js</a> Lightweight fuzzy-search JavaScript library – License: Apache 2.0</li>
<li>Default <a href="https://unsplash.com/photos/OgM4RKdr2kY" rel="nofollow ugc">image</a> for Style Manager Color Palette control – License: <a href="https://unsplash.com/license" rel="nofollow ugc">Unsplash</a></li>
</ul>


Customify

Customify is a theme Customizer booster to easily customize Fonts, Colors, and other options for a certain WordPress theme.

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!

Customify vs Styleguide – Custom Fonts and Colors