WordPress Custom CSS

I have had instances where I have had to modify the CSS of a WordPress Theme to make some things work the way I want.

To accomplish this I have been customizing the Theme style sheet. In the Theme I'm using now it is called style.css.

I need to upgrade WP to the newest version. I suspect that when I do that my custom CSS will go away.

I recall there is a technique to have your own custom style sheet that OVERRIDES the theme style settings & it not changes by upgrading WordPress or the Theme.

I need a reference on how to create that & use it in a specific site.

Thanks
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
I need to upgrade WP to the newest version

Which doesn't affect your theme at all.  Unless you update the THEME, the CSS will not change as the WordPress core updates itself.

I recall there is a technique to have your own custom style sheet that OVERRIDES the theme style settings & it not changes by upgrading WordPress or the Theme.

There's a few ways to do it but the problem you're going to have is making sure you pull out your CSS changes from the original styles.css file.  Can you do that (e.g. are all edits commented)?
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Yes, I know where the changes are. I put them all at the end of the css file.

Thanks
Jason C. LevineDon't talk to me.Commented:
Okay, so there are three ways to go from here.

The first method is to create a child theme based on your current theme. The instructions to do that are here:

https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

Basically, you create a new theme folder with a new style.css and functions.php file.  The style.css file in the child needs to reference the parent theme (instructions/sample in the link above) and then you can import the CSS from the parent theme by adding the following to the child functions.php:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Open in new window


If your parent theme is complex and adds in a billion external scripts and styles, you may need to account for those too.  Once you have a clone of the parent theme working as a child theme simply add your desired CSS changes to the child style.css.

---------------------------------------------------------------------

The second method is to use a plugin that provides custom CSS capability.  Jetpack does this very, very well and comes with a bunch of other features that may be beneficial.  There are other plugins, though...just search for "WordPress Plugin Custom CSS" and you will get a ton of hits.

--------------------------------------------------------------------

The third method is to enqueue a new stylesheet and just add your modifications to that stylesheet.  This is essentially the second solution without the plugin and you need to know how to use wp_enqueue_style() to pull it off.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.