Output values
by field type

Display as a normal link

<?php $url = CFS()->get( 'url' ); ?>
<a href="<?php echo esc_url( $url ); ?>">Visit link</a>

Detect social URLs and display an icon link

<?php
$url = CFS()->get( 'url' );

// Inspect the URL host and switch the icon and label.
// icon_class uses Font Awesome as an example. You can replace it with SVG or image icons.
$host       = strtolower( (string) wp_parse_url( $url, PHP_URL_HOST ) );
$host       = preg_replace( '/^www\./', '', $host );
$service    = 'website';
$icon_class = 'fa-solid fa-link';
$label      = 'Website';

if ( false !== strpos( $host, 'instagram.com' ) ) {
  $service    = 'instagram';
  $icon_class = 'fa-brands fa-instagram';
  $label      = 'Instagram';
} elseif ( false !== strpos( $host, 'x.com' ) || false !== strpos( $host, 'twitter.com' ) ) {
  $service    = 'x';
  $icon_class = 'fa-brands fa-x-twitter';
  $label      = 'X';
} elseif ( false !== strpos( $host, 'facebook.com' ) ) {
  $service    = 'facebook';
  $icon_class = 'fa-brands fa-facebook-f';
  $label      = 'Facebook';
} elseif ( false !== strpos( $host, 'youtube.com' ) || false !== strpos( $host, 'youtu.be' ) ) {
  $service    = 'youtube';
  $icon_class = 'fa-brands fa-youtube';
  $label      = 'YouTube';
} elseif ( false !== strpos( $host, 'line.me' ) || false !== strpos( $host, 'lin.ee' ) ) {
  $service    = 'line';
  $icon_class = 'fa-brands fa-line';
  $label      = 'LINE';
}

if ( $url ) :
?>
  <a class="social-link social-link--<?php echo esc_attr( $service ); ?>"
     href="<?php echo esc_url( $url ); ?>"
     target="_blank"
     rel="noopener">
    <i class="<?php echo esc_attr( $icon_class ); ?>" aria-hidden="true"></i>
    <span><?php echo esc_html( $label ); ?></span>
  </a>
<?php endif; ?>

The URL field returns the stored URL string. By checking the domain at output time, you can switch icons and CSS classes for social links.

<?php
$choice = CFS()->get( 'conditional_choice' );
?>

<?php if ( 'select1' === $choice ) : ?>
  <div>
    <p><?php echo esc_html( CFS()->get( 'field1' ) ); ?></p>
    <p><?php echo esc_html( CFS()->get( 'field2' ) ); ?></p>
  </div>

<?php elseif ( 'select2' === $choice ) : ?>
  <div>
    <p><?php echo esc_html( CFS()->get( 'field3' ) ); ?></p>
    <p><?php echo esc_html( CFS()->get( 'field4' ) ); ?></p>
  </div>
<?php endif; ?>

Retrieve the current selection using the Conditional Group's field name, then output the matching child fields. You can freely add HTML such as headings, images, and paragraphs between the PHP tags. Hidden branch values are retained, so do not output child fields without checking the selected value.

<?php
$link = CFS()->get( 'hyperlink' ); // PHP Array setting
if ( ! empty( $link['url'] ) ) :
?>
  <a href="<?php echo esc_url( $link['url'] ); ?>"
     target="<?php echo esc_attr( $link['target'] ?? '_self' ); ?>">
    <?php echo esc_html( $link['text'] ?: $link['url'] ); ?>
  </a>
<?php endif; ?>

The HTML setting returns ready-made link markup. PHP Array is recommended when you need full output control.

<?php
// Set the File field's Return Value to Attachment ID.
$attachment_id = (int) CFS()->get( 'file' );
$file_url      = wp_get_attachment_url( $attachment_id );
$mime_type     = get_post_mime_type( $attachment_id );
$file_type     = wp_check_filetype( $file_url );
$extension     = strtolower( $file_type['ext'] ?? '' );
$label         = get_the_title( $attachment_id ) ?: basename( (string) $file_url );

// Default values for files that do not match a more specific type.
$icon_label    = 'FILE';
$icon_class    = 'file';

