Menu icon Foundation

Designer | Brooklyn, NY

My Posts






My Comments

Peter Surrena commented on Peter Surrena's post about 5 years

So, it's still a hack...hopefully there's a solution soon.

Peter Surrena commented on Oloeg's post about 5 years

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

Peter Surrena commented on Oloeg's post about 5 years

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

Peter Surrena commented on Oloeg's post about 5 years

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 commented on Jay Dcoder's post about 5 years
Peter Surrena commented on Oloeg's post about 5 years

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>

Peter Surrena commented on Oloeg's post about 5 years

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

Peter Surrena commented on Charlie Hinojosa's post about 5 years

I add a class to the menu bar container and set it to display:none and then use the following jQuery code to reveal the menu bar after a set pixel count

.floating-nav {display:none}
    $(window).scroll(function() {
      if($(window).scrollTop() >= 550) {  
        $('.floating-nav').fadeIn('fast');
      }else{
        $('.floating-nav').fadeOut('fast');
      }
    });

Posts Followed






Following

    No Content

Followers

My Posts

My Comments

You commented on Peter Surrena's post about 5 years

So, it's still a hack...hopefully there's a solution soon.

You commented on Oloeg's post about 5 years

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

You commented on Oloeg's post about 5 years

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

You commented on Oloeg's post about 5 years

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>

You commented on Jay Dcoder's post about 5 years
You commented on Oloeg's post about 5 years

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>

You commented on Oloeg's post about 5 years

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

You commented on Charlie Hinojosa's post about 5 years

I add a class to the menu bar container and set it to display:none and then use the following jQuery code to reveal the menu bar after a set pixel count

.floating-nav {display:none}
    $(window).scroll(function() {
      if($(window).scrollTop() >= 550) {  
        $('.floating-nav').fadeIn('fast');
      }else{
        $('.floating-nav').fadeOut('fast');
      }
    });

Posts Followed

Following

  • No Content

Followers

  • No Content