How to add inline css before the style.css

[iamzeus]

I want to add this inline css

<style type="text/css">
*,input[type="search"]{box-sizing:border-box;}*{box-sizing:border-box;}html{font-family:sans-serif;font-size:62.5%;height:100%;}#sb-site,.sb-site-container,.sb-slidebar,body,html{margin:0px;padding:0px;box-sizing:border-box;}body,html{width:100%;overflow-x:visible;}body{margin:0px;color:rgb(26,24,24);font-family:'Open Sans',sans-serif;font-weight:300;font-size:1.4rem;line-height:2.4rem;background-color:rgb(255,255,255);min-height:100%;height:auto;position:relative;}#sb-site,.sb-site-container{width:100%;position:relative;z-index:1;background-color:rgb(255,255,255);}#sb-site,.sb-site-container,.sb-slide,.sb-slidebar{transition:-webkit-transform 400ms ease,left,right;-webkit-transition:-webkit-transform 400ms ease,left,right;-webkit-backface-visibility:hidden;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}.site-header{width:100%;z-index:9999;position:relative;}.wrap{margin:0px auto;max-width:1080px;}.site-header .wrap{overflow:hidden;padding:0rem 0px 0px;}.title-area{float:left;width:26%;}.header-full-width .title-area,.header-full-width .site-title{width:100%;}h1{font-size:4rem;margin:0.67em 0px;margin-bottom:12px;}h1,h2,h3,h4,h5,h6{font-family:'Open Sans Condensed',sans-serif;color:rgb(0,0,0);margin:0px 0px 1.6rem;padding:0px;}.site-title{font-family:'open sans',sans-serif;font-size:4.5rem;line-height:1;margin:1rem 0px;}a,button,input:focus,input[type="button"],input[type="reset"],input[type="submit"],textarea:focus,.button{transition:all 0.1s ease-in-out;-webkit-transition:all 0.1s ease-in-out;}a{color:rgb(90,79,89);text-decoration:none;}.site-title a,.site-title a:hover{color:rgb(0,174,239);text-decoration:none;font-weight:700;}.responsive-search{width:100%;margin-top:0px;background:rgb(0,0,0);}.sb-right{right:0px;}.search-form{display:block;margin:0px auto;overflow:hidden;width:224px;}.site-header .search-form{float:right;margin-top:0rem;}.responsive-search .search-form{max-width:224px;height:0px;clear:both;float:none;margin:0px auto;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0px;}button,input{line-height:normal;}input,select,textarea{border:1px solid rgb(221,221,221);border-radius:3px;box-shadow:rgb(221,221,221) 0px 0px 5px inset;color:rgb(136,136,136);font-size:1.6rem;font-weight:300;padding:0.8rem;width:100%;background-color:rgb(255,255,255);}.search-form input[type="text"].search-input{display:block;float:left!important;width:160px!important;max-width:160px!important;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}.button,.widget .button,button,input[type="button"],input[type="reset"],input[type="submit"]{border:none;box-shadow:none;color:rgb(255,255,255);cursor:pointer;display:block;font-size:1.6rem;padding:1.6rem 2.4rem;width:auto;text-align:center;text-decoration:none;background-color:rgb(0,150,214);}.search-form input.search-submit{border:0px;padding:1.1rem 0.5rem;clip:rect(auto auto auto auto);display:block;clear:none;float:right!important;width:60px!important;position:relative!important;}.search-form input[type="submit"]{font-family:recreofont;display:block;float:left;padding:12px 12px 0px 0px;line-height:1.6rem;border:none;width:13%;content:'';background:none;}.nav-primary{border-top-width:1px;border-top-style:solid;border-top-color:rgb(221,221,221);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(191,189,189);box-shadow:rgba(214,212,212,0.498039) 0px 2px 2px;margin-bottom:1rem;}ol,ul{margin:0px;padding:0px;}.genesis-nav-menu{clear:both;color:rgb(255,255,255);line-height:1;width:100%;text-transform:uppercase;letter-spacing:0.08rem;font-size:1.5rem;}.genesis-nav-menu .menu-item{display:block;text-align:left;float:left;}.genesis-nav-menu a{color:rgb(0,0,0);display:block;line-height:1;padding:1.5rem 1.6rem;position:relative;font-weight:900;font-family:'Open Sans Condensed',sans-serif;font-size:2rem;letter-spacing:0.001rem;text-transform:capitalize;}i{font-family:recreofont;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;}.genesis-nav-menu .sub-menu{border:1px solid rgb(191,189,189);left:-9999px;opacity:0;text-transform:none;position:absolute;letter-spacing:0px;transition:opacity 0.4s ease-in-out;-webkit-transition:opacity 0.4s ease-in-out;width:200px;z-index:99;}.genesis-nav-menu .sub-menu a{color:rgb(34,34,34);border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-style:none solid solid;border-right-color:rgb(191,189,189);border-bottom-color:rgb(191,189,189);border-left-color:rgb(191,189,189);font-size:1.4rem;padding:1rem;position:relative;width:200px;background-color:rgb(255,255,255);}.site-inner{clear:both;margin:0px auto;max-width:1080px;padding:1rem 0px;}.content{float:right;width:76rem;background-color:white;}.content-sidebar .content{float:left;}.entry{margin-bottom:0rem;}.single .content .entry{box-shadow:rgba(66,64,64,0.498039) 0px 0px 3px;border-radius:10px;padding:1.5rem 1.5rem 0px;}.single-post-category{padding:12px 0px;}.single-post-category a{font-family:'Open Sans Condensed',sans-serif;font-weight:900;letter-spacing:0.02rem;font-size:2rem;color:rgb(255,255,255);padding:2px 7px;margin:0px 0px 5px;background:rgb(0,150,214);}.entry-title{font-size:3.7rem;line-height:1;margin-bottom:0.5rem;text-transform:capitalize;}p{margin:0px 0px 1rem;padding:0px;}.entry-meta{clear:both;color:rgb(136,136,136);text-transform:capitalize;font-size:1.4rem;}.entry-header .entry-meta{margin-bottom:0.1rem;}.entry-meta a{color:rgb(136,136,136);}.entry-content p{margin-bottom:1.8rem;font-size:1.5rem;color:black;}.sidebar-primary{float:left;width:30rem;margin-left:2rem;}.widget{word-wrap:break-word;margin-bottom:2.4rem;}.sidebar .widget{margin-bottom:0.7rem;overflow:hidden;}h3{font-size:2.5rem;margin:1rem 0px 0.9rem;text-transform:capitalize;}.sidebar h3{font-size:2.5rem;margin-top:0.2rem;margin-bottom:0.2rem;}.sidebar a{color:rgb(0,0,0);text-transform:capitalize;font-family:'Open Sans Condensed',sans-serif;letter-spacing:0rem;word-spacing:-0.05rem;line-height:2.2rem;font-size:1.9rem;font-weight:900;}img{border:0px;height:auto;}embed,iframe,img,object,video,.wp-caption{max-width:100%;}.yarpp-thumbnails-horizontal .desc{display:table;}.yarpp-thumbnails-horizontal .desc span{vertical-align:middle;height:70px;display:table-cell!important;}.sidebar .yarpp-thumbnails-horizontal .desc span{height:1px;}.sb-slidebar{width:20%;top:0px;bottom:0px;position:fixed;overflow-x:hidden;z-index:0;background:rgb(34,40,43);padding:20px 10px;color:rgb(232,232,232);background-color:rgb(34,34,34);height:100%;overflow-y:auto;display:none;-webkit-transform:translate(0px);}.sb-menu{padding:0px;margin:0px;list-style-type:none;}.sb-left{left:0px;}.sb-slidebar .widget:first-child{margin-bottom:0px;}.widget li{list-style-type:none;}.sb-menu li{width:100%;padding:0px;margin:0px;border-top-width:1px;border-top-style:solid;border-top-color:rgba(255,255,255,0.0980392);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0,0,0,0.0980392);}.sb-menu>li:first-child{border-top-style:none;}.sb-slidebar a{color:rgb(255,57,113);text-decoration:none;}.sb-menu li a{width:100%;display:inline-block;padding:1em;color:rgb(242,242,242);}.sb-left .sb-menu li a{border-left-width:3px;border-left-style:solid;border-left-color:transparent;font-family:'Open Sans Condensed',sans-serif;font-weight:900;padding:0.6rem 1.3rem;font-size:1.6rem;}.sb-menu>li:last-child{border-bottom-style:none;}.widget li li{border:none;}.sb-menu li li{margin:0px;}.sb-left .sb-menu li li a{padding:0.4rem 3rem;}.sb-style-overlay{z-index:9999;}.sb-slidebar .widget_search{padding:1.5rem 1rem;background:rgb(0,174,239);}.sb-slidebar .search-form{border-radius:60px;display:block;width:98%;background:rgba(0,0,0,0.247059);}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;}.sb-slidebar form input[type="search"]{border:none;box-shadow:none;color:rgb(255,255,255);display:block;float:left;font-size:1em;line-height:1.6rem;margin:0px;padding:1.2rem 1.5rem;width:85%;background:none;}
</style>

