Community Forums › Forums › Archived Forums › General Discussion › Help adding script to Parallax theme
- This topic has 9 replies, 2 voices, and was last updated 8 years, 11 months ago by Brad Dalton.
-
AuthorPosts
-
May 21, 2015 at 2:01 pm #153135FoxyMarmaladeMember
Hello!
I've been trying for a couple of days to create a menu in my sidebar like the one seen in this tutorial: http://scottbolinger.com/simple-jquery-drop-down-menu-in-wordpress/ that will show child links after the parent link has been clicked.
I'm fairly new to WordPress development and very new to the Genesis framework. I'm not absolutely certain that I added the script correctly, but I followed the instructions that Brad Dalton has here: http://wpsites.net/web-design/best-ways-to-load-scripts-in-wordpress/ Adding the script to the header through Genesis theme settings caused all of the code in the script to display as text on the website in the header area, so I opted to enqueue but that didn't do anything either. I did view the source code for the site and I could see that the script was being called for, but yet it wasn't working. I then tried adding the script to the bottom of the responsive-menu.js file just to see if that would provide any results and it did not.
All I can guess is that I'm doing something wrong, there's something wrong with the script supplied in the tutorial, or there's a conflict with scripts already existing in the Parallax theme.
Can someone please explain to me how to add this type of menu and make it function as intended?
PS - I do not have my heart set on using the specific code from the tutorial - I'm definitely open to using alternate code if anyone has some they've used that actually works.
Thanks,
AprilMay 21, 2015 at 8:06 pm #153179Brad DaltonParticipant1. What you're asking for requires a fair amount of work and relates to a 3rd party script and custom coding.
2. jQuery is very sensitive and in your case, relies on PHP and CSS to get it working correctly. Its very easy to get it wrong even when you use the correct method and code which works however in your case there are other issues which also need resolving.
3. The Header and Footer Scripts box only accepts js.
* The PHP code on the tutorial you linked to requires modification and will not work 'as is'.
* Also, the Jquery in the tutorial will not load as is.
Is your script currently installed because you can use Google Chrome to find out what the error is which i assume relates to the loading of the script.
May 21, 2015 at 8:19 pm #153183Brad DaltonParticipantAlso note when adding scripts to the scripts box they must be wrapped in script tags. The jQuery you linked to is not wrapped in script tags.
One tip which may help you is to look at how the jQuery is loaded in this theme demo http://my.studiopress.com/themes/ambiance/#demo-full
If you inspect the site, you can work out hope to load scripts in genesis.
This is how its loaded in Ambiance Pro
jQuery(function( $ ){ $(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>'); $("#responsive-menu-icon").click(function(){ $(".nav-primary .genesis-nav-menu").fadeToggle(); }); $(document).on("scroll", function(){ if($(document).scrollTop() > 100){ $(".site-header").addClass("shrink"); } else { $(".site-header").removeClass("shrink"); } }); });
And this in functions
add_action( 'wp_enqueue_scripts', 'ambiance_load_scripts_styles' ); function ambiance_load_scripts_styles() { wp_enqueue_script( 'ambiance-effects', get_bloginfo( 'stylesheet_directory' ) . '/js/effects.js', array( 'jquery' ), '1.0.0' ); }
This code tells WordPress the effects.js script is dependant on jQuery.
May 22, 2015 at 6:32 am #153245FoxyMarmaladeMemberHi Brad!
Thank you for the replies. I'm glad to know this isn't as easy as I thought it should be - makes me feel a little better about not being able to get it to work. Given my skill level at this time, hiring someone to do it would be a better option for me - can you recommend someone I can get in touch with?
Thanks!
AprilMay 22, 2015 at 7:27 am #153253Brad DaltonParticipantHello April
Let me know if you like this otherwise you can use the contact form on my site and i'll give you a quote to install the code you linked to.
May 22, 2015 at 7:35 am #153254FoxyMarmaladeMemberHi Brad!
Could we use an image instead of the icon? If so, I think that would work just fine.
I need one menu that says:
INTERIOR SERVICES
For your homeAnd another below that that says:
EXTERIOR SERVICES
For your homeThose could easily be images instead of text.
May 22, 2015 at 8:40 am #153262FoxyMarmaladeMemberI found some code to reference and made some modifications to what I had. I've tried a zillion things, so I'm not exactly sure how I did it, but I think I just figured this out..... it's working!!! 🙂
May 22, 2015 at 10:08 am #153273Brad DaltonParticipantMay 22, 2015 at 11:18 am #153293FoxyMarmaladeMemberNo, not yet. I have it in maintenance mode while I'm developing it. I can set you up with a login if you'd like to take a look at it.
May 22, 2015 at 11:33 am #153297Brad DaltonParticipantJust curious but do post a link when its live so we can check it out. Thanks
-
AuthorPosts
- The topic ‘Help adding script to Parallax theme’ is closed to new replies.