Menu icon Foundation
Foundation 5 to Wordpress js/ jquery scripts

Hello,

Im trying to set a foundation website to wordpress. Only I don't know how to handle the scripts in the functions.php
Can someone help me?

Regards,
Hugo

<script src="js/vendor/modernizr.js"></script>




<script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    
    
    
            

         

Foundation 5wordpressscripts

Hello,

Im trying to set a foundation website to wordpress. Only I don't know how to handle the scripts in the functions.php
Can someone help me?

Regards,
Hugo

<script src="js/vendor/modernizr.js"></script>




<script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    
    
    
            

         

This post has been closed. No new replies can be added.

Peter Surrena over 5 years ago

Below is how you properly add js and css.

Notes:

deregister jQuery first to override the default installation.

When registering scripts, the array towards the end of the line is to list dependencies, as you see at the end of the foundation line, I list jQuery because we want to load foundation AFTER jQuery.

At the very end of the register script line is a true or false, true will load the script in the footer and false in the header.

function register_my_scripts() {
  wp_deregister_script('jquery');  
  wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js", array(),'2.1.0',false);
  wp_register_script('modernizer', get_template_directory_uri()."/js/modernizr.js",array(),'2.7.1', false);
  wp_register_script('foundation', get_template_directory_uri()."/js/foundation.min.js", array('jquery'),'5.1.1',true); 

  wp_enqueue_script(array('jquery','modernizer','foundation'));
}

function register_my_styles(){
  wp_register_style('reset', get_template_directory_uri()."/css/normalize.css",array(),'5.1.1','screen');
  wp_register_style('main', get_template_directory_uri()."/style.css",array(),'2.7','all');  
    wp_register_style('foundation', get_template_directory_uri()."/css/foundation.min.css",array('main'),'5.1.1','screen');

  wp_enqueue_style(array('reset','main','foundation'));
}

add_action('wp_print_scripts','register_my_scripts');
add_action('wp_print_styles', 'register_my_styles');

Rafi Benkual over 5 years ago

@ Peter, this is very helpful!

samArgote over 5 years ago

I tried this declaration in the functions.php file but the dropdows in my navegation menu are still not working. Do I have to add something else? I tried adding to the header:

$(document).foundation();

but still no luck, any advice would be appreciated.

Peter Surrena over 5 years ago

samArgote,

Did you call foundation in the HTML? Or, optionally, enqueue it in a file called something like my-site.js?

 <script>
$(document).foundation();
</script>

Oloeg over 5 years ago

@Peter Surrena

Thanks for your comment and code, but what to do with the code that is standing in the

header.php:

 <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet"> <!--style van Foundation gekoppeld aan style.css -->
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>

and in the footer.php :

  <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

just delete that? because I did that but I can't get it work.

Is it restricted to use this in the header.php how to pair the functions.php

<?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>

please help,
Regards,
Hugo

Oloeg over 5 years ago

@Peter Surrena Can I otherwise email My code maybe you can see what is wrong so I can learn of this?
It is just a code example of foundation5 site turned to wordpress.

please let me know.

Regards,

Peter Surrena over 5 years ago

Assuming you set up your functions like I listed above, header.php should be
PHP
<html>
<head>
<title>The Title</title>
<?php wp_head();?>
</head>
<body>

And your footer.php should be
PHP
<?php wp_footer();?>
</body>
</html>

The following code will not work because it's saying the location of the JS is www.mywebsite.com/js/vendor/modernizer.js, which does not exist. The address is actually www.mysite.com/wp-content/themes/themename/js/modernizr.js

But this shouldn't matter if you are using what I recommend above.

 <script src="js/vendor/modernizr.js"></script>

Peter Surrena over 5 years ago

If you still have trouble, send your files to the email listed in my profile.

Riccardo over 5 years ago

Sorry but, why you register foundation.css after main style.css?

I don't use SASS.

If I use foundation as a framework, i need to overwrite graphic style as font color with my style.css.
If i register foundation after my style i can't overwite nothing.

It's right?

Peter Surrena over 5 years ago

I guess you don't have to but because of the template info that's included in style.css, I think of it as the top file. Maybe a reset or normalize would come before.

You could have your style.css only have the template meta info and a bunch of @import's.

style.css

/*
Theme Name: My great theme
Theme URI:http://www.mysite.com
Description:My Theme 2014
Version:1.0
Author:Peter Surrena
Author URI:http://www.petersurrena.com
*/

@import url('css/normalize.css');
@import url('css/foundation.min.css');
@import url('css/main.css');

Riccardo over 5 years ago

Sorry, you don't understand ;)

your description will load:
1) normalize.css
2) style.css
3) foundation.css

in reply to me you wrote another order
@import url('css/normalize.css');
@import url('css/foundation.min.css');
@import url('css/main.css');

