I can not load Jquery scripts in Wordpress

Question

I can not load Jquery scripts in Wordpress

Navigation

#1 by (0 votes)

2

I have the following site, which is made in Wordpress:

I want to add a popup window, so I chose to use jquery-ui. I follow the directions as they come out here and nothing happens:

link

I went to the header.php file of my template and there I added this:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>

And in the same header.php I also added this:

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Here is my complete header.php, I do not know what I can be doing wrong. It's not just this, I've also tried Bootstrap manners and nothing. The only thing that works for me is the Javascript alert ().

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- the default values -->
<meta property="fb:app_id" content="570150036476648" />
 
<!-- if page is content page -->
<?php
if (in_category('categoria-videos')) { ?>
    <meta property="og:url" content="<?php the_permalink() ?>"/>
    <meta property="og:title" content="<?php single_post_title(''); ?> | <?php bloginfo('name'); ?>" />
    <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="http://i.ytimg.com/vi/<?php the_field('video-youtube-id'); ?>/hqdefault.jpg" />
    <meta property="og:image:width" content="300"/>
    <meta property="og:image:height" content="300"/>
<?php } elseif (is_single()) { ?>
    <meta property="og:url" content="<?php the_permalink() ?>"/>
    <meta property="og:title" content="<?php single_post_title(''); ?> | <?php bloginfo('name'); ?>" />
    <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
    <meta property="og:type" content="article" />
    <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'medium' ); ?>
    <meta property="og:image" content="<?php echo $feat_image;?>" />
    <meta property="og:image:width" content="300"/>
    <meta property="og:image:height" content="300"/>
<?php } elseif (is_page()) { ?>
    <meta property="og:url" content="<?php the_permalink() ?>"/>
    <meta property="og:title" content="<?php single_post_title(''); ?> | <?php bloginfo('name'); ?>" />
    <meta property="og:description" content="Endeavor lidera el movimiento global que busca impulsar el crecimiento económico sostenible, a través de la selección de Emprendedores de Alto Impacto" />
    <meta property="og:type" content="article" />
    <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
    <meta property="og:image" content="<?php bloginfo('template_directory'); ?>/template/FotoShare.jpg" /> 
    <meta property="og:image:width" content="450"/>
    <meta property="og:image:height" content="298"/>
<?php } elseif(is_home()) { ?>
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
    <meta property="og:title" content="Endeavor Chile | www.endeavor.cl" />
    <meta property="og:description" content="Endeavor lidera el movimiento global que busca impulsar el crecimiento económico sostenible, a través de la selección de Emprendedores de Alto Impacto" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<?php bloginfo('template_directory'); ?>/template/FotoShare.jpg" /> 
    <meta property="og:image:width" content="450"/>
    <meta property="og:image:height" content="298"/>
<?php } else { ?>
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
    <meta property="og:description" content="Endeavor lidera el movimiento global que busca impulsar el crecimiento económico sostenible, a través de la selección de Emprendedores de Alto Impacto" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<?php bloginfo('template_directory'); ?>/template/FotoShare.jpg" /> 
    <meta property="og:image:width" content="450"/>
    <meta property="og:image:height" content="298"/>
<?php } ?>

<title>
	<?php
	// Print the <title> tag based on what is being viewed.
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?>
</title>
    
    
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/template/favicon.ico" type="image/x-icon" />

<!-- Fancybox -->
<?php include(TEMPLATEPATH . '/fancybox/lib/fancyincludes.php'); ?>

<!-- Nicescroll -->
<script src="<?php bloginfo('template_directory'); ?>/nicescroll/jquery.nicescroll.js"></script>

<!-- Masonry -->
<script src="<?php bloginfo('template_directory'); ?>/isotope/isotope.pkgd.js"></script>

<!-- PARALLAX -->
<script src="<?php bloginfo('template_directory'); ?>/parallax/parallax.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/popup/jquery.modal.min.js"></script>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />


<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/popup/jquery.modal.min.css" type="text/css" />

<script>

	$(window).load(function() {
		<!---- MASONRY --->

		var $container = $('.grid');
		// initialize
		$container.isotope({
			itemSelector: '.grid-item',
 		 	layoutMode: 'fitRows'
		});
		<!---- MASONRY --->
	});



$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.show').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height()+100;

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},300);

        }

    }); 

});





