slick slider not working on dynamically generated li - javascript

After not finding a solution for this:
Wordpress doesn't execute jquery code correctly
I have decided to change to slick slider hoping it woul work but seems it's impossible to create a proper slider with wordpress and jquery for dynamic content.
What I'm doing: getting all the custom posts in php and rendering it as an array then called to be rendered in my google map. I then try to render a list on the side of all locations.
More Info: I do not get console errors.
Problem: Slick classes get applied to the ul but dont apply to the li
How slick renders:
functions.php:
add_shortcode('render-map', 'renderMap');
function renderMap(){
wp_enqueue_style( 'slick_css', get_template_directory_uri() . '/css/slick.css');
wp_enqueue_style( 'slick_style', get_template_directory_uri() . '/css/slick-theme.css');
wp_enqueue_style( 'mapStyle', get_template_directory_uri() . '/css/mapStyle.css');
wp_register_script( 'googleMap', 'https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap', false, false, false );
wp_enqueue_script( 'googleMap' );
wp_enqueue_script( 'slick_js', get_template_directory_uri() . '/js/slick.min.js');
wp_enqueue_script( 'markerClusterer', get_template_directory_uri() . '/js/markerClusterer.js');
wp_enqueue_script( 'mapRenderer', get_template_directory_uri() . '/js/mapRenderer.js', array(), false, true );
echo '<div class="interactiveMap"><div class="rowMap">';
echo '<div id="map-canvas"></div>';
echo '<div class="sidebarLocation">
<div class="recentArticles">
<div class="recentArticlesHeader">
<i class="fas fa-chevron-up"></i>
</div>
<ul id="sidebarLocation" class="recentArticlesGroup sidebarLocationUl">';
global $post;
$args = array(
'post_type' => 'map-location',
'posts_per_page' => -1,
'post_status' => 'publish'
);
$map_locations = get_posts( $args );
$myResult = renderLocation($map_locations);
echo '</ul>
<div class="recentArticlesFooter">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>';
echo '</div></div>';
echo "<script type='text/javascript'>";
echo '$( document ).ready(function() {';
$js_array = json_encode($myResult);
echo "var javascript_array = ". $js_array . ";\n";
echo 'gmaps_results_initialize(javascript_array);});';
echo "</script>";
wp_enqueue_script( 'slick_call', get_template_directory_uri() . '/js/slick-call.js', array( 'jquery' ), false, false );
}
slick-call.js
jQuery(document).ready(function($){
$('#sidebarLocation').slick({
arrows: true,
vertical: true,
slide: 'li',
slidesToShow:3,
slidesToScroll:1,
});
});


After writing many console.log I noticed that even I was calling slick on
jQuery(document).ready
it was executing before everything finished loading. Thus I have wrapped it in a function and added a delay ans it works fine:
jQuery(document).ready(function($){
function start_slick(){
$('#sidebarLocation').slick({
arrows: true,
vertical: true,
slide: 'li',
slidesToShow:3,
slidesToScroll:1,
prevArrow: $('.ca_goUp'),
nextArrow: $('.ca_goDown'),
infinite:false,
});
}
window.setTimeout( start_slick, 2000 );
});

Related

Create custom post slider using slick

I have been trying to create a recent post slider using slick-slider for my wordpress page. I want to be able to add the slider into elementor by using a shortcode. I don't have a lot of experience in coding. So I am not sure where I am going wrong. I managed to compose the following piece of coding based on some examples that I found online and I added the javascript file using a custom js plugin for wordpress. I obviously have done something wrong, because if I activate this file, elementor will not load because of a critical error. I have been trying to create custom post slider for a while now without any success. I would really appreciate any help I can get. Thanks!
//Enqueue Slick
function add_slick() {
wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/assets/css/slick.css' );
wp_enqueue_style( 'slider-theme', get_stylesheet_directory_uri() . '/assets/css/slick-theme.css');
wp_enqueue_script( 'slick-script', get_stylesheet_directory_uri() . '/assets/js/slick.min.js');
}
add_action( 'wp_enqueue_scripts', 'add_slick' );
//Build Shortcode to Loop Over Testimonials
function recentpost_loop_func( $atts ) {
ob_start();
$query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'date',
) );
if ( $query->have_posts() ) { ?>
<div class="recentpost-slider">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="single-post">
<a class="single-post-image" href="<?php the_permalink(); ?>"><?the_post_thumbnail(); ?></a>
<a class="single-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
};
add_shortcode( 'recentpostSlider', 'recentpost_loop_func' );
//Initiliaze Slick
jQuery(document).ready(function(){
$('.recentpost-slider').slick({
centerMode: true,
centerPadding: 50px,
});
});

