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.

  • Is this a child theme? – kero Feb 26 '18 at 16:55
  • @kero No, it's the main theme. – Bruno Marini Feb 26 '18 at 16:57
  • Try wp_enqueue_style( 'main-style', get_stylesheet_uri() ); – Sally CJ Feb 26 '18 at 17:30
  • 2
    Do you use wp_head()? – Nathan Johnson Feb 26 '18 at 17:50
  • 1
    Please post the solution as answer, you or @NathanJohnson – because this is how this site is supposed to work. Thanks. – Nicolai Feb 28 '18 at 19:43
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.

  • 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. – Jacob Peattie Feb 27 '18 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. – maheshwaghmare Feb 27 '18 at 10:13
0

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 the 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 )

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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