I'm trying to insert this code:
<script type="text/javascript">
some Javascript codes comes here
</script>
to WordPress' <head></head> section in front end and in admin panel
E.g., Joomla! 1.6 has an API that allows this:
$doc =& JFactory::getDocument();
$doc->addCustomTag($headTag);
I need to add different things for different pages. For example:
Page 1
I need to add
<link rel="alternate" type="application/rss+xml" title="feed title" href="feed url" />
For a few pages
Page 2
I need to add
<script type=\"text/javascript\" src=\"" . LIVE_SITE .
"/wp-content/plugins/jobs/lknlibrary/js/ajax.js\"></script>
<script type=\"text/javascript\">
var ajax = new sack();
var currentClientID=false;
function getClientData()
{
var clientId = document.getElementById('db_country_id').value.replace(/[^0-9]/g,'');
ajax.requestFile = '" .BASE_PATH . "/wp-content/plugins/jobs/com_jobs_admin/tasks/get_location_data.php?task=get_location_data&name=db_parent_id&getClientId='+clientId; // Specifying which file to get
ajax.onCompletion = showClientData; // Specify function that will be executed after file has been found
ajax.runAJAX(); // Execute AJAX function
}
function showClientData()
{
clearJS = ajax.response;
var strTagStrippedText = clearJS.replace(/(<\s*\/?\s*)div(\s*([^>]*)?\s*>)/gi ,'');
document.getElementById('locationsDiv').innerHTML=strTagStrippedText ;
}
function initFormEvents()
{
if (document.getElementById('db_country_id')){
document.getElementById('db_country_id').onchange = getClientData;
document.getElementById('db_country_id').focus();
}
}
window.onload = initFormEvents;
</script>
for a few pages
Page 3
I need to add
<link rel="stylesheet" type="text/css" href="/wordpress/wp-content/plugins/jobs/lknlibrary/js/tabs/tab.webfx.css" />
for a few pages
I have 70+ pages in admin panel like those above.
Trying to manage the header of the WordPress with the example is a bit difficult.
In your theme's functions.php:
function my_custom_js() {
echo '<script type="text/javascript" src="myscript.js"></script>';
}
// Add hook for admin <head></head>
add_action( 'admin_head', 'my_custom_js' );
// Add hook for front-end <head></head>
add_action( 'wp_head', 'my_custom_js' );
For anyone else who comes here looking, I'm afraid I'm with #usama sulaiman here.
Using the enqueue function provides a safe way to load style sheets and scripts according to the script dependencies and is WordPress' recommended method of achieving what the original poster was trying to achieve. Just think of all the plugins trying to load their own copy of jQuery for instance; you better hope they're using enqueue :D.
Also, wherever possible create a plugin; as adding custom code to your functions file can be pita if you don't have a back-up and you upgrade your theme and overwrite your functions file in the process.
Having a plugin handle this and other custom functions also means you can switch them off if you think their code is clashing with some other plugin or functionality.
Something along the following in a plugin file is what you are looking for:
<?php
/*
Plugin Name: Your plugin name
Description: Your description
Version: 1.0
Author: Your name
Author URI:
Plugin URI:
*/
function $yourJS() {
wp_enqueue_script(
'custom_script',
plugins_url( '/js/your-script.js', __FILE__ ),
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', '$yourJS' );
add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );
function prefix_add_my_stylesheet() {
wp_register_style( 'prefix-style', plugins_url( '/css/your-stylesheet.css', __FILE__ ) );
wp_enqueue_style( 'prefix-style' );
}
?>
Structure your folders as follows:
Plugin Folder
|_ css folder
|_ js folder
|_ plugin.php ...contains the above code - modified of course ;D
Then zip it up and upload it to your WordPress installation using your add plugins interface, activate it and Bob's your uncle.
Elaborating on the previous answer, you can gather all the required snippets before outputting the header, and only then use an action hook to inject all you need on the head.
In your functions.php file, add
$inject_required_scripts = array();
/**
* Call this function before calling get_header() to request custom js code to be injected on head.
*
* #param code the javascript code to be injected.
*/
function require_script($code) {
global $inject_required_scripts;
$inject_required_scripts[] = $code; // store code snippet for later injection
}
function inject_required_scripts() {
global $inject_required_scripts;
foreach($inject_required_scripts as $script)
// inject all code snippets, if any
echo '<script type="text/javascript">'.$script.'</script>';
}
add_action('wp_head', 'inject_required_scripts');
And then in your page or template, use it like
<?php
/* Template Name: coolstuff */
require_script(<<<JS
jQuery(function(){jQuery('div').wrap('<blink/>')});
JS
);
require_script(<<<JS
jQuery(function(){jQuery('p,span,a').html('Internet is cool')});
JS
);
get_header();
[...]
I made it for javascript because it's the most common use, but it can be easily adapted to any tag in the head, and either with inline code or by passing a href/src to an external URL.
If you are ok using an external plugin to do that you can use Header and Footer Scripts plugin
From the description:
Many WordPress Themes do not have any options to insert header and
footer scripts in your site or . It helps you to keep
yourself from theme lock. But, sometimes it also causes some pain for
many. like where should I insert Google Analytics code (or any other
web-analytics codes). This plugin is one stop and lightweight solution
for that. With this "Header and Footer Script" plugin will be able to
inject HTML tags, JS and CSS codes to and easily.
One way I like to use is Vanilla JavaScript with template literal:
var templateLiteral = [`
<!-- HTML_CODE_COMES_HERE -->
`]
var head = document.querySelector("head");
head.innerHTML = templateLiteral;
Related
In my theme there is a the category.php template for the archives of certain categories. I modified this file but to have an effect I need to add some javascript to the head of category.php file. Within that file there is the expression get_header();
I opened my themes' header.php and saw that all script files seem to be initialized by this function: wp_head();
So I guess I'll have to modify my theme's functions.php to enqueue my script to the head of the archive template.
But how to do that? How could I filter for category.php? During my research I found this function: is_category() - but it works only for template files. I was able to add my javascript files to the head by adding this to my header.php below the wp_head(); function:
if(is_category()){
echo '<script type="text/javascript" src="'.get_bloginfo("wpurl").'/wp-content/themes/my_theme/js/jquery-2.1.1.min.js'.'"></script>';
echo '<script type="text/javascript" src="'.get_bloginfo("wpurl").'/wp-content/themes/my_theme/js/my_script.js'.'"></script>';
}
This works but doesn't seem to be the elegant/proper way to do it. I read several times that one always should use enqueue_script functions to add script. So what is best practice and how to do it?
You have the right idea. You'll want to enqueue the scripts, but only if you're on a category archive page. Also, WordPress includes jQuery by default, so there's no reason to include your own. Keep in mind that this will mean you'll need to adhere to the noConflict mode wrappers.
function enqueue_my_so_scripts() {
if ( is_category() ) {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/my_script.js', array('jquery'));
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_so_scripts' );
I'm trying to load a google maps function into the functions.php file of my wordpress theme.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<script type="text/javascript" >
< !-- updatepage(); //-->< /script >
< /script >
I've been told by the creator of the theme to call it out using the wp_enqueue_script() function in this .php file.
My problem is that when I try to call it out, the < are causing problems...apparently I don't know how to call it out in the right format....how can I insert this correctly so that my fullscreen google maps works correctly?
You should create a .js file for the jQuery code you want to run.
For the purposes of this example i'm going to name this file customjquery.js. You can name it whatever you want, but be sure to edit the code below to reflect the new filename if you do.
1] Create a customjquery.js file:
(function($) {
updatepage();
})(jQuery);
2] Then you need to place that customjquery.js file into the /js/ directory of your theme.
3] Add this code to your themes functions.php file:
function my_custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('google-maps-api', '//maps.googleapis.com/maps/api/js?sensor=false&extension=.js', array('jquery'));
wp_enqueue_script('my-custom-jquery', get_template_directory_uri() . '/js/customjquery.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');
If you would like to place the customjquery.js file somewhere else in your theme folder, just update the path in the code above to reflect the file's new location.
If you just want to include it on your web page, then you may just echo it using proper add_action(). But, if you want to run it with your functions.php then I recommend converting the code to php or wp_enqueue_script().
I have a made a small jQuery script to import values from other file and insert this values in WordPress POST page as Custom Meta Tags.
When I Create A New Post the form is shown below the Post content area and every thing works 100%.
The problem is if I press "Edit Post" Button/link then it loads the Post Edit page but nothing is shown. Just a White screen loads, so I cant Edit this Post.
Here is my Script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<input name="file" type="text" id="file">
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
var val = $('#file').val();
$.get('import.php', {file: val}, function(data) {
result = $.parseJSON(data);
$("input[name='nick_name']").val(result.name);
$("input[name='work_city']").val(result.location);
});
});
});
</script>
<input type="button" class="button" value="GET/IMPORT">
I also tried to add this script (after jquery.min.js):
<script type="text/javascript">
$.noConflict(true);
</script>
Then Edit Post page worked but I could not use my custom form/button.
My question is: How can I load this Script without getting any conflict with WordPress Edit Post page?
If I remove:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
From my script then All pages load OK but then my custom made form/button don't work.
LATEST UPDATE: I GOT IT WORKING :D :D :D
Just testing when or where I should load this script to get my results successfully. I started editing /wp-admin/admin-header.php (I know its NOT recommended to edit CORE files but Im just doing it for debuggig!) First of all I inserted the jQuery script that Im using on Line 1 before opening of
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
Then I went to POST NEW page, I could see some different in font sizes but the function I wanted was there, I could use my button. So I opened EDIT POST page and I could see the EDIT PAGE! Now EDIT PAGE is working also. Finally I figured out if I insert this jQuery script in beginning on LINE 59 in /wp-admin/admin-header.php then every thing works 100% :D The design CSS looks good and the functionality is there!
Now I need help to insert/paste this script to LINE 59 in admin-header.php How can I do that using functions.php?
First off this seems like a bad thing to be doing editing the wordpress core. But if you want to do this, don't include jQuery again. And don't use the $ sign, see this example:
jQuery(".SomeClass").click(function(){
console.log("Some Text");
});
//Therefore you could do something like this
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.button-test-class').click(function() {
//Do what you want here, for this we'll write some text to the console
console.log("Some Text");
});
});
</script>
<input type="button" class="button-test-class button" value="Button Test">
How to add scripts The WordPress Way:
add_action( 'wp_enqueue_scripts', 'pjso_my_scripts' );
function pjso_my_scripts() {
$handle = 'script_name';
$src = '/path/to/script.js';
$deps = array(
'jquery',
);
// add any other dependencies to the array, using their $handle
$ver = 'x.x'; // if you leave this NULL,
// then it'll use WordPress's version number
$in_footer = true; // if you want it to load in the page footer
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
To do it only on the Edit Post screen in the backend, you can use the admin_enqueue_scripts hook combined with get_current_screen():
add_action( 'admin_enqueue_scripts', 'pjso_my_scripts' );
function pjso_my_scripts() {
$screen = get_current_screen();
if( 'post' != $screen->base || 'edit' != $screen->parent_base ) {
return; // bail out if we're not on an Edit Post screen
}
$handle = 'script_name';
$src = '/path/to/script.js';
$deps = array(
'jquery',
);
// add any other dependencies to the array, using their $handle
$ver = 'x.x'; // if you leave this NULL,
// then it'll use WordPress's version number
$in_footer = true; // if you want it to load in the page footer
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
That should work, though I haven't tested it.
This code can go in your theme's functions.php file, or you could write a custom plugin so that it will persist across any future theme changes.
References
wp_enqueue_script() -- note the list of scripts that WP automatically loads, which includes jQuery
get_current_screen()
This is my first time using wp_enqueue_script for an IDX solution that I am trying to setup on a WordPress site. My file path is child-theme/js/idx.js
I placed this code in my functions.php file:
<?php
function wptuts_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/idx.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_jquery' ); ?>
and this code in my idx.js file:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript" ></script>
<script src="http://tools.example.com/scripts/postmessage.min.js" type="text/javascript" ></script>
<script type="text/javascript" >
$.createDynamicFrame('http://example.example.com', 'http://example.example.com/26611/Carets/search?parentUrl=' + encodeURIComponent( document.location.href ), 'MapSearch');
This does nothing. When I use the wptuts_scripts_with_jquery()function in the functions.php with other scripts it seems to work but not with the idx.js script. Any help would be really appreciated.
Thanks!
I don't know why you are trying to include <script> tags inside an external resource but this all wrong - they should only ever contain pure javascript (this is what the browser is already expecting).
Your idx.js file should contain only this line: $.createDynamicFrame(...
Onto the reason why this erroneous file isn't being included though - the array you pass as a parameter when queueing scripts in Wordpress is a list of dependencies. I'm assuming that since you were trying to include jQuery inside your JS file - then it hasn't been previously loaded by the template? In which case, because you haven't enqueued jQuery - "custom-script" doesn't have all the required components so it doesn't get pushed onto the page.
By default wordpress already has a version of jQuery registered - if for CDN preference (or backwards comatibility sake) you need to use a different version then you should wp_deregister_script and re-enqueue it with your desired version. Otherwise your function should look like the following:
function wptuts_scripts_with_jquery(){
$path = get_template_directory_uri();
wp_enqueue_script('jquery');
wp_enqueue_script('custom-script', "{$path}/js/idx.js", array('jquery'));
}
Since nothing exists at tools.example.com/scripts/postmessage.min.js I have left this out. Also note that you can register and enqueue in a single wp_enqueue_script statement.
I have been trying to load the html page genereated by swiffy into my site banner. I tried iframes as was suggested in the google FAQ, but when links are clicked they only open in the iframe as per usual, but I need them to open on the current page so I tried breaking up the swiffy code into a javascript file and calling it in as shown below. I am currently using word press, which means this is all being loaded from a header.php file, and have been trying the following code with no luck. Any suggestions?
<div id="home-banner" width="916px" height="200px">
</div>
<script src="http://www.gstatic.com/swiffy/v3.9/runtime.js"></script>
<script type="text/javascript" src="http://www.goaefis.com/Banner.js">
var stage = new swiffy.Stage(document.getElementById('home-banner'), swiffyobject);
stage.start();
</script>
You need to deregister the WordPress jquery so you can use the google code. You can save the script inside the <script></script>tags as a separate document. For this example I'll call it swiftfyobject.js. It will need to go in the theme folder inside a folder named js. You can then call the script from within the themes function.php file.
Here is how it should look:
The swiffyobject.js file that goes in the js folder:
var stage = new swiffy.Stage(document.getElementById('home-banner'), swiffyobject);
stage.start();
The code for the functions.php file:
function add_themescript(){
if(!is_admin()){
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://www.goaefis.com/Banner.js');
wp_enqueue_script( 'swiffyobject', get_template_directory_uri() . '/js/swiffyobject.js', array('jquery'));
}
}
add_action('init','add_themescript');
That should get you going if there aren't any conflicts with other code in the theme or plug-ins you use.