Inline CSS In Theme Header Is Gone

adios-inline-css

One of the things I like about having created WP-Forge, is the input that I get from people who use it. I really do get some great feedback and more often than naught, I get feedback that makes me rethink the way certain things are done.

After releasing the 6.3.1 update I got an email from a user that stated they really loved using the theme and that they used it on many sites. This made me feel really good. The user then stated that they had one wish for the theme. That wish was the removal of all the inline css from the header. The reason they wanted the css removed was because this was bad for SEO.

Now I am not an SEO kind of guy. I understand it a little but not that much. I know it’s a very intricate methodology and consists of many different, complex parts. The end user has to have everything spot on in order to achieve their ultimate goal.

So I looked into how inline css affects SEO and from what I gathered, depending on who you ask and they way you ask the question, inline css may or may not be bad for SEO.

Looking Back At Earlier Versions

I made the decision to leave the inline css the way it was but in deciding that, I got to thinking of how I could make it disappear all together. I wanted to make all of the inline css disappear and only appear when the user made a change in the customizer and only the inline css of the option that was changed would appear.

So I went back to a very early version of WP-Forge. I went into the archives and found a 5.2.3 version. This version isn’t even on WordPress trac, which means this was before WP-Forge made it onto WordPress.org. It is available on the WP-Forge GitHub Repo if you’re interested in going back.

In this earlier version I found the old inline css code I was looking for. The one reason I never added it until now was the inline css always showed just like the inline css before 6.3.1.1. I knew there was a way to make it work how I wanted but I could never figure out how so I dropped it altogether and never pursued it further. Getting that request made me think about it, so I dusted it off and had another look.

I played with it a few days and got the same results. The inline css was still displaying. I started to get frustrated and was about to drop it when it hit me like a ton of bricks. The solution was so simple. The reason the inline css kept displaying is because all of the options had default values!

Basically here is how the functions for each option work: “if there is a value for this option, then display the inline css for that option with the value”. So if an option has a default value, then the function will always display the inline css. So I thought well let’s remove the default values from some of the options and see if they still display. When I did that, the inline css disappeared for those options. Once I added a value to an option vis the customizer, the inline css for that option appeared with the new value! I was right!

So I took all of the css and put it into the customizer.css with the default values. Then I removed the default values from the options themselves and started working on the new functions. It took me a few days, but I muddled through it and finally finished.

No More Inline CSS

Believe me when I say I was super excited that I had gotten the code to work the way I wanted. I was a little upset at myself that I hadn’t tried to make it work earlier, but there is no sense in dwelling on it.

So this is what the header used to look like:
old inline css

and now we have this:
new inline css

as you can see it’s a lot cleaner and looks much better. All of the css that used to be displayed in the header was moved to a new style sheet called customizer.css. This is called in the header and it holds all of the defaults for the customizer options. Once a user makes a change to one of those options, let’s say for the font size in posts, the new value will be displayed inline in the header, like so:
inline css example

Once the default value is selected or a field cleared, the inline css is removed and no longer displayed. So using the above example, if I went back and cleared the 1.5rem value, the css in the image above would be gone. I think that totally rocks the casbah!

Update 6.3.1.2 Coming Soon!

Now I know I just released this update two days ago, but I wanted to let you know that I am hard at work on the 6.3.1.2 update. It’s not a major update of any sorts. It does involve a new menu and possibly a new header. I’m not sure at the moment. I have just gathered all of the necessary elements so i need to sit down and figure out how to make it happen. This idea came via another user and I think it’s an awesome idea and one that will make WP-Forge even better.

So there you have the gist of the latest update. I hope you guys like it as much as I do. Please let me know what you think and if you have any ideas for WP-Forge that you would like to see or have something that can be added to the wish list please do not hesitate to let me know.

Until next time…enjoy!

4 thoughts on “Inline CSS In Theme Header Is Gone

  1. Hola Thomas! Always good to hear of your improvements to Forge. I have so many sites built with version 5 that I’ve been a bit slow switching to 6, but am glad that you’re still continuing the hard work. And I really do like rocking the casbah.

    But, I hate to be “that guy”, though my wife often tells me I am :-), doesn’t your solution only really “work” if we don’t use the customizer at all?

    TBH that might suit some people, and I have for a couple of projects just bypassed the customizer completely, but can’t we assume that most people will use it to a fairly large degree?

    I can’t think of a way round it though. I guess we’d have to have a way for the customizer to generate its own stylesheet that could be loaded separately. I don’t know if that is even possible.

    • Hey James,

      Yep you’re that guy…lol! Just kidding, but to answer your question

      doesn’t your solution only really “work” if we don’t use the customizer at all?

      I guess maybe the title and substance of the post could have been worded a little better, but when I get excited I just head on out 😉 I do see what your asking and the answer would be, to the way the title and substance of the post is worded, yes it only works if you don’t use it.

      However, that was not the intention of the post at all. I guess it could have been worded a different way because there will be inline css if you use the customizer. Just not as much as usual.

      But if you look at the post it does state that the inline css does appear when an option is changed. I believe that anyone who reads the above post would gather that if they used the customizer, then there would be inline css in the header.

      Do a search for “powered by wp-forge” and you will notice that a majority of the sites that use WP-Forge, do not use the customizer extensively and a lot do not use it at all. So I guess it would be good for them.

      I think that I could have worded the title and the post a little differently, but like I said before, I believe anyone who uses WP-Forge and reads the post above would infer that if they use the customizer, then there will be inline css.

      And I do believe the only way the customizer can generate its own css is via inline styles. I will look into that though.

      P.S. Stop being that guy…lol just kidding 😉

Leave a Comment