Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote -2 down vote favorite
1

I have the following html code: 

<script src="js/jquery.vmap.js"></script>
<script src="js/jquery.vmap.world.js"></script>
<script src="js/jquery.vmap.sampledata.js"></script>

<script>
jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverOpacity: 0.7,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#C8EEFF', '#006491'],
    normalizeFunction: 'polynomial'
});
</script>

<div id="vmap" style="width: 600px; height: 400px;"></div>

How can I add the used Javascript (or CSS) file into my new page ? Do I have to copy and paste the files through FTP ?

share|improve this question
1  
possible duplicate of How to enqueue the style using wp_enqueue_style() –  RRikesh Jul 9 at 11:17

2 Answers

up vote 1 down vote accepted

For your purpose enqueue is the key:

You can consult this question: How to enqueue the style using wp_enqueue_style() for style enqueue.

For scripts enqueue I recently did as:

// ENQUEUE JAVASCRIPTS FOR CUSTOM PURPOSE
function scripts_for_something() {

    wp_register_script( 'my-scripts', get_template_directory_uri() . '/js/my-scripts.js' );

    wp_enqueue_script( 'my-scripts' );
}

add_action( 'admin_enqueue_scripts', 'scripts_for_something' );

admin_enqueue_scripts will enqueue the scripts in the admin panels only. You can use wp_enqueue_scripts instead for front-end.

share|improve this answer
up vote 0 down vote

While wordpress has a file editor built in, i recommend editing the files on your desktop then uploading them to your website and wordpress install.

We are assuming here you have a folder on your webserver, that is inside of your wordpress theme called js. This is the folder where you should have all your javascript files.

Using your favorite text editor create a file and put your script in it:

jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverOpacity: 0.7,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#C8EEFF', '#006491'],
    normalizeFunction: 'polynomial'
});

Save this file as:

my_vectormap.js

Now download the functions.php file from your wordpress themes directory on your web server. Using a FTP client ofcourse.

In the functions.php file add this:

add_action( 'wp_enqueue_scripts', 'our_vmap_scripts' );
function our_vmap_scripts(){
wp_register_script( 'vmap_main', get_template_directory_uri() . '/js/jquery.vmap.js, array( 'jquery' ), false, true );
wp_register_script( 'vmap_world', get_template_directory_uri() . '/js/jquery.vmap.world.js, array( 'jquery' ), false, true );
wp_register_script( 'vmap_sampledata', get_template_directory_uri() . '/js/jquery.vmap.sampledata.js, array( 'jquery' ), false, true );
wp_register_script( 'my_vectormap', get_template_directory_uri() . '/js/my_vectormap.js, array( 'jquery' ), false, true );

wp_enqueue_script( 'vmap_main' );
wp_enqueue_script( 'vmap_world' );
wp_enqueue_script( 'vmap_sampledata' );
wp_enqueue_script( 'my_vectormap' );

}

You now have to upload your modified functions.php file back to your webserver in its directors in your wordpress install. Normally located in /wp-content/themes/theme-name-here/ .You also have to uplod the javascript file you screated earlier to /wp-content/themes/theme-name-here/js/

That should put u on the right track.

Also, you will need jquery on your site.

a proper way to do it would be like so:

in your functions.php use this:

if (!is_admin()) add_action('wp_enqueue_scripts', 'our_jquery_enqueue', 11);
function our_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.