How to load a custom CSS file after Oxygen’s stylesheets

Updated on November 12, 2019

This tutorial provides the steps to make a custom CSS file load after Oxygen generated styles (oxygen.css, universal.css and page-specific CSS files etc.).

This way, your custom CSS rules will override Oxygen’s (assuming that the proper selectors are being used) without having to use a lot of !importants.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site’s /wp-content/plugins/my-custom-functionality-master.

Create a file named say, custom.css to the plugin’s assets/css directory.

Edit plugin.php and add the following inside the custom_enqueue_files() function:

// 1000000 priority so it is executed after all Oxygen's styles
add_action( 'wp_head', 'wpdd_enqueue_css_after_oxygens', 1000000 );
/**
 * Load assets.
 */
function wpdd_enqueue_css_after_oxygens() {
	if ( ! class_exists( 'CT_Component' ) ) {
		return;
	}

	$styles = new WP_Styles;
	$styles->add( 'custom', plugin_dir_url( __FILE__ ) . 'assets/css/custom.css' );
	$styles->enqueue( array ( 'custom' ) );
	$styles->do_items();
}

Step 2

Add your custom CSS code in the plugin’s custom.css file.

Credit

Emmanuel Laborin.