{"id":33874,"date":"2015-01-10T17:12:27","date_gmt":"2015-01-10T17:12:27","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/styleguide\/"},"modified":"2024-01-30T10:27:40","modified_gmt":"2024-01-30T10:27:40","slug":"styleguide","status":"publish","type":"plugin","link":"https:\/\/scn.wordpress.org\/plugins\/styleguide\/","author":15551,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.8.1","stable_tag":"trunk","tested":"6.5.0","requires":"4.5","requires_php":"","requires_plugins":null,"header_name":"Styleguide - Custom Fonts and Colors","header_author":"Ben Gillbanks","header_description":"","assets_banners_color":"62a965","last_updated":"2024-01-30 10:27:40","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/styleguide\/","header_author_uri":"https:\/\/prothemedesign.com\/","rating":5,"author_block_rating":0,"active_installs":3000,"downloads":95380,"num_ratings":7,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":"7"},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2524002,"resolution":"128x128","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2524002,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2524002,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":1234183,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":1234183,"resolution":"2","location":"assets","locale":""}},"screenshots":{"1":"An example of Twenty Eleven having it's fonts changed","2":"Twenty Thirteen with some alternate colors"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1257,1250,8289,356,2768],"plugin_category":[43,48,59],"plugin_contributors":[78702],"plugin_business_model":[],"class_list":["post-33874","plugin","type-plugin","status-publish","hentry","plugin_tags-color","plugin_tags-colors","plugin_tags-colour","plugin_tags-css","plugin_tags-customizer","plugin_category-customization","plugin_category-language-tools","plugin_category-utilities-and-tools","plugin_contributors-binarymoon","plugin_committers-binarymoon"],"banners":{"banner":"https:\/\/ps.w.org\/styleguide\/assets\/banner-772x250.png?rev=2524002","banner_2x":"https:\/\/ps.w.org\/styleguide\/assets\/banner-1544x500.png?rev=2524002","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/styleguide\/assets\/icon-128x128.png?rev=2524002","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/styleguide\/assets\/screenshot-1.png?rev=1234183","caption":"An example of Twenty Eleven having it's fonts changed"},{"src":"https:\/\/ps.w.org\/styleguide\/assets\/screenshot-2.png?rev=1234183","caption":"Twenty Thirteen with some alternate colors"}],"raw_content":"<!--section=description-->\n<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>\n\n<p>Perfect for giving your website a unique look without having to hire a designer or make code changes yourself.<\/p>\n\n<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>\n\n<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>\n\n<h4>Features<\/h4>\n\n<ul>\n<li>Choose from a varied selection of the top Google fonts in any theme<\/li>\n<li>Additional themes (listed below) support editing colors<\/li>\n<li>Filter fonts based on character set - great for non latin languages such as Russian<\/li>\n<li>Developer functionality for adding support to other themes, and for adding additional fonts.<\/li>\n<\/ul>\n\n<h4>Supported Character Sets<\/h4>\n\n<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>\n\n<ul>\n<li>Cyrillic<\/li>\n<li>Devanagari<\/li>\n<li>Greek<\/li>\n<li>Hebrew<\/li>\n<li>Latin<\/li>\n<li>Vietnamese<\/li>\n<\/ul>\n\n<p>By default Styleguide uses Latin. To limit the font choice to those supporting your character set you should go to <em>Settings &rarr; General &rarr; Character Set<\/em> and select your set there.<\/p>\n\n<h4>Supported Themes<\/h4>\n\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/themes\/kent\">Kent<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/themes\/bromley\">Bromley<\/a><\/li>\n<li><a href=\"https:\/\/prothemedesign.com\/theme\/romero\/\">Romero<\/a><\/li>\n<li><a href=\"https:\/\/prothemedesign.com\/theme\/puzzle\/\">Puzzle<\/a><\/li>\n<li><a href=\"https:\/\/prothemedesign.com\/theme\/chronicle\/\">Chronicle<\/a><\/li>\n<li><a href=\"https:\/\/prothemedesign.com\/theme\/broadsheet\/\">Broadsheet<\/a><\/li>\n<li><a href=\"https:\/\/prothemedesign.com\/theme\/lens\/\">Lens<\/a><\/li>\n<li><a href=\"https:\/\/prothemedesign.com\/theme\/monet\/\">Monet<\/a><\/li>\n<li><a href=\"https:\/\/prothemedesign.com\/theme\/mimbopro\/\">Mimbo Pro<\/a><\/li>\n<li><a href=\"https:\/\/prothemedesign.com\/theme\/opti\/\">Opti<\/a><\/li>\n<li><a href=\"https:\/\/themetry.com\/shop\/adaline\/\">Adaline<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentyten\">Twenty Ten<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentyeleven\">Twenty Eleven<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentytwelve\">Twenty Twelve<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentythirteen\">Twenty Thirteen<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentyfourteen\">Twenty Fourteen<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentyfifteen\">Twenty Fifteen<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentysixteen\">Twenty Sixteen<\/a><\/li>\n<\/ul>\n\n<p>Developers can add support for their themes quite easily - see the 'Other Notes' tab for more info.<\/p>\n\n<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>\n\n<h3>How To<\/h3>\n\n<p>After downloading and installing the plugin you can go to the Customizer (Appearance &gt; Customizer) and edit fonts and colors in the 'Colors &amp; Fonts' panel.<\/p>\n\n<h4>Adding Theme Support<\/h4>\n\n<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>\n\n<p>I have added an example of a basic implementation below. This code would be placed in your themes functions.php<\/p>\n\n<pre><code>function prefix_add_styleguide_support() {\n\n  \/\/ for properties check out the included theme styles as seen here:\n  \/\/ https:\/\/github.com\/BinaryMoon\/styleguide\/tree\/master\/theme-styles\n  $properties = array(\n    ...\n  );\n  add_theme_support( 'styleguide', $properties );\n\n}\n\nadd_filter( 'after_setup_theme', 'prefix_add_styleguide_support' );\n<\/code><\/pre>\n\n<h4>Extra Fonts<\/h4>\n\n<p>Styleguide currently offers developers a filter for adding additional fonts. You can use it as shown below<\/p>\n\n<pre><code>function my_fonts( $font_list ) {\n    $font_list['Cormorant Infant'] = array(\n        'name' =&gt; 'Cormorant Infant',\n        'family' =&gt; '\"Cormorant Infant\", serif',\n        'weight' =&gt; '400,700',\n        'sets' =&gt; array( 'latin' ),\n    );\n    $font_list['Poppins'] = array(\n        'name' =&gt; 'Poppins',\n        'family' =&gt; 'Poppins, sans-serif',\n        'weight' =&gt; '400,700',\n        'sets' =&gt; array( 'latin' ),\n    );\n    return $font_list;\n}\nadd_filter( 'styleguide_get_fonts', 'my_fonts' );\n<\/code><\/pre>\n\n<!--section=changelog-->\n<h4>1.8.1<\/h4>\n\n<ul>\n<li>Improve theme support.<\/li>\n<li>Improve coding standards, and fix potential XSS issues.<\/li>\n<\/ul>\n\n<h4>1.8<\/h4>\n\n<ul>\n<li>Add support for Bromley theme.<\/li>\n<li>Optimize colour contrast calculations.<\/li>\n<li>Improve text contrast for improved accessibility.<\/li>\n<\/ul>\n\n<h4>1.7.2<\/h4>\n\n<ul>\n<li>Fix Puzzle theme styles based on recent theme changes.<\/li>\n<\/ul>\n\n<h4>1.7.1<\/h4>\n\n<ul>\n<li>Tested with the latest version of WordPress.<\/li>\n<li>Add support for Carmack theme.<\/li>\n<li>Add Nunito and Nunito Sans fonts.<\/li>\n<\/ul>\n\n<h4>1.7<\/h4>\n\n<ul>\n<li>Add support for Romero theme<\/li>\n<li>Improve coding standards<\/li>\n<li>Scroll selected font into view when first opening the customizer to make it easier to see what is currently being used.<\/li>\n<li>Tweak customizer styles<\/li>\n<\/ul>\n\n<h4>1.6.1<\/h4>\n\n<ul>\n<li>More tweaks to Chronicle<\/li>\n<li>Add support for TwentySeventeen custom fonts<\/li>\n<li>Improve localizations further (ensure all text is written in American)<\/li>\n<\/ul>\n\n<h4>1.6<\/h4>\n\n<ul>\n<li>Fix Chronicle styles<\/li>\n<li>Make localizations work<\/li>\n<\/ul>\n\n<h4>1.5.2<\/h4>\n\n<ul>\n<li>Tweak css sanitization to allow more CSS rules<\/li>\n<li>Add support for Chronicle theme<\/li>\n<li>bump version number (now tested with WP 4.5.2)<\/li>\n<\/ul>\n\n<h4>1.5.1<\/h4>\n\n<ul>\n<li>improve support for Opti theme<\/li>\n<li>improve support for Monet theme<\/li>\n<li>bump version number (now tested with WP 4.5)<\/li>\n<li>change default font weight property so that it behaves more nicely<\/li>\n<\/ul>\n\n<h4>1.5<\/h4>\n\n<ul>\n<li>Various code and security improvements<\/li>\n<li>Add support for Adaline theme<\/li>\n<li>Improve Monet theme colors<\/li>\n<\/ul>\n\n<h4>1.4.1, 1.4.2 &amp; 1.4.3<\/h4>\n\n<ul>\n<li>fix bugs introduced with character sets<\/li>\n<\/ul>\n\n<h4>1.4<\/h4>\n\n<ul>\n<li>Add support for next years default theme - Twenty Sixteen (requires WP4.4)! :)<\/li>\n<li>Add a link to the Kent theme - which is out now - https:\/\/wordpress.org\/themes\/kent<\/li>\n<li>Option to select character set from <em>Settings &rarr; General<\/em><\/li>\n<li>Filters available fonts according to supported character sets<\/li>\n<li>Loads character sets as required<\/li>\n<\/ul>\n\n<h4>1.3.1<\/h4>\n\n<ul>\n<li>Better fallbacks for non latin fonts<\/li>\n<\/ul>\n\n<h4>1.3<\/h4>\n\n<ul>\n<li>Allow font weights to be selected for each font<\/li>\n<li>Improve font weights for more attractive letters<\/li>\n<li>Add support for some themes that have recently been submitted to wordpress.org repo<\/li>\n<li>Add support for more of my premium themes<\/li>\n<li>Fix a some minor bugs and add additional security<\/li>\n<li>Move screenshots to plugin assets directory to make download package a little smaller<\/li>\n<\/ul>\n\n<h4>1.2.1<\/h4>\n\n<ul>\n<li>make sure the font preview styles load<\/li>\n<\/ul>\n\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>add new fonts<\/li>\n<li>add font preview control in customizer<\/li>\n<li>various small tweaks and bug fixes<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Note that this update may break some of the settings. This is a one time problem and I apologise for the frustration!<\/li>\n<li>fix how Styleguide enqueues fonts with more than one word in the name<\/li>\n<li>add some new fonts to play with<\/li>\n<\/ul>\n\n<h4>1.0<\/h4>\n\n<ul>\n<li>first version live! :)<\/li>\n<\/ul>","raw_excerpt":"Styleguide allows you to customize fonts and colors in WordPress themes through the Customizer - no need to touch any code!","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/33874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=33874"}],"author":[{"embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/binarymoon"}],"wp:attachment":[{"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=33874"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=33874"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=33874"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=33874"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=33874"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=33874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}