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);
}
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 !
<?php
// Adding CSS and JS files
function add_theme_scripts() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4', 'all');
wp_enqueue_style( 'main', get_template_directory_uri() . '/css/main.css', array(), '1.1', 'all');
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_script('jquery');
wp_enqueue_script( 'isotope', get_template_directory_uri() . '/js/isotope.pkgd.min.js', array ( 'jquery' ), '3.0.6', true);
wp_enqueue_script( 'imagesloaded', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array ( 'jquery' ), '4.1.4', true);
wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array ( 'jquery' ), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
?>
All scripts and CSS files are loaded properly except jQuery. But wp_enqueue_script('jquery') worked for me in the past.
Wordpress by default register jquery for you but if you like to re-enqueue it then here is a code for it
add_action('wp_enqueue_scripts', 'enqueue_script_jquery');
function enqueue_script_jquery() {
wp_enqueue_script('jquery');
}
you can also enqueue different version of jquery but it is better to de-register other versions to avoid conflicts
for other version do like this in the function above
add_action('wp_enqueue_scripts', 'enqueue_script_jquery');
function enqueue_script_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.js', array(), null, true);
}
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 enqueued my custom css in my theme file, but it's not showing any results. When I check the source file i.e. CTRL+U, it's showing my custom-css file, but my CSS file is not working.
function child_theme_scripts_styles() {
wp_enqueue_style( 'Awesome Font', get_stylesheet_directory_uri() . '/css/font-awesome.min.css', array(), '4.3.0' );
wp_enqueue_style('Bootstrap-css', get_stylesheet_directory_uri(). '/css/bootstrap.min.css');
wp_enqueue_script( 'bootstrap-min-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
wp_enqueue_script( 'custom-css', get_stylesheet_directory_uri() . '/css/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_scripts_styles' );
Any help?
you are using wp_enqueue_script to load the stylesheet file. Wordpress couldn't recognize your css file since you are linking with script.
Use this
function child_theme_scripts_styles() {
wp_enqueue_style( 'Awesome Font', get_stylesheet_directory_uri() . '/css/font-awesome.min.css', array(), '4.3.0' );
wp_enqueue_style('Bootstrap-css', get_stylesheet_directory_uri(). '/css/bootstrap.min.css');
wp_enqueue_script( 'bootstrap-min-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/css/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_scripts_styles' );
Replace
wp_enqueue_script( 'custom-css', get_stylesheet_directory_uri() . '/css/custom.css' );
With
wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/css/custom.css' );
For Reference Visit
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
https://codex.wordpress.org/Function_Reference/wp_enqueue_script
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.