just before my:

<link rel='stylesheet' id='css' href='http://www.example.com/wp-content/themes/mytheme/style.css?ver=20150106' type='text/css' media='all'/>

How can I add it?

If I add it via the theme setthings: Enter scripts or code you would like output to wp_head(): it will be added below my stylesheet and I want it before since this is my critical above the fold css

[Ren Ventura]

That's a lot of CSS to add to the header. Why not just enqueue it with a higher priority so it trumps your style.css? For this, you can use wp_enqueue_scripts().

If you really want to add it to the head, you'd use the wp_head action, like so:

add_action( 'wp_head', 'rv_add_header_css' );
function rv_add_header_css() { ?>

<style type="text/css">
	*,input[type="search"]{box-sizing:border-box;}*{box-sizing:border-box;}html{font-family:sans-serif;font-size:62.5%;height:100%;}#sb-site,.sb-site-container,.sb-slidebar,body,html{margin:0px;padding:0px;box-sizing:border-box;}body,html{width:100%;overflow-x:visible;}body{margin:0px;color:rgb(26,24,24);font-family:'Open Sans',sans-serif;font-weight:300;font-size:1.4rem;line-height:2.4rem;background-color:rgb(255,255,255);min-height:100%;height:auto;position:relative;}#sb-site,.sb-site-container{width:100%;position:relative;z-index:1;background-color:rgb(255,255,255);}#sb-site,.sb-site-container,.sb-slide,.sb-slidebar{transition:-webkit-transform 400ms ease,left,right;-webkit-transition:-webkit-transform 400ms ease,left,right;-webkit-backface-visibility:hidden;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}.site-header{width:100%;z-index:9999;position:relative;}.wrap{margin:0px auto;max-width:1080px;}.site-header .wrap{overflow:hidden;padding:0rem 0px 0px;}.title-area{float:left;width:26%;}.header-full-width .title-area,.header-full-width .site-title{width:100%;}h1{font-size:4rem;margin:0.67em 0px;margin-bottom:12px;}h1,h2,h3,h4,h5,h6{font-family:'Open Sans Condensed',sans-serif;color:rgb(0,0,0);margin:0px 0px 1.6rem;padding:0px;}.site-title{font-family:'open sans',sans-serif;font-size:4.5rem;line-height:1;margin:1rem 0px;}a,button,input:focus,input[type="button"],input[type="reset"],input[type="submit"],textarea:focus,.button{transition:all 0.1s ease-in-out;-webkit-transition:all 0.1s ease-in-out;}a{color:rgb(90,79,89);text-decoration:none;}.site-title a,.site-title a:hover{color:rgb(0,174,239);text-decoration:none;font-weight:700;}.responsive-search{width:100%;margin-top:0px;background:rgb(0,0,0);}.sb-right{right:0px;}.search-form{display:block;margin:0px auto;overflow:hidden;width:224px;}.site-header .search-form{float:right;margin-top:0rem;}.responsive-search .search-form{max-width:224px;height:0px;clear:both;float:none;margin:0px auto;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0px;}button,input{line-height:normal;}input,select,textarea{border:1px solid rgb(221,221,221);border-radius:3px;box-shadow:rgb(221,221,221) 0px 0px 5px inset;color:rgb(136,136,136);font-size:1.6rem;font-weight:300;padding:0.8rem;width:100%;background-color:rgb(255,255,255);}.search-form input[type="text"].search-input{display:block;float:left!important;width:160px!important;max-width:160px!important;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}.button,.widget .button,button,input[type="button"],input[type="reset"],input[type="submit"]{border:none;box-shadow:none;color:rgb(255,255,255);cursor:pointer;display:block;font-size:1.6rem;padding:1.6rem 2.4rem;width:auto;text-align:center;text-decoration:none;background-color:rgb(0,150,214);}.search-form input.search-submit{border:0px;padding:1.1rem 0.5rem;clip:rect(auto auto auto auto);display:block;clear:none;float:right!important;width:60px!important;position:relative!important;}.search-form input[type="submit"]{font-family:recreofont;display:block;float:left;padding:12px 12px 0px 0px;line-height:1.6rem;border:none;width:13%;content:'';background:none;}.nav-primary{border-top-width:1px;border-top-style:solid;border-top-color:rgb(221,221,221);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(191,189,189);box-shadow:rgba(214,212,212,0.498039) 0px 2px 2px;margin-bottom:1rem;}ol,ul{margin:0px;padding:0px;}.genesis-nav-menu{clear:both;color:rgb(255,255,255);line-height:1;width:100%;text-transform:uppercase;letter-spacing:0.08rem;font-size:1.5rem;}.genesis-nav-menu .menu-item{display:block;text-align:left;float:left;}.genesis-nav-menu a{color:rgb(0,0,0);display:block;line-height:1;padding:1.5rem 1.6rem;position:relative;font-weight:900;font-family:'Open Sans Condensed',sans-serif;font-size:2rem;letter-spacing:0.001rem;text-transform:capitalize;}i{font-family:recreofont;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;}.genesis-nav-menu .sub-menu{border:1px solid rgb(191,189,189);left:-9999px;opacity:0;text-transform:none;position:absolute;letter-spacing:0px;transition:opacity 0.4s ease-in-out;-webkit-transition:opacity 0.4s ease-in-out;width:200px;z-index:99;}.genesis-nav-menu .sub-menu a{color:rgb(34,34,34);border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-style:none solid solid;border-right-color:rgb(191,189,189);border-bottom-color:rgb(191,189,189);border-left-color:rgb(191,189,189);font-size:1.4rem;padding:1rem;position:relative;width:200px;background-color:rgb(255,255,255);}.site-inner{clear:both;margin:0px auto;max-width:1080px;padding:1rem 0px;}.content{float:right;width:76rem;background-color:white;}.content-sidebar .content{float:left;}.entry{margin-bottom:0rem;}.single .content .entry{box-shadow:rgba(66,64,64,0.498039) 0px 0px 3px;border-radius:10px;padding:1.5rem 1.5rem 0px;}.single-post-category{padding:12px 0px;}.single-post-category a{font-family:'Open Sans Condensed',sans-serif;font-weight:900;letter-spacing:0.02rem;font-size:2rem;color:rgb(255,255,255);padding:2px 7px;margin:0px 0px 5px;background:rgb(0,150,214);}.entry-title{font-size:3.7rem;line-height:1;margin-bottom:0.5rem;text-transform:capitalize;}p{margin:0px 0px 1rem;padding:0px;}.entry-meta{clear:both;color:rgb(136,136,136);text-transform:capitalize;font-size:1.4rem;}.entry-header .entry-meta{margin-bottom:0.1rem;}.entry-meta a{color:rgb(136,136,136);}.entry-content p{margin-bottom:1.8rem;font-size:1.5rem;color:black;}.sidebar-primary{float:left;width:30rem;margin-left:2rem;}.widget{word-wrap:break-word;margin-bottom:2.4rem;}.sidebar .widget{margin-bottom:0.7rem;overflow:hidden;}h3{font-size:2.5rem;margin:1rem 0px 0.9rem;text-transform:capitalize;}.sidebar h3{font-size:2.5rem;margin-top:0.2rem;margin-bottom:0.2rem;}.sidebar a{color:rgb(0,0,0);text-transform:capitalize;font-family:'Open Sans Condensed',sans-serif;letter-spacing:0rem;word-spacing:-0.05rem;line-height:2.2rem;font-size:1.9rem;font-weight:900;}img{border:0px;height:auto;}embed,iframe,img,object,video,.wp-caption{max-width:100%;}.yarpp-thumbnails-horizontal .desc{display:table;}.yarpp-thumbnails-horizontal .desc span{vertical-align:middle;height:70px;display:table-cell!important;}.sidebar .yarpp-thumbnails-horizontal .desc span{height:1px;}.sb-slidebar{width:20%;top:0px;bottom:0px;position:fixed;overflow-x:hidden;z-index:0;background:rgb(34,40,43);padding:20px 10px;color:rgb(232,232,232);background-color:rgb(34,34,34);height:100%;overflow-y:auto;display:none;-webkit-transform:translate(0px);}.sb-menu{padding:0px;margin:0px;list-style-type:none;}.sb-left{left:0px;}.sb-slidebar .widget:first-child{margin-bottom:0px;}.widget li{list-style-type:none;}.sb-menu li{width:100%;padding:0px;margin:0px;border-top-width:1px;border-top-style:solid;border-top-color:rgba(255,255,255,0.0980392);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0,0,0,0.0980392);}.sb-menu>li:first-child{border-top-style:none;}.sb-slidebar a{color:rgb(255,57,113);text-decoration:none;}.sb-menu li a{width:100%;display:inline-block;padding:1em;color:rgb(242,242,242);}.sb-left .sb-menu li a{border-left-width:3px;border-left-style:solid;border-left-color:transparent;font-family:'Open Sans Condensed',sans-serif;font-weight:900;padding:0.6rem 1.3rem;font-size:1.6rem;}.sb-menu>li:last-child{border-bottom-style:none;}.widget li li{border:none;}.sb-menu li li{margin:0px;}.sb-left .sb-menu li li a{padding:0.4rem 3rem;}.sb-style-overlay{z-index:9999;}.sb-slidebar .widget_search{padding:1.5rem 1rem;background:rgb(0,174,239);}.sb-slidebar .search-form{border-radius:60px;display:block;width:98%;background:rgba(0,0,0,0.247059);}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;}.sb-slidebar form input[type="search"]{border:none;box-shadow:none;color:rgb(255,255,255);display:block;float:left;font-size:1em;line-height:1.6rem;margin:0px;padding:1.2rem 1.5rem;width:85%;background:none;}
</style>

<?php }

---

Web & Software Developer & Blogger | RenVentura.com | Follow Me on Twitter @CLE_Ren

[iamzeus]

Tried this already, but 'wp_head' will add it to the end of my head

I want to load if before my style.css sheet

Want to inline my critical above the fold css

[Ren Ventura]

Technically, you cannot inline all that CSS. Inline CSS is when you add styling directly to the HTML element via the style attribute. You have styles that can't be added inline. What you'll need to do is change the priority of the add_action(). The priority is the third parameter. For example,

add_action( 'wp_head', 'rv_add_header_css', 999 );

This will load the file later in the process.

---

Web & Software Developer & Blogger | RenVentura.com | Follow Me on Twitter @CLE_Ren

[iamzeus]

Mmmmm saw this guys inlined a lot of it:

http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/

to improve the rendering of the page

so wanna do the same with my critical above the fold css

[iamzeus]

My bad, worked putting priority as 1

thanks

[Ren Ventura]

No problem. My mistake on using 999 in the example (my thinking at that time was backwards).

---

Web & Software Developer & Blogger | RenVentura.com | Follow Me on Twitter @CLE_Ren

[Author]

Posts