how to make my own javascript to work in front end

[karen-nair]

Good Day Everyone. I'm using FoundationPress as frontend and Wordpress as backend. I created a very simple plugin to upload image into the homepage. I've no issue with that. I can display them properly in the page I desired. However I wish to use little bit of javascript for the image slideshow.

However I've no clue on where on earth to locate my javascript files. I also noticed that I can't even find a single .js files in Foundationpress header or footer. I did some search but I cant comprehend any. Below are my script. Please somebody help me on this.Thanks a million.

I need to locate this in header:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

This one probably before tag:

<script src="js/jquery.krakatoa.js"></script> <script> $(window).on('load',function(){ $('.krakatoa').krakatoa( { width: '1100px', height: '320', autoplay: true, loop: true, delay: 9000, //Slider on hold for 9 sec duration: 800, //Slider Transition Timer direction: -1, first: 9}); }); </script This is how I display image retrieved from database:

//'krakatoa' is the class responsible for slideshow animation get_results("SELECT * FROM $tablename"); $upload_dir = wp_upload_dir(); foreach($retreive_data as $data) { ?> image_name; ?>">

I registered my javascripts here but I'm not sure what to do next. I uploaded in the ftp but no effect.Do I have to do anything to make the javascript take effect? functions.php function register_my_scripts() { wp_deregister_script('jquery'); wp_register_script( 'krakatoa', "http://fspb.valse.com.my/wp-content/themes/FoundationPress-master/js/jquery.krakatoa.js", array(), false, true ); wp_register_script( 'my_krakatoa', "http://fspb.valse.com.my/wp-content/themes/FoundationPress-master/js/my_krakatoa.js", array(), false, true ); wp_register_script('main', "http://code.jquery.com/jquery-latest.min.js", array(),false,false); wp_enqueue_script(array('krakatoa','my_krakatoa','main')); }

[manwithacat]

The gimmick with javascript in wordpress is that the JS files are enqueued, and then wordpress outputs all the JS for themes and plugins to the header or footer when a special function is called in the page template (or header.php/footer.php).

In this theme, the enqueueing takes place in enqueue-scripts.php

[karen-nair]

Hi Mr.James, Thanks for replying ..Now I understand the concept on how
javascript placed in foundation. However I tried all my best to locate my
javascript here and there to no avail. Could you please guide me on this.
Below is the code I entered in enqueue-scripts.php inside library below the
existing code . WHat do I need to do next please?

if (!function_exists('FoundationPress_scripts')) :
function myBannerPlugin_scripts() {
// deregister the jquery version bundled with wordpress
wp_deregister_script( 'jquery' );
// register scripts
wp_register_script( 'jquery', '
http://code.jquery.com/jquery-latest.min.js', array(), '1.0.0', false );
wp_register_script( 'krakatoa', get_template_directory_uri() .
'/js/jquery.krakatoa.js', array(), '1.0.0', true );
wp_register_script( 'my_krakatoa', get_template_directory_uri() .
'/js/my_krakatoa.js', array(), '1.0.0', true );

// enqueue scripts
wp_enqueue_script('jquery');
wp_enqueue_script('krakatoa');
wp_enqueue_script('my_krakatoa');

}
add_action( 'wp_enqueue_scripts', 'myBannerPlugin' );
endif;

On Fri, Dec 12, 2014 at 4:35 AM, James Barlow notifications@github.com
wrote:

The gimmick with javascript in wordpress is that the JS files are
enqueued, and then wordpress outputs all the JS for themes and plugins to
the header or footer when a special function is called in the page template
(or header.php/footer.php).

In this theme, the enqueueing takes place in enqueue-scripts.php
https://github.com/olefredrik/FoundationPress/blob/master/library/enqueue-scripts.php

—
Reply to this email directly or view it on GitHub
#162 (comment)
.

[FlatspinZA]

@VaniNair what @jmbarlow was trying to say was that you add your scripts to the existing enqueue-scripts.php file, leaving the existing format as is.

You still need foundation, jquery, and modernizer - these are core to making the Foundation framework work within WordPress.

if (!function_exists('FoundationPress_scripts')) :
function FoundationPress_scripts() {

// deregister the jquery version bundled with wordpress
wp_deregister_script( 'jquery' );

// register scripts
wp_register_script( 'modernizr', get_template_directory_uri() . '/js/modernizr/modernizr.min.js', array(), '1.0.0', false );
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery/dist/jquery.min.js', array(), '1.0.0', false );
wp_register_script( 'foundation', get_template_directory_uri() . '/js/app.js', array('jquery'), '1.0.0', true );
**[Register your custom script here]**

// enqueue scripts
wp_enqueue_script('modernizr');
wp_enqueue_script('jquery');
wp_enqueue_script('foundation');
**[Enqueue your custom script here]**
}

add_action( 'wp_enqueue_scripts', 'FoundationPress_scripts' );
endif;

Call your function by placing it either in the the footer.php file (depending on if you want it on every page), or at the bottom of your pagetemplate.php if you only want it called on that specific page.

[karen-nair]

Hi, Sorry for causing trouble. I'm using my function below the default
function you stated above. However I'm just curious if I wrote it
correctly. And I wish to use it only on index.php page. So I should call it
at the bottom of the page? Can you please tell me how to call that function
I registered in functions.php?

On Fri, Dec 12, 2014 at 2:11 PM, FlatspinZA notifications@github.com
wrote:

@VaniNair https://github.com/vaninair what @jmbarlow
https://github.com/jmbarlow was trying to say was that you add your
scripts to the existing enqueue-scripts.php file, leaving the existing
format as is.

You still need foundation, jquery, and modernizer - these are core to
making the Foundation framework work within WordPress.

if (!function_exists('FoundationPress_scripts')) :function FoundationPress_scripts() {// deregister the jquery version bundled with wordpresswp_deregister_script( 'jquery' );// register scriptswp_register_script( 'modernizr', get_template_directory_uri() . '/js/modernizr/modernizr.min.js', array(), '1.0.0', false );wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery/dist/jquery.min.js', array(), '1.0.0', false );wp_register_script( 'foundation', get_template_directory_uri() . '/js/app.js', array('jquery'), '1.0.0', true );[Register your custom script here]// enqueue scriptswp_enqueue_script('modernizr');wp_enqueue_script('jquery');wp_enqueue_script('foundation');[Enqueue your custom script here]}add_action( 'wp_enqueue_scripts', 'FoundationPress_scripts' );endif;

Call your function by placing it either in the the footer.php file
(depending on if you want it on every page), or at the bottom of your
pagetemplate.php if you only want it called on that specific page.

—
Reply to this email directly or view it on GitHub
#162 (comment)
.

[karen-nair]

I called my function in index.php like this:

And it echoed "not working";

,I think the javascript is in action ,however not working properly. The banner images not appearing. When I refresh the page ,it shows for a second then goes off. And the pagination bullets appearing same with the number of banners uploaded correctly.

[FlatspinZA]

Look, I am no expert - you're probably better off waiting for someone else to give you advice, but this is how I got other Javascript to work:

1. Put mycustomscript.js in the js/custom folder
2. Run 'Grunt Build' - which will compile your mycustomscript.js into app.js
3. Call the function on the page you want it to run.

I didn't mess around with functions.php, or enqueue-scripts.php at all.

[manwithacat]

Good one. I forgot that the grunt process looks for custom js files. Do what @FlatspinZA said.

[karen-nair]

Dear all, I don't have much knowledge in JavaScript nor in foundationpress.
Pls guide me step by step to have my custom JavaScript work in home page. I
downloaded node.js...after that I'm blank not knowing what to do...this is
the third day I'm wondering on this issue.any help would b really great.
I even tried registerring n enquing in enqueue.php...but doesn't work
either..I've read all the tutorials available.
On Dec 13, 2014 12:19 AM, "James Barlow" notifications@github.com wrote:

Good one. I forgot that the grunt process looks for custom js files. Do
what @FlatspinZA https://github.com/FlatspinZA said.

—
Reply to this email directly or view it on GitHub
#162 (comment)
.

[FlatspinZA]

@jmbarlow - the only reason I got it working is because of you, oh great one. ;)

@VaniNair - You say you don't have much knowledge of JavaScript, yet you are trying implement custom JavaScript on a framework adapted for WordPress.

I am not trying to be negative, but just the mere fact that you said you downloaded node.js says me to are flying in the dark a bit (not that I am not).

I would suggest that before you try your custom JavaScript implementation in FoundationPress - get it working in ZURB Foundation first.

Then, also before trying you custom JavaScript in FoundationPress, try implement some JavaScript that you know works 100%. Learn how to do that, then work on your own implementation.

Try get this working: http://kenwheeler.github.io/slick/ in FoundationPress, because I know that works 100%.

I don't think this is the place for asking people to show you exactly how to build something from scratch, more for specific issues.

You need to know what things are, and their purpose - you can't dive in at the deep end on something as involved as FoundationPress.

[olefredrik]

What @FlatspinZA said.

[karen-nair]

Hi all,

I inserted the below code in functions.php and it worked. Thanks.

//my custom function
function wpb_adding_scripts() {

wp_register_script( 'my_amazing_script', get_template_directory_uri()
.'/js/jquery-latest.min.js', array('jquery'), '1.0.0', false );
wp_register_script('my_amazing_script2', get_template_directory_uri()
.'/js/jquery.krakatoa.js', array('jquery'),'1.1', true);
wp_register_script('my_amazing_script3', get_template_directory_uri()
.'/js/my_krakatoa.js', array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');
wp_enqueue_script('my_amazing_script2');
wp_enqueue_script('my_amazing_script3');

}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts');

On Mon, Dec 15, 2014 at 1:18 AM, Ole Fredrik Lie notifications@github.com
wrote:

What @FlatspinZA https://github.com/FlatspinZA said.

—
Reply to this email directly or view it on GitHub
#162 (comment)
.

[linuxbastard]

As far as I remember, you don't need to register scripts if it's not a dependency of a later script which you would en queue. You would register your own version of jquery if you don't want to use the built in one, since you would call it as a dependency in custom scripts that you would enqueue with an "array('jquery')" argument. But you can directly en queue custom scripts, especially if they don't have other js library dependencies.

What you did isn't wrong, it's just using a function that it can do without.

function wpb_adding_scripts() {
wp_enqueue_script( 'my_amazing_script', get_template_directory_uri()
.'/js/jquery-latest.min.js', array('jquery'), '1.0.0', false );
wp_enqueue_script('my_amazing_script2', get_template_directory_uri()
.'/js/jquery.krakatoa.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script3', get_template_directory_uri()
.'/js/my_krakatoa.js', array('jquery'),'1.1', true);
}