0

I'm relatively new to creating a theme with WordPress, and I've been adding all the stylesheets (main and for each page) with the old echo get_stylesheet_uri();. But I find out that this isn't the recommended way to do, and instead, to add all the styles within functions.php.

Old method (working):

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

New method (not working):

<?php
    add_theme_support('post-thumbnails');   //Posts thumbnails

    //Custom excerpt
    function get_excerpt($excerpt, $length, $more_char = '...'){
        return mb_strimwidth($excerpt, 0, $length, $more_char);
    }

    function theme_styles() {
        //METHOD 1
        //wp_register_style( 'main-style', get_template_directory_uri() . '/style.css');
        //wp_enqueue_style( 'main-style');

        //METHOD 2
        wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'theme_styles' );
?>

I tried both methods above and none worked. Is there anything wrong besides my bad English?


Edit (SOLVED)

Thanks to Nathan Johnson who found the error. I wasn't using wp_head() on my header.php, therefore, WordPress wasn't finding where to put the enqueue style. Rookie error.

6
  • Is this a child theme?
    – kero
    Commented Feb 26, 2018 at 16:55
  • @kero No, it's the main theme. Commented Feb 26, 2018 at 16:57
  • Try wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    – Sally CJ
    Commented Feb 26, 2018 at 17:30
  • 2
    Do you use wp_head()? Commented Feb 26, 2018 at 17:50
  • 1
    Please post the solution as answer, you or @NathanJohnson – because this is how this site is supposed to work. Thanks. Commented Feb 28, 2018 at 19:43

2 Answers 2

1

Before adding any file you must seperate your header.php file & add wp_head() function in header.php file

    // Load the theme stylesheets
    function theme_styles()  
    { 
        // Example of loading a custom css file for homepage just on the homepage
        wp_register_style( 'custom', get_template_directory_uri() . '/css/custom.css' );
        if(is_page('home')) {
            wp_enqueue_style('custom');
        }
        // Example of loading a main css file on all pages
        wp_enqueue_style( 'main', get_template_directory_uri() . '/css/main.css' );

        // Example of loading js files on all pages
        wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js');
    
}
    add_action('wp_enqueue_scripts', 'theme_styles');

In this case the js files will be loaded on inside the <head></head> tag. If you want to load the js files in ths bottom you must need to add <?php wp_footer() ?> on your footer. And then you need to call the wp_enqueue_script() this way.

wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js','','1.1', true); 

This true boolean is the answer of the $in_footer parameter of wp_enqueue_script() function. ( See Doc )

0

Use

wp_enqueue_style( 'theme-slug', get_stylesheet_uri() );

Building a WordPress theme always use unique theme prefix for everything including function, class, constants, option etc.

Also, read the theme development documentation on wp.org

See https://developer.wordpress.org/themes/getting-started/

Updated (27-Feb-2018) Use unique prefix for your theme/plugin which avoid the conflict in between other theme/plugin.

2
  • Having a prefix is good practice, because it avoids conflict, but it is absolutely not a technical requirement that would stop this working. You can technically call the stylesheet whatever you want, and WordPress doesn't register any bundled stylesheets that are called 'main-style' that would cause conflicts. Commented Feb 27, 2018 at 9:15
  • Right, WordPress does not use prefix 'main-style' in the core. But, Other plugin/theme developers will use this common prefix (by mistake) for there scripts. Commented Feb 27, 2018 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.