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 !
Related
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'm trying to build a child theme for an existing theme someone else built. That theme uses multiple stylesheets and of course, I want the child theme to enqueue them all.
Strangely enough I noticed that that only the first line of the wp_enqueue_style() of the parent theme gets executed while the wp_enqueue_style() of the child theme does work.
I'm kinda stuck and I have no clue on how to make the child theme use all those stylesheets.
function my_theme_enqueue_styles() {
//parent style
$parent_style = 'parent-style';
//enqueue css of the parent theme
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/assets/scripts/css/bootstrap.min.css' );
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/assets/scripts/css/custom-login.css' );
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/assets/scripts/css/font-awesome.min.css' );
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/assets/scripts/css/font-dc-cash.css' );
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/assets/scripts/css/font-dccash.css' );
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/assets/scripts/css/hro-admin.css' );
//enqueue css of the child theme
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
btw: I know that those css files dont't make any sense. Tell that to the original builder.
download link of the parent theme
The first parameter to wp_enqueue_style() needs to be unique. You are passing in $parent_style for everything. If you give them all unique names, maybe using $parent_style as a prefix, it should fix it.
Give first parameter a name, a unique one so in that way you can enqueue all of them.
Based on wordpress codex:
wp_enqueue_style( string $handle, string $src = '')
$handle
(string) (Required) Name of the stylesheet. Should be unique.
function my_theme_enqueue_styles() {
//parent style
$parent_style = 'parent-style';
//enqueue css of the parent theme
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/scripts/css/bootstrap.min.css' );
wp_enqueue_style( 'custom_login', get_template_directory_uri() . '/assets/scripts/css/custom-login.css' );
wp_enqueue_style( 'font_awesome', get_template_directory_uri() . '/assets/scripts/css/font-awesome.min.css' );
wp_enqueue_style( 'font_dc_cash', get_template_directory_uri() . '/assets/scripts/css/font-dc-cash.css' );
wp_enqueue_style( 'font_dccash', get_template_directory_uri() . '/assets/scripts/css/font-dccash.css' );
wp_enqueue_style( 'hro_admin', get_template_directory_uri() . '/assets/scripts/css/hro-admin.css' );
//enqueue css of the child theme
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
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() ?!
I have made my own template by using html, css and js.
Template worked great on my local server. Now I wanted to create Wordpress theme and once I put my custom css file, page is blank. Nothing shows up on the screen, once I remove it I get information on the screen but without custom css it looks bad.
Here is the function I use to import styles and scripts. I am new in wordpress.
ju_dizajn is custom css. It loads it but site is blank.
function ju_enqueue() {
wp_register_style( 'ju_fonts', 'http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic');
wp_register_style( 'ju_bootstrap', get_template_directory_uri() . '/css/bootstrap.css');
wp_register_style( 'ju_dizajn', get_template_directory_uri() . '/css/dizajn.css');
wp_register_style( 'ju_swiper', get_template_directory_uri() . '/css/swiper.css');
wp_register_style( 'ju_dark', get_template_directory_uri() . '/css/dark.css');
wp_register_style( 'ju_font-icons', get_template_directory_uri() . '/css/font-icons.css');
wp_register_style( 'ju_animate', get_template_directory_uri() . '/css/animate.css');
wp_register_style( 'ju_magnific-popup', get_template_directory_uri() . '/css/magnific-popup.css');
wp_register_style( 'ju_responsive', get_template_directory_uri() . '/css/responsive.css');
wp_enqueue_style('ju_fonts');
wp_enqueue_style('ju_bootstrap');
wp_enqueue_style('ju_dizajn');
wp_enqueue_style('ju_swiper');
wp_enqueue_style('ju_dark');
wp_enqueue_style('ju_font-icons');
wp_enqueue_style('ju_animate');
wp_enqueue_style('ju_magnific-popup');
wp_enqueue_style('ju_responsive');
wp_register_script( 'ju_query', get_template_directory_uri() . '/js/jquery.js');
wp_register_script( 'ju_plugins', get_template_directory_uri() . '/js/plugins.js');
wp_register_script( 'ju_function', get_template_directory_uri() . '/js/functions.js');
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/jquery.js', array (), false, true);
wp_enqueue_script( 'plugins', get_template_directory_uri() . '/js/plugins.js', array (), false, true);
wp_enqueue_script( 'functions', get_template_directory_uri() . '/js/functions.js', array (), false, true);
}
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.