Best way for overwriting plugin css with custom one

Question

I've to do very little changes to bbPress (forum plugin for WordPress) for a customer, at all about 5 lines CSS only.

But I'm not sure where is the best place to put this CSS code. Modify the original plugin CSS files seems not to be a good idea because it may be overwritten on the next update and it's hard to see what was modificated.

My second idea was to place the CSS code in the main stylesheet of the theme. This seems a bit better, but the customer is using a paid-theme which get updates too. So these changes will be lost in case of theme-updates.

Another idea would be writing a small plugin, which inject the css-code in the DOM. It will be independent from any updates of external things. It looks like the only way to get sure that the code wouldn't be overwritten by any update. But a plugin for these few lines also seems to be a bit overstated.

Where is the best place to put such CSS modifications so that they're not getting overwritten by updates of wordpress, themes or plugins?

WordPress is developed very modular so it seems for me that this is not possible without extra-work (which has to be documentated and regarded on every update).

Answer 1

Unfortunately you will have to write a small plugin for this which is in my opinion, the best and cleanest and safest option. As you have already stated, it is a really bad idea changing any file in a plugin or theme that you are not the author of, and this goes for core files as well

I will tend to not go with a child theme here due to the fact that theme might be changes later and then you will have to do this all over again.

You can do something like this

• Create a folder in your plugins folder and call it what you like

• Create a main plugin file and call in what you want. Open it and add the following at the top of that file

  <?php
  /*
  Plugin Name: NAME WHATEVER YOU LIKE
  */
  

• Create a style.css file in your plugin folder and load all your custom styles in there

• Next, enqueue your custom style.css. You have two options here, either use the $dependency parameter in wp_enqueue_style() or simply add a $priority to your action

Here is an example of the latter

add_action( 'wp_enqueue_scripts', 'my_custom_styles', PHP_INT_MAX );

function my_custom_styles() {
    /* Register our stylesheet. */
    wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
}

Your plugin main file should look something like this

<?php
/*
Plugin Name: NAME WHATEVER YOU LIKE
*/

add_action( 'wp_enqueue_scripts', 'my_custom_styles', PHP_INT_MAX );

function my_custom_styles() {
    /* Register our stylesheet. */
    wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
}

Answer 2

If you are customizing theme, my advice is to use child theme.

Why?

A child theme in WordPress would inherit all the functionality, features, and the code of the parent theme without making any changes to the parent theme itself. This allowed users to change the styling of the parent theme and add/modify features without losing the ability to update the parent theme.

How to modify theme?

1. Create child theme Instructions on codex

2. Add extra lines of css in style.css

3. Thats all.