Adding javascript to wordpress functions.php

JavaScript(s) Are Not Loading
I found this really awesome static html/css template online and wanted to convert it to a wordpress theme but after the conversion i noticed the html/css is loading from inspect element view, although (visually) only the menu, section backgrounds and footer are showing on the screen while the remaining body content seems to be hiding.
Check my functions.php for any errors enqueuing the javascript. The alert works but the other scripts seem to not load. I'm sure i made a rookie mistake and coded this incorrectly.
Im developing on xampp.
Download the project files: https://drive.google.com/open?id=1ty9-LsirC6cPA2y-TuirC2IDpEYPOOug
function theme_scripts()
{
wp_enqueue_script( 'aos', get_template_directory_uri() . '/js/aos.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'alert', get_template_directory_uri() . '/js/alert.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'bootstrap-datepicker', get_template_directory_uri() . '/js/bootstrap-datepicker.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'google-map', get_template_directory_uri() . '/js/google-map.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.animateNumber.min', get_template_directory_uri() . '/js/jquery.animateNumber.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.easing.1.3', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.magnific-popup.min', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.min', get_template_directory_uri() . '/js/jquery.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.stellar.min', get_template_directory_uri() . '/js/jquery.stellar.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.waypoints.min', get_template_directory_uri() . '/js/jquery.waypoints.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery-3.2.1.min', get_template_directory_uri() . '/js/jquery-3.2.1.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery-migrate-3.0.1.min', get_template_directory_uri() . '/js/jquery-migrate-3.0.1.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'owl.carousel.min', get_template_directory_uri() . '/js/owl.carousel.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'popper.min', get_template_directory_uri() . '/js/popper.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'scrollax.min', get_template_directory_uri() . '/js/scrollax.min.js', array ( 'jquery' ), 1.1, false);
}
add_action( 'wp_enqueue_scripts', 'theme_scripts', 50, 0 );
Regards

To load the JS files, you need to:
Go to footer.php
Delete all the hardcoded scripts from the bottom (the template tries to load these, not the ones from your functions.php)
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
Then add this:
<?php wp_footer(); ?>
This is the Wordpress footer, that invokes the hook that your wp_enqueue() uses for injecting the script tags (it's like wp_head() only for the footer). I suggest you also include the Google Maps script in your functions.php - keep all your external scripts in one place.
It seems that the problem is that you copied the HTML template as a Wordpress theme. They have differences, although not too big - this is one. :)
This will be the same with the missing images: the directory structure of the HTML template is not the same as of the Wordpress installation. You just have to correct that, and everything will be fine.

instead of
wp_enqueue_script( 'aos', get_template_directory_uri() . '/js/aos.js', array ( 'jquery' ), 1.1, false);
use this
wp_register_script( 'aos', get_template_directory_uri() . '/js/aos.js', array () , 1, 1, 1);
wp_enqueue_script ('aos');

