Support » Developing with WordPress » include js menu

include js menu

  • Resolved mrpress01

    (@mrpress01)


    5 years, 8 months ago

    I’m trying to implement a responsive menu to the starter theme Underscores. I’ve tried two days but I can not understand where I’m wrong. For the scripts I relied on the website that provides jqueryscript.net script. where I tried, in addition to the one mentioned, to implement this
    https://www.jqueryscript.net/menu/Mobile-friendly-Multi-level-Dropdown-Menu-Plugin-jQuery-Stellarnav.html
    I registered the style and the script through the appropriate functions

    
wp_enqueue_style('styles', get_template_directory_uri() . '/ ');

    And

    
wp_enqueue_script( scritp', get_template_directory_uri() . '/js/scritp');

    then I assigned the appropriate ID and classes to the menu with

    
<?php wp_nav_menu( array(
'theme_location'  	=> 'primary',
'menu_id'      		 => 'primary-menu',
'container'		  =>  'div',
'container_class'	  => 'stellarnav',
'container_id'	 	  => 'main-nav',) );?>

    I tried to implement the instructions either by calling the file (a.js) with inside:

    
jQuery( document ).ready( function( $ ) {
$('#main-nav').stellarNav({
// adds default color to nav. (light, dark)
theme     : 'dark',
// number in pixels to determine when the nav should turn mobile friendly
breakpoint: 768,
// adds a click-to-call phone link to the top of menu - i.e.: "18009084500"
phoneBtn: false,
// adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/"
locationBtn: false,
// makes nav sticky on scroll
sticky     : false,
// 'static' or 'top' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page
position: 'static',
// shows dropdown arrows next to the items that have sub menus
showArrows: true,
// adds a close button to the end of nav
closeBtn     : false,
// fixes horizontal scrollbar issue on very long navs
scrollbarFix: false
});

    in function.php with the string wp_enqueue_script and is directly from the header enclosed in the tags
    <script type = "text / javascript"> </ script>
    But without getting results, I was wrong somewhere?

    sorry for my google english translator

    Thanks so much

    • This topic was modified 5 years, 8 months ago by mrpress01.
Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    5 years, 8 months ago

    You need to show us the Webpage that has this menu.

    Thread Starter mrpress01

    (@mrpress01)

    5 years, 8 months ago

    I’m developing a theme in local with underscores. it is not online

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    5 years, 8 months ago

    Try emulating the relevant Webpage through a sandbox tool like CCSDesk.com:

    1. View your webpage;
    2. Right click on the page somewhere and press “View source
    3. A new window will appear with all the code of your page. Copy all of that code
    4. Go to CSSDesk.com and paste it into the “HTML” section
    5. Press the “Share” button in CSSDesk
    6. A new URL will appear to the left of the “Share” button, copy that URL and paste it here in this thread

    We can then hopefully see your webpage without it going live.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    5 years, 8 months ago

    On a side note, did you add a ‘modlook’ tag to this topic? If so, can you let me know what you need moderator attention for?

    Thread Starter mrpress01

    (@mrpress01)

    5 years, 8 months ago

    because the post I had added was banned for the link I had entered

    I immediately follow your guide and put the link

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    5 years, 8 months ago

    Oh right thanks for letting us know, but in this case it was just caught by the forum’s spam filter. We review the filter often and it’s already on our radar, so if this happens again there’s no need to tag the topic.

    I immediately follow your guide and put the link

    Could you put that link here in this thread?

    Thread Starter mrpress01

    (@mrpress01)

    5 years, 8 months ago

    if I go to this link https://ccsdesk.com/ I am asked to enter username and password. can you give me the link to upload my page to share?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    5 years, 8 months ago

    Damn I failed at typing, sorry. I meant this website instead: https://cssdesk.com/

    Thread Starter mrpress01

    (@mrpress01)

    5 years, 8 months ago

    this site does not work. maybe you can help me anyway. my problem is to implement this jquery plugin (https://www.jqueryscript.net/menu/Mobile-friendly-Multi-level-Dropdown-Menu-Plugin-jQuery-Stellarnav.html) in Underscores starter theme. How would you do? so then I follow your steps and I understand where I was wrong. thank you so much

    • This reply was modified 5 years, 8 months ago by mrpress01.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    5 years, 8 months ago

    I’m afraid I don’t have that much time and that’s the case for most people who help out here. I strongly encourage you to spend time emulating the problem, so we spend less time trying to extract information from you and more time fixing the problem.

    Thread Starter mrpress01

    (@mrpress01)

    5 years, 8 months ago

    I did not want to be rude, maybe I was misunderstood. I do not pretend you do the job for me. my problem is that I can not implement a jquery plugin. I think the procedure is the same for other plugins too. if the site works I share the source code of the page. Sorry again

    Moderator bcworkz

    (@bcworkz)

    5 years, 8 months ago

    Did you call wp_enqueue_script() from within a callback added to “wp_enqueue_scripts” action? This is what everyone should do. If you have script tags in the head section with no code or file reference within, something has gone wrong somewhere with the enqueuing process. Also check your browser console for errors when you have problems like this.

    Thread Starter mrpress01

    (@mrpress01)

    5 years, 8 months ago

    @bcworkz
    For the tests I inserted them in the wordpess hook (only for now)

    
function consultweb_scripts() {
	wp_enqueue_style( 'consultweb-style', get_stylesheet_uri() );
	wp_enqueue_style('styles', get_template_directory_uri() . '/inc/style.css');
	wp_enqueue_style('stellarnav.min', get_template_directory_uri() . '/js/stellarnav.min.css');
	wp_enqueue_style('consultweb-grid', get_template_directory_uri() . '/inc/grid.css');
	wp_enqueue_script ( 'stellarnav', get_template_directory_uri() . '/js/stellarnav.js');
	wp_enqueue_script ( 'myscript', get_template_directory_uri() . '/js/myscript.js');
}
add_action( 'wp_enqueue_scripts', 'consultweb_scripts' );

    The scripts (js and css) are loaded correctly in the header. As shown below

    
</style>
<link rel="stylesheet" id="consultweb-style-css" href="http://localhost/consultweb/wp-content/themes/consultweb/style.css?ver=4.9.2" type="text/css" media="all">
<link rel="stylesheet" id="styles-css" href="http://localhost/consultweb/wp-content/themes/consultweb/inc/style.css?ver=4.9.2" type="text/css" media="all">
<link rel="stylesheet" id="stellarnav.min-css" href="http://localhost/consultweb/wp-content/themes/consultweb/js/stellarnav.min.css?ver=4.9.2" type="text/css" media="all">
<link rel="stylesheet" id="consultweb-grid-css" href="http://localhost/consultweb/wp-content/themes/consultweb/inc/grid.css?ver=4.9.2" type="text/css" media="all">
<script type="text/javascript" src="http://localhost/consultweb/wp-content/themes/consultweb/js/stellarnav.js?ver=4.9.2"></script>
<script type="text/javascript" src="http://localhost/consultweb/wp-content/themes/consultweb/js/myscript.js?ver=4.9.2"></script>
<link rel="https://api.w.org/" href="http://localhost/consultweb/wp-json/">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/consultweb/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/consultweb/wp-includes/wlwmanifest.xml"> 
<meta name="generator" content="WordPress 4.9.2">
<link rel="canonical" href="http://localhost/consultweb/pagina-di-esempio/">
<link rel="shortlink" href="http://localhost/consultweb/?p=2">
<link rel="alternate" type="application/json+oembed" href="http://localhost/consultweb/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fconsultweb%2Fpagina-di-esempio%2F">
<link rel="alternate" type="text/xml+oembed" href="http://localhost/consultweb/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fconsultweb%2Fpagina-di-esempio%2F&format=xml">
<link rel="pingback" href="http://localhost/consultweb/xmlrpc.php">		<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>

    while in the console I get errors:

    
stellarnav.js?ver=4.9.2:243 Uncaught ReferenceError: jQuery is not defined
    at stellarnav.js?ver=4.9.2:243
(anonymous) @ stellarnav.js?ver=4.9.2:243
myscript.js?ver=4.9.2:2 Uncaught ReferenceError: jQuery is not defined
    at myscript.js?ver=4.9.2:2
(anonymous) @ myscript.js?ver=4.9.2:2

    Has not the jquery version been defined?
    I do not know what it is though

    Thanks so much

    Thread Starter mrpress01

    (@mrpress01)

    5 years, 8 months ago

    I solved it, after a long time I am alone to find out where the problem was. jquery was loaded after the script. I inserted it at the beginning of the header with <script> tag. Can you tell me a way to inject jquery into a hook from the function.php file? thank you so much.

    Moderator bcworkz

    (@bcworkz)

    5 years, 8 months ago

    Yes, specify ‘jquery’ tag in an array as a dependency argument when you enqueue your own scripts. The format is roughly wp_enqueue_script('my-script', '/path/to/script.js', array('jquery'));

    The stellarnav.min enqueue call should specify array('jquery') and your ‘myscript’ should specify array('stellarnav.min','jquery') to ensure everything loads in the right order.

    Unless you’ve seen specific domestication to the contrary, I suspect you don’t need both ‘stellarnav’ and ‘stellarnav.min’ enqueued. stellarnav.min is likely just a minimized version of ‘stellarnav’. Minimized is for production, the other is human readable and is used for development and debugging. It doesn’t hurt to load both in JS language, but it’s wasteful and inefficient.

    I’m sorry you were left alone for so long. We’re all volunteers here and I mostly “drive by” only once a day. Andrew is much more attentive than I am, that’s his choice. Once a day is the most I can volunteer for. Nice work figuring it out on your own though!

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • The topic ‘include js menu’ is closed to new replies.

Views