-
This is not likely a Generatepress issue, but it is puzzling. It’s last life was an HTML site. I decided to just use the testimonial code we were already using, to minimize how many plugins we had to maintain. I don’t expect we’ll need to update the Testimonials themselves. It seemed to rotate fine. But apparently it ONLY works if you are logged in.
The code is put in an HTML block. I also tried adding the Javascript in an Element hook in the header.
Am I missing something obvious? It’s on the home page and only looks like a block quote if not logged in.
-
Hi there,
Just to confirm, are you referring to this section? https://app.screencast.com/gdDq6Df0JwJ57
If so, the books are rotating fine without logging in.
-
No that is a plugin. It’s up above: the part that says this:
“Blending poignancy with humor, Mary Kay McComas, crafts characters as real and recognizable as your next-door neighbor.”
~ Nora Roberts
(Something About Sophie)That is the first of the quotes it should be cycling through. Someone else suggested I had to enqueue the script higher up but I’m not a huge Javascript person and don’t know how to do that.
-
Hello,
The testimonial rotation depends on jQuery, but it’s running before jQuery is loaded on the page. When you’re logged in, the admin bar causes jQuery to load earlier in the page, which is why it works for you but not for logged-out visitors.
The script also uses
.size(), which was removed in jQuery 3.x, so it would fail even once jQuery loads. You’ll want to switch that to.length.The fix is to wrap the code so it waits for jQuery to be ready regardless of load order. Replace your current script with this version:
window.addEventListener('load', function () { (function($){ setInterval(function(){ $('#testimonials .slide:visible').fadeOut(1000, function(){ if($(this).next('.slide').length){ $(this).next().fadeIn(1000); } else { $('#testimonials .slide').eq(0).fadeIn(1000); } }); }, 5500); })(jQuery); });Two changes from your original: it waits for the full
window loadevent so jQuery is guaranteed to be available, and.size()is replaced with.length.A cleaner long-term option is to make sure jQuery loads in the header, but the above should get your testimonials cycling for everyone without changing any theme settings.
-
OK where do I put that code so it connects properly to the testimonials? I
‘m getting pretty confused because the original code is in the html block: `<div class=”custom”>
<script type=”text/javascript”>// <![CDATA[
jQuery(document).ready(function(){
setInterval(function(){
jQuery(‘#testimonials .slide’).filter(‘:visible’).fadeOut(1000,function(){
if(jQuery(this).next(‘.slide’).size()){
jQuery(this).next().fadeIn(1000);
}
else{
jQuery(‘#testimonials .slide’).eq(0).fadeIn(1000);
}
});
},5500);
});
// ]]></script>
<p> </p>
<h4>Critics love her style…</h4>
<!– Begin Testimonials Loop –>
<div id=”camps-quote”>
<div id=”testimonials”>
<div class=”slide”>
<div class=”testimonial-quote”>-
“Blending poignancy with humor, Mary Kay McComas, crafts characters as real and recognizable as your next-door neighbor.”
<p> </p>
<p align=”right”>~ Nora Roberts<br>(Something About Sophie)</p>
</div>
</div>
<div class=”slide” style=”display: none;”>
<div class=”testimonial-quote”>-
This story kept me reading all night. Author Mary Kay McComas writes a poignant story about Hannah’s escape with rich characterizations, a recognizable setting, teasing dialogue that lightens the mood, and both shocking and touching action, earning WHAT HAPPENED TO HANNAH a Perfect 10.
<p> </p>
<p align=”right”>~ Romance Reviews Today</p>
</div>
</div>
<div class=”slide” style=”display: none;”>
<div class=”testimonial-quote”>-
McComas’ latest novel is a poignant story about the power of love and the impact it leaves. McComas’ natural, lyrical writing and smooth pacing, along with how she simultaneously keeps you in suspense and warms your heart, makes this a wonderful, engaging read.
<p> </p>
<p align=”right”>~ Melanie Bates, Romantic Times Book Reviews<br>(Something About Sophie)</p>
</div>
</div>
<div class=”slide” style=”display: none;”>
<div class=”testimonial-quote”>-
I loved the complexity of the characters and the way they tell their story makes for a very riveting book. I certainly look forward to reading more from Mary Kay McComas.
<p> </p>
<p align=”right”>~ Matilda, Reviewer for Coffee Time Romance & More<br>(What Happened To Hannah)</p>
</div>
</div>
<div class=”slide” style=”display: none;”>
<div class=”testimonial-quote”>-
Her writing is soulful…
<p> </p>
<p align=”right”>~ Lisa Steinke, Chick Lit Is Not Dead</p>
</div>
</div>
<div class=”slide” style=”display: none;”>
<div class=”testimonial-quote”>-
It is a rare author who can weave together irresistible characters, emotional heartache, wacky humor and social consciousness-all within a superb romance. Rarer still is one who can do it with such exquisite style. Brava, Mary Kay McComas!
<p> </p>
<p align=”right”>~ Linda Anselmi, Romanic Times Book Reviews<br>(Talk Of The Town)</p>
</div>
</div>
<div class=”slide” style=”display: none;”>
<div class=”testimonial-quote”>-
You can always count on Mary Kay McComas to come up with something completely fresh and different. Ms. McComas’ justly famed ingenuity is in fine form, bringing us the best of romance with an exciting new spin.
<p> </p>
<p align=”right”>~ Melinda Helfer, Romantic Time Books Reviews<br>(Got It Bad)</p>
</div>
</div>
<div class=”slide” style=”display: none;”>
<div class=”testimonial-quote”>-
Ms. McComas beautifully captures the hopes and fears of the human heart.
<p> </p>
<p align=”right”>~ Romantic Times Book Reviews<br>(Ms. Miller And The Midas Man)</p>
</div>
</div>
</div>
<!– End Testimonials –></div></div>’If I put it in the html block it doesn’t work. So where do I put it so it properly connects to the testimonials? (WordPress changing the html block to one with different tabs for JS is definitely not helping my confusion)
-
-
Hello,
You don’t need the script to be inside the same block as the testimonials. The code finds the slides by their ID (
#testimonials), so it’ll work from anywhere on the page as long as both are present.The reason it fails in the HTML block is timing — the script runs before jQuery has loaded, so it errors out before it can do anything.
Two steps:
- In your HTML block, delete just the
<script>...</script>portion (from<script type="text/javascript">down through</script>). Leave all the testimonial markup as-is. - Add the JavaScript via a Hook Element instead: Appearance → Elements → Add New → set the type to Hook, paste the code below, set the Hook to
wp_footer, and set your display rule to the page the testimonials are on (or Front Page).
<script> window.addEventListener('load', function () { (function($){ setInterval(function(){ $('#testimonials .slide:visible').fadeOut(1000, function(){ if($(this).next('.slide').length){ $(this).next().fadeIn(1000); } else { $('#testimonials .slide').eq(0).fadeIn(1000); } }); }, 5500); })(jQuery); }); </script>Make sure to include the
<script>tags since a Hook Element outputs raw HTML.This loads in the footer, after jQuery and after the testimonial markup, so it’ll work for logged-out visitors too.
- In your HTML block, delete just the
-
It’s in but still not rotating.
-
We cannot debug custom code from a 3rd party, unfortunately.
I would recommend hiring a coder or trying to fix the code with AI’s help.
-
oh well thanks for trying.
-
No Problem.
- You must be logged in to reply to this topic.