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 184.108.40.206. 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.
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:
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 220.127.116.11 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
18.104.22.168 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!