Set custom stylesheet to override styles.css

[Saqib Ali]

I've enqueued a custom stylesheet into my functions.php folder

How would you go about making this custom stylesheet more prominent because some the style.css stylesheet is not being overridden by some changes I've made in the custom.css stylesheet.

http://development site

[Victor Font]

The enqueue function has a parameter for priority. Priority determines the load order of style sheets. The higher the priority, the later in the process the style sheet loads. With CSS, the last style sheet to load has the priority in the browser. So, in essence, you have to give the custom style sheet a higher priority than the theme style sheet. This should point you in the right direction: https://victorfont.com/change-genesis-child-theme-style-sheet-load-order/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Saqib Ali]

Thank you @victorfont I've updated the functions.php file and have given styles.css a higher priority, however, when I tried to give an even higher priority for the custom stylesheet, the page has spat out an error on the top.

//* Loads Responsive Menu, Google Fonts, Icons, and other scripts
add_action( 'wp_enqueue_scripts', 'market_enqueue_scripts' );
function market_enqueue_scripts() {

	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Gentium+Basic:400,400italic|Arimo:400,400italic|IM+Fell+English:400,400italic|EB+Garamond|Homemade+Apple', array() );
	wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css' );
	wp_enqueue_script( 'global-script', get_bloginfo( 'stylesheet_directory' ) . '/js/global.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
	wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
	wp_enqueue_script( 'market-fadeup-script', get_stylesheet_directory_uri() . '/js/fadeup.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'match-height', get_stylesheet_directory_uri() . '/js/jquery.matchHeight-min.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'match-height-init', get_stylesheet_directory_uri() . '/js/matchheight-init.js', array( 'match-height' ), '1.0.0', true );
}

//* Load main style sheet after WooCommerce */
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 30 ); //change load priority

add_action( 'wp_enqueue_scripts', 'custom', 40 ); //custom stylesheet

[Saqib Ali]

Cheers @victorfont I've updated the functions.php file and have given styles.css a higher priority, however, when I tried to give an even higher priority for the custom stylesheet, the page has spat out an error on the top.

//* Loads Responsive Menu, Google Fonts, Icons, and other scripts
add_action( 'wp_enqueue_scripts', 'market_enqueue_scripts' );
function market_enqueue_scripts() {

	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Gentium+Basic:400,400italic|Arimo:400,400italic|IM+Fell+English:400,400italic|EB+Garamond|Homemade+Apple', array() );
	wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css' );
	wp_enqueue_script( 'global-script', get_bloginfo( 'stylesheet_directory' ) . '/js/global.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
	wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
	wp_enqueue_script( 'market-fadeup-script', get_stylesheet_directory_uri() . '/js/fadeup.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'match-height', get_stylesheet_directory_uri() . '/js/jquery.matchHeight-min.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'match-height-init', get_stylesheet_directory_uri() . '/js/matchheight-init.js', array( 'match-height' ), '1.0.0', true );
}

//* Load main style sheet after WooCommerce */
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 30 ); //change load priority

add_action( 'wp_enqueue_scripts', 'custom', 40 ); //custom stylesheet

[Victor Font]

wp_enqueue_scripts requires a function as its argument. That's why you're receiving the error. https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

You are loading custom in add_action( 'wp_enqueue_scripts', 'market_enqueue_scripts';. Remove custom from that function and create a new function:

function load_custom_styles() {
	wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'load_custom_styles', 40 ); //custom stylesheet

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Victor Font]

You're last post didn't come through. If it had more than two links, it was spammed.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts