Need Help in Integrating Javascript with Wordpress - javascript

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/

Related

Js and wordpress help...where does it go?

So ive been putting off using js for a while because everytime I try to figure it out I get more confused, but now I really need it for a site im working on...
I want to hide the page until everything loads (so you don't see elements moving/jumping into place.
I've found various bits on here and around the web, but everytime I go to place the code anywhere that I feel it should go, I get errors.
take this for example:
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
Ive tried going to the functions.php file and adding the js code i've found on the web but always get an error. So where do I copy the code for this, so it affects the CSS ive added?
In wordpress, you need to use a plugin to help you insert your javascript/jquery
Login to wordpress
Go to plugins>>add new
Search for Insert Headers and Footers plugin
Install and activate
Then launch the plugin and insert your javascript.
You will need to select the location of your javascript, either in the tag or just before the closing
When you add javascript to a wordpress website, you want to do it in one of two ways. You can either do it using a hook which is essentially a 'spot' in the code you wish to add to.
This can be done by placing the following in your functions.php
add_action('wp_head', 'wp_54885300_add_js_to_header');
function wp_54885300_add_js_to_header(){ ?>
<script>
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
</script>
<?php
}
Alternatively, if you find yourself needing to place lots of javascript into your website, you may wish to link to an external javascript file. This can be done with wp_enqueue_script().
Place the following in your functions.php file to enqueue an external stylesheet to your website.
add_action( 'wp_enqueue_scripts', 'wp_54885300_enqueue_script' );
function wp_54885300_enqueue_script(){
wp_enqueue_script('anyname', 'path-to-file.js', array(''), 'version', false );
}
As others have pointed out, what you are trying to do by hiding everything until the window has completely loaded may not be a good idea for a number or reasons.
But, atleast to the best of my knowledge, this ^^ is the proper way to include JS into a wordpress installation without depending on a plugin to get you started.

Wordpress- Add script directly to page

How can I add my script directly to my page instead of putting it in <head> or <footer>? For example,
<div>
My script here
My html
My html
</div>
Thanks!
What you are trying to achieve is not the WordPress way and is not advised but it can be done ... that's for sure.
The normal way how to do this (is to include/enqueue the js or css file, using wp_enqueue_style function to enqueue css files and wp_enqueue_script to enqueue js files. Proper documentation on how to use those functions can be found on the WordPress Coding reference guide if you search on the internet.
If you want to add your script just to one of your pages/posts, etc ... you can do the old way by inserting the script tag inside the post like this:
< script scr="script-src">< /script>
if the script is not external, is just some small functionality you want to add then you can simply use:
< script>alert('hello world');< /script>
These scripts cant be added on the backend side ... they need to be added on the theme's code ...
Remove all extra spaces i had to add here because of the script tags being filtered for security measures.
Hope i have helped you to achieve what you wanted.
Its the same, use
<script>
xxxxxxx
</script>

Where should custom javascript be injected into a Wordpress theme?

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.

Adding javascript to moodle assignment page

I am working on a page in moodle that allows you to edit submissions. There is a tinymce editor that saves changes to a submission using a save button.
I am looking to automate the saving using javascript. I have my js code, but i am not sure of how to include the javascript on the page.
Url is like this: www.somewebsite.com/mod/assign/view.php?id=1234&action=editsubmission
I am new to moodle and php so any help is appreciated
In Moodle 2.0 this is used $PAGE->requires->js().
Make $PAGE available to your code by doing:
require_once($CFG->libdir . '/pagelib.php');
global $PAGE;
Add your code:
$PAGE->requires->js( new moodle_url($CFG->wwwroot . '/mod/mymod/script.js') );
It is required to put moodle_url() around your path!
You can add JavaScript to the Additional HTML in Moodle
As it is HTML, you will need to enclose your JavaScript in <script> tags. You can use jQuery or JavaScript. Be sure to target the specific elements you want, and not to affect other pages, as this will add the script to every page in your Moodle instance.
The benefit of this approach is that you don't need to update the view.php file every time you upgrade Moodle.
placed this in the view.php file:
$PAGE->requires->js( new moodle_url($CFG->dirroot . '/mod/assign/myscript.js'));

JavaScript in a WordPress post

How can I add
<a href="javascript:function foo(){alert('hi');}" title="alert">
Drag to your bookmarks bar
</a>
to my WordPress post?
I built a bookmarklet and I want to pass it through my blog, but WordPress is stripping out the javascript from my post when I save it.
Javascript in WordPress Single Pages and Posts
<script type="text/javascript">
<!--
// your code
//--></script>
Source:
https://codex.wordpress.org/Using_Javascript
I have no issues embedding that code in the HTML editor on my wordpress site. There is a problem with your javascript code- that defines a function, but never calls it. I have
Drag to your bookmarks bar
in a post, and I get the alert when click, as well as the bookmarklet.
The issue is likely to be caused at the browser end. Chrome's XSS was the problem for me and I solved it by adding the line header ("X-XSS-Protection: 0"); to wp-blog-header.php in the root folder of my installation. This may not be ideal as it applies across the whole site. It would probably be better to add it where it would only apply to the post/page which needs to render the bookmarklet.
This is old, but still relevant with Version 4.9.5 for wordpress, so I answer with my solution for this:
Wordpress filters out any Javascript you use in your Posts or pages, that is why your code gets lost. I did the following steps to add a "javascript:" Link:
Add the Link you want to your post, use "#" as the href and add a id to the tag (in Text-Mode of the Editor):
This is my JS Link
Install a Custom Javascript Plugin. I used Simple Custom CSS and JS
Add the Javascript you want with help from the plugin:
jQuery(document).ready(function( $ ){
function yourFunction() {
alert("It works");
}
jQuery('#idOfYourLink').on("click", yourFunction);
});
The important part is adding the on-Handler to the Link you want to use. Now the Javascript is loaded right after the page got loaded. And a click on the link will call the function yourFunction
I guess that wordpress editor is used to work with textual data/content. So, to add your js you can find plugin for adding custom js. Also you can add a Custom field to the posts.
Let it be "custom_js" - the name of a field that would contain js code. And then edit theme post temlate, adding "echo" of custom_js.
<?php
//single.php
echo get_post_meta( get_the_ID(), 'custom_js');
?>

Categories

Resources