Develop Reference

CKeditor imageuploader imagebrowser wrong location

I have CKeditor in
E:\XAMPP\htdocs\projekt2\ck
Wheh on Page with CKeditor I go to browser server
It opens wrong location to script in a popup
I don't know how is this even possible.
Everything is not on http://localhost/projekt2/admin/ckeditor/plugins/....
But on
http://localhost/projekt2/ck.....
And from there script is called
In PHP i called this by <script src="<?= base_url('ck/ckeditor.js') ?>"></script> which takes it from http://localhost/projekt2/ck

The imageuploader plugin you are using has default value for filebrowserBrowseUrl config option (you can see it in the plugin source code - https://github.com/xsmo/Image-Uploader-and-Browser-for-CKEditor/blob/master/plugin.js).
To use different upload dir, change filebrowserBrowseUrl config, e.g:
CKEDITOR.replace( 'editor', {
filebrowserBrowseUrl = 'http://localhost/projekt2/ck/.../imgbrowser.php';
} );

How to enqueue script to archive head with themes' function.php?

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

loading jQuery/JavaScript in functions.php (wordpress)

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().

wp_enqueue_script not displaying script

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.

Adding <script> to WordPress in <head> element

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;