I have a problem: the css and js files not loaded, but It's showed on source code.
I'm including it on functions.php file just like below code.
The source page: http://jalid-wp.co.nf
Please any help for this problem.
function load_scripts() {
// CSS Files
wp_enqueue_style( 'main', get_template_directory_uri() . '/assets/css/main.css' );
wp_enqueue_style( 'responsive', get_template_directory_uri() . '/assets/css/responsive.css' );
wp_enqueue_style( 'animate', get_template_directory_uri() . '/assets/css/animate.css' );
wp_enqueue_style( 'ionicons-min', get_template_directory_uri() . '/assets/css/ionicons.min.css' );
wp_enqueue_style( 'owl-carousel-min', get_template_directory_uri() . '/assets/css/owl.carousel.min.css' );
wp_enqueue_style( 'owl-theme-default-min', get_template_directory_uri() . '/assets/css/owl.theme.default.min.css' );
wp_enqueue_style( 'pe-icons-min', get_template_directory_uri() . '/assets/css/pe-icons.min.css' );
wp_enqueue_style( 'font-awesome-min', get_template_directory_uri() . '/assets/css/font-awesome.min.css' );
wp_enqueue_style( 'material-icons', get_template_directory_uri() . '/assets/css/material-icons.css' );
// Colors
wp_enqueue_style( 'color', get_template_directory_uri() . '/assets/css/colors/default.css' );
// JS Files
wp_enqueue_script( 'jquery-min', get_template_directory_uri() . '/assets/js/jquery.min.js', array(), '3.2.1', true );
wp_enqueue_script( 'owl-carousel-min', get_template_directory_uri() . '/assets/js/owl.carousel.min.js', array(), 'null', true );
wp_enqueue_script( 'slideNav', get_template_directory_uri() . '/assets/js/slideNav.js', array(), 'null', true );
wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array(), 'null', true );
wp_enqueue_script( 'wow-min', get_template_directory_uri() . '/assets/js/wow.min.js', array(), 'null', true );
wp_enqueue_script( 'bootbox-min', get_template_directory_uri() . '/assets/js/bootbox.min.js', array(), 'null', true );
wp_enqueue_script( 'bootstrap-min', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array(), 'null', true );
wp_enqueue_script( 'isotope-min', get_template_directory_uri() . '/assets/js/isotope.min.js', array(), 'null', true );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
You appear to have some sort of redirect on your site.
No matter what page you try to visit it always redirects to the main page.
I believe this is why the CSS and JS are not working because the web server just keeps redirecting all URL's to the main page.
I suggest looking at your .htaccess for any url rewrites and remove them. Once .htaccess is cleaned up, you can then verify if everything loads and displays properly.
Once working, you can research or post a question around fixing your .htaccess file, to redirect as you like.
Related
I want to load bundle.min.css only in contact.php. Is there any solution so it effect only contact.php with other css. And i wanna exclude bundle.min.css from other pages.
<?php
function tex_enqueue() {
wp_enqueue_style( 'googleapi', 'https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700' );
wp_enqueue_style( 'bootstrap-s', get_template_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/icon-fonts/font-awesome-4.5.0/css/font-awesome.min.css' );
wp_enqueue_style( 'essential-regular-fonts', get_template_directory_uri() . '/icon-fonts/essential-regular-fonts/essential-icons.css' );
wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css' );
wp_enqueue_style( 'magnific-popup', get_template_directory_uri() . '/css/magnific-popup.css' );
wp_enqueue_style( 'common-css', get_template_directory_uri() . '/css/common.css', ) );
wp_enqueue_style( 'myncss-css', get_template_directory_uri() . '/css/myncss.css' );
wp_enqueue_style( 'bundle-css', get_template_directory_uri() . '/css/bundle.min.css' );
wp_register_style( 'animate-css',get_template_directory_uri() . '/css/animate.css',array(),'1.1','all');
wp_enqueue_style( 'animate-css');
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/owl/owl.carousel.css' );
wp_enqueue_style( 'portfolio-css', get_template_directory_uri() . '/css/portfolio.css' );
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'tex_enqueue');
?>
You can add your css on specific page by using is_page('your_page_id') condition tag.
Create page template for your contact.php, See this link : Click Here
Use the below code in your current active theme functions.php file.
function tex_enqueue() {
if(is_page('your-contact-page-id')){
wp_enqueue_style( 'bundle-css', get_template_directory_uri() . '/css/bundle.min.css' );
}
}
add_action('wp_enqueue_scripts', 'tex_enqueue');
For more help see this link : click here
I'm trying to make an image gallery in Wordpress using this lightbox project http://lokeshdhakar.com/projects/lightbox2/ I followed the guide to add it but it doesn't work and the console doesn't show any errors.
<div class="hvrbox product2iul">
<a href="<?php echo get_template_directory_uri() ?>/images/granite.png" data-lightbox="image01" data-title="Granite>
<img src="<?php echo get_template_directory_uri() ?>/images/granite.png" alt="Nature">
</a>
<div class="hvrbox-layer_top">
<div class="hvrbox-text">Granite</div>
</div>
</div>
This is my functions.php all the other things in there work except for the lighbox
<?php
add_filter('show_admin_bar', '__return_false');
function my_scripts_method() {
wp_enqueue_script(
'script-name1',
get_stylesheet_directory_uri() . '/js/custom.js'
);
wp_enqueue_script(
' script-name2',
get_stylesheet_directory_uri() . '/js/slick.js'
);
wp_enqueue_style(
'script-name3',
get_stylesheet_directory_uri() . '/css/slick.css'
);
wp_enqueue_style(
'script-name4',
get_stylesheet_directory_uri() . '/css/slick-theme.css'
);
wp_enqueue_script(
'script-name5',
get_stylesheet_directory_uri() . '/js/jquery.visible.min.js'
);
wp_enqueue_style(
'script-name6',
get_stylesheet_directory_uri() . '/css/lightbox.css'
);
wp_enqueue_script(
'script-name7',
get_stylesheet_directory_uri() . '/js/lightbox.js'
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Include the following to your functions.php file. Without knowing your exact setup this may need some adjustment. For more specific explanation refer to Wordpress Developer Handbook - Including CSS & JavaScript.
functions.php
function custom_enqueue_scripts() {
wp_enqueue_script( 'lightbox-js', get_template_directory_uri() . '/js/lightbox.js', array('jquery'));
wp_enqueue_style( 'lightbox-css', get_template_directory_uri() . '/css/lightbox.css');
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );
This is my functions.php all the other things in there work except for the lighbox
<?php
add_filter('show_admin_bar', '__return_false');
function my_scripts_method() {
wp_enqueue_script(
'script-name1',
get_stylesheet_directory_uri() . '/js/custom.js'
);
wp_enqueue_script(
' script-name2',
get_stylesheet_directory_uri() . '/js/slick.js'
);
wp_enqueue_style(
'script-name3',
get_stylesheet_directory_uri() . '/css/slick.css'
);
wp_enqueue_style(
'script-name4',
get_stylesheet_directory_uri() . '/css/slick-theme.css'
);
wp_enqueue_script(
'script-name5',
get_stylesheet_directory_uri() . '/js/jquery.visible.min.js'
);
wp_enqueue_style(
'script-name6',
get_stylesheet_directory_uri() . '/css/lightbox.css'
);
wp_enqueue_script(
'script-name7',
get_stylesheet_directory_uri() . '/js/lightbox.js'
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
I'am trying to include all my css and JS files of a theme using functions.php
Folowing is what i have done so far
<?php
function blogroom() {
wp_enqueue_style('bootstrap', get_stylesheet_directory_uri() . '/assets/lib/bootstrap/dist/css/bootstrap.min.css');
wp_enqueue_style('loaders', get_stylesheet_directory_uri() . '/assets/lib/loaders.css/loaders.min.css');
wp_enqueue_style('iconsmind', get_stylesheet_directory_uri() . '/assets/lib/iconsmind/iconsmind.css');
wp_enqueue_style('hamburgers', get_stylesheet_directory_uri() . '/assets/lib/hamburgers/dist/hamburgers.min.css');
wp_enqueue_style('font-awesome-css', get_stylesheet_directory_uri() . '/assets/lib/font-awesome/css/font-awesome.min.css');
wp_enqueue_style('theme-style', get_stylesheet_directory_uri() . '/assets/css/style.css');
wp_enqueue_style('theme-style', get_stylesheet_directory_uri() . '/assets/css/custom.css');
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/assets/lib/bootstrap/dist/js/bootstrap.min.js');
wp_register_script( 'imageloaded', get_template_directory_uri() . '/assets/lib/imagesloaded/imagesloaded.pkgd.min.js', array( 'bootstrap-js' ) );
wp_register_script( 'tweenmax', get_template_directory_uri() . '/assets/lib/gsap/src/minified/TweenMax.min.js', array('imageloaded') );
wp_register_script( 'scroll-to-plugin', get_template_directory_uri() . '/assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js', array('tweenmax') );
wp_register_script( 'customToEase', get_template_directory_uri() . '/assets/lib/CustomEase.min.js', array('scroll-to-plugin') );
wp_register_script( 'configJs', get_template_directory_uri() . '/assets/js/config.js', array('customToEase') );
wp_register_script( 'zanimation', get_template_directory_uri() . '/assets/js/zanimation.js', array('configJs') );
wp_register_script( 'corejs', get_template_directory_uri() . '/assets/js/core.js', array('zanimation') );
wp_register_script( 'mainjs', get_template_directory_uri() . '/assets/js/main.js', array('corejs') );
wp_enqueue_script( 'mainjs' );
}
add_action( 'wp_enqueue_scripts', 'blogroom' );
?>
Here, this only loads my CSS file and not my js files. not a single javascript file is loaded.
Can someone please help?
You are only registering the scripts without enqueuing them.
Do for each script the same as you did for main.js, meaning for each registered script, enqueue it
wp_enqueue_script( 'your registered script name' );
Also make sure you have wp_head() and wp_footer() in your theme header and, respectively the footer.
I think this may be due to a misunderstanding of wp_register_script vs wp_enqueue_script.
wp_register_script only tells WP that there is a script at the given location, and gives it a "handle" to be used for other purposes.
wp_enqueue_scripts tells WP to use the script. And, there's two formats - the "long" format is like wp_register_script, so you can tell WP where the script is, AND to load it, all in one command.
The code below will work - I've changed your wp_register_script calls to wp_enqueue_script:
function blogroom() {
wp_enqueue_style('bootstrap', get_stylesheet_directory_uri() . '/assets/lib/bootstrap/dist/css/bootstrap.min.css');
wp_enqueue_style('loaders', get_stylesheet_directory_uri() . '/assets/lib/loaders.css/loaders.min.css');
wp_enqueue_style('iconsmind', get_stylesheet_directory_uri() . '/assets/lib/iconsmind/iconsmind.css');
wp_enqueue_style('hamburgers', get_stylesheet_directory_uri() . '/assets/lib/hamburgers/dist/hamburgers.min.css');
wp_enqueue_style('font-awesome-css', get_stylesheet_directory_uri() . '/assets/lib/font-awesome/css/font-awesome.min.css');
wp_enqueue_style('theme-style', get_stylesheet_directory_uri() . '/assets/css/style.css');
wp_enqueue_style('theme-style', get_stylesheet_directory_uri() . '/assets/css/custom.css');
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/lib/bootstrap/dist/js/bootstrap.min.js');
wp_enqueue_script( 'imageloaded', get_template_directory_uri() . '/assets/lib/imagesloaded/imagesloaded.pkgd.min.js', array( 'bootstrap-js' ) );
wp_enqueue_script( 'tweenmax', get_template_directory_uri() . '/assets/lib/gsap/src/minified/TweenMax.min.js', array('imageloaded') );
wp_enqueue_script( 'scroll-to-plugin', get_template_directory_uri() . '/assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js', array('tweenmax') );
wp_enqueue_script( 'customToEase', get_template_directory_uri() . '/assets/lib/CustomEase.min.js', array('scroll-to-plugin') );
wp_enqueue_script( 'configJs', get_template_directory_uri() . '/assets/js/config.js', array('customToEase') );
wp_enqueue_script( 'zanimation', get_template_directory_uri() . '/assets/js/zanimation.js', array('configJs') );
wp_enqueue_script( 'corejs', get_template_directory_uri() . '/assets/js/core.js', array('zanimation') );
wp_enqueue_script( 'mainjs', get_template_directory_uri() . '/assets/js/main.js', array('corejs') );
}
add_action( 'wp_enqueue_scripts', 'blogroom' );
Typically, you would only use wp_register_script in a few scenarios - here's two common ones:
1. You want to localize_script using wp_localize_script (this permits you to output javascript variables from your PHP that would be considered "related" to the registered script)
2. You want to register the script because you may or may NOT output the scripts later (this is particularly useful when authoring a shortcode, you can register the script, set a "flag" if the shortcode is rendered, and the footer can output the scripts only if the flag is set). This method can be seen in this article: How to load JavaScript like a WordPress Master
<?php
// styles of the child theme
function uni_bauhaus_theme_child_styles() {
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), '4.5.0' );
wp_register_style( 'ball-clip-rotate-style', get_template_directory_uri() . '/css/ball-clip-rotate.css', '0.1.0' );
wp_enqueue_style( 'ball-clip-rotate-style');
wp_register_style( 'bxslider-style', get_template_directory_uri() . '/css/bxslider.css', '4.2.3' );
wp_enqueue_style( 'bxslider-style');
wp_register_style( 'fancybox-style', get_template_directory_uri() . '/css/fancybox.css', '2.1.5' );
wp_enqueue_style( 'fancybox-style');
wp_register_style( 'jscrollpane-style', get_template_directory_uri() . '/css/jscrollpane.css', '2.1.5' );
wp_enqueue_style( 'jscrollpane-style');
wp_register_style( 'unitheme-styles', get_template_directory_uri() . '/style.css', array('ball-clip-rotate-style', 'bxslider-style',
'fancybox-style', 'jscrollpane-style'), '1.3.1', 'all' );
wp_enqueue_style( 'unitheme-styles' );
wp_register_style( 'unitheme-adaptive', get_template_directory_uri() . '/css/adaptive.css', array('unitheme-styles'), false, 'screen' );
wp_enqueue_style( 'unitheme-adaptive' );
wp_register_style( 'unichild-styles', get_stylesheet_directory_uri() . '/style.css', array('unitheme-adaptive'), false, 'screen' );
wp_enqueue_style( 'unichild-styles' );
}
This is the enque function in the child theme. Updates to the css are only loaded if I make a change to the functions.php file and reupload it. Otherwise the site loads the old css. Turned off all cacheing.
If you enqueue your files with auto-versioning, you'll never have to worry about cache issues again:
$cssPath = get_stylesheet_directory() . '/style.css';
wp_enqueue_style(
'unichild-styles',
get_stylesheet_directory_uri() . '/style.css',
array(),
filemtime($cssPath)
);
This simply adds the time the css file was last saved as the version "number" ensuring zero cache problems locally or remotely :)
New to wordpress so not sure what is going on, but my styles are not being added to the head.
<?php
function enqueue_styles() {
wp_register_style('bootstrap',get_stylesheet_directory_uri() . '/css/bootstrap.min.css' );
wp_register_style('fontawesome', get_stylesheet_directory_uri() . '/font-awesome/css/font-awesome.min.css', array('bootstrap'));
wp_register_style('animate', get_template_directory_uri() . '/css/animate.min.css');
wp_register_style('openSans', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800');
wp_register_style('weather', 'http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic');
wp_register_style('style', get_stylesheet_directory_uri() . '/style.css', array('bootstrap'));
wp_enqueue_style( 'bootstrap' );
wp_enqueue_style( 'fontawesome' );
wp_enqueue_style( 'animate' );
wp_enqueue_style( 'openSans' );
wp_enqueue_style( 'weather' );
wp_enqueue_style( 'style' );
echo get_stylesheet_directory_uri();
// wp_enqueue_style( 'stylesheet', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800');
// wp_enqueue_style( 'stylesheet', 'http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic');
// wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', array() );
// wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css');
// wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/css/animate.min.css');
// wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
?>
I first tried importing them using css to the main style sheet but that did not work. When I searched online this looked like the best way to do this, but again I have no idea why it is not working.