Import CSS files in WordPress

Question

I'm trying to migrate my HTML to WordPress template. While I'm doing that, I want to keep my CSS files where they are placed and import them to the code. I found out that I can use functions.php file to make it easier.

Below is the code that I added to functions.php:

<?php
function add_theme_codes() {     
 wp_enqueue_style(‘bootstrap’,get_stylesheet_directory_uri().’/css/bootstrap_grid.css’, ‘all’); 
 wp_enqueue_style( ‘style’, get_stylesheet_directory_uri().’/css/main.css’, ‘all’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>

But still my WordPress site is not importing the CSS files.

Check your browsers console log. Are there any errors saying it can't find these files? — wharfdale
– wharfdale, Commented May 9, 2018 at 10:15
No, my console says nothing. There's just a plugin installed message is displayed. — Ramesh
– Ramesh, Commented May 9, 2018 at 10:20

Tristup · Accepted Answer · 2018-05-09 10:52:33Z

4

Still you have selected the answer I would like to answer on your last desire that you want this to work in a proper way that WordPress do. Please check wp_footer is called before body tag closed or not. Action Hook wp_enqueue_scripts will called in wp_footer function. Please try once and let me know the result.

answered May 9, 2018 at 10:52

Tristup

3,6381 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ramesh Over a year ago

i added wp_footer between </body> and </html> tag. Will it cause a problem here?

Tristup Over a year ago

Please try it by adding before </body> hopefully that will do

PPL · Accepted Answer · 2018-05-09 10:31:53Z

2

You can get css file from below code:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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') );
}
?>

Or in Header section before wp_head() add below code

<link href="<?php echo get_bloginfo('stylesheet_directory');?>/css/bootstrap_grid.css" rel="stylesheet" />      
<link href="<?php echo get_bloginfo('stylesheet_directory');?>/css/main.css" rel="stylesheet" />

edited May 9, 2018 at 10:31

answered May 9, 2018 at 10:09

PPL

6,5551 gold badge13 silver badges32 bronze badges

4 Comments

Ramesh Over a year ago

Can you explain the concept behind the parent-style and child-style? In my case I'm using two separate css files which not depended on each other

PPL Over a year ago

It is related to parent theme, child theme concept, If you are using child then you can call css like above example.

Ramesh Over a year ago

Huh, no. I am just trying to convert my html project to a WordPress theme. I'm not using any other theme.

Ramesh Over a year ago

That stuff worked. But I feel like using functions.php is the formal way. Anyway thank you for your valuable time and answer.

Viswa · Accepted Answer · 2018-05-09 11:35:03Z

0

Wrap with add_action and this might work

<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_register_style('css-ui',get_template_directory_uri().'/assets/css/style.css' ); wp_enqueue_style('css-ui' ); }

answered May 9, 2018 at 11:35

Viswa

262 bronze badges

Collectives™ on Stack Overflow

Import CSS files in WordPress

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related