I’ve successfully setup a child theme from a premium theme I bought from athemes.com called Sydney Pro. I now want to add some additional style sheets to the child theme itself but I can’t seem to get them to work. Ideally I would like any additional style sheets added to the child theme to take higher priority than the child theme’s style sheet.

Below is the child theme’s function.php

<?php
function child_theme_styles() {

    $parent_style = 'sydney-pro-ii'; // This is 'Sydney Pro IItwentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ));
}
function extra_stlyes() {
	
	wp_enqueue_style( 'tom-style', get_stylesheet_directory_uri() . '/Extra_1.css', array( $parent_style, 'child_style' )); //Extra CSS
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles', 'extra_styles' );
?>

Hope someone can shed some light on this please.

Many thanks

Will

add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
add_action( 'wp_enqueue_scripts', 'extra_styles', 11 );

In the second call, I added another argument, 11. The default priority is 10; setting the priority to 11 will ensure the WP runs the function extra_styles after child_theme_styles, which means that Extra_1.css will be added after the child and parent theme’s stylesheet.

Thanks for the reply. I’ve added your ammendments but I still can’t get the Extra_1.css to work.

This is my current functions.php file now:

<?php
function child_theme_styles() {

    $parent_style = 'sydney-pro-ii';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ));
}
function extra_stlyes() {
	
	wp_enqueue_style( 'Extra_1-style', get_stylesheet_directory_uri() . '/Extra_1.css'); //Extra CSS
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
add_action( 'wp_enqueue_scripts', 'extra_styles', 11 );
?>

This is the contents of the ‘Extra_1.css’ file:

/*
Theme Name: Sydney Pro Child
Description: Tom's style sheet
Template: sydney-pro-ii
Text Domain: Sydney Pro Child
*/
/*--------------------------------------------------------------
TITLE GOES HERE
--------------------------------------------------------------*/
body {
   border: 10px solid green !important; 
}

.site-footer {
	background-color: pink;
}

As shown in the above code there should be a green line around the entire screen. This works in the child theme but not my additional style sheets.

Also when writing up the style sheet header for the ‘Extra_1.css’ do I need to point the the template property to the parent theme or the child theme?

I just noticed this now, but when you actually define the function extra_styles, someone accidentally misspelled “styles”.