// Switch the display label and CSS class by extension or MIME type.
if ( 'pdf' === $extension ) {
  $icon_label = 'PDF';
  $icon_class = 'pdf';
} elseif ( 0 === strpos( (string) $mime_type, 'image/' ) ) {
  $icon_label = 'IMG';
  $icon_class = 'image';
} elseif ( 0 === strpos( (string) $mime_type, 'audio/' ) ) {
  $icon_label = 'AUDIO';
  $icon_class = 'audio';
} elseif ( 0 === strpos( (string) $mime_type, 'video/' ) ) {
  $icon_label = 'VIDEO';
  $icon_class = 'video';
} elseif ( in_array( $extension, array( 'zip', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx' ), true ) ) {
  $icon_label = strtoupper( $extension );
  $icon_class = $extension;
}

if ( $file_url ) :
?>
  <!-- These data attributes make the file type available to theme CSS and JavaScript. -->
  <a class="download-link download-link--<?php echo esc_attr( $extension ); ?>"
     href="<?php echo esc_url( $file_url ); ?>"
     data-file-ext="<?php echo esc_attr( $extension ); ?>"
     data-file-mime="<?php echo esc_attr( $mime_type ); ?>">
    <!-- Replace this span with your site's SVG, icon font, or component markup. -->
    <span class="file-icon file-icon--<?php echo esc_attr( $icon_class ); ?>" aria-hidden="true">
      <?php echo esc_html( $icon_label ); ?>
    </span>
    <span><?php echo esc_html( $label ); ?></span>
  </a>
<?php endif; ?>

This example branches by PDF, image, audio, video, Office files, and other files, then changes the label and CSS class by type. Outputting data-file-ext and data-file-mime also makes file types easy to handle from theme CSS or JavaScript.

The returned value depends on the field's Return Value setting. Image Data returns an array containing the image ID, selected-size URL, thumbnail_url, large_url, full_url, modal_url, alt text, caption, and size data. Attachment IDs returns an ID array, Image URLs returns a URL array, and Gallery HTML returns generated markup.

Custom output with Image Data

<?php foreach ( (array) CFS()->get( 'gallery' ) as $image ) : ?>
  <figure>
    <a href="<?php echo esc_url( $image['modal_url'] ?? $image['full_url'] ?? $image['url'] ?? '' ); ?>"
       data-gallery-item
       data-caption="<?php echo esc_attr( $image['caption'] ?? '' ); ?>">
      <img src="<?php echo esc_url( $image['url'] ?? '' ); ?>"
           alt="<?php echo esc_attr( $image['alt'] ?? '' ); ?>">
    </a>
    <?php if ( ! empty( $image['caption'] ) ) : ?>
      <figcaption><?php echo esc_html( $image['caption'] ); ?></figcaption>
    <?php endif; ?>
  </figure>
<?php endforeach; ?>

Use the default HTML returned by Gallery HTML

<?php
$allowed = wp_kses_allowed_html( 'post' );
$allowed['div']['data-columns'] = true;
$allowed['div']['style'] = true;
$allowed['figure'] = array( 'class' => true );
$allowed['figcaption'] = array();
$allowed['a']['data-atshift-cfs-gallery-item'] = true;
$allowed['a']['data-image-id'] = true;
$allowed['a']['data-full-url'] = true;
$allowed['a']['data-caption'] = true;
$allowed['a']['data-alt'] = true;

echo wp_kses( CFS()->get( 'gallery' ), $allowed );
?>

Choose Image Data when building a custom modal, slider, or layout because it is easy to assemble your own markup. Gallery HTML returns default markup whose image links include data-atshift-cfs-gallery-item and related modal-friendly data attributes.

<?php
// Set the HTML tags and attributes that wp_kses() may output.
// true allows the specified attribute.
$allowed = array(
  'div' => array( 'class' => true ), // Allow div and its class attribute
  'span' => array( 'class' => true ), // Allow span and its class attribute
  'pre' => array(), // Allow pre without attributes
  'code' => array( 'class' => true ), // Allow code and its class attribute
  'button' => array( // Allow button with the attributes below
    'type' => true, 'class' => true, // type and class attributes
    'data-label' => true, 'data-copied' => true, // data attributes
  ),
);
echo wp_kses( CFS()->get( 'code_view' ), $allowed );
?>

Display the rendered shortcode output

<?php echo CFS()->get( 'form_shortcode' ); ?>

Inspect the saved shortcode text

<?php
$shortcode = CFS()->get( 'form_shortcode', false, array( 'format' => 'raw' ) );
echo esc_html( $shortcode );
?>

CFS()->get() returns the rendered result of the saved shortcode. Role controls for the Shortcode field only determine whether the input field is shown in the post editing screen; they do not require that role when a saved value is rendered in a theme. Limit this field to trusted shortcodes and adjust escaping in the shortcode itself or with wp_kses() when needed.

Display an allowed iframe embed

<?php
// The Embed Code field keeps only iframes from allowed providers when saving.
// At output time, allow only the iframe tag and the attributes needed for embeds.
$allowed = array(
  'iframe' => array(
    'src'             => true,
    'width'           => true,
    'height'          => true,
    'title'           => true,
    'class'           => true,
    'style'           => true,
    'loading'         => true,
    'allow'           => true,
    'allowfullscreen' => true,
    'frameborder'     => true,
    'referrerpolicy'  => true,
    'aria-label'      => true,
  ),
);

echo wp_kses( CFS()->get( 'embed_code' ), $allowed );
?>

Use this field for iframe embeds from providers allowed in the field settings, such as Google Maps, YouTube, Vimeo, OpenStreetMap, Google Calendar, Google Forms, Spotify, and SoundCloud. Script-based embed code is not supported.

Display standard category names

<?php
$terms = get_the_terms( get_the_ID(), 'category' );
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) echo esc_html( $term->name );
}
?>

Display standard categories as links

<?php
$terms = get_the_terms( get_the_ID(), 'category' );
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) {
    $url = get_term_link( $term );
    if ( ! is_wp_error( $url ) ) {
      echo '<a href="' . esc_url( $url ) . '">' . esc_html( $term->name ) . '</a>';
    }
  }
}
?>

Display Shared Taxonomy names

<?php
$terms = get_the_terms( get_the_ID(), 'global_category' ); // Replace with your taxonomy name
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) echo esc_html( $term->name );
}
?>

Display Shared Taxonomy terms as links

<?php
$terms = get_the_terms( get_the_ID(), 'global_category' ); // Replace with your taxonomy name
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) {
    $url = get_term_link( $term );
    if ( ! is_wp_error( $url ) ) {
      echo '<a href="' . esc_url( $url ) . '">' . esc_html( $term->name ) . '</a>';
    }
  }
}
?>

Post Categories (Standard / Global) stores WordPress terms in the selected taxonomy rather than CFS-specific post meta. In themes, render the value with standard WordPress template functions such as get_the_terms().