Published on May 19, 2019

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

Sridhar Katakam

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 !important s.

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.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-down