-2

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 ?

1

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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