Where should custom javascript be injected into a Wordpress theme? - javascript

I am helping a friend build a wordpress site using a purchased custom theme as his parent theme. There is also a child theme.
I've written some javascript to listen for clicks on specific links, and to change CSS in response to them. I can make this work in another environment, but we're trying to figure out how to get it to execute in Wordpress.
We have tried putting it in the index.php (most logical source to me, since that's to me that makes the most sense, but obviously WordPress works differently).
So all I am trying to figure out is, where in wordpress do you put the script tag (where you put code, not referencing jQuery we already have that)?

the index.php script will only load the WordPress framework and run it, you need to add your js code in the theme/template files.
a little quote from the official word press site:
JavaScript in Template Files
The safe and recommended method of adding
JavaScript to a WordPress generated page, and WordPress Theme or
Plugin, is by using wp_enqueue_script(). This function includes the
script if it hasn't already been included, and safely handles
dependencies.
you can read more here
In my opinion, the best is that you should create a js file with the code you want to run and upload to your theme/template folder, and then add it with a script tag as the link i've provided explains.
And my advice is to not embed the code directly in the template file but load it from a javascript file.
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/yourscript.js"></script>

You can do that in different ways:
Including the script in your footer for example
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/yourscript.js"></script>
Or using the wp_enqueue_script function, more info.

Related

How to integrate baguetteBox.js in the BST WordPress Starter theme?

I am trying to modify the starter WordPress theme BST for a personal project.
In it I want to have a custom page template with bootstrap elements. This page will show various images in the form of galleries.
I also need to import the baguetteBox.js plugin so that I can use its lightbox effect.
The pages have been created in html and they work. The custom page template is created and the design is the same as the html variant.
However when importing the scripts in WordPress (by using wp enque and wp register) the console cannot define baguetteBox. So I guess I am doing something wrong.
Here is the official guide on installing this Bootstrap plugin:
The enqueue code that I am using is placed in the bst-master/function/enqueues.php file:
For baguetteBox.min.js:
wp_register_script('baguetteBox-js', get_template_directory_uri() . '/js/baguetteBox.min.js', false, null, true, array('jquery'));
wp_enqueue_script('baguetteBox-js');
I have also tried without array('jquery') - no changes. I am also not sure where/how to place the "async" part (as recommended by the developers).
For baguetteBox.min.css:
wp_register_style('baguetteBox-css', get_template_directory_uri() . '/css/baguetteBox.min.css', false, null);
wp_enqueue_style('baguetteBox-css');
The problem is with the <script>baguetteBox.run('.tz-gallery', {filter: /.angelov.+\.(gif|jpe?g|png|webp)/i});</script> which I cannot figure out how and where to place so I just tried to add it inside the page template php file and also in the Insert Headers/Footers plugin.
So I figured out my own solution. First of all the classic (and recommended) way of adding scripts for WordPress was failing somehow. So I decided to place the script in the header.php file before the closing head tag and without async. I also moved the script in the js folder of the child theme.
It looks like this:
<script src="<?php echo get_stylesheet_directory_uri();?>/js/baguetteBox.min.js"> </script>
Next I placed the below code in the custom page template file right after the final closing <div> tag:
<script>baguetteBox.run('.tz-gallery', {filter:/.angelov.+\.(gif|jpe?g|png|webp)/i});</script>
And it all worked out like a charm.

Need Help in Integrating Javascript with Wordpress

I have wordpress account for blogging. Recently I have opted for PopUpAds. I have the javascript code with me which I received from PopUpAds.
Can any one please tell me how to integrate this code into wordpress??
Any informative links will also be very helpful.
Thank You In advance.
It might be the safest ( but not the best ) way to install the plugin which allows you to add inline javascript code.
I.e. something like this - https://wordpress.org/plugins/tc-custom-javascript/
Also, if you can edit functions.php file within your active theme, the quickest way is to add a patch of code there:
<?php //add opening php tag only if there is closing tag at the end of functions.php file
function pop_up_ads_script() {
?>
<script type="text/javascript">
//your script from PopUpAds goes here
//check if PopUpAds code includes also script tags, then avoid adding duplicate tags
</script>
<?php
}
add_action( 'wp_footer', 'pop_up_ads_script' );
For this approach, be careful when editing and saving functions.php, since you might cause error due to bad syntax or typo, so first check if php tags. I
would suggest to do this via FTP access, rather than through built-in WordPress file editor.
Using a Wordpress plugin that lets you insert arbitrary HTML code as a shortcode is the best way to go IMO. That way the external code doesn't mess with the wysiwyg editor. I use this plugin: https://en-ca.wordpress.org/plugins/insert-html-snippet/
If the JavaScript code should be added to the head section of your page, there are plugins that do that as well.
Check out this useful blog post for adding external JS and CSS to Wordpress: http://blog.dynamicdrive.com/add-custom-javascript-css-wordpress/

Javascript for Responsive Menu in Wordpress

sorry if this is a basic question but I'm having trouble figuring out how to use a Javascript/jQuery script in my website. (If this is well documented and I just don't know the right terms, please share what to look for - I've had no luck yet online with what I know.)
I'd already designed a site with static pages, it just didn't have a blog. So I put Wordpress in for one of the pages, and figured out how to add in the HTML/CSS design for my existing site's menu using the header.php and footer.php files. However, my jQuery script that's supposed to load when the page is resized in order to change the menu design is not working.
I pasted the <script type="text/javascript" src="jquery.min.js"></script> code in the <head> part of the file, adjusted the body tag to <body onresize="myFunction()" <?php body_class(); ?>>, and added the "myFunction" script to the footer.php file, above the </body> tag. Above function myFunction() { I also have window.onload=myFunction(); which isn't working either - so no matter what size the page is loaded at or what size it's changed to the menu is unresponsive.
When I tried adding an enqueue code block to the functions.php file it broke the page entirely, giving a 500 error.
Any advice would be hugely appreciated!
Check that the path you specify to the jQuery library is correct. In your script tag src="jquery.min.js is a relative path. This means that the file jquery.min.js is in the same directory as your html/php/template according to your src path.
I would recommend using a CDN. You won't have a relative path, need to load your jquery files, and you'll benefit from browser caching if other pages/sites have loaded the same files.
3x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
2x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
When you add resources such as scrips and style sheets to WordPress you should enqueue them using the functions wp_enqueue_script() and wp_enqueue_style().
Doing this ensures that your scirpt/style is only included once, allows you to declare dependancies, and (in the case of scripts) allows you to add it to the footer should you require/desire.
You can find more information on these functions in the Codex -
wp_enqueue_script()
wp_enqueue_style()
In conjunction with these functions, you should use the wp_enqueue_scripts action, ensuring that your scripts styles get enqueued at the correct time.
So for example, you should place something similar to this in your functions.php file. Because jQuery already exists within WP, you don't even need to specify a location, you just tell WP that you want to enqueue it -
add_action( 'wp_enqueue_scripts', 'my_enqueue_jquery' );
function my_enqueue_jquery(){
wp_enqueue_script( 'jquery' );
}

JQuery loading inside html file but not in linked javascript file (JqueryUI tabs)

I'm currently having a weird problem.
I'm using JqueryUI tabs, and am loading php pages with each tabs. This works well for me, but what I am trying to do, is loading another php page from within one of those tabs with the html "a" tag. For some reason, it doesn't work when I place the click function in a already linked javascript file, but works when I place the code in a script tag directly in the html file.
Here is the function:
$(function(){
$('a.commandsRecep').on('click',function(e){
e.preventDefault();
window.open(this.href,'','width=700,height=700');
});
})
I know that loading pages from within a tab is done by Ajax and am wondering if that's what causing me problems.
The link is inside a table :
<td><a class="commandsRecep" href="./Ben_test/page_principale.php">Réception des commandes</a></td>
What is the order of includes?
Make sure that jquery is included before javascript file.
The order should be like :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
Found it!
After a while, I got to the same type of error.
What I had to do was separate my script in two parts, one that required jqueryUI and one that didn't.
That way, in the html files where I don't import jqueryUI, I only import the one that doesn't require it.
Looks like having jquery that required jqueryUI without having imported jqueryUI was stopping the script from executing.

jQuery in CSS style sheet

I’m working on making my web site fade in and out every time I click a link to another page. I need to use jQuery to do this. Do I need to put the jQuery code on every page or can I write jQuery into the CSS Stylesheet? If so, how do I format the CSS Stylesheet to accept jQuery?
I’m experimenting with the code from this forum post: Fade Out between pages – CSS-Tricks
Edit to question based on comments
So, I now know that I can’t put JavaScript in CSS file. What’s the best way to put JavaScript code that applies to all pages in a site? I want to write this transition code and then not have to write/edit it into every page.
Save the JavaScript in a file with the extension .js, for example main.js. Then give it a public URL, in a similar way that your CSS files are accessible from a URL. An example URL: http://example.com/js/main.js. You might do that by putting it in a js folder in your public_html folder on your server – it depends on your server.
Then, near the end of each page’s HTML, right above </body>, add this HTML tag:
<script src="/js/main.js"></script>
The script tag with a src attribute will load the JavaScript at the given URL and then run it immediately.
I recommend putting it at the end of your <body> element and not inside the <head> because the script prevents the rest of the page from loading and displaying to the user while the script runs. If you make the script run only at the very end of the page, the page is already loaded and the user can see all of its content.
you need to do a $.fadeout on the window.beforeunload event, bye
PD: in a js file, not in a stylesheet, you can´t use JS in a stylesheet. bye.

Categories

Resources