I'm developing a theme on WordPress. My index.php and style.css are in the same folder, at the root of the theme directory. My css files are in a "css" folder, my js files are in "js" folder. I want to add the CSS and JS to the index ( with the wp enqueue style/script ) in the functions.php file
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );
function add_stylesheet() {
wp_register_style('style', get_template_directory_uri() . '/style.css');
wp_register_style('plugins', get_template_directory_uri() . '/css/plugins.css');
wp_register_style('nav', get_template_directory_uri() . '/css/navigation-menu.css');
wp_register_style('shortcode', get_template_directory_uri() . '/css/shortcodes.css');
wp_enqueue_style('style');
wp_enqueue_style('plugins');
wp_enqueue_style('nav');
wp_enqueue_style('shortcode');
}
But that doesn't work.
I tried with a 'if' condition, I tried with just the wp_enqueue_style function ( and many other solutions I found on google ), but none of these work. I have no idea what the problem is.
Here's a screenshot of the file tree
Edit : It doesn't work as in the css is not linked to the php files, it shows plain HTML text. If I open the dev tools, it shows no CSS properties.
Like that
Thanks !
The main difference between wp_enqueue_* and respective wp_register_* functions, is that the first adds scripts/styles to the queue and the second prepares scripts/styles to be added.
You need to move the add action after the function and it'll work:
function add_stylesheet() {
wp_register_style('style', get_template_directory_uri() . '/style.css');
wp_register_style('plugins', get_template_directory_uri() . '/css/plugins.css');
wp_register_style('nav', get_template_directory_uri() . '/css/navigation-menu.css');
wp_register_style('shortcode', get_template_directory_uri() . '/css/shortcodes.css');
wp_enqueue_style('style');
wp_enqueue_style('plugins');
wp_enqueue_style('nav');
wp_enqueue_style('shortcode');
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );
Updated answer below:
Why not just enqueue the styles instead of registering and then enqueuing them, like this:
function theme_scripts()
{
wp_enqueue_style('style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('style', get_template_directory_uri() . 'wp_enqueue_style('plugins', get_template_directory_uri() . '/style.css');');
}
add_action('wp_enqueue_scripts', 'theme_scripts');
Related
I'm creating a word press theme , this includes a responsive jquery menu.
However, for some reason, I can't get the menu to work. In my functions.PHP file I have included the script below. Please may someone help with advice and a code snippet, i'm trying to:
1) Call Jquery
2) Run the script slimmenu.js script
<?php
function menu_function() {
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/jquery.slimmenu.js', array( 'jquery'));
}
add_action('wp_enqueue_scripts','menu_function');
?>
Many thanks,
P
You have not enqueued jquery which is a dependancy for the script you've enqueued. Also consider naming your file something a bit more unique to avoid conflicts. try...
function menu_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'slimMenu', get_template_directory_uri() . '/js/jquery.slimmenu.js', 'jquery' );
}
add_action('wp_enqueue_scripts','menu_scripts');
Better add the script in footer.php before :
<?php
wp_footer();
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/jquery.slimmenu.js', 'jquery', true);
?>
I have managed to add one js file to the WP functions.php and this works fine. How do I add another? e.g add classie.js to the add_my_script function? I tried to duplicate the get_template_directory_uri() but this didn't work - I feel as though the answer is staring me in the face!
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'slicknav',// name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/jquery.slicknav.min.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
You need to call the wp_enqueue_script twice:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'slicknav',
get_template_directory_uri() . '/js/jquery.slicknav.min.js',
array('jquery')
);
wp_enqueue_script(
'classie',
get_template_directory_uri() . '/js/classie.js',
array('jquery')
);
}
I am trying to load a separate javascript file mobile-menu.js to my Wordpress theme. When I look at the console, it says, "jQuery is not defined." However, I know that I enqueued my script files correctly. Any ideas?
HTML file:
<!--this line wasn't here originally-->
<div id="switchmenu"><!--switchmenu begin-->
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</div><!--switchmenu end-->
functions.php file:
function lapetitefrog_scripts() {
wp_enqueue_style( 'lapetitefrog-style', get_stylesheet_uri() );
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'lapetitefrog_scripts' );
mobile-menu.js file:
jQuery(document).ready(function($) {
$('#menu-icon').click(function() {
$('#switchmenu').slideToggle("fast");
});
});
Add wp_enqueue_script('jquery'); before you enqueue your scripts.
First Make sure that jquery file is include in the header, and your file requied jQuery
wp_enqueue_script(
'lapetitefrog-mobile-menu',
get_template_directory_uri() . '/js/mobile-menu.js',
array('jquery'),
'1.0',
true
);
Second you should start your javascript file like:
(function($) {
$(document).ready(function() {
.......
});
})(jQuery);
OR
// Use jQuery in place of $
jQuery(document).ready(function() {
.....
});
You can try:
enqueue Jquery first.
wp_enqueue_script('jquery');
and then enqueuing the latter script with JQuery dependency in 3rd argument i.e array('jquery') that's what mostly people forget.
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array('jquery'), '1.0', true );
Wordpress ships with jQuery by default
// Adds jQuery
add_action('init', 'childoftwentyeleven_down');
function childoftwentyeleven_down() {
// register your script location, dependencies and version
wp_register_script('down',
get_stylesheet_directory_uri() . '/js/down.js',
array('jquery') );
// enqueue the script
wp_enqueue_script('down');
}
The error jQuery is not defined might also appear with jQuery code embedded in your template parts.
This happens when jQuery is added to the footer of the page, while the embedded script tries to execute in the middle of the page.
If this is the case, you need to load jQuery in the header with wp_enqueue_script().
So the last parameter needs to be false here:
wp_enqueue_script( 'my-jquery', get_template_directory_uri() . '/js/jquery.js', array(), time(), false );
Now the code executes in the right order and jQuery will be defined.
Another solution would be to move the embedded script to a Javascript file that will also be added with wp_enqueue_script() to the footer of the page. This is up to you.
I converted bootstrap theme to wordpress. Now, I have a problem in loading the bootstrap scripts and style.
This is my code in functions.php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'samplejs', get_template_directory_uri() . '/js/jquery.min.js', array( '' ) );
wp_enqueue_script( 'samplejs', get_template_directory_uri() . '/js/clean-blog.min.js', array( '' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
and i add this in my header
<?php wp_enqueue_script("jquery"); ?>
Additional question:
What is the difference between wp_register and wp_enqueue?
Please help me. Im beginner in using bootstrap.
All you need to do is enqueue them. Also, I recommend getting rid of your jquery import (the second wp_enqueue). WordPress includes jQuery by default, and you're already including it in the first script (because you have listed it as a dependency). Here's an example, but this enqueues jquery twice (the native jquery, and the bootstrap jquery):
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'bootstrap-jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js' );
wp_enqueue_script( 'blog-scripts', get_stylesheet_directory_uri() . '/js/clean-blog.min.js' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
The only reason you'd need to register the scripts before enqueue-ing them, is if one of the scripts is a dependency. From the docs:
wp_register_script() registers a script file in WordPress to be linked
to a page later using the wp_enqueue_script() function, which safely
handles the script dependencies.
Scripts that have been pre-registered using wp_register_script() do
not need to be manually enqueued using wp_enqueue_script() if they are
listed as a dependency of another script that is enqueued. WordPress
will automatically include the registered script before it includes
the enqueued script that lists the registered script's handle as a
dependency.
you cas use "wp_enqueue_style" and "wp_enqueue_script".
for example:
function reg_scripts() {
wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');
i have a really annoying problem with wordpress built-in jquery. I have read dozen of articles on the subject of properly registering and calling registered jquery scripts using the functions.php (the code is shown below), but it can't seem to work anyway I try it. Can you please explain to me what did I do wrong, I checked every file path that is hooked to wp_register_script, wp_head in header.php is in place, spelling is correct... I cannon think of the possible reason why none of the jquery plugins listed below won't work on my page, it's frustrating. Here is the link to my website, if it could help you (http://yuagro.eu.pn/wordpress). Many thanks.
// REGISTROVANJE JQUERY BIBLIOTEKA U WORDPRESSU
<?php
function jquery_biblioteke() {
wp_register_script( 'sticky-nav', get_template_directory_uri() . '/js/jquery.sticky.js', array('jquery') );
wp_register_script( 'basic-slider', get_template_directory_uri() . '/js/bjqs-1.3.min.js', array('jquery') );
wp_register_script( 'modern-ticker', get_template_directory_uri() . '/js/jquery.modern-ticker.min.js', array('jquery') );
wp_register_style( 'modern-tickerjs', get_template_directory_uri() . '/js/modern-ticker.js', array('modern-ticker') );
wp_register_script( 'easySlider', get_template_directory_uri() . '/js/easySlider1.7.js', array('jquery') );
wp_enqueue_script('sticky-nav');
wp_enqueue_script( 'basic-slider' );
wp_enqueue_script('modern-ticker');
wp_enqueue_script('modern-tickerjs');
wp_enqueue_script('easySlider');
}
add_action( 'wp_enqueue_scripts','jquery_biblioteke');
?>
i checked your link, check console and it said 'jQuery not defined', have you include jQuery library ie wp_enqueue_script('jquery');
hmmm I never register them just enque them with the path, like so:
<?php
function jquery_biblioteke() {
wp_enqueue_script( 'sticky-nav', get_template_directory_uri() . '/js/jquery.sticky.js', array('jquery') );
wp_enqueue_script( 'basic-slider', get_template_directory_uri() . '/js/bjqs-1.3.min.js', array('jquery') );
wp_enqueue_script( 'modern-ticker', get_template_directory_uri() . '/js/jquery.modern-ticker.min.js', array('jquery') );
wp_enqueue_script( 'modern-tickerjs', get_template_directory_uri() . '/js/modern-ticker.js', array('modern-ticker') );
wp_enqueue_script( 'easySlider', get_template_directory_uri() . '/js/easySlider1.7.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts','jquery_biblioteke');
?>
wp_enqueue_script('jquery');
Add this on top of your wordpress functiion