{"id":1146,"date":"2020-04-14T22:28:00","date_gmt":"2020-04-14T15:28:00","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1146"},"modified":"2021-02-09T20:02:53","modified_gmt":"2021-02-09T13:02:53","slug":"css-variable-in-wordpress","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/css-variable-in-wordpress\/","title":{"rendered":"Good Places to Use CSS Variables (in WordPress)"},"content":{"rendered":"\n<p>CSS Variable has taken the frontend development by storm. I was skeptical of it because I&#8217;m used to Sass variable. But after a while, I realized how powerful it is.<\/p>\n\n\n\n<p>Here are 3 use cases of CSS Variable in WordPress:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Fixed Header and Admin Bar<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"137\" src=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/cssvar-fixed-header.jpg\" alt=\"\" class=\"wp-image-1398\" srcset=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/cssvar-fixed-header.jpg 750w, https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/cssvar-fixed-header-480x88.jpg 480w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption>Fixed header with Admin bar<\/figcaption><\/figure>\n\n\n\n<p>You don&#8217;t want your fixed header to cover up the admin bar. So what you did is probably something like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.site-nav {\n  position: fixed;\n  top: 0;\n  ...\n}\n\nbody.admin-bar .site-nav {\n  top: 32px;\n}\n\n@media (max-width:782px) {\n  body.admin-bar .site-nav {\n    top: 48px;\n  } \n}<\/code><\/pre>\n\n\n\n<p>With CSS Variable, you can simply define the Admin Bar&#8217;s height and set it to 0 if it doesn&#8217;t exist:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">:root {\n  --adminbarHeight: 0px;\n}\n\nbody.admin-bar {\n  --adminbarHeight: 32px;\n}\n\n@media (max-width:782px) {\n  body.admin-bar {\n    --adminbarHeight: 48px;\n  }\n}\n\n.site-nav {\n  position: fixed;\n  top: var(--adminbarHeight);\n  ...\n}<\/code><\/pre>\n\n\n\n<p>If you have other elements that need to be pushed down, you can reuse that variable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Page Theme Color<\/h2>\n\n\n\n<p>In WPTips website, do you notice that every page has a theme color according to the category?<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"340\" src=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/cssvar-page-theme.jpg\" alt=\"\" class=\"wp-image-1399\" srcset=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/cssvar-page-theme.jpg 750w, https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/cssvar-page-theme-480x218.jpg 480w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption>The color of Banner Background and Category Label can change<\/figcaption><\/figure>\n\n\n\n<p>Here&#8217;s how I achieve this:<\/p>\n\n\n\n<p>First, add the category to your body class:<\/p>\n\n\n\n<pre title=\"functions.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_filter( 'body_class', 'add_category_to_single_post' );\n\nfunction add_category_to_single( $classes ) {\n  if (is_single() ) {\n    global $post;\n    foreach( ( get_the_category($post->ID) ) as $category ) {\n      $classes[] = 'category-' . $category->term_id;\n    }\n  }\n\n  return $classes;\n}<\/code><\/pre>\n\n\n\n<p>In your CSS, define the color for each category:<\/p>\n\n\n\n<pre title=\"style.css\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">\/* Category A *\/\nbody.category-10 {\n  --themeColor: #1976d2;\n  --themeColorDark: #145da7;\n  --themeColorLight: #e3f2df;\n}\n\n\/* Category B *\/\nbody.category-12 {\n  --themeColor: #2f9c0a;\n  --themeColorDark: #2e7d32;\n  --themeColorLight: #f1f8e9;\n}\n\n...<\/code><\/pre>\n\n\n\n<p>Now you can use those variable wherever you see fit:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.post-banner { background-color: var(--themeColorLight); }\n\n.category-label { background-color: var(--themeColor); }\n\n.button { background-color: var(--themeColor); }\n.button:hover { background-color: var(--themeColorDark); }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. Gutenberg Palette<\/h2>\n\n\n\n<p>You can register CSS Variable as color palette like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_action( 'after_setup_theme', function() {\n\n  add_theme_support( 'editor-color-palette', [\n    [\n      'name' =&gt; __( 'Main Color' ),\n      'slug' =&gt; 'main',\n      'color' =&gt; 'var(--main)',\n    ],\n    [\n      'name' =&gt; __( 'Main Color Dark' ),\n      'slug' =&gt; 'main-dark',\n      'color' =&gt; 'var(--mainDark)',\n    ],\n    [\n      'name' =&gt; __( 'Main Color Light' ),\n      'slug' =&gt; 'main-light',\n      'color' =&gt; 'var(--mainLight)',\n    ],\n    [\n      'name' =&gt; __( 'Text Color' ),\n      'slug' =&gt; 'text',\n      'color' =&gt; 'var(--text)',\n    ],\n    [\n      'name' =&gt; __( 'Text Dim' ),\n      'slug' =&gt; 'text-dim',\n      'color' =&gt; 'var(--textDim)',\n    ],\n    [\n      'name' =&gt; __( 'Text Invert' ),\n      'slug' =&gt; 'text-invert',\n      'color' =&gt; 'var(--textInvert)',\n    ],\n  ]);\n\n}, 100 );<\/code><\/pre>\n\n\n\n<p>Then you need to enqueue the CSS that defines those colors:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_action( 'enqueue_block_editor_assets', function() {\n  if ( !is_admin() ) { return; }\n  \n  $css_dir = get_stylesheet_directory_uri() . '\/css';\n  wp_enqueue_style( 'my-gutenberg', $css_dir . '\/my-gutenberg.css', [ 'wp-edit-blocks' ] );\n  \n}, 100 );<\/code><\/pre>\n\n\n\n<pre title=\"my-gutenberg.css\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">:root {\n  --main: #1976d2;\n  --mainDark: #145da7;\n  --mainLight: #b9dbff;\n\n  --text: #333333;\n  --textDim: #999999;\n  --textInvert: #ffffff;\n}<\/code><\/pre>\n\n\n\n<p>Done! Your colors should be registered in Gutenberg.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"361\" height=\"292\" src=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/cssvar-gutenberg-palette.jpg\" alt=\"\" class=\"wp-image-1402\"\/><\/figure>\n\n\n\n<p>This tip is very useful if you are using pre-compiler like Sass so you can share the same Setting file.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The tips above only scratch the surface on what CSS Variable is capable of. Expect more articles about this in the future!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>If you have any question regarding CSS Variable, let me know in the comment below \ud83d\ude42<\/p><p><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>CSS Variable has taken the frontend development by storm. I was skeptical of it because I&#8217;m used to Sass variable. But it&#8217;s more powerful than that.<\/p>\n","protected":false},"author":1,"featured_media":1400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[21,22,31],"class_list":["post-1146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css","tag-gutenberg","tag-php"],"blocksy_meta":{"page_structure_type":"default","page_enable_vertical_spacing":"yes","has_hero_section":"default","hero_section":"type-1","hero_alignment1":"left","hero_alignment2":"center","hero_height":"230px","page_title_bg_type":"color","485dcbf6c82be0e644cbedb9baf5b086":"","custom_hero_background":{"attachment_id":null},"parallax":{"desktop":false,"tablet":false,"mobile":false},"e79a5b8963ddd30f9ee71756f21e4b20":"","single_meta_elements":{"author":true,"date":true,"categories":true,"comments":true,"updated":false,"tags":false},"has_meta_label":"yes","date_format_source":"custom","single_meta_date_format":"M j, Y","4bd1e7f850e11bb7723f7318c26c43eb":"","page_excerpt_visibility":{"desktop":true,"tablet":true,"mobile":false},"pageTitleFont":{"family":"Default","variation":"Default","size":{"desktop":"32px","tablet":"30px","mobile":"25px"},"line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"var(--paletteColor4)"}},"pageMetaFont":{"family":"Default","variation":"n6","size":{"desktop":"12px","tablet":"12px","mobile":"12px"},"line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"n5","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE.65","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"default":{"color":"rgba(41, 51, 60, 0.2)"}},"pageTitleBackground":{"default":{"color":"#EDEFF2"}}},"_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1146"}],"version-history":[{"count":10,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1146\/revisions"}],"predecessor-version":[{"id":2019,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1146\/revisions\/2019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1400"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}