$(window).on('load resize', function () {		
		if ($(window).width() >= 1000){	
			$("#menu-top").removeClass();
			$("#menu-top").addClass("desktop");
		}else{
			$("#menu-top").removeClass();
			$("#menu-top").addClass("touch");
			$("#menu-top.touch .menu-item-has-children a").addClass("primer-boton").css('cursor','pointer');
			$("#menu-top.touch .sub-menu a").removeClass();
			$("#menu-top.touch .primer-boton").removeAttr("href");
			$('#menu-top.touch .menu-item-has-children > .sub-menu').parent().click(function() {
			  var submenu = $(this).children('.sub-menu');
			  if ( $(submenu).is(':hidden') ) {
				$(submenu).slideDown(200);
			  } else {
				$(submenu).slideUp(200);
			  }
			});
			
		}

	});


	<!---- NICESCROLL --->
	var nice = false;
	$(document).ready(
	  function() { 
		nice = $("html").niceScroll();
	  }
	);
	<!---- NICESCROLL --->


	<!---- MENU --->
	$(document).ready(function(){
		$("#nav-mobile-hold").click(function(){
			$("#menu-top").slideToggle();
            $("#nav-mobile").toggleClass('active');
		});
		
	});
	<!---- MENU --->
	jQuery(document).ready(function($) {
		$('#post-content a[href$="jpg"], #post-content a[href$="png"], #post-content a[href$="jpeg"]').fancybox();
	});
	
	
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-45413975-1', 'auto');
  ga('send', 'pageview');

</script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '570150036476648',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<?php include('includes/preload.php'); ?>


<div id="header">
    
    <div id="menu-top" class="menu-top">
    	<?php wp_nav_menu( array( 'theme_location' => 'menu_sup', 'menu_class' => 'primary', 'fallback_cb' => '') ); ?>
	</div>
    
    
    <div class="barra-menu">
          
        


    	<div id="nav-mobile-hold">
    		<div class="texto">menu</div>
            <div id="nav-mobile">
                <span class="ln-one"></span>
                <span class="ln-two"></span>
                <span class="ln-three"></span>
            </div>
        </div>
        
        <a href="<?php echo get_settings('home'); ?>"><img id="logo-top" src="<?php bloginfo('template_directory'); ?>/template/logo-top.svg"></a>
        <div id="redes-top">
            
            <div id="searchbox" >
            	<form class="search" method="get" action="<?php echo home_url(); ?>" role="search">
                	<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Buscar…', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                    <button type="submit" role="button" class="btn btn-default right"/><span class="glyphicon glyphicon-search white">></span></button>
              	</form>	
            </div>
 
            <a href="https://www.facebook.com/Endeavor-Chile-343478338971/?fref=ts" target="_blank"><img id="facebook-top" class="boton" src="<?php bloginfo('template_directory'); ?>/template/iconos/facebook-blanco.svg"></a>
 
            <a href="https://twitter.com/endeavorchile" target="_blank"><img id="twitter-top" class="boton" src="<?php bloginfo('template_directory'); ?>/template/iconos/twitter-blanco.svg"></a>
 
            <a href="https://www.youtube.com/user/endeavorCL" target="_blank"><img id="youtube-top" class="boton" src="<?php bloginfo('template_directory'); ?>/template/iconos/youtube-blanco.svg"></a>
            <a href="https://cl.linkedin.com/in/endeavorchile" target="_blank"><img id="linkedin-top" class="boton" src="<?php bloginfo('template_directory'); ?>/template/iconos/linkedin-blanco.svg"></a>
            
        </div>
    
    </div>
    
    <?php include('includes/prox-evento.php'); ?>
    
</div>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

jquery-ui wordpress

asked by Felipe Pino 21.11.2016 в 17:41

source

1 answer

Stored procedure invoking dll Error in the IDE environment java netbeans [closed]

score 0 · Answer 1

Check your browser's JavaScript console. You will surely see the error that is happening.

It is likely that you are loading two versions of jQuery and that is why it does not work, or the jQuery file is in the wrong place.

$(function() {
  $( "#dialog" ).dialog();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">


<div id="dialog" title="Diálogo Básico" color="#DDD">
  <p>
    Estás cargando mal los archivos de jQuery.
  </p>
</div>


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

In general and unless you have done the issue by hand, editing the files of a topic is considered a bad practice. It is better to edit the changes in the file functions.php and even better create a plugin where you can apply the changes you think are necessary to any topic.

The proper method to use a different version of jQuery than WordPress uses (and in general for any script and / or style sheet) is first register it and then paste it .

For example, to register and paste jquery-ui to your theme, you should do something like this:

function my_theme_scripts() {
    wp_enqueue_script( 'jquery-ui', 'https://code.jquery.com/ui/1.12.1/jquery-ui.js', array( 'jquery' ), '1.12.1', true );
}
add_action( 'wp_enqueue_scripts', 'jquery-ui' );

With this, you register the script jquery , specific where it is obtained and the dependencies (in this case jquery ).

Note

In fact, WordPress already includes jquery-ui-dialog in its installation. Check the list at this link: link .

Note 2 - The wp_head () function

The wp_head() function is a "hook" that helps us hang in a controlled and orderly scripts and style sheets on a theme. It is placed before </head> for WordPress and the plugins that need it to insert their dependencies. In my opinion, the use of wp_head() is mandatory . You should consider adding this feature to your theme.

Alternative

If for some reason you decide not to use the wp_head() function, try placing jquery at the beginning of the header ... let's say after the </title> tag.