I am building a WordPress Theme, from the ground up. At present, I have placed a style.css file within the wp-content/themes/theme-name directory. The current information, within this file, is as follows:

Theme Name: Theme Name
Theme URI: http://www.example.com/theme-name/
Author: Relevant Author Name
Author URI: http://www.example.com/authors/author-name/
Description: Relevant description.
Version: Version Number
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Relevant Tags
Text Domain: Relevant Name

I have also created a wp-content/themes/theme-name/ directory, which houses my custom stylesheet CSS file.

I am working within my functions.php and wondering which is the correct way to call my CSS Stylesheet?

Method A:

     function theme_name_script_enqueue() {
         wp_enqueue_style( 'customstylesheet', get_stylesheet_uri(), array(), '1.0', 'all');
 add_action( 'wp_enqueue_scripts', 'theme_name_script_enqueue' );

Have I got it right, that this then calls the style.css within the wp-content/themes/theme-name/ directory. How would I then 'link' this CSS file with my Custom CSS file within the wp-content/themes/theme-name/css/ directory, so that when the style.css is also calls my custom CSS file?

Method B:

This simply calls the file, housed within the wp-content/themes/theme-name/css/ directory.

    function theme_name_script_enqueue() {
        wp_enqueue_style( 'customstylesheet', get_template_directory_uri() . '/css/css_file_name.css', array(), '1.0', 'all');
add_action( 'wp_enqueue_scripts', 'theme_name_script_enqueue' );

Wordpress recommends the proper way to enqueue the main style is the method-A. Please see the WordPress theme development handbook here (though both methods will work). https://developer.wordpress.org/themes/basics/including-css-javascript/

It's not clear to me why you want to link the two .css file? You can create custom .css file and enqueue it using method-B.

However, if you want to import custom .css file to main style.css file you can use the CSS @import method. The syntex is as follows:

@import url("../theme-name/css/bootstrap.css");

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.