Support » Themes and Templates » using "wp_enqueue_scripts" instead of "@import"

  • Hello, guys. I am very new to WordPress yet. It is said here that when you use child theme you need to create two files: style.css and functions.php. The second one is needed in order to execute this code:

    add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
    function enqueue_child_theme_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
    } ?>

    It is responsible for importing the parent stylesheet into the child theme instead of using @import url("../twentyten/style.css"); (in style.css).

    I have a theme called Salient and I have made a “salient-child” directory within the “wp_content/themes/” one just right next to the original “salient” directory. In that “salient-child” directory I have created a style.css file and inserted this:

     Theme Name:   Salient Child
     Theme URI:
     Description:  An Ultra Responsive Multi-Purpose Theme.
     Author:       Tomas Baranauskas
     Author URI:   none yet
     Template:     salient
     Version:      4.0.1
     Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
     Text Domain:  salient-child

    In my “functions.php” I have inserted the code (I pasted it in the beginning of this thread already). Two problems appear:

    1. When I press F12 in Chrome browser (Windows 8.1) I see 9 errors, one of which looks like this:

      GET http://localhost/wp-content/themes/salient-child/css/fonts/OpenSans-Regular-webfont.woff

      If you need all of them I will post them later.

    2. The second issue is that responsive layout is not working correctly anymore and everything messes up.

    When I paste the “css” folder with fonts and files from my parent theme into my child one – errors are gone, however responsive layout still does not work.
    If I delete “functions.php” from my child theme, then responsive layout works fine, but if I paste any file from parent theme into the child one in order to be able to customize the theme, then WordPress doesn’t look for the files in child theme at all, goes straight to the parent one.
    If I don’t delete “function.php” from my child theme then I don’t see some of the “css” in Chrome styles tab at all.
    I didn’t test importing files using “@import” yet.

    Firstly I would like to know why it is not recommended to use “@import” in “style.css” and why my “functions.php” in child theme messes up the whole stuff. Also I would like to know why console errors occur if I do not copy the “css/fonts” directories from the parent theme to the child one. And finally help me please by telling what’s wrong with my “functions.php” and how to make it work right. Thank you very much!

  • The topic ‘using "wp_enqueue_scripts" instead of "@import"’ is closed to new replies.