{"id":55039,"date":"2020-04-14T11:52:17","date_gmt":"2020-04-14T09:52:17","guid":{"rendered":"https:\/\/samuelchopard.ch\/wiki\/?p=55039"},"modified":"2020-04-24T12:27:39","modified_gmt":"2020-04-24T10:27:39","slug":"add-css-in-head-via-a-file-in-the-child-theme-directory-not-via-additional-css","status":"publish","type":"post","link":"https:\/\/samuelchopard.ch\/wiki\/library\/add-css-in-head-via-a-file-in-the-child-theme-directory-not-via-additional-css\/","title":{"rendered":"Add CSS in head via a file in the child theme directory (not via &#8220;Additional CSS&#8221;)"},"content":{"rendered":"<p><!--more--><br \/>\nThis can be really useful to avoid relying on <em>Appearance &gt; Customize &gt; Additional CSS<\/em> and to save a child-theme and be ready to install it anywhere else.<\/p>\n<p>This is also used in place of the <em>style.css<\/em> file, which is not as effective.<\/p>\n<p>To add additional CSS via a file, create a file named <strong><em>additional-css.css<\/em><\/strong> and place in at the root of the child-theme directory. In file, paste the following:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/*\r\nAdditional CSS automatically added in head via the function 'additional_css_in_head' in functions.php.\r\nThis file replaces Appearance &gt; Customize &gt; Additional CSS\r\n*\/<\/pre>\n<p>Then, add all your CSS below (and remove any CSS from <em>Appearance &gt; Customize &gt; Additional CSS<\/em>).<\/p>\n<p>Once you have done that, paste the following in your child-theme&#8217;s <em>functions.php<\/em>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">\/* Add content of additional-css.css in head *\/\r\nadd_action('wp_head', 'additional_css_in_head');\r\nfunction additional_css_in_head(){\r\n    ?&gt;&lt;style&gt;&lt;?php\r\n    echo file_get_contents( \"[PATH TO ADDITIONAL-CSS.CSS]\" );\r\n    ?&gt;&lt;\/style&gt;&lt;?php\r\n};<\/pre>\n<p>Add the path to the additional-css.css file. It should be something like <em>&#8220;https:\/\/www.yourdomain.com\/wp-content\/themes\/child-theme\/additional-css.css&#8221;<\/em>.<\/p>\n<p><strong>If it does not work, make sure that the server&#8217;s PHP setting &#8220;allow_url_fopen&#8221; is set to &#8220;on&#8221; <span style=\"text-decoration: underline;\">or<\/span> add &#8220;allow_url_include=1&#8221; to the &#8220;php.ini&#8221; file.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"This can be really useful to avoid relying on Appearance &gt; Customize &gt; Additional CSS and to save a child-theme [...]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[383,69,328],"class_list":["post-55039","post","type-post","status-publish","format-standard","hentry","category-child-themes","tag-additional-css","tag-css","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/55039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/comments?post=55039"}],"version-history":[{"count":25,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/55039\/revisions"}],"predecessor-version":[{"id":55090,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/55039\/revisions\/55090"}],"wp:attachment":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/media?parent=55039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/categories?post=55039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/tags?post=55039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}