Enqueue site-banner.css for Wordpress Child Theme to Overwrite Parent Theme

0
votes

I have made changes to site-banner.css in my child theme. I want to enqueue the file to overwrite the parent theme.

I tried including this in the functions.php file but I can't see the changes on refresh:

function enqueue_child_theme_style() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'site-banner.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_style', 10 );

Worth mentioning there is already one enqueue in the functions.php file for style.css. Do I need to add more detail to the function? Also tried changing file location and refrencing it in the uri().

3
phpcsswordpress
Have you looked into your source code, to see if your Custom CSS File, is the last stylesheet to be outputted? The Theme Author could be calling a stylesheet from within a Plugin, for example, which could be overriding your Custom CSS, since it is being loaded after your Custom CSS. If this is the case, then a rearrangement of priorities will be required. - Craig
This looks to be the case. The custom site-banner1.css starts approx line 300 and the parent equivalent approx line 60. They're three other style sheets that load after the child file but they are not site-banner.css. I downloaded the Asset Queue Manager plugin and curiously my site-banner1.css child file doesn't appear, only the parent. However it is in the source code. - Pete
I should also say that I want these changes to take affect on the mobile site. Not sure if this changes the function in any way. - Pete
It would be easier if we could see the website itself; so that we can see the outputted HTML and establish where the issue may be; Plugin, Theme, coding error etc. You can also delete the URL, from here, once the problem has been resolved. - Craig

3 Answers

1
votes

Can you try this?

function enqueue_child_theme_style() {
   wp_dequeue_style( 'child-style' );
   wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'site-banner.css' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_style', 10 );
1
votes

First of all, you missed slash( / ) in this line:

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'site-banner.css' );

If your file is directly into your child theme directory, then your code will be:

function enqueue_child_theme_style() {
   wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/site-banner.css' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_style', 99);

Also, make sure, that your handler child-style not duplicated. If so and you want to override it( not recommended to keep it same. it'll better to have some other handler name ). This line wp_dequeue_style( 'some-style' ); we use to preventing stylesheet with handler some-style to load in your pages. Then your code will be:

function enqueue_child_theme_style() {
   wp_dequeue_style( 'some-style' ); //you can delete this line, if you want to keep the stylesheet in pages. Second line will load below of this stylesheet and will override css rules
   wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/site-banner.css' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_style', 99);

In this line add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_style', 99); 99 mean, that we added higher priority, then is default(10) in wordpress. This will load your stylesheet later, then other stylesheets, which usign lower priority.

Edit

Use this function to remove site-banner.css from your parent theme, and call your own site-banner1.css stylesheet:

function enqueue_child_theme_style() {
   wp_dequeue_style( 'site-banner' );
   wp_enqueue_style( 'child-banner', get_stylesheet_directory_uri().'/site-banner.css' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_style', 99);
0
votes

I managed to fix the problem by using wp_deregister_style:

add_action( 'wp_enqueue_scripts', 'load_alta_styles', 200 );

function load_alta_styles() {

wp_dequeue_style( 'tesseract-site-banner' );
wp_deregister_style( 'tesseract-site-banner' );



wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/site-banner1.css' );



}

Thanks for all the input on this.