Home Forums ACF PRO Using ACF fields in Javascript


Using ACF fields in Javascript

    • Ronald

    • June 27, 2019 at 12:35 am


    I try to use ACF in combination with JS. I have a timer on our website and I want it to be editable in the WordPress Dashboard and not only in the code.

    If this was just PHP I knew how to do it, but I am kinda new to JS so I need some guidance.

    This is what I want to accomplish (example: based on how it can be done in PHP).

    <script type=”text/javascript”>
    // Here should come the fields like get_sub_field but then for JS..
    // var Date-Y = get_sub_field(‘date-year’);
    // var Date-m = get_sub_field(‘date-month’);
    // var Date-d = get_sub_field(‘date-day’);
    // var Date-h = get_sub_field(‘date-hour’);
    // So I can link for example ‘date-year’ in the dashboard in custom fields to be in the
    // page where the timer is and edit the year in the dashboard.
    // But I think this is not the right way of coding it

    // Then link the variables to the places where I want them to be. It’s about the variable
    // eventDate.
    function countdown(){
    var eventDate = new Date(2019, 10, 7, 15);
    // So instead of
    // 2019: Date-Y
    // 10: Date-m
    // 7: Date-d
    // 15: Date-h
    // And then I can add these in WordPress dashboard as Advanced custom fields — linking
    // them to the right variable, so that I can edit the date within WordPress itself and
    // not in the code

    I hope my issue is clear and someone is able to explain how I do this in JS.

    Thanks in advance!

  • Variable names cannot contain -, use DateY or Date_Y etc.

    If your values need to be strings then you need to enclose them in quotes and you need to put php tags around them and echo them

    var DateY = '<?php echo get_sub_field('date-year'); ?>';
    • Ronald

    • June 28, 2019 at 9:01 pm

    Thank you! It works now

    • Rob

    • September 3, 2019 at 4:57 am

    Hi Ronald, any chance you’d be able to share your full solution? I’m having a bit of trouble creating this myself and could really use some help. Please and thank you 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.