I've started building a theme for Wordpress. Add a certain point I want to add some style to the site. I can get it to work when adding the style to the header, but I want to use the function.php file to accomplish this. This is what I got:
<?php
function addCss(){
wp_enqueue_style('style', get_template_directory_uri() . 'style.css');
}
add_action("wp_enqueue_scripts", "addCss");
?>
It's a very simple function, but for some reason, the function is not fired. I also don't get any errors and style.css is not added to the site according to the console.
My file structure:
I've tried searching for a solution, but couldn't find any. I hope u guys can help me.
Make sure you call <?php wp_head(); ?> in header.php just before ending </head> tag.
function addMyStyle() {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css', false, '1.0', 'all' );
}
add_action('wp_head', 'addMyStyle');
get_template_directory_uri() return a path without the "/" at the end.
Add a "/" in your path:
// add this line to create a versionning of your stylesheet
$ver = time();
wp_enqueue_style('style', get_template_directory_uri() . '/style.css', $ver);
I hope that help you !
You need to have wp_head() in header.php
if ( ! function_exists( 'themescripts' ) ) {
function themescripts() {
wp_enqueue_style('style', get_stylesheet_uri(), array());
wp_enqueue_script( 'jquery', array(), '', true);
....
}
add_action( 'wp_enqueue_scripts', 'themescripts' );
}
Also, make sure to have wp_footer() in footer.php file.
Related
I have the following code to where it's supposed to work.
function boom_theme_styles() {
wp_enqueue_style( 'style_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'boom_theme_styles' );
However, the style.css will not load. Looks like a basic webpage from the 1990s. Thanks for the help.
wp_enqueue_style('style_css', get_stylesheet_uri());
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 have tried using the following code to embed Bootstrap to Wordpress but it doesn't work. Need help..........
<?php
function resources() {
wp_enqueue_style('style',get_stylesheet_uri());
wp_enqueue_style('bootstrap.min',get_template_directory_uri().'/css/bootstrap.min.css');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/css/bootstrap.css');
wp_enqueue_style('bootstrap-theme.min',get_template_directory_uri().'/css/bootstrap-theme.min.css');
}
add_action('wp_enqueue_scripts', 'resources');
This may be helpful to you
WordPress is to use wp_enqueue_style and wp_enqueue_script from within functions.php. In particular, we need to create a new function that adds (or enqueues) the css style and the js script and then allow WordPress to call it at the right moment by adding a wp_enqueue_scripts action.
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
For Reference: click here
In order towp_enqueue_scripts in function.php work properly, <?php wp_head(); ?> needs to be placed before the closing </head> and <?php wp_footer(); ?> before closing </body> tag in your template file.
Because you didn't post your template file, so I think this can be a reason causes your problem.
Hope this help
Just use the bootstrap CDN - https://www.bootstrapcdn.com/
In your child theme find the function theme_enqueue_styles() and add the two lines of extra code shown below.
function theme_enqueue_styles() {
// Add the following two lines //
wp_enqueue_style( 'bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );
// ------ -------//
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') );
}
Make sure your file location of downloaded bootstrap files. and put this code into functions.php
1.stylesheet CSS file
2.script js file
<?php
function load_stylesheets()
{
// enqueue parent styles
wp_enqueue_style('bootstrap', get_stylesheet_directory_uri().' /css/bootstrap.min.css');
wp_enqueue_script('bootstrap', get_stylesheet_directory_uri().' /js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts','load_stylesheets');
?>
I've been following a tutorial online thats taught me how to enqueue stylesheets for Wordpress with the functions folder instead of the headerusing the following code:
function lucieaverillphotography_scripts() {
wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() ); }
Followed by:
add_action( 'wp_enqueue_scripts', 'lucieaverillphotography_scripts' );
This has worked, but when I tried to enqueue a separate stylesheet for a page template, it won't work. Here is the code I used, I put it between the two above:
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'lucieaverillphotography-full-page' ,
get_template_directory_uri() . '/css/full-page.css');
}
else { wp_enqueue_style( 'lucieaverillphotography_style',
get_template_directory_uri() . '/style.css'); }
I have a feeling that it's something to do with the last part: '/style.css' ... but the only way I can get my theme to recognise the new stylesheet is by adding: '/css/full-page.css' in its place and then it uses the new stylesheet for every page rather than the page template.
If I change it by adding the name of the folder that contains style.css - i.e '/files/style.css' , I lose all my css altogether, which is puzzling as I thought this was the most obvious thing to try.
Try This in functions.php
function lucieaverillphotography_scripts() {
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'lucieaverillphotography-full-page' , get_template_directory_uri() . '/css/full-page.css');
}
else{
wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'lucieaverillphotography_scripts' );
I am trying to en-queue css in WordPress.
Here is my code:
function adding_styles()
{
wp_register_script( 'jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
// Register the style like this for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'jquery-ui-css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'adding_styles' );
However, jquery-ui.css doesn't load. Can anybody guess the error here??
I believe you need to add path to the CSS file -
wp_enqueue_style( 'jquery-ui-css',get_stylesheet_uri() );
EDIT -
It will clearly works with the URL -
wp_enqueue_style( 'jquery-ui-css', http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css );
Reference - wp_enqueue_style
Look for$src parameter
Try this:
You can add javascript & css in wordpress like this
function load_custom_wp_admin_js() {
wp_enqueue_script('custom_wp_admin_js', plugins_url() . '/dynamic-headers/dynamic-header.js');
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_js');
Add this code in function.php file.
-
Thanks