How To Add Additional Style Sheets to Child Theme

  • Hi

    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

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can’t pass two function names to add_action(); you need two separate calls:

    
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.

    Thread Starter willowen100

    (@willowen100)

    Hi Stephen

    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?

    • This reply was modified 6 years, 5 months ago by willowen100.
    • This reply was modified 6 years, 5 months ago by willowen100.
    • This reply was modified 6 years, 5 months ago by willowen100.

    Technically, you don’t need any header on Extra_1.css; WordPress only looks at style.css when determining the information.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How To Add Additional Style Sheets to Child Theme’ is closed to new replies.