I am trying to get my custom javascript (jQuery) to load correctly in Wordpress.
I know you have to use wp_enqueue_script() to do this correctly. However the problem I have is that the result is not my script, but in the place I should have javascript I have the code for a 404 page !
I've tried two ways of enqueueing the script :
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),1);
just above wp_head()
and :function my_script_load() {
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),null);
}
add_action('init', 'my_script_load');
in functions.php
both methods have the same effect. When I inspect the HTML in firebug I find the script is corredtly referenced :
<script src="http://localhost/wordpress/wp-content/themes/doric2011/javascript/sitescript.js" type="text/javascript">
however when I inspect the script itself I find the following (an extract) :`
Page not found | Nick Kai Nielsen
and so on... It is a HTML output for a 404 page, but occupying a space where javascript should be...
Needless to say the script does not work.
I have only had this problem since updating to 3.1 and it does the same thing if I try loading highslide.js and highslide.config.js (professionally written scripts). The script I wish to load is already working on my site and I want to go on using it in the new theme I am developing.
has anyone any idea of what is happening ? And, of course, what should I do about it ?
This is a local installation - I'm not risking breaking my site until this is sorted out.
Try:
add_action('init', 'my_script_load');
function my_script_load() {
wp_register_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'), true);
wp_enqueue_script('sitescript');
}
Assuming your javascript file is in the proper location (and the URL isn't pointing to a spot where the JS file isn't...) try this:
function add_my_scripts() {
$templatedir = get_bloginfo('template_directory');
if(!is_admin()) {
wp_register_script( 'sitescript', $templatedir . '/javascript/sitescript.js');
wp_enqueue_script( 'sitescript' );
}
}
add_action( 'init', 'add_my_scripts');
Related
I don't know why I'm having this issue. I'm new to wordpress and I am following along with a 'freecodecamp' tutorial(youtube) on how to make a custom wordpress theme from scratch.
In the video, the instructor is enqueueing his style sheet using the functions.php file. Here is the exact code he is using...
Click here for code image
<?php
function followandrew_register_style() {
wp_enqueue_style('followandrew-bootstrap', get_template_directory_uri() . "/style.css", array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'followandrew_register_style' );
?>
Click here for error image
Visual Studios is prompting this error as soon as I write out the commands...
"Undefined function 'wp_enqueue_style', and undefined function 'add_action'.
I am including "wp_head()" inside my front-page.php to output the stylesheet.
Everything else is working fine. I am able to see my basic html setup when posting in inside the "front-page.php". My wordpress is connected correctly and I have access to the backend admin.
If I hardcode the path to the style sheet inside of front-page.php, it works fine.
So basically, any functions or commands I try to run inside the functions.php file are coming back undefined!
Nevermind, it looks like everything is working fine. I just had the wrong source path for the custom css link.
VS code is still displaying the undefined error but everything is working.
Best 5 hours Ive ever wasted :)
On wordpress, using GeneratePress free template, I'm trying to push my custom script after all others.
The big problem is that all the scripts of a plugin (Visual Portfolio) are always loaded at the very end, after my scripts.
I tried to put a very high $priority parameter in the add_action() functions but it doesn't work.
function register_scripts_and_styles() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', null, true);
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles', 99999 );
Do you have any idea how to fix this problem?
Thank you very much.
Here's idea, js and css files in WP use different technique to figure out in what order js\css files should be loaded.
here's function
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array('js-handle-of-some-dependency','js-handle-of-some-other-dependency'), true);
Each script has it's handle, it's first argument to this function, in your case it's custom-js.
Based on digging into plugin's code it's main js has handle visual-portfolio
So you can just enqueue your script with setting it's handle as dependency.
And final solution will be:
function register_scripts_and_styles() {
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array( 'jquery', 'visual-portfolio' ), '1', true );
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles' );
I've also added jquery as dependency as I guess you are using jQuery in your js code, you can remove it if not.
I've also set version to '1' - it's a query string version which will be applied to your JS code so when you do update and move code live you can force user's browsers to load a fresh one just changing version here.
And see last argument true, it denotes that your script will be injected in footer.
If your code relies not only on main.js of this plugin you might need to add more dependencies as this plugin enqueues bunch of scripts, see whole list of them in /wp-content/plugins/visual-portfolio/classes/class-assets.php from line 350, at the end of register_scripts method of class defined in this file. So you really can put exactly all script's handles on which your custom js code relies and WP will figure out right order of linking those files to page for you.
Happy codding :)
This code will not display on any of my wordpress pages. It returns a blank page even when I load from incognito mode.
<script defer src="https://connect.podium.com/widget.js#API_TOKEN=91c679dc-e819-4506-851e-f4cd664249ae" id="podium-widget" data-api-token="91c679dc-e819-4506-851e-f4cd664249ae"></script>
If you would like this script to show up on all your pages, you can use the wp_enqueue_scripts action. This code should be added into your functions.php file inside of your theme. Below is an example of doing that.
//enqueue our scripts and styles
function mydomain_add_theme_scripts() {
wp_enqueue_style('Podium', 'https://connect.podium.com/widget.js#API_TOKEN=91c679dc-e819-4506-851e-f4cd664249ae');
}
//bind custom script and style load
add_action( 'wp_enqueue_scripts', 'mydomain_add_theme_scripts' );
Please me know if that works for you. If not, share any console errors, etc.
I am attempting to load a script using wp_enqueue_style following the advice on the Wordpres Codex, but the script doesn't seem to be included in the source. Is this the correct way to do it?
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
Your action and function looks fine from here. The wp_enqueue_scripts hook should work perfectly for both stylesheets and scripts.
Have you tried echoing something out in the function to see if it's actually being called at all? I.e:
function load_scripts() {
echo "Does this output to the actual page?";
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
If it's not, you might have a problem with your placement of the code, but if you keep everything in functions.php and outside of any other scope this shouldn't be a problem.
Another thing that can cause this behaviour is if you have already registered a stylesheet or script with the same handle ("bootstrap.css" in this case). The first argument in the wp_enqueue_style() function is just a handle for internal dependency management and should be unique, try renaming it to something else and see if that fixes your problem.
Okay, first step is to ensure you are using the correct path of the CSS file.
Add the following line in the functions.php of your theme or other appropriate place.
print( get_template_directory_uri() . '/css/bootstrap.min.css' );
This should print the URL of your desired stylesheet on top of the page. Copy and paste this URL in a new tab, if it opens a stylesheet then you are good to go. Otherwise, there is a mistake in the path.
Second step is to ensure that wp_head() is being called on the page you are displaying. It can be placed in your header template or top of archives/post files etc. This function actually renders the styles and scripts on the page.
Without wp_head(), its basically useless to enque anything as you can add links and scripts manually if you know the exact paths.
Note that in admin mode there is a special hook 'admin_enqueue_scripts'. So, if there is need to load CSS in both modes, it should be done on two hooks.
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('admin_enqueue_scripts', 'load_scripts');
You are trying to enqueue style on wp_enqueue_scripts hook.
Try wp_print_styles.
add_action('wp_print_styles', 'load_scripts');
Also try to register style, first.
in case you don't want to use wp_head(); in your template, you could also include your styles directly:
<link rel="stylesheet" href="<?php echo get_theme_file_uri( 'style.css' ); ?>">
beware though: wp_head() includes tons of stuff (scripts, styles,...), by wordpress itself as well as most plugins, so only omit it if you know what you're doing.
Register the style first:
function register_plugin_styles() {
wp_register_style('my-plugin', plugins_url('my-plugin/css/plugin.css'));
wp_enqueue_style('my-plugin');
}
http://codex.wordpress.org/Function_Reference/wp_register_style
Do that way. Dont try to enqueue directly. And put code into functions.php of course.
Fist confirm path of the css file is correct or not if is it a correct try with below code :
function load_scripts() {
wp_enqueue_style('load-custom-css-new', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
or Go with this URL.
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
I had the same problem. Although I have implemented this many times before, I lost many hours to find out what went wrong with this.
Because I made my own themes, I had declared this file unit as “fuctions.php” (I lost the -n- letter).
So, besides all the things described above you should also consider, take a good look at the file name and confirm that is “functions.php” (not fuctions, not function etc).
This might be also the reason for you.
I had the same issue. I fixed it by hard refreshing the page with Ctrl + F5 to clear cache and the css loaded normally.
If you are protecting the directory with .htpasswd, the https call generated by get_stylesheet... will fail, and you might lose some time chasing that one.
I am trying to use simplemodal to have modal popups with text in wordpress posts. I've played around with various plugins but they have specific uses (such as the contact form, or another one I saw that displays a single note you can customize).
I've tried following this tutorial: http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but the instructions are not very clear for people without advanced jquery or wordpress knowledge and it simply isn't working for me. The author does not explain where you put the function, for instance.
For anyone who's gotten simplemodal working in wordpress, without developing a plugin, can you please assist? Thank you.
The tutorial is a good start on a solution, but does not quite provide all of the details. There are also some changes that I would make. Here is what I would do to get it working:
Create the Ajax Handler template and page
Make sure the link you want to use to open the modal includes the postpopup class and has the post ID in the rel attribute.
Create a js/ folder in your theme directory
Download SimpleModal 1.4.1 and place the file in the js/ folder
Create a custom JavaScript file (site.js) and place it in the js/ folder
Put the following code in site.js:
.
jQuery(function ($) {
$('a.postpopup').click(function(){
id = this.rel;
$.get('http://yourdomain.com/ajax-handler/?id='+id, function (resp) {
var data = $('<div id="ajax-popup"></div>').append(resp);
// remove modal options if not needed
data.modal({
overlayCss:{backgroundColor:'#000'},
containerCss:{backgroundColor:'#fff', border:'1px solid #ccc'}
});
});
return false;
});
});
Add the following code to your theme's functions.php file:
.
function my_print_scripts() {
if (!is_admin()) {
$url = get_bloginfo('template_url');
wp_enqueue_script('jquery-simplemodal', $url . '/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
wp_enqueue_script('my_js', $url . '/js/site.js', null, '1.0', true);
}
}
add_action('wp_print_scripts', 'my_print_scripts');
That should get it working for you. Make sure you have the wp_footer() function in your theme's footer. I re-worked the way the modal window was being called so that the auto-centering of the content works.