vlad.olaru

pixelgrade

George Olaru

Razvan Onofrei

Madalin Gorbanescu

<p>Style Manager provides you with the tools to get your site’s style to match your personality while retaining overall cohesion and balance.</p>
<p>Design is at the forefront of everything that Style Manager provides. We want you to feel at ease when customizing your blog, feeling confident that the end results will match the quality of your content.</p>
<p>This is why we are actively integrating Style Manager with free themes on WordPress.org and collaborating with theme authors to take advantage and enhance their user’s customizing experience.</p>
<p><strong>Made with love by <a href="https://pixelgrade.com" rel="nofollow ugc">Pixelgrade</a></strong></p>
<h3>Issues</h3>
<p>If you identify any errors or have an idea for improving the plugin, please open an <a href="https://github.com/pixelgrade/style-manager/issues?stage=open" rel="nofollow ugc">issue</a>. We’re more than excited to see what the community thinks of this project, and we welcome your input!</p>
<p>If GitHub is not your thing, but you are passionate about Style Manager and want to help us make it better, don’t hesitate to <a href="https://pixelgrade.com/contact/" rel="nofollow ugc">reach us</a>.</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://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><a href="https://carbonfields.net/" rel="nofollow ugc">CarbonFields</a> WordPress Custom Fields Library – License: GPLv2</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>


Style Manager – Auto-magical system to style your entire WordPress site

Auto-magical system to style your WordPress site.

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!

Style Manager – Auto-magical system to style your entire WordPress site vs Styleguide – Custom Fonts and Colors