So, without import, correct registering script order, for me is:

1) normalize.css
2) foundation.css
3) style.css

I prefear this order because in normalize i reset all style, then i register foundation that crate the row/grid/typography structure, at the end i register style.css, my custom theme css that change some color and some typography.

You understand now?
thankyou

Riccardo over 5 years ago

I understand now what you have wrote. Sorry, it's right.

Very usefull.

samArgote over 5 years ago

Hi Peter

Thanks for the answer, I put the code

<script>
$(document).foundation();
</script>

in a js file and enqueue the file but didn't work so I pasted the code in the header and footer of my template but still does not work. So I troubleshoot with Firebug and it is showing the following error:
TypeError: jQuery(...).foundation is not a function

I tried using $ instead of jQuery but nothing works so far. Any tip?

Thomas E. Vasquez over 5 years ago

try

(function($) {
jQuery(document).foundation() 

})(jQuery);

this should work. This is what I have in my theme and it works.

samArgote over 5 years ago

Thanks Thomas, I tried that as well but no luck yet... I am getting the same error from firebug

Jade over 5 years ago

I'm still stuck using Foundation 4, but I had the same exact problems you mentioned with the dropdown menus and Firebug error. The only thing that worked for me was the following code below (filenames should be renamed for your version 5 files):

Footer:

<script src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>

<script src="<?php bloginfo('template_url'); ?>/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>

Functions:

if( !is_admin()){

function my_theme_custom_scripts() {
  wp_enqueue_style( 'ywn_stylesheet', get_stylesheet_uri() );
  wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/vendor/custom.modernizr.js');
}

add_action( 'wp_enqueue_scripts', 'my_theme_custom_scripts' );
}

Nothing in the head section since I used @imports in the beginning of my style.css file.

I know this is not what you were expecting, but I think WP with Foundation is shaky - I tried to enqueue ALL scripts but ran into so many problems, I ended up having to pair down my list of enqueued scripts just to make the frontend work properly. Worked on this for quite some time, disabling WordPress jquery and loading my own, etc. and nothing worked. After adding the footer code back in like it is above, I got rid of that Firebug error and my desktop menu started working so there's definitely some conflicts with the way you'd normally enqueue scripts in WP.

Was a little hectic with the dropdowns too, because I still ended up having to create a custom walker for the main menu. But, even afer all this, I'm now running into mobile menu issues. I believe it's my CSS though... I had it working, but now I can't get the dropdown menus to work after it changes to the mobile menu...

Oloeg over 5 years ago

@Peter Surrena thanks for helping I will work on with that code. I will come back to let you know. If it is without luck I will contact you :)

Regards,
Hugo

Oloeg about 5 years ago

Hello,

I still have don't get the javascript functionality working.. does someone know how I get this working?

Regards,
Hugo

Ole Fredrik Lie about 5 years ago

@Hugo: First and foremost, it is a good idea to keep your functions.php file as clean as possible. In many cases, you only have import statements in functions.php pointing to snippets in a library folder.

To answer your question, it should be no problem to call the appropriate scripts. You can see how it is resolved in FoundationPress (which is a blank starter theme for WordPress built on the latest version of the Foundation.)

functions.php:
https://github.com/olefredrik/FoundationPress/blob/master/functions.php

enqueue-scripts.php:
https://github.com/olefredrik/FoundationPress/blob/master/library/enqueue-scripts.php

Oloeg about 5 years ago

Hello,

Ok, I think I have got the enqueue script working, but Im trying to fix a dropdown button but I can't get it work. What am I doing wrong? how you add more plugin functie to this? what am I doing wrong?

foundation.dropdown.js

<?php

function register_my_scripts() {
  wp_deregister_script('jquery');  
  wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js", array(),'2.1.0',false);
  wp_register_script('modernizer', get_template_directory_uri()."/js/modernizr.js",array(),'2.7.1', false);
  wp_register_script('foundation', get_template_directory_uri()."/js/foundation.min.js", array('jquery'),'5.1.1',true);
  wp_register_script('foundation.dropdown', get_template_directory_uri()."/js/foundation/foundation.dropdown.js", array(),'5.1.1',false);



  wp_enqueue_script(array('jquery','modernizer','foundation.dropdown'));
}

function register_my_styles(){
  wp_register_style('reset', get_template_directory_uri()."/css/normalize.css",array(),'5.1.1','screen');
  wp_register_style('main', get_template_directory_uri()."/style.css",array(),'2.7','all');  
  wp_register_style('foundation', get_template_directory_uri()."/css/foundation.min.css",array('main'),'5.1.1','screen');

  wp_enqueue_style(array('reset','main','foundation'));
}

add_action('wp_print_scripts','register_my_scripts');
add_action('wp_print_styles', 'register_my_styles');

?>