Working with the theme in your wordpress theme updated june 20 2019 zip:
Modify index.php and frontpage.php
change: "/images/ to "<?php echo get_template_directory_uri(); ?>/images/
change: url(/images/ to url(<?php echo get_template_directory_uri(); ?>/images/
change: url('/images/ to url('<?php echo get_template_directory_uri(); ?>/images/
suggestion: use url('...') instead of url(...) (this way you'll be sure that it's treated like a string), but at least only use one syntax in one theme. It's easier to manage, if you create a convention for your template, and stick to that.
Modify functions.php
not found: wp-content/themes/eLeadWorks/js/jquery.timepicker.min.js (the file is not in that library, so I commented register and enqueue out)
not found: wp-content/themes/eLeadWorks/js/example.js (the file is not in that library, so I commented register and enqueue out)
deregister script: wp_deregister_script('jquery-migrate'); (place it before wp_register_('jquery-migrate-3.0.1.min', ...)
rename script handles (suggestion): don't use version numbers in script registering handles. This way you'll not be able to freely update versions if you need to. (so jquery-migrate-3.0.1.min is not OK, jquery-migrate is OK)
change: wp_register_style( 'fonts', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Work+Sans:300,400,,500,600,700', array(), 1.1, 'all' ); to wp_register_style( 'fonts', 'https://fonts.googleapis.com/css?family=Work+Sans:300,400,,500,600,700', array(), 1.1, 'all' ); (no get_template_directory_uri() is needed)
change: wp_register_script( 'google-api', get_template_directory_uri() . 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false', array () , 1, 1, 1); to wp_register_script( 'google-api', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false', array () , 1, 1, 1); (no get_template_directory_uri() is needed)
After these modifications
After these changes I only see one (1) error when loading the page: Uncaught TypeError: Cannot read property 'firstChild' of null. This error is thrown by your Google Maps code.
The error comes from that you don't have a DOM element with id="map".
So, either add an element with id="map" (where Google Maps can place the map), or modify your code to check for mapElement's value (in google-map.js):
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// check if mapElement exists (not null)
if (mapElement) {
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var addresses = ['New York'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
icon: 'images/loc.png'
});
});
}
}
After all these modifications I don't see a single error in my console.

Wordpress Plugin doesn't load JS files

I am writing my first plugin for wordpress and I'm attempting to load scripts in with my plugin.
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . 'js/slick.js',array('jQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . 'js/somaslick.js',array('jQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
/*Create Plugin Parts*/
add_action('init', 'create_carousel');
add_action('wp_enqueue_scripts', 'somadome_enqueue_script');
The issue is the CSS loads (two lines at the bottom) but the code at the top (the scripts) doesn't Load and I'm trying to figure out why the Javascript/JQuery code isn't loading.
I echo'd the paths to check them and they load into the browser fine, so they exist. But aren't being loaded by wordpress.

From looking at the code, I'm assuming it's not loading because you've missed the forward slash from the JavaScript files in the enqueue function.
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('jQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('jQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
...should get things working.

I guess its just a dependencies issue. You've set your logoslickjs depends on array('jQuery') and The dependencies argument of wp_enqueue_script() is case sensetive, so it should be array('jquery')
But, since you're loading a custom version of jQuery called 'somajQuery', you need to change the script depends array('jQuery') to array('somajQuery') so your code should be:
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('somajQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('somajQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
Now, logoslickjs and logoslider are depends on custom jQuery somajQuery and so on.

Is there a simpler way of enqueuing scripts for multiple page templates in Wordpress?

Besides the standard page.php in my Wordpress theme, I have an additional page template called full-page.php.
I want to enqueue an additional script ( script-4.js ) in full-page.php that I don't want to enqueue in the default template. At the moment I have enqueued them using the method below, with if and else statements – the same way in which my stylesheets are enqueued.
I'm wondering if there's a way to do this without enqueuing everything twice? For example, in full-page.php, is it possible for me to just enqueue script-4.js whilst getting it to automatically take scripts 1, 2 and 3 from the default template?
function enqueue_my_styles_and_scripts() {
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
wp_enqueue_script(
'mytheme-script-4',
get_template_directory_uri() . '/js/script-4.js' );
}
else {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_and_scripts' );

Do you mean something like this:
function enqueue_my_styles_and_scripts() {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_script(
'mytheme-script-4',
get_template_directory_uri() . '/js/script-4.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_and_scripts' );

WP get_post_thumbnail with Backstretch JS

I am using a javascript that's called 'Backstretch' to display an image on the back of my website that resizes when the viewport is getting bigger or smaller. Now I would like to combine it with the get_post_thumbnail function from WordPress so I can set a background image as featured image.
I tried the standard WP function but that doesn't work because it adds tags:
$.backstretch("<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>");
So I need to strip off those tags.. I'm getting close because i'm now getting an url (and image) but it's always the same one even though I set a different featured image on every page
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post_id, $size, $attr ) ); ?>
<script>$.backstretch("<?php echo $url; ?>");</script>

You get the answer to your question in this tutorial: http://sridharkatakam.com/set-featured-image-full-sized-background-posts-pages-wordpress/
Create a backstretch-set.js-file and include
jQuery(document).ready(function($) {
$("body").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});
and then enqueue both js-files (backstretch.js and your backstretch-set.js) in your functions.php
//* Enqueue Backstretch script
add_action( 'wp_enqueue_scripts', 'enqueue_backstretch' );
function enqueue_backstretch() {
//* Load scripts only on single Posts, static Pages and other single pages and only if featured image is present
if ( is_singular() && has_post_thumbnail() )
wp_enqueue_script( 'backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backstretch.min.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'backstretch' ), '1.0.0' );
wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );

Try using the global $post object like so:
<?php global $post; $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full' ) ); ?>
<script>$.backstretch("<?php echo $url; ?>");</script>

Categories

Resources