I'm trying to develop a wordpress theme from scratch, but I have som problem with function.php. I want to add additional style scripts like bootstrap and animate.css, but the thing is that they are not loading with the "package" and when I check the links I get style.css before my css folder. If I remove style.css I can se my file in my browser. How do I solve this problem? To remove style.css from the links.
http://localhost/humlan/wp-content/themes/humlan/style.css/css/bootstrap.min.css?ver=3.0.3'
THIS IS CODE IN FUNCTION.PHP
/**
* Enqueue scripts and styles.
*/
function humlan_scripts() {
wp_enqueue_style( 'bootstrap.min', get_stylesheet_uri() . '/css/bootstrap.min.css',false,'3.0.3','all');
wp_enqueue_style( 'prettyPhoto', get_stylesheet_uri() . '/css/prettyPhoto.css',false,'1.1','all');
wp_enqueue_style( 'font-awesome.min', get_stylesheet_uri() . '/css/font-awesome.min.css',false,'1.1','all');
wp_enqueue_style( 'animate', get_stylesheet_uri() . '/css/animate.css',false,'1.1','all');
wp_enqueue_style( 'main', get_stylesheet_uri() . '/css/main.css',false,'1.1','all');
wp_enqueue_style( 'responsive', get_stylesheet_uri() . '/css/responsive.css',false,'1.1','all');
wp_enqueue_style( 'humlan-style', get_stylesheet_uri() );
wp_enqueue_script( 'humlan-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'humlan-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'humlan_scripts' );
Try This
function load_styles(){
wp_enqueue_script( 'jQuery-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js');
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), '3.3.7', true );
}
Instead of loading css from your server, use CDN links that are comparatively faster...
Use get_stylesheet_directory_uri() - as that returns the folder of your stylesheet. What you're using returns the URI of the actual stylesheet.
Related
I have been struggling with diagnosing a bug on a project for hours now. I have currently narrowed it down to what is happening, I'm just not sure why:
I have a template partial called "testimonials.php" which enqueues styles at the top of the file:
<?php
add_action("wp_enqueue_scripts", function() {
wp_enqueue_style("testimonials-style", get_stylesheet_directory_uri() . "/partials/testimonials.css");
});
?>
However, when I try to render this as a partial in a parent template, using get_template_part('partials/testimonials') the partial is rendered, but the CSS is not enqueued. Same for enqueueing JS files. I have verified that the pathways are correct, etc.
If I enqueue the style in the parent Template, then the styles show up.
Do I really need to enqueue the styles into every parent template in which I wish to include this partial?? I must be missing something, because this doesn't seem modular at all!
Can someone please help?
Try this
CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
JS
function wpdocs_scripts_method() {
wp_enqueue_script( 'form-script', get_template_directory_uri() . '/js/form.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
<?php
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet() {
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/partials/testimonials.css', false, '1.0', 'all' );
}
For more understanding you can see following doc
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
function mytheme_scripts_styles() {
wp_enqueue_script( 'app-script', get_template_directory_uri() . '/assets/js/app.6e31112b.js', array('jquery'), 1.0, true);
wp_enqueue_style('app-css', get_stylesheet_directory_uri() . "/assets/css/build.css",false,'','all');
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts_styles' );
I'm getting stuck when it comes to enqueuing my stylesheets and scripts, they refuse to show up on the actual WordPress theme and sometimes my edits can lead to the localhost error 500.
Below is my functions.php, I've added the wp_head() and wp_footer() to their respective pages.
Any ideas?
<?php
function test_scripts() {
wp_enqueue_style( 'test-style', get_stylesheet_uri() );
wp_enqueue_style( 'test-responsive', get_template_directory_uri() . '/assets/css/responsive.css');
wp_enqueue_style( 'test-animate', get_template_directory_uri() . '/Assets/css/animate.css');
wp_enqueue_style( 'test-component', get_template_directory_uri() . '/Assets/css/component.css');
wp_enqueue_script( 'test-scripts', get_template_directory_uri() . 'Assets/js/scripts.js');
}
add_action( 'wp_enqueue_scripts', 'test_scripts' );
Some of the $src parameters look incorrect for wp_enqueue_style() and wp_enqueue_script(). Is the directory named "Assets" or "assets" on the server? You are missing a "/" with the last wp_enqueue_script(). The code below should work if "assets" is lowercase.
function test_scripts() {
wp_enqueue_style( 'test-style', get_stylesheet_uri() );
wp_enqueue_style( 'test-responsive', get_template_directory_uri() . '/assets/css/responsive.css');
wp_enqueue_style( 'test-animate', get_template_directory_uri() . '/assets/css/animate.css');
wp_enqueue_style( 'test-component', get_template_directory_uri() . '/assets/css/component.css');
wp_enqueue_script( 'test-scripts', get_template_directory_uri() . '/assets/js/scripts.js');
}
add_action( 'wp_enqueue_scripts', 'test_scripts' );
I have a wordpress local installation and I am trying to load scripts and styles with wp_enqueue but none of these are working, the front-end is not capturing any of the files,
Here is the code:
<?php
function all_the_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css' );
wp_enqueue_style( 'custom', get_template_directory_uri() . '/assets/css/custom.css' );
wp_enqueue_script( 'bootstrap.bundle', get_template_directory_uri() . '/assets/js/bootstrap.bundle.js' , array ( 'jquery' ) );
wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/assets/js/custom-scripts.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'all_the_scripts' );
?>
I have double checked everything, all the files are in the correct locations and all required arguments are given, but still no result.
I tried wp_register_script but they say that it is optional and not needed
Use
get_stylesheet_directory_uri()
instead of
get_template_directory_uri()
The get_template_directory_uri() reference to the parent theme if you're developing Child Themes, and get_stylesheet_directory_uri() returns the URI of the current theme.
I'm making a custom wordpress theme, but for some reason the enqueue style is not working.
I've added:
<?php get_header(); ?>
to the index.php
And i've added
<?php wp_head();?>
Inside the
head tag.
The following code is inside my functions.php:
function pompier_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '1.0.0', false );
//wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'pompier_scripts' );
What am i missing here?
I don't know if this helps, but I just created my first child theme, and because It's based on a parent theme, I had to enqueue my custom stylesheet like this in order to make it work:
wp_enqueue_style( 'my-style', get_stylesheet_uri() . '/style.css' );
it will probably something stupid as ussual but.. I can't get my style.css or custom.css to override the bootstrap css. I don't wanna put all my custom css in my header file because that is not really the way to do it I suppose..
Now I Tried to add it in my functions.php like this:
//Enqueue scripts and styles
function horizon_scripts() {
//Load the theme CSS
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/css/custom.css', array(), '1.0.1', 'all' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
So it loads my bootstrap css first and then the style.css and custom.css but that didn't quite hit it..
So any help would be appreciated :)
You should be using get_stylesheet_directory_uri(). Here's just the css, without your js:
function horizon_scripts() {
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'main', get_stylesheet_uri(), array('bootstrap') );
wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css', array('main') );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
Note that the third parameter of wp_enqueue_style() is "dependencies". Read more in the Codex.