Dave Jesch

SpectrOMTech

ServerPress

Steveorevo

Gregg Franklin

<p>This utility plugin provides the ability to configure the color of the Admin Bar seen in the WordPress Dashboard and allows setting a message that will appear within the Admin Bar. This allows you to more easily identify when you’re working on Local, Staging and Live WordPress installations.</p>
<p><strong>Usage Scenarios:</strong></p>
<p>The Admin Color Bar plugin is useful when working with multiple installs of WordPress, such as when you have a local development environment, a staging site as well as a live site.</p>
<p>By setting the Admin Bar’s background color to Orange on a staging site, and Red for a local site, you can more easily identify which site you’re working on. This reduces the possibility that you’ll make errors by performing actions on the wrong site.</p>
<p>If you are using DesktopServer for your local development and would like to use the Admin Color Bar plugin as a Design Time plugin, you can install this in your /Applications/XAMPP/ds-plugins/ directory on Macintosh or the C:\xampplite\ds-plugins\ directory on Windows and it can then be configured to automatically start for all of your local development web sites. This allows you to use the plugin in your Local environment, where it’s needed and not to deploy it to your Live environment where it may not be needed. For more information on DesktopServer and local development tools, please visit our web site at: https://serverpress.com/get-desktopserver/</p>
<p><strong>How it Works:</strong></p>
<p>The plugin provides configuration options that allow you to select a background color and text color for the Admin Bar. You can also select a message that will be displayed within the Admin Bar to provide additional information to the users of the site.</p>
<p>The configuration settings will be seen by all users on the site. If you are using the plugin in a MultiSite environment, the settings are not shared among all the sites. You will need to configure each site on the network.</p>
<p><strong>Support:</strong></p>
<blockquote>
<p><strong>Support Details:</strong> We are happy to provide support and help troubleshoot issues. Visit our Contact page at <a href="http://serverpress.com/contact/" rel="nofollow ugc">http://serverpress.com/contact/</a>. Users should know however, that we check the WordPress.org support forums once a week on Wednesdays from 6pm to 8pm PST (UTC -8).</p>
</blockquote>
<p>ServerPress, LLC is not responsible for any loss of data that may occur as a result of using this tool. We strongly recommend performing a site and database backup before testing and using this tool. However, should you experience such an issue, we want to know about it right away.</p>
<p>We welcome feedback and Pull Requests for this plugin via our public GitHub repository located at: <a href="https://github.com/ServerPress/admin-color-bar" rel="nofollow ugc">https://github.com/ServerPress/admin-color-bar</a>.</p>


Admin Color Bar

Configure the color of the admin bar in the WordPress admin area.

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!

Admin Color Bar vs Styleguide – Custom Fonts and Colors