This question already has answers here:
how to properly enqueue styles and scripts in PHP/WordPress
(2 answers)
Closed 10 months ago.
I am new in Wordpress and I am writing this code in my functions.php but it isn't working. This is my code:
<?php
function myFunction(){
wp_enqueue_style('style',get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','myFunction');
This function must add my style.css in my page but is not working.
Please see all the parameters of wp_enqueue_scripts
Try below code :
/**
* Proper way to enqueue scripts and styles
*/
function myFunction() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'myFunction' );
Try with this:
add_action( 'after_setup_theme', 'yourtheme_theme_setup' );
if ( ! function_exists( 'yourtheme_theme_setup' ) ) {
function yourtheme_theme_setup() {
add_action( 'wp_enqueue_scripts', 'yourtheme_scripts' );
}
}
if ( ! function_exists( 'yourtheme_scripts' ) ) {
function yourtheme_scripts() {
wp_enqueue_style( 'main_style', get_stylesheet_uri(), array() );
}
}
Here the wp_enqueue_scripts action gets called inside the after_setup_theme hook.
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
just you should use the wp_head() in the <head> tag for applying styles
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
...
</body>
</html>
Add in header file
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Related
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.
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.
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" />
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' ); }
I'm completely new to Codex and PHP, just started learning it two days ago.
I am converting my html and css over to Wordpress.
I have two style sheets, one for my static front-page and the main stylesheet for the rest of the pages. I'm completely going overboard in my head. I'm trying to figure out how to make a if and else statement.
So if the front page is loaded, open this style sheet. If not, load the main stylesheet.
This is what I've tried so far:
function register_more_stylesheets() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri() );
}
function add_my_stylesheet() {
if ( is_front_page() )
wp_register_style( 'homestyle', get_template_directory_uri() . '/homestyle.css' );
}
add_action( 'init', 'register_more_stylesheets' );
add_action( 'wp_enqueue_scripts', 'add_my_stylesheet' );
Another thing I'm getting messed up with is my link rel to all this..
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<link rel="stylesheet" type="text/css" href="<?php bloginfo("template_directory"); ?>/homestyle.css" />
This is all in the header.php, I'm linking both, but both seem to be kind of colliding both my stylesheets.
Following basic code convention from Codex WordPress or default Themes you can easily handle this problem.
Usage
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Using Hook
/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Use Something like this:
<?php if(is_home()) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo("template_directory"); ?>/homestyle.css" />
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php } ?>
Put below code to your functions.php file:
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'single-style', get_stylesheet_directory_uri() );
wp_register_style( 'home-style', get_template_directory_uri() . '/homestyle.css' );
if( is_single() )
wp_enqueue_style( 'single-style' );
else
wp_enqueue_style( 'home-style' );
}
I'm using the plugin 'Ninja From' and I'm trying to stop it from loading a CSS file in the header.
The code that shows up when the wp_head() is called:
<link rel='stylesheet' id='nf-display-css' href='http://example.com/wp-content/plugins/ninja-forms/assets/css/display-structure.css?ver=4.7.1' type='text/css' media='all' />
My code:
function remove_css_ninja_form(){
wp_dequeue_style('nf-display-css');
wp_deregister_style('nf-display-css');
wp_dequeue_style('nf-display');
wp_deregister_style('nf-display');
}
add_action( 'wp_enqueue_scripts', 'remove_css_ninja_form', 99999 );
add_action( 'wp_print_styles', 'remove_css_ninja_form', 99999 );
add_action( 'wp_head', 'remove_css_ninja_form', 9999 );
It is not working.
The PHP code from the plugin that's loading the CSS file:
wp_enqueue_style( 'nf-display', $css_dir . 'display-structure.css', array( 'dashicons' ) );
Ninja Forms has a custom action you can use to dequeue the CSS.
function wpse_nf_dequeue_styles() {
wp_dequeue_style( 'nf-display' );
}
add_action( 'nf_display_enqueue_scripts', 'wpse_nf_dequeue_styles' );
function remove_ninjafrom_style() {
wp_dequeue_style( "nf-display" );
}
add_action('wp_print_styles', 'remove_ninjafrom_style', 100);
I get some issue when putting .css file into the <head>
The function which I use works great but files added after all the <script> tag and I would like to add them before.
function custom_styles() {
echo"
<link rel='stylesheet' href='/css/custom.css' type='text/css' media='all'>
<link rel='stylesheet' href='/css/screen.css' type='text/css' media='all'>
";
}
add_action( 'wp_head', 'custom_styles' 10 );
Any help would be appreciated
It is because wp_head actions defined by user is triggered after the ones defined by wordpress, so your content will be added at the end of <head> tag. You can change the priority of action to value below default ( 10 ) , add_action( 'wp_head', 'custom_styles', 1 );, or you can use more appropriate action wp_enqueue_scripts and method wp_enqueue_style.
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/css/custom.css' );
});
Try below code
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
// add js file in html header
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
see more example
This question already has answers here:
Adding other css files to wp_head
(5 answers)
Closed 8 years ago.
I am working on plugin, i want to write a text line between head tag in header.php
For example:
when a user install and activate the plugin.
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/foo/foo_style.css" />
will automatically include in header.php
any idea.
You can use the wp_enqueue_style options for that.
Something like this (not tested):
add_action( 'wp_enqueue_scripts', 'loadCSS' );
function loadCSS() {
wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
wp_enqueue_style( 'myPluginStylesheet' );
}
See for more information: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
And please, make the addition of your styles optional :-)
Try this:-
if (is_plugin_active('plugin-directory-path/plugin-file.php')) {
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/foo/foo_style.css" />
}
is_plugin_active() will check whether a plugin is activated or not
Use:
function my_scripts() {
if (is_plugin_active('plugin-directory/plugin.php')) {
wp_enqueue_style( 'plugin_css', get_template_directory_uri() . '/css/yourplugin.css', false, '1.0', 'all' );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );