3 WordPress Countdown Clock Designs Without A Plugin - Codepen in WordPress

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 พ.ย. 2024

ความคิดเห็น • 39

  • @wplearninglab
    @wplearninglab  6 ปีที่แล้ว

    If you enjoyed this video don't forget to the like it and subscribe! Then check out this playlist focused on adding functionality to Wordpress without a plugin: th-cam.com/video/I4ciH6RrfM8/w-d-xo.html

    • @marshabrightly1307
      @marshabrightly1307 5 ปีที่แล้ว

      wp learning labs..PLEASE!!!.make tutorial about count down page YOUR DOWNLOAD WILL BEGIN SHORTLY.......make it happen please...im waiting for this one

  • @Modern_Warrior_School
    @Modern_Warrior_School ปีที่แล้ว +1

    Your tutorials are so helpful; thanks for making these. I'm making a sticky countdown banner that alerts my clients an hour before my site goes into scheduled maintenance and your videos are exactly what I needed to make that happen.

    • @wplearninglab
      @wplearninglab  ปีที่แล้ว

      I'm happy I could help! I hope your countdown clock works great!

  • @sawcondeez
    @sawcondeez 3 ปีที่แล้ว +1

    Finally, a tutorial that is not about plugins. Thanks for creating this video.I can't find other videos like this

  • @chandlerryan299
    @chandlerryan299 5 ปีที่แล้ว +2

    I had to add spans with the classes days, hours, minutes and seconds to get it to work, but that was a quick fix, this still saved me a ton of time. Thank you!

    • @theJett
      @theJett 4 ปีที่แล้ว +1

      @Chandler, yup, this is true. This WILL NOT work unless you add the correct markup. I just discovered this after a few hours of racking my brain and using the console. And agreed about this being a big time saver. Thanks to these guys!!

    • @EdvisLT
      @EdvisLT ปีที่แล้ว

      your comment saved me, thanks mate!

  • @Elementar
    @Elementar 5 ปีที่แล้ว +1

    Very nice option! If I wanted to place an evergreen countdown that instead of running for X amount of hours, it runs to midnight everyday but specific to every user, if he lost the opportunity he can't go back to the page, how could I do that? I've testes all the evergreen countdown plugins, none does that.

    • @wplearninglab
      @wplearninglab  5 ปีที่แล้ว

      Good question and great functionality. If you've tested all the evergreen countdown timers, then you'll have to custom code it. I don't have the code for this created. I think no plugins do this because it's difficult and not foolproof.
      Making this work will rely on the visitor having a cookie placed in their browser. The script on the page will then determine when the cookie was placed and decide if the countdown should proceed or if they should be redirected to another page (offer over). If the visitor doesn't allow cookies to be placed or has cleared their cache and cookies then they'll be able to see the offer even when shouldn't.
      I'm not sure which services you use, but Infusionsoft + PlusThis can be used to create evergreen countdowns along with email sequences where the end of the countdown is the end of the countdown and they miss out on the offer. That's pretty pricey though.

    • @Elementar
      @Elementar 5 ปีที่แล้ว

      @@wplearninglab Hmmm, I see. We use Active Campaign but this exclusive offer will only run on Facebook ads for those that initiated checkout and didn't buy. I believe we could do that inside Clickfunnels, but we migrated to Wordpress+Elementor and I'm not sure how to do that. Even though I use another evergreen countdown, I will need to place a cookie for at least 1 week to 30 days.

  • @AnsonBolinger
    @AnsonBolinger 2 ปีที่แล้ว

    I have a live show that runs for 2 hours once a week. When the show is not airing I want it to show a countdown timer until the scheduled show start time. Then at show start time the timer is changed to text displaying LIVE NOW. Then at show scheduled stop time the counter starts over again and counts down to next week's show. How would I do this?

  • @Salman-gholami
    @Salman-gholami 3 ปีที่แล้ว

    very very nice!!!!

  • @2neven3
    @2neven3 5 ปีที่แล้ว +1

    Nice! It works perfectly on an ordinary page, but I don't know why it doesn't work on a product page.

  • @MiriamKreativ
    @MiriamKreativ 4 ปีที่แล้ว +2

    I tried this out but could not make it work - this is the error I receive: Uncaught TypeError: Cannot set property 'innerHTML' of null
    at updateClock (?preview=true:363)
    at initializeClock (?preview=true:374)
    at ?preview=true:378
    Can you help me fix it?

    • @wplearninglab
      @wplearninglab  4 ปีที่แล้ว

      Hi Mir,
      Things like this are very difficult to fix without working with the code directly. Can you describe where you put which pieces of code?

    • @theJett
      @theJett 4 ปีที่แล้ว +2

      You may need the correct HTML markup. I did! The correct markup is in the video but not on the actual Countdown Timer webpage. Here is the correct markup:
      Days
      Hours
      Minutes
      Secs

  • @jayaiyer8617
    @jayaiyer8617 4 ปีที่แล้ว +1

    Hey, I just checked the website for the code, but the HTML code section is blank. Only the 3 CSS sections have code. Am I missing something? Please help asap

  • @Eye_4_An_Eye
    @Eye_4_An_Eye 3 ปีที่แล้ว +1

    DOESNT WORK FOR ME IN 2021. can u make a new video on how to do this to a product? i want to add an expiration date count down on products

  • @phpk3488
    @phpk3488 3 ปีที่แล้ว

    It's free ??

  • @Heavenlydovekids
    @Heavenlydovekids 3 ปีที่แล้ว

    Hi, this is a bit later in life. I know. I've tried putting this into my word press yet it doesn't work. I'm trying to use the count down timer.

  • @Chukran2Play
    @Chukran2Play 5 ปีที่แล้ว

    and to make a stock countbar to make scarcity? do you have any?

  • @fitzgay4647
    @fitzgay4647 5 ปีที่แล้ว

    the script continues after the deadline, it counts down in the minus i have used a dynamic time from my database var deadline = ''; and how do i redirect to an other page in the same directory, ( the script does not reset after 0)

  • @halfnhalf030387
    @halfnhalf030387 4 ปีที่แล้ว

    is it just me, or does everyone else not see the code under the "countdown to a specific date" and "countdown from a specific amount of time"? When i'm on your link, it's just blank in those sections.

  • @tiffanytse6485
    @tiffanytse6485 4 ปีที่แล้ว +1

    Did show the hours, minutes or days on my page.?

    • @wplearninglab
      @wplearninglab  4 ปีที่แล้ว

      Hi Tiffany, I don't understand your question. Can you reprhase it for me please?

  • @techyboys7077
    @techyboys7077 6 ปีที่แล้ว +1

    Awesome looks good
    But cont we change style?

    • @wplearninglab
      @wplearninglab  6 ปีที่แล้ว

      Yep, you can change the style by changing the CSS. It's not a page builder so it's not point and click unfortunately.

  • @DanaDhiphop
    @DanaDhiphop 5 ปีที่แล้ว

    Hi. Looks like it's not working in my wordpress page. What could've gone wrong? I've checked every detail on the code and looks like nothing is missing. Help,pls.

    • @wplearninglab
      @wplearninglab  5 ปีที่แล้ว

      Hi Daniel, it's impossible for me to tell what went wrong without seeing the page you're working on. Can you paste the page URL here?
      The most common problem is the JS is not linked to the page properly or the JS runs too soon (before the countdown timer is loaded).

    • @theJett
      @theJett 4 ปีที่แล้ว +2

      you may need the correct HTML markup:
      Days
      Hours
      Minutes
      Secs

    • @wordpressidee
      @wordpressidee 3 ปีที่แล้ว +2

      @@theJett Yes, now it is working! Thanks

  • @crazycinemas4471
    @crazycinemas4471 4 ปีที่แล้ว +1

    No code on the site

    • @wplearninglab
      @wplearninglab  4 ปีที่แล้ว

      Thanks for letting me know. I'll look into it.

  • @markgoldfeder6872
    @markgoldfeder6872 5 ปีที่แล้ว

    The "lesson timer" function in Learndash prevents a student from completing a lesson until the timer had elapsed. I need a similar timer function at the Course level that only counts down when my student is logged in to the class and won't allow them to complete the course until it has elapsed. This is a compliance/approval criteria for the Florida State Fire College. Here's the document (see item #22). www.myfloridacfo.com/division/sfm/bfst/Training/REV1_0_BFSTOnlineCourseEvaluationGuidelines.pdf
    Can you help me with this coding please?
    Thanks in advance!

  • @davidjackson148
    @davidjackson148 4 ปีที่แล้ว

    This would have been perfect. But there is no code nor html on that site