Get superfish JS working in our theme, WPFolio WordPress
- SOLVED
We've made a free, community developed portfolio theme for artists called WPFolio. In making some changes to get our latest version approved for listing on [[LINK href="http://wordpress.org/extend/themes/wpfolio"]]wordpress.org[[/LINK]] we lost our superfish javascript for dropdown menus. The superfish javascript isn't kicking in so it's currently defaulting to the CSS behavior.
We have some staging sites we test with. This is how the menu should behave:
[[LINK href="http://wpfolio.visitsteve.com/sample/"]]http://wpfolio.visitsteve.com/sample/[[/LINK]]
and this is what's happening with the latest version of our code:
[[LINK href="http://wpfolio.visitsteve.com/lmcc/"]]http://wpfolio.visitsteve.com/lmcc/[[/LINK]]
Me and the other main developer currently don't have time to solve this and we've been <em>this</em> close to getting this thing ready to post on WordPress.org for what seems like months! We want it done with, so we could use your help.
Related info:
The [[LINK href="https://github.com/slambert/wpfolio"]]whole project is on github[[/LINK]] and the easiest thing would be if you could fork the project, make your changes, and commit them so we can check it out and test easily.
Our ticket for this issue is here:
https://github.com/slambert/wpfolio/issues/#issue/48
We moved wp_head down (which may have caused the problem) to meet WordPress standards:
https://github.com/slambert/wpfolio/issues/closed#issue/40
Answers (2)
Edouard Duplessis answers:
you have to use wp_enqueue_script() for loading your js properly... because now your custom js is loaded before jquery.
so use wp_enqueue_script(); with all your depedencies in like this:
wp_enqueue_script('myCustomJs', THEME_PATH.'/myCustomJs.js', array('jquery'));
Steve Lambert comments:
Sounds good, can you send me a block of code I can paste in? Or fork the project on github and make the patch?
Edouard Duplessis comments:
I've fork the project but you need to put a another files to put your custom js
Steve Lambert comments:
The JavaScript is already there. I'm writing from my phone but iirc it's in a folder called js.
Steve Lambert comments:
Just saw your note on github. I like the suggestion and will check out your patch asap.
Edouard Duplessis comments:
I've made the change in git
Steve Lambert comments:
tested it and it seems to work. Thank you!
idt answers:
Have you tried moving this block just
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverIntent.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/superfish.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="<?php echo bloginfo('template_directory') ?>/js/supersubs.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('ul.sf-menu').superfish();
});
/* ]]> */
</script>
just below
<?php wp_head(); ?>
Tried that and the js error I was getting using your theme from github was gone.
idt comments:
jQuery is loaded inside wp_head. Sometimes the order in which js was loaded is important.
Steve Lambert comments:
That's how we had it before, but WordPress wants
<?php wp_head(); ?>
just before
</head>
So we can't do that.
idt comments:
Yes, wp_head should be placed before </head>, but you can still add script calls below it. Unless your calling it using wp_enqueue_script(which should be used before wp_head), you should be fine calling those js below wp_head.
idt comments:
Sorry I didn't understand what you meant by Wordpress want wp_head to be directly above </head>
In case Edouard Duplessis' solution doesn't work(if it does award him the whole price for this), and for those who might find it helfpul, do this:
This also needs to be called below jQuery script, so I suggest you create a new js file and put these codes there.
jQuery(document).ready(function($) {
$('ul.sf-menu').superfish();
});
Then replace this:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverIntent.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/superfish.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="<?php echo bloginfo('template_directory') ?>/js/supersubs.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('ul.sf-menu').superfish();
});
/* ]]> */
</script>
With this:
<?php
wp_enqueue_script('hoverIntent', get_bloginfo('template_url').'/js/hoverIntent.js', array('jquery'));
wp_enqueue_script('supperFish', get_bloginfo('template_url').'/js/superfish.js', array('jquery'));
wp_enqueue_script('supperSubs', get_bloginfo('template_url').'/js/supersubs.js', array('jquery'));
//use the filename you specified for the code above
wp_enqueue_script('sfMenu', get_bloginfo('template_url').'/js/filename_of_the_file_above.js', array('jquery'));
?>