The title is a mouthful, but it’s true. A client needed a timer from a WordPress plug-in to be displayed multiple times on a page, but the plug-in didn’t allow for multiple instances on the page. I tried to do a few workarounds by hacking (or just trying to make it do things it wasn’t intended to do without actually changing its code) the functionality of the plug-in itself to no avail. So I turned to what is increasingly solving my web dilemmas: jQuery.
The code to dynamically get content from the page and output it wherever you want
$(function() { //Tells the code to run the code every 800 milliseconds. setInterval(function() { //Tells where to place the content you're grabbing. I'm putting //each one in a div with the class "countdown-timer" $('div.countdown-timer').html(function() { //Sets a variable called timeRemaining, which is equal to the html //of the first paragraph. So any content inside of the first //paragraph gets plugged into the div class "countdown-timer" var timeRemaining = $('p:first').html(); //tells the variable timeRemaining to actually output return timeRemaining; }); }, 800); });
To get this to work for you:
- Change ‘div.countdown-timer’ to wherever you want the content to output. I used a class element so I could output it lots of times on the page.
- Change ‘p:first’ to wherever you want to be grabbing the content from. Mine just happened to be the first paragraph, so it was the easiest way for me to select it.
- Add whatever you put for the ‘div.countdown-timer’ to your page. So, for me, I put
wherever I want the content from ‘p:first’ to appear.
Cheers!