1

Is there anything wrong with including style and script tags inside a template part? The template part which I'm using like something more similar to a vue/react component is working correctly but just wondering if there are any potential hidden issues I may face by using it like this.

For example I have a template part:

<?php
    $randomImg = get_field( 'random_ad_img', 'option' );
    $randomImgAlt = get_field( 'random_ad_img_alt', 'option' );
    $randomUrl = get_field( 'random_ad_url', 'option' );
    $randomDelay = get_field( 'random_ad_delay', 'option' );

    if($randomImg) { ?>
    <style>
        .c-random-singleAd {
            display: none;
            position: fixed;
            height: 251px;
            width: 325px;
            left: 0;
            bottom: 0;
        }
        .c-random-singleAd.isActive {
            display: block;
        }
    </style>

    <div class="c-random-singleAd">
        <a class="c-random-singleAd__link" href="<?php echo $randomUrl; ?>">
            <img class="c-random-singleAd__img" src="<?php echo $randomImg; ?>" alt="<?php echo $randomImgAlt; ?>">
        </a>
    </div>

    <script>

        jQuery(document).ready(function($) {

            var cookieFooter = jQuery('#catapult-cookie-bar');
            var randomAd = jQuery('.c-random-singleAd');

            setTimeout(function() {
                console.log(offset);
                if(cookieFooter.length == 1) {
                    var offset = cookieFooter.outerHeight(true);
                    randomAd.css('bottom', offset.toString() + 'px');
                } else return;
                randomAd.addClass('isActive')
            }, 10000);

        });

    </script>

    <?php } 
?>

As mentioned earlier this works completely fine and I don't see any weird console errors.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.