I'm trying to integrate js and CSS code elements in a twenty-seventeen WordPress theme. I use enqueue methods but it does not work, so suggest me to all about.
Write in function.php this code
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function 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 );
}
Related
I'm doing a portfolio. I didn't want to loose a lot of time but as newbie this is still difficult for me so i challenge myslef. So i took a template bootstrap and I want to 'import' the template on my wordpress website.
I used the wp_enqueue_script to link my css and js to my page. Here the code in the function.php :
unction portoflio_theme_bootstrap_scripts() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() .'/assets/vendor/bootstrap/css/bootstrap.min.css', array());
wp_enqueue_style( 'bootstrap-icons', get_template_directory_uri() .'/assets/vendor/bootstrap-icons/bootstrap-icons.css', array());
wp_enqueue_style( 'boxicons', get_template_directory_uri() .'/assets/vendor/boxicons/css/boxicons.min.css', array());
wp_enqueue_style( 'glightbox', get_template_directory_uri() .'/assets/vendor/glightbox/css/glightbox.min.css', array());
wp_enqueue_style( 'swiper', get_template_directory_uri() .'/assets/vendor/swiper/swiper-bundle.min.css', array());
wp_enqueue_style( 'main-style', get_template_directory_uri() .'/assets/css/style.css', array());
wp_enqueue_script( 'purecounter', get_template_directory_uri() . '/assets/vendor/purecounter/purecounter_vanilla.js', array());
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.bundle.min.js', array());
wp_enqueue_script( 'glightbox', get_template_directory_uri() . '/assets/vendor/glightbox/js/glightbox.min.js', array());
wp_enqueue_script( 'isotope-layout', get_template_directory_uri() . '/assets/vendor/isotope-layout/isotope.pkgd.min.js', array());
wp_enqueue_script( 'swiper', get_template_directory_uri() . '/assets/vendor/swiper/swiper-bundle.min.js', array());
wp_enqueue_script( 'waypoints', get_template_directory_uri() . '/assets/vendor/waypoints/noframework.waypoints.js', array());
wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/assets/js/main.js', array());
}
add_action( 'wp_enqueue_scripts', 'portoflio_theme_bootstrap_scripts' );
The css is working but the js not really. I think the js "isotope-layout" is woking because without this file, the section porfolio doesn't work. So, if this js file work, why the others don't work ?
I did a mistake somewhere.
Here the link of my one-page portoflio : https://pierre-fayard.com/visual-composer-3615/
I searched and tried a lot of things but nothing is working.
If you need more files, tell me. I'm a newbie so maybe i forgot something.
Thank you !
So I'm trying to migrate my static site into a WordPress one and having trouble getting the styles and scripts to load properly.
Here is my functions.php
<?php
function my_styles() {
wp_enqueue_style( 'style', get_template_directory_uri() . 'css/style.css', false, '1.0', 'all');
}
add_action ('wp_enqueue_scripts', 'my_styles');
?>
My style.css is within a folder named css that's within the themes folder itself. Anyone have any idea why this wouldn't load the stylesheet as expected?
All your missing is the slash before css. Best of luck!
wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css', false, '1.0', 'all');
try this code
<?php
add_action( 'wp_enqueue_scripts', 'thene_styles', PHP_INT_MAX);
function theme_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
?>
I am in a bit of a pickle, lol.
Here is my function:
function start_group_escapes_4_less() {
wp_enqueue_style( 'style', get_stylesheet_uri() . '/style.css');
wp_enqueue_script( 'ge4l', get_stylesheet_uri() . '/js/ge4l.js', array('jquery'), null, true);
}
add_action( 'wp_enqueue_scripts', 'start_group_escapes_4_less' );
Everywhere I checked, the syntax is right. Or is it?
Help :(
The function get_stylesheet_uri() return the url of the theme style.css file.
You need to use get_stylesheet_directory_uri()
function start_group_escapes_4_less() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css');
wp_enqueue_script( 'ge4l', get_stylesheet_directory_uri() . '/js/ge4l.js', array('jquery'), null, true);
}
add_action( 'wp_enqueue_scripts', 'start_group_escapes_4_less' );
Make sure the directory of the files style.css and ge4l.js are correct and appropriate to the wp-admin file. Or try puting ~ sign at the directory shown in your code.
Check the value of return => <?php echo get_stylesheet_uri(); ?>
Use get_template_directory() ?!
My folder for my child themes is well composed of a file 'style.css' and 'functions.php'
In my functions.php file I can not access my function theme_enqueue_styles() to use my custom css
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );
}
For the child theme, you need to replace get_template_directory_uri() to get_stylesheet_directory_uri().
The code should be:.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() .'/style.css' );
}
I'm trying to link my WordPress Stylesheet to child theme at different directory/sub folder, it doesn't seems to work. Below are the code where I place it at functions.php
function theme_add_bootstrap()
{
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . 'assets/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . 'assets/css/custom.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . 'assets/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
I try putting #import statement inside style.css, it doesn't work also.
Use this:-
function theme_add_bootstrap()
{
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/assets/css/custom.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
Remember that get_template_directory_uri() will give you directory uri path with no /. SO you need to add / after this function.
Hope this will work for you.