I can't enqueue css using a function in WordPress

122
January 02, 2018, at 7:28 PM

My stylesheet is enqueued if i use

<link rel = "stylesheet" type = "text/css" href = "<?php echo get_template_directory_uri();?>/style.css">

but it's not included when i use

function include_css(){
    wp_enqueue_style('main_css',get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','include_css');
Answer 1

You may correct the code like this :

function include_css(){
    wp_enqueue_style('main_css',get_template_directory_uri().'/style.css');
}
add_action('wp_enqueue_scripts','include_css');
Answer 2

The issue is that you are trying to enqueue the css file without specifying it's complete url the code you use i.e

> wp_enqueue_style('main_css',get_stylesheet_uri());

This means that you are adding the style.css file which is always on the root directory but still you are giving name as main_css first make sure which css you want to add then someone will able to properly answer your question and the css you are trying to add is in which directory.

Please refer to this link get_stylesheet_uri

Answer 3

Add this code in theme's functions.php

function enqueue_scripts() {
    wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css', array());
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
READ ALSO
Hover issue in navbar with Bootstrap 4

Hover issue in navbar with Bootstrap 4

I have created a navbar with Bootstrap 4When I click on a dropdown menu link, it opens and remains open — when I hover on another dropdown link, they overlap

89
Android webview pixels

Android webview pixels

I have an android app with webviewThe problem is: if i put a div (width:400px) in html code webview is scaling it

137
How to make a footer always stay on the bottom of the page with Bootstrap v4? [on hold]

How to make a footer always stay on the bottom of the page with Bootstrap v4? [on hold]

I want it to stay at the bottom of the page even if there is no content above it

139
CSS changes appear in inspector, but not upon applying changes in actual CSS file and refreshing

CSS changes appear in inspector, but not upon applying changes in actual CSS file and refreshing

I am working on a project using the Twitter APIBasically, type in a username and it fetches the users tweets and renders them on the page, It renders them in the typical card Twitter provides for embedded tweets, I am trying to change the height of the cards

64