Custom Functionalities

This section documents the custom utility functions available across the theme. These functions help standardize tasks like spacing, rendering image tags, and setting target link attributes.

Note

These helper functions are part of our shared library and are meant to improve consistency, accessibility, and maintainability in all theme development work.

---

generate_image_tag()

This function dynamically generates an <img> HTML tag (or <figure> with <figcaption>) from either an ACF image field or a featured image ID. It supports lazy loading, responsive images, SVGs, and custom data-* attributes.

Key Features

• Works with ACF image arrays and attachment IDs.
• Supports custom CSS classes, lazy loading, and decoding strategies.
• Can output <figure> wrappers with captions.
• Responsive with srcset, sizes, and placeholder support.
• Accepts dataAttributes as an associative array.

Example

<?php if ($quote_logo): ?>
    <?php
        $image_tag_args = array(
            'image' => $quote_logo,
            'sizes' => '135px',
            'class' => 'g--card-05__ft-items__media-wrapper__media',
            'isLazy' => true,
            'showAspectRatio' => true,
            'decodingAsync' => true,
            'fetchPriority' => false,
            'addFigcaption' => false,
        );
    ?>
    <figure class="g--card-05__ft-items__media-wrapper">
        <?php generate_image_tag($image_tag_args); ?>
    </figure>
<?php endif; ?>

---

render_wp_image()

This function is an updated and enhanced version of generate_image_tag(). It dynamically generates an <img> HTML tag (or <figure> with <figcaption>) from various image sources, including ACF image fields, attachment IDs, theme file URLs, and arbitrary URLs. It supports a wide range of features and customization options.

Key Features

• Works with ACF image arrays, attachment IDs, theme file URLs, and arbitrary URLs
• Supports lazy loading, responsive images (srcset/sizes), aspect ratio, and SVGs
• Allows specifying custom classes, decoding, fetch priority, and data attributes
• Can output <figure> wrappers with captions
• Provides smart defaults and handles edge cases gracefully

Parameters

The render_wp_image() function accepts an associative array of parameters:

• image (required): The image source, which can be an ACF image array, attachment ID, theme file URL, or arbitrary URL.
• sizes (optional): A string specifying the sizes attribute for responsive images. Required when providing multiple image sources.
• class (optional): Custom CSS class(es) to add to the <img> tag.
• lazyClass (optional): Custom CSS class for lazy loading. Defaults to 'g--lazy-01'.
• isLazy (optional): Whether to enable lazy loading. Defaults to true.
• showAspectRatio (optional): Whether to set the aspect-ratio CSS property. Defaults to true.
• decoding (optional): The decoding attribute for the <img> tag. Can be 'auto', 'sync', or 'async'. Defaults to 'async'.
• fetchPriority (optional): The fetchpriority attribute for the <img> tag. Can be 'high', 'low', or 'auto'. Defaults to 'auto'.
• dataAttributes (optional): An associative array of custom data-* attributes to add to the <img> tag.
• addFigcaption (optional): Whether to wrap the <img> tag in a <figure> with a <figcaption>. Defaults to false.
• figureClass (optional): Custom CSS class for the <figure> wrapper. Defaults to 'media-wrapper'.
• width (optional): Explicitly set the width attribute of the <img> tag.
• height (optional): Explicitly set the height attribute of the <img> tag.

Examples

1. ACF image with responsive srcset and sizes:

render_wp_image([
  'image' => get_field('img'),
  'sizes' => '(max-width: 810px) 95vw, 50vw',
  'class' => 'g--media',
]);

2. LCP (no lazy loading) image from attachment ID:

render_wp_image([
  'image'         => $attachment_id,
  'isLazy'        => false,
  'fetchPriority' => 'high',
  'decoding'      => 'async',
  'sizes'         => 'large',
  'class'         => 'c-hero__img',
]);

3. Theme file URL (single variant, no srcset or sizes):

render_wp_image([
  'image'  => get_theme_file_uri('/public/hero.webp'),
  'class'  => 'c-hero__img',
  'width'  => 1920,
  'height' => 1080,
]);

4. SVG with fixed dimensions:

render_wp_image([
  'image'         => get_theme_file_uri('/icons/logo.svg'),
  'width'         => 180,
  'height'        => 40,
  'decoding'      => 'auto',
  'fetchPriority' => 'low',
]);

5. Figure with figcaption (from attachment with caption):

render_wp_image([
  'image'         => $attachment_id,
  'sizes'         => 'medium',
  'addFigcaption' => true,
  'figureClass'   => 'media-wrapper',
]);

6. Force aspect-ratio when source dimensions are missing:

render_wp_image([
  'image'           => get_field('img'),
  'width'           => 1200,
  'height'          => 800,
  'showAspectRatio' => true,
]);

---

get_spacing()

This function maps semantic spacing names (like top-large, bottom-small) to utility class combinations that apply padding on desktop and tablet viewports. This is a custom ACF field created by Terra.

Example Input/Output

$spacing = get_spacing($module['section_spacing']);

If the $module['section_spacing'] value is 'top-large-bottom-small', the function returns:

f--pt-15 f--pt-tablets-10 f--pb-5 f--pb-tablets-4

This helps enforce consistent spacing design tokens across the theme.

---

get_target_link()

Returns a fully-formed target attribute string for anchor tags, including:

• target="_blank" or _self
• rel="noopener noreferrer" (for external links)
• aria-label for accessibility

Example

<a href="https://example.com" <?php echo get_target_link(true, 'Example Link'); ?>>
    Example Link
</a>

Output

target='_blank' rel='noopener noreferrer' aria-label='Example Link, opens a new window'

---

get_page_id_by_title()

This function returns the WordPress page ID for a given page title.

Example

$page_id = get_page_id_by_title('Contact');

This is useful when you need to programmatically reference a page without hardcoding its ID.

Output

Returns an int representing the post ID of the matching page. If no page is found, it will return null.

---

Video