Code Snippets

Block HTML

<div id="<?php echo $block['id']?>" class="block-1 block">
    <div class="container-fluid">
        <div class="container container-padding">
            <div class="row">
                <div class="col-12 col-lg-10 offset-lg-1">
                </div>
            </div>
        </div>
    </div>
</div>

Image Functions

ACF Image

<?php
// ACF IMAGE
$image_ID = get_field('image');
$image_alt = get_post_meta($image_ID, '_wp_attachment_image_alt', TRUE);
?>
<div class="image-16by9">
<img <?php awesome_acf_responsive_image($image_ID, 'full', '1000px'); ?> alt="<?php echo $image_alt; ?>" />
</div>

Thumbnail Image

<?php
// THUMBNAIL IMAGE
$image_ID = get_post_thumbnail_id();
$image_alt = get_post_meta($image_ID , '_wp_attachment_image_alt', TRUE);
?>
<div class="image-16by9">
<img <?php awesome_acf_responsive_image($image_ID, 'full', '1000px'); ?> alt="<?php echo $image_alt; ?>" />
</div>

ACF Repeater

<?php if( have_rows('repeater') ):?>
   <?php while( have_rows('repeater') ) : the_row();?>
      <?php // VARS
      $heading = get_sub_field('heading');
      $text = get_sub_field('text');
      ?>
      <h1><?php echo $heading;?></h1>
      <p><?php echo $heading;?></p>
   <?php endwhile;?>
<?php endif;?>

JS check if code exists on page

Access Shadow Root with Inline Styles

<script>

   // Use window load, so that the element is loaded in before this code is run...

   jQuery(window).load(function() {

      const host = document.querySelector("#shadow-root-id");

      var style = document.createElement( 'style' )

      style.innerHTML = '.shadow-root-child-element { background-color: red; }'

      host.shadowRoot.appendChild( style )

   });

</script>


                            

Lenis scroll to anchors with query string

<?php
    $anchor = $_GET['anchor'];
    if(isset($anchor)) {
            $desktopScrollOffset = -100;
            $mobileScrollOffset = -80;

            if(isset($_GET['desktopScrollOffset'])) {
                $desktopScrollOffset = $_GET['desktopScrollOffset'];
            }
            if(isset($_GET['mobileScrollOffset'])) {
                $mobileScrollOffset = $_GET['mobileScrollOffset'];
            }
        echo '
            <script>
                jQuery(document).ready(function(){
                    // url format: https://theme.newwave-web.co.uk/?anchor=anchorInteger
                    if (jQuery(window).width() > 575.98) {
                        var scrollOffset =  '.$desktopScrollOffset.'; // desktop
                    }
                    else {
                        var scrollOffset =  '.$mobileScrollOffset.'; // mobile
                    }
                    lenis.scrollTo("#'.$anchor.'",{offset: scrollOffset });
                });
            </script>
        ';
    }
?>