I am building a WordPress site and suddenly am getting the error:
Uncaught TypeError: jQuery(...).live is not a function
at HTMLDocument.<anonymous> (main.js?ver=1.1:214)
at i (jquery.js?ver=1.12.4-wp:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
at Function.ready (jquery.js?ver=1.12.4-wp:2)
at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)
I am unsure how to replicate this error as it is a sudden occurrence.
When I visit my site no images are loading which have JS
I have checked my plugins and don't seem to see anything new added when I view the site in Elementor all images are showing, any ideas of how to fix this? None of this site has been raw coded just pure WordPress
Can anyone inspect element and tell me if/what plugin is causing me issues?
Wordpress 5.5 stopped using jQuery migrate. This change has been causing problems with old plugins and themes. If you are noticing issues after upgrading to Wordpress 5.5, installing this plugin might fix it: https://wordpress.org/plugins/enable-jquery-migrate-helper/
Though, ultimately a better solution would be to either upgrade your current plugins and themes to versions that do not rely on jQuery migrate. Or, if that is not possible, try to move away from those plugins to ones that do not require jQuery migrate. If you don't, you will likely run into compatibility issues in the future or, even worse, security vulnerabilities from these outdated plugins/themes.
UPDATE: Sep 18, 2020
I looked at the source code for the Enable jQuery Migrate Helper plugin and it has this condition for running:
if ( version_compare( $GLOBALS['wp_version'], '5.6-alpha', '<' ) && ! class_exists( 'jQuery_Migrate_Helper' ) ) {
include_once __DIR__ . '/class-jquery-migrate-helper.php';
add_action( 'plugins_loaded', array( 'jQuery_Migrate_Helper', 'init_actions' ) );
}
So, the plugin will only work up to, and including, Wordpress 5.5. Once Wordpress hits version 5.6-alpha, it will stop working.
UPDATE: Feb 15, 2021
The plugin code has been updated to work past Wordpress 5.6. However, at and after version 5.6, it will include jquery-migrate-3.3.2 instead of jquery-migrate-1.4.1 and it includes a lot fewer files (mostly jquery-ui scripts). If you want to continue using the older version of jquery, there are a couple options.
Option A. You could copy the jquery migrate plugin to a new folder (basically make it your own plugin), rename it, edit the class-jquery-migrate-helper.php file, find this line in the replace_scripts function:
if ( version_compare( $GLOBALS['wp_version'], '5.6-alpha', '<' ) || 'yes' === get_option( '_jquery_migrate_downgrade_version', 'no' ) ) {
And replace it with:
if(true) {
This will cause the plugin to always install the old version of jquery.
Option B. Create a new plugin that just includes the old jquery files by doing the following:
Create a new plugin.
Copy all of the enable-jquery-migrate-helper/js files from the jquery migrate plugin to the js/ folder in your new plugin.
Add this code to your plugin file:
add_action('wp_default_scripts', function ($scripts) {
$setScripts = function($scripts, $handle, $src, $deps = [], $ver = false, $in_footer = false) {
$script = $scripts->query( $handle, 'registered' );
if ( $script ) {
// If already added
$script->src = $src;
$script->deps = $deps;
$script->ver = $ver;
$script->args = $in_footer;
unset( $script->extra['group'] );
if ( $in_footer ) {
$script->add_data( 'group', 1 );
}
} else {
// Add the script
if ( $in_footer ) {
$scripts->add( $handle, $src, $deps, $ver, 1 );
} else {
$scripts->add( $handle, $src, $deps, $ver );
}
}
};
$assets_url = $assets_url = plugins_url( 'js/', __FILE__ );
$setScripts( $scripts, 'jquery-migrate', $assets_url . 'jquery-migrate/jquery-migrate-1.4.1-wp.js', array(), '1.4.1-wp' );
$setScripts( $scripts, 'jquery-core', $assets_url . 'jquery/jquery-1.12.4-wp.js', array(), '1.12.4-wp' );
$setScripts( $scripts, 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
$setScripts( $scripts, 'jquery-ui-core', $assets_url . 'jquery-ui/core.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-core', $assets_url . 'jquery-ui/effect.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-blind', $assets_url . 'jquery-ui/effect-blind.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-bounce', $assets_url . 'jquery-ui/effect-bounce.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-clip', $assets_url . 'jquery-ui/effect-clip.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-drop', $assets_url . 'jquery-ui/effect-drop.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-explode', $assets_url . 'jquery-ui/effect-explode.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-fade', $assets_url . 'jquery-ui/effect-fade.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-fold', $assets_url . 'jquery-ui/effect-fold.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-highlight', $assets_url . 'jquery-ui/effect-highlight.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-puff', $assets_url . 'jquery-ui/effect-puff.min.js', array( 'jquery-effects-core', 'jquery-effects-scale' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-pulsate', $assets_url . 'jquery-ui/effect-pulsate.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-scale', $assets_url . 'jquery-ui/effect-scale.min.js', array( 'jquery-effects-core', 'jquery-effects-size' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-shake', $assets_url . 'jquery-ui/effect-shake.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-size', $assets_url . 'jquery-ui/effect-size.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-slide', $assets_url . 'jquery-ui/effect-slide.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-transfer', $assets_url . 'jquery-ui/effect-transfer.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-accordion', $assets_url . 'jquery-ui/accordion.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-autocomplete', $assets_url . 'jquery-ui/autocomplete.min.js', array( 'jquery-ui-menu', 'wp-a11y' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-button', $assets_url . 'jquery-ui/button.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-datepicker', $assets_url . 'jquery-ui/datepicker.min.js', array( 'jquery-ui-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-dialog', $assets_url . 'jquery-ui/dialog.min.js', array( 'jquery-ui-resizable', 'jquery-ui-draggable', 'jquery-ui-button', 'jquery-ui-position' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-draggable', $assets_url . 'jquery-ui/draggable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-droppable', $assets_url . 'jquery-ui/droppable.min.js', array( 'jquery-ui-draggable' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-menu', $assets_url . 'jquery-ui/menu.min.js', array( 'jquery-ui-core', 'jquery-ui-widget', 'jquery-ui-position' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-mouse', $assets_url . 'jquery-ui/mouse.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-position', $assets_url . 'jquery-ui/position.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-progressbar', $assets_url . 'jquery-ui/progressbar.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-resizable', $assets_url . 'jquery-ui/resizable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-selectable', $assets_url . 'jquery-ui/selectable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-selectmenu', $assets_url . 'jquery-ui/selectmenu.min.js', array( 'jquery-ui-menu' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-slider', $assets_url . 'jquery-ui/slider.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-sortable', $assets_url . 'jquery-ui/sortable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-spinner', $assets_url . 'jquery-ui/spinner.min.js', array( 'jquery-ui-button' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-tabs', $assets_url . 'jquery-ui/tabs.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-tooltip', $assets_url . 'jquery-ui/tooltip.min.js', array( 'jquery-ui-core', 'jquery-ui-widget', 'jquery-ui-position' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-widget', $assets_url . 'jquery-ui/widget.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-touch-punch', false, array( 'jquery-ui-widget', 'jquery-ui-mouse' ), '0.2.2', 1 );
}, -10);
Wordpress 5.5 stopped using jquery migrate. It's been causing problems with old plugins and themes. This is the fix: https://wordpress.org/plugins/enable-jquery-migrate-helper/
I am displaying my categories on a page. Now, when I have more than x posts, I want to show a pagination to navigate to the next page with the posts.
This is my code:
<?php
$cat_id = get_query_var('cat');
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$args = array(
'cat' => $cat_id,
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
//Post data
echo get_the_post_thumbnail(get_the_ID());
?>
<li>With some posts</li>
<?php
endwhile;
?>
And then I try to spit out my navigation like this:
<?php
function pagination_nav() {
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) { ?>
<nav class="pagination" role="navigation">
<div class="nav-previous"><?php next_posts_link( '← Older posts' ); ?></div>
<div class="nav-next"><?php previous_posts_link( 'Newer posts →' ); ?></div>
</nav>
<?php }
}
?>
<?php echo pagination_nav();
?>
But whatever I do, I can't return it. How exactly should I do this? $paged should work, right? I have more than 20 posts, but I can't see my navigation/paging button anywhere.
Lastly, I tried the code below, yet this does not go to the second page of my query. The URL says /category/categoryname/page/2, but it just sends me to a blank page...
<div class="pagination">
<?php
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => sprintf( '<i></i> %1$s', __( 'Newer Posts', 'text-domain' ) ),
'next_text' => sprintf( '%1$s <i></i>', __( 'Older Posts', 'text-domain' ) ),
'add_args' => false,
'add_fragment' => '',
) );
?>
</div>
Alright, so let me answer my own question. I solved it by using the same code, but changing the settings (!) in my Wordpress page. When enabling the pagination setting, try to change the default "paginate by 50 posts" to something like "10" or so. That triggers the code to work.
I have been trying to get infinite scroll to work but can not seem to get it to work.
I have three files the post loop content-post-ft.php, the functions.php and then my front page where the posts are loading frontpage.php
Functions.php
add_theme_support( 'infinite-scroll', array(
'container' => 'main-content',
'type' => 'scroll',
'footer' => 'foot',
'render' => 'infinite_scroll_render'
));
function infinite_scroll_render() {
get_template_part( 'content-post-ft', 'standard' );
}
content-post-ft.php
<div class="hub-cont">
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];
?>
<div id="newsitem">
<div id="newsimg" style="background-image: url('<?php echo $thumb_url ?>')">
</div>
<div id="newsname"> <?php the_title(); ?> </div>
<div id="newstext"><?php $text = $post->post_content; $trimmed = wp_trim_words( $text, 40, null ); echo $trimmed; ?></div>
<div class="clear"></div>
</div>
<?php
// endwhile;
// endif;
wp_reset_postdata();?>
</div>
Frontpage.php
<div id="main-content">
<?php
$myargs = array (
//'showposts' => 2,
'post_type' => 'post',
'category_name' => 'News'
);
$myquery = new WP_Query($myargs);
if($myquery->have_posts() ) :
while($myquery->have_posts() ) : $myquery->the_post();
get_template_part( 'content-post-ft', get_post_format() );
endwhile;
endif;
?>
</div>
I have tried looking at so many tutorials and other people having similar problems but nothing seems to be working.
The page is showing 10 posts because of the loop but its just adds the 10 and does not "scroll"
Getting this fixed would really help my stress levels!
Solved it. I had to make Jetpack allow the infinite scroll to be used on Custom fields and pages. By default it only works on the original posts page.
Functions file:
function tweakjp_custom_is_support() {
return true;
$supported = current_theme_supports( 'infinite-scroll' ) && ( is_home() || is_archive() || is_front_page() );
return $supported;
}
add_filter( 'infinite_scroll_archive_supported', 'tweakjp_custom_is_support' );
function mm_infinite_scroll_render() {
while ( have_posts() ) : the_post();
get_template_part( 'content' );
endwhile;
}
function mm_infinite_scroll_query_args($args) {
$new_args = array(
'posts_per_page' => $args['posts_per_page'],
'paged' => $args['paged'],
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
);
return $new_args;
}
function mm_infinite_scroll_posts_where($clause) {
return "";
}
add_filter( 'infinite_scroll_posts_where', 'mm_infinite_scroll_posts_where' );
add_filter( 'infinite_scroll_query_args', 'mm_infinite_scroll_query_args', 9999 );
add_theme_support( 'infinite-scroll', array(
'container' => 'main-content',
'render' => 'mm_infinite_scroll_render'
) );
Then the content.php file has the rendering code. Mine looks like this to help those who are unsure.
<div class="news-list">
<ul class="promo-list-items">
<?php
// Fetch all posts relating to a certain tag then display 4 of them
//Get the Thumbnail URL
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 720,405 ), false, '' );
?>
<div id="promolink"></div><li class="news-list-item" style="background-image: url(' <?php echo $src[0];?> '); background-repeat: no-repeat; background-size: cover;"> <a class="gdbnewslink" href="<?php echo get_permalink();?>" >
<?php the_title();?>
</a>
<?php wp_reset_postdata(); ?>
</li>
<div class="clear"></div>
</ul>
</div>
Hope this helps someone with the same problem as me.
I am trying display different wordpress menus depending on the device/screen width.
<script>
$(function() {
if ($(window).width() > 959) {
<?php wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) ); ?>
} else {
<?php wp_nav_menu( array( 'theme_location' => 'mobile' ) ); ?>
}
});
</script>
I've tried using this code, as well as several other variations, but nothing seems to be working. Any ideas?
Thanks in advance
Willem
As far as I know, wp_nav_menu just output the menu html, so on the client side, you would get this:
<script>
$(function() {
if ($(window).width() > 959) {
<div>....menu html....</div>
} else {
<div>....menu html....</div>
}
});
</script>
I think there should be javascript errors there.
Try this:
<div id="menu_a" style="display:none">
<?php wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) ); ?>
</div>
<div id="menu_b" style="display:none">
<?php wp_nav_menu( array( 'theme_location' => 'mobile' ) ); ?>
</div>
<script>
$(function() {
if ($(window).width() > 959) {
$("#menu_a").show();
} else {
$("#menu_b").show();
}
});
</script>
Or in response design style, no Javascript involved:
#media all and (max-width: 958px) { #menu_a{display:none};}
#media all and (min-width: 959px) { #menu_b{display:none};}
I ended up using this:
<?php
/* USER-AGENTS
================================================== */
function check_user_agent ( $type = NULL ) {
$user_agent = strtolower ( $_SERVER['HTTP_USER_AGENT'] );
if ( $type == 'bot' ) {
// matches popular bots
if ( preg_match ( "/googlebot|adsbot|yahooseeker|yahoobot|msnbot|watchmouse|pingdom\.com|feedfetcher-google/", $user_agent ) ) {
return true;
// watchmouse|pingdom\.com are "uptime services"
}
} else if ( $type == 'browser' ) {
// matches core browser types
if ( preg_match ( "/mozilla\/|opera\//", $user_agent ) ) {
return true;
}
} else if ( $type == 'mobile' ) {
// matches popular mobile devices that have small screens and/or touch inputs
// mobile devices have regional trends; some of these will have varying popularity in Europe, Asia, and America
// detailed demographics are unknown, and South America, the Pacific Islands, and Africa trends might not be represented, here
if ( preg_match ( "/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo/", $user_agent ) ) {
// these are the most common
return true;
} else if ( preg_match ( "/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent ) ) {
// these are less common, and might not be worth checking
return true;
}
}
return false;
}
?>
and then:
<?php
$ismobile = check_user_agent('mobile');
if($ismobile) {
wp_nav_menu( array( 'theme_location' => 'mobile' ) );
} else {
wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) );
}
?>
This doesn't work on the device size but rather whether or not the site is being accessed from a mobile device.
Source: Detect mobile browser
Thanks
Willem