Inserting JavaScript into Wordpress Posts - javascript

Scenario Its a WordPress site where users submit their projects. This goes in format of a post in WordPress. Now, they also get to fill out the description of the project which is the body of the WP post. When they edit their projects and fill out description they get a simple editor with HTML tags enabled.
Question I would like to monitor my project in Google Analytic . I want to insert JavaScript into that field. How do I do that ? I mean its like <img scr...> works fine in the box. Just when I put <script>...</script> the script tags are stripped out and the inner part is shown as normal text.
Is it possible ? I was trying to put <img> with source as a php file. In the php file I had had put
<?php
header("Content-type: application/x-javascript");
?>
<!-- Start of analytic Code -->
analyticCode()
{
analytic...
tracker.trackPageview(myCode)
}
<!-- Start of analytic Code -->
When i put this, it doesn't work at all. Nothing shows up. I went to the source and clicked the src link and it opened showing the js code.
What shall I do. I am aware of the fact this is not good but I need help.

The Google Analytics script need to either be put in the footer or header of your website. Or in some cases you can insert it into the body, there's nothing wrong with that!
But what you will need to do is put your Google Analytics code in the footer.php or header.php of your theme files.
So just insert it before or after your other linked css and js files. It's usually right at the top of the page by the meta tags.
Or just use this plugin and insert your script http://wordpress.org/plugins/google-analytics-for-wordpress/

Related

Songkick widget not displaying right when pasted into HTML on Tumblr

I used a auto generated HTML code from Songkick and I put it straight into the HTML on my Tumblr website and its not showing anything but the title.
You can look at it here http://yuniwamusic.com/shows
This is the code I used
Yuni Wa tour dates
Basically, You need to open your file on localhost, not directly from your disc. :)

How to embed HTML5/CSS + js music player on single wordpress page?

I have an html 5, css, and javascript audio player that I'm trying to add to one page on my wordpress site.
I tried to paste the html into my page's text editor, while installing the JS and CSS folders for the player in my child theme's folder, which didn't work.
I tried placing the CSS for the player styling in my child themes CSS file, and that didn't work. I also tried linking to the style sheets and js scripts from the header.php file, which wasn't working for me.
My first thoughts are that because the html is showing up as it should, the css and JS files aren't being called. So I just need to figure out the path structure of how wordpress creates pages? Yet I know wordpress does something with a database to display the pages?
I saw some documentation about using I think it was either php or JS functions to call scripts or something and I don't understand enough of those languages to be able to make sense of it yet.
I'm still working with my developer, but he's 7 hours ahead of me and asleep. I just want to put the hardcoded version of the player and a few songs on my site for now so I can do some testing/see how it looks.
I hope that this question meets the SO req's. I tried to search on my own and I know the answer is out there, I just don't know enough to understand it yet. Trying to get a head start
The path to your Child theme's folder should be '/wp-content/themes/name-of-theme/'. You can use that in your header to call the files from wherever you might have placed them in your Child theme's folder.
To hard code the HTML, pasting it in the WordPress page editor should work fine unless there is another JS call or some weird iFraming going on.. if that's the case, you can simply create a Page Template (https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use) and paste the code there. You'll likely want to just copy an existing page template from your Theme, take out the inner loop, and replace it with your video code.
Adding the links to your 'header.php' file would be considered bad practice. You would want to create a 'functions.php' file inside your Child theme and call the JS/CSS from there. You can also find this within the WordPress codex (they literally give examples you can copy/paste and change your file names).

Location of HTML file in wordpress for editing purposes

I just finished learning CSS and I trying to edit the format of the footer of the wordpress based website.
I can spot its code from firebug extension but dont know whether the HTML file is located in the wordpress directory so that I can edit it. Can anyone help. I am new to web development.
Go to wp-content/themes/your-theme/footer.php
There should be the PHP/HTML for the footer.
It is not always that easy to find where the html comes from.
e.g. : You can have a widget area in your footer.php and then your html comes from the widget you added to this area.
It also depends on the theme you use.
But mostly you'll see a header.php/footer.php/index.php file.
the most easy way to find HTML code or text is here: String Locator. just download this plugin and type the html code or text you need to find out and you can easily know the exact location of the particular code or text and after that you can easily change it.
Cheers!

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');
?>

Drupal display 3rd party content with script

I am trying to add this script tag, which will display some 3rd party content, to my drupal page within admin -> content -< edit (using Drupal 7.36):
<script src="http://www.applitrack.com/dex/onlineapp/defaultlinks.asp?vacancyURL=http://www.applitrack.com/dex/onlineapp/jobpostings/view.asp"></script>
However, when I save and reload, the page completely ignores the script I added and shows a blank content area. I have the text format set to 'PHP Code', and there appear to be no restrictions on the html tags allowed. I have tried each of the different text formats, but to no avail. Any suggestions as to what else I may need to do would be greatly appreciate. Thanks in advance.
The best way to add js to drupal is with the drupal core funciton drupal_add_js.
drupal_add_js('http://example.com/example.js', 'external');
Create a very basic module and include something similar to that line in the hook_init function (if it's included on every page). If it is specific to a form include it in a form alter instead. Lot of other options to make it specific to the page its needed on but the general rule is include it only where it is needed.
You would have to change the ckeditor settings to make sure script tags are allowed
admin/config/content/ckeditor
This way however is not best practice and I suggest against it.
Edit your html.tpl.php template and add that js call near the bottom of your code.

Categories

Resources