{"id":72,"date":"2016-04-01T01:54:18","date_gmt":"2016-04-01T01:54:18","guid":{"rendered":"https:\/\/crios.me\/?p=72"},"modified":"2016-04-01T01:56:03","modified_gmt":"2016-04-01T01:56:03","slug":"use-css-to-power-your-wordpress-theme","status":"publish","type":"post","link":"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/","title":{"rendered":"Create Dynamic CSS With PHP &#8211; Use CSS To Power Your WordPress Theme"},"content":{"rendered":"<p>In the <a href=\"https:\/\/crios.me\/understanding-php-css-class\/\">previous part<\/a> of this series\u00a0I went over the basics of the PHP_CSS class that I created. I showed how it is a much more uniform and easy way to create your custom css with PHP than any other way.<\/p>\n<p>In this part, I\u2019ll be showing you how to use css to power your WordPress theme.<\/p>\n<p>This will be an advanced tutorial, so if you\u2019re just getting started with WordPress, PHP, or CSS then this might not be for you, but either way if you follow along you should be just fine.<\/p>\n<p>Since we\u2019re working with WordPress there are many ways we can go about creating our css and integrating it into our theme. In this part we\u2019ll focus on the quickest way to get set up. Let\u2019s begin!<\/p>\n<h2>Integrate The CSS Into Your Theme<\/h2>\n<p>We need to import <a href=\"https:\/\/crios.me\/understanding-php-css-class\/\">the PHP_CSS class<\/a> by including it into your theme\u2019s folder structure, and then requiring the framework.<\/p>\n<pre class=\"lang:php decode:true\">require_once( get_template_directory_uri() . '\/includes\/class-php-css.php' );\r\n<\/pre>\n<p>Now here comes the fun part. Once you\u2019ve imported the class and set it up you can begin adding css via filters. Let&#8217;s start by creating two actions.<\/p>\n<p>The first action will add the css to the header, and instantiate our PHP_CSS class to be used within our second hook. We\u2019ll also add the css to the head of the document if our css is not empty.<\/p>\n<pre class=\"lang:php decode:true\">add_action( 'wp_head', 'add_theme_header_styles' );\r\nfunction add_theme_header_styles()\r\n{\t\r\n\t\/\/ Instantiate the PHP_CSS object\r\n\t$css = new CarlosRios\\PHP_CSS;\r\n\r\n\t\/**\r\n\t * theme_header_css hook\r\n\t *\r\n\t * Allows you to add css from different areas without having to\r\n\t * instantiate a new instance of the PHP CSS Class every time\r\n\t *\r\n\t * @since  1.0\r\n\t * @param  $css Instance of CarlosRios\\PHP_CSS\r\n\t *\/\r\n\tdo_action( 'theme_header_css', $css );\r\n\r\n\t\/\/ Store the output as a string\r\n\t$output = $css-&gt;css_output();\r\n\r\n\t\/\/ Check if the output has data, and output it if it does\r\n\tif( !empty( $output ) &amp;&amp; $output !== '' ) {\r\n\t\techo '&lt;style&gt;' . $output . '&lt;\/style&gt;';\r\n\t}\r\n}<\/pre>\n<p>The second action will be where we actually add our css. This hook would be available for any plugin or theme requirement which would want to add css to our header. It comes with one argument, with is the instance of the PHP_CSS class stored in the $css variable.<\/p>\n<pre class=\"lang:php decode:true\">add_action( 'theme_header_css', 'add_body_styles' );\r\nfunction add_body_styles( $css )\r\n{\r\n\t\/\/ Set the css for the body\r\n\t$css-&gt;set_selector( 'body' );\r\n\t$css-&gt;add_properties( array(\r\n\t\t'background'\t=&gt; '#222',\r\n\t\t'color'\t\t=&gt; '#FFF',\r\n\t) );\r\n\r\n\treturn $css;\r\n}\r\n<\/pre>\n<p>Now that we\u2019ve got that setup our theme should contain the css that we added in the theme_header_css hook.<\/p>\n<h3>Create An Advanced CSS Process<\/h3>\n<p>While the method described in this tutorial will certainly get the job done, it&#8217;s not actually the best way to do so. Stay tuned for the next part in the series where I\u2019ll show you how to create all of our css via a hook, add that css to a dedicated css file, and then enqueue that file automatically.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the previous part of this series\u00a0I went over the basics of the PHP_CSS class that I created. I showed how it is a much more uniform and easy way to create your custom css with PHP than any other way. In this part, I\u2019ll be showing you how to use css to power your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[12,8],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Use CSS To Power Your WordPress Theme<\/title>\n<meta name=\"description\" content=\"In this part of the series you&#039;ll learn how to use css to power your WordPress theme by using WordPress&#039; Plugin API actions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use CSS To Power Your WordPress Theme\" \/>\n<meta property=\"og:description\" content=\"In this part of the series you&#039;ll learn how to use css to power your WordPress theme by using WordPress&#039; Plugin API actions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"Carlos Rios\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100005352885726\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-01T01:54:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-01T01:56:03+00:00\" \/>\n<meta name=\"author\" content=\"Carlos Rios\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CarlosRios07\" \/>\n<meta name=\"twitter:site\" content=\"@CarlosRios07\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlos Rios\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/\",\"url\":\"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/\",\"name\":\"Use CSS To Power Your WordPress Theme\",\"isPartOf\":{\"@id\":\"https:\/\/crios.me\/#website\"},\"datePublished\":\"2016-04-01T01:54:18+00:00\",\"dateModified\":\"2016-04-01T01:56:03+00:00\",\"author\":{\"@id\":\"https:\/\/crios.me\/#\/schema\/person\/e5e999efdb249ef6c71b55ca5fed1921\"},\"description\":\"In this part of the series you'll learn how to use css to power your WordPress theme by using WordPress' Plugin API actions.\",\"breadcrumb\":{\"@id\":\"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crios.me\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Dynamic CSS With PHP &#8211; Use CSS To Power Your WordPress Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crios.me\/#website\",\"url\":\"https:\/\/crios.me\/\",\"name\":\"Carlos Rios\",\"description\":\"Programing, Philosophizing, &amp; Photography\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crios.me\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/crios.me\/#\/schema\/person\/e5e999efdb249ef6c71b55ca5fed1921\",\"name\":\"Carlos Rios\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crios.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9943490514c70a3430603cccbb744a5f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9943490514c70a3430603cccbb744a5f?s=96&d=mm&r=g\",\"caption\":\"Carlos Rios\"},\"description\":\"Carlos Rios is an experienced WordPress Web Developer who lives in McAllen, TX and serves clients nationwide.\",\"sameAs\":[\"https:\/\/crios.me\",\"https:\/\/www.facebook.com\/profile.php?id=100005352885726\",\"https:\/\/x.com\/CarlosRios07\"],\"url\":\"https:\/\/crios.me\/author\/carlos\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use CSS To Power Your WordPress Theme","description":"In this part of the series you'll learn how to use css to power your WordPress theme by using WordPress' Plugin API actions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/","og_locale":"en_US","og_type":"article","og_title":"Use CSS To Power Your WordPress Theme","og_description":"In this part of the series you'll learn how to use css to power your WordPress theme by using WordPress' Plugin API actions.","og_url":"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/","og_site_name":"Carlos Rios","article_author":"https:\/\/www.facebook.com\/profile.php?id=100005352885726","article_published_time":"2016-04-01T01:54:18+00:00","article_modified_time":"2016-04-01T01:56:03+00:00","author":"Carlos Rios","twitter_card":"summary_large_image","twitter_creator":"@CarlosRios07","twitter_site":"@CarlosRios07","twitter_misc":{"Written by":"Carlos Rios","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/","url":"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/","name":"Use CSS To Power Your WordPress Theme","isPartOf":{"@id":"https:\/\/crios.me\/#website"},"datePublished":"2016-04-01T01:54:18+00:00","dateModified":"2016-04-01T01:56:03+00:00","author":{"@id":"https:\/\/crios.me\/#\/schema\/person\/e5e999efdb249ef6c71b55ca5fed1921"},"description":"In this part of the series you'll learn how to use css to power your WordPress theme by using WordPress' Plugin API actions.","breadcrumb":{"@id":"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crios.me\/use-css-to-power-your-wordpress-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crios.me\/"},{"@type":"ListItem","position":2,"name":"Create Dynamic CSS With PHP &#8211; Use CSS To Power Your WordPress Theme"}]},{"@type":"WebSite","@id":"https:\/\/crios.me\/#website","url":"https:\/\/crios.me\/","name":"Carlos Rios","description":"Programing, Philosophizing, &amp; Photography","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crios.me\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/crios.me\/#\/schema\/person\/e5e999efdb249ef6c71b55ca5fed1921","name":"Carlos Rios","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crios.me\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9943490514c70a3430603cccbb744a5f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9943490514c70a3430603cccbb744a5f?s=96&d=mm&r=g","caption":"Carlos Rios"},"description":"Carlos Rios is an experienced WordPress Web Developer who lives in McAllen, TX and serves clients nationwide.","sameAs":["https:\/\/crios.me","https:\/\/www.facebook.com\/profile.php?id=100005352885726","https:\/\/x.com\/CarlosRios07"],"url":"https:\/\/crios.me\/author\/carlos\/"}]}},"_links":{"self":[{"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/posts\/72"}],"collection":[{"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":3,"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/posts\/72\/revisions\/75"}],"wp:attachment":[{"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crios.me\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}