This guide is related to this How To Edit Event CPT Single Layout Elementor Free.
- You need to put this custom code inside a snippet plugin. I am using WPCodeBox, which is a paid plugin. You can also choose a snippet plugin that is free, or create a child theme and put it inside the functions file. Make sure that if you choose a snippet plugin, you put it in as a PHP snippet.
<?php
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) exit;
add_action( 'elementor/widgets/widgets_registered', function() {
if ( ! class_exists( '\Elementor\Widget_Base' ) ) return;
class Linnet_Elementor_ACF_Fields_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'linnet_acf_fields';
}
public function get_title() {
return 'Linnet ACF Fields';
}
public function get_icon() {
return 'eicon-meta-data';
}
public function get_categories() {
return [ 'general' ];
}
public function get_style_depends() {
return [ 'linnet-swiper-style' ];
}
public function get_script_depends() {
return [ 'linnet-swiper' ];
}
protected function _register_controls() {
$this->start_controls_section(
'section_content',
[ 'label' => 'ACF Field Settings' ]
);
$this->add_control( 'field_name', [
'label' => 'ACF Field Name (not label)',
'type' => \Elementor\Controls_Manager::TEXT,
'placeholder' => 'e.g. gallery_field or job_title',
'default' => '',
] );
$this->add_control( 'allow_html', [
'label' => 'Allow HTML Output',
'type' => \Elementor\Controls_Manager::SWITCHER,
'default' => '',
] );
$this->add_control( 'is_photo_gallery', [
'label' => 'Is Navz Photo Gallery?',
'type' => \Elementor\Controls_Manager::SWITCHER,
'default' => '',
] );
$this->add_control( 'enable_swiper', [
'label' => 'Enable Swiper Slider (only for gallery)',
'type' => \Elementor\Controls_Manager::SWITCHER,
'default' => '',
'condition' => [ 'is_photo_gallery' => 'yes' ],
] );
$this->add_control( 'enable_lightbox', [
'label' => 'Enable Lightbox (only for gallery)',
'type' => \Elementor\Controls_Manager::SWITCHER,
'default' => '',
'condition' => [ 'is_photo_gallery' => 'yes' ],
] );
$this->add_control( 'fallback_text', [
'label' => 'Fallback Text',
'type' => \Elementor\Controls_Manager::TEXT,
'default' => '',
'placeholder' => 'Shown if field is empty',
] );
$this->add_control( 'show_debug', [
'label' => 'Debug: Show Post ID',
'type' => \Elementor\Controls_Manager::SWITCHER,
'default' => '',
] );
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$field_name = $settings['field_name'];
$allow_html = $settings['allow_html'] === 'yes';
$is_gallery = $settings['is_photo_gallery'] === 'yes';
$use_swiper = $settings['enable_swiper'] === 'yes';
$use_lightbox = $settings['enable_lightbox'] === 'yes';
$fallback = $settings['fallback_text'];
$debug = $settings['show_debug'] === 'yes';
$post_id = get_queried_object_id();
if ( ! $field_name ) {
echo '<em>No field name set.</em>';
return;
}
if ( ! function_exists( 'get_field' ) ) {
echo '<em>ACF plugin not active.</em>';
return;
}
$value = get_field( $field_name, $post_id );
if ( $debug ) {
echo '<small style="opacity:0.5;">Debug Post ID: ' . esc_html( $post_id ) . '</small><br>';
}
// Navz Photo Gallery
if ( $is_gallery ) {
if ( ! function_exists( 'acf_photo_gallery' ) ) {
echo '<em>Navz Photo Gallery plugin not active.</em>';
return;
}
$images = acf_photo_gallery( $field_name, $post_id );
if ( empty( $images ) ) {
echo $fallback ? esc_html( $fallback ) : '<em>No gallery images found.</em>';
return;
}
if ( $use_swiper ) {
echo '<div class="swiper linnet-swiper-gallery"><div class="swiper-wrapper">';
foreach ( $images as $img ) {
$url = $img['full_image_url'] ?? $img['url'] ?? '';
$title = esc_attr( $img['title'] ?? '' );
$img_html = '<img src="' . esc_url( $url ) . '" alt="' . $title . '">';
echo '<div class="swiper-slide">';
echo $use_lightbox ? '<a href="' . esc_url( $url ) . '" data-fancybox="gallery">' . $img_html . '</a>' : $img_html;
echo '</div>';
}
echo '</div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>';
} else {
echo '<div class="linnet-photo-gallery">';
foreach ( $images as $img ) {
$url = $img['full_image_url'] ?? $img['url'] ?? '';
$title = esc_attr( $img['title'] ?? '' );
$img_html = '<img src="' . esc_url( $url ) . '" alt="' . $title . '" style="max-width:100%; margin:5px 0;">';
echo $use_lightbox ? '<a href="' . esc_url( $url ) . '" data-fancybox="gallery">' . $img_html . '</a>' : $img_html;
}
echo '</div>';
}
return;
}
// ACF Image field
if ( is_array( $value ) && isset( $value['url'] ) ) {
echo '<img src="' . esc_url( $value['url'] ) . '" alt="' . esc_attr( $value['alt'] ?? '' ) . '" style="max-width:100%;">';
return;
}
// Fallback for text/number
if ( is_array( $value ) ) {
echo '<div class="linnet-acf-output">' . esc_html( implode( ', ', $value ) ) . '</div>';
} elseif ( $value ) {
echo '<div class="linnet-acf-output">';
echo $allow_html ? $value : esc_html( $value );
echo '</div>';
} elseif ( $fallback ) {
echo '<div class="linnet-acf-fallback">' . esc_html( $fallback ) . '</div>';
} else {
echo '<em>No value found for ACF field "' . esc_html( $field_name ) . '"</em>';
}
}
}
\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Linnet_Elementor_ACF_Fields_Widget() );
});
// Enqueue Swiper from CDN + init script
add_action( 'wp_enqueue_scripts', function() {
wp_register_script( 'linnet-fancybox', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.28/dist/fancybox/fancybox.umd.js', [], null, true );
wp_register_style( 'linnet-fancybox-style', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.28/dist/fancybox/fancybox.css', [], null );
wp_enqueue_script( 'linnet-fancybox' );
wp_enqueue_style( 'linnet-fancybox-style' );
wp_register_script( 'linnet-swiper', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js', [], null, true );
wp_register_style( 'linnet-swiper-style', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css', [], null );
wp_add_inline_script( 'linnet-swiper', "
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.linnet-swiper-gallery').forEach(function(el) {
new Swiper(el, {
loop: true,
slidesPerView: 1,
spaceBetween: 10,
pagination: { el: el.querySelector('.swiper-pagination'), clickable: true },
navigation: {
nextEl: el.querySelector('.swiper-button-next'),
prevEl: el.querySelector('.swiper-button-prev'),
}
});
});
// Init Fancybox for all galleries
if (window.Fancybox) {
Fancybox.bind(\"[data-fancybox='gallery']\", {});
}
});
" );
});
- Go to linnet templates -> edit your event single page template.
- Find the linnet acf fields widget/module, and add it to the page.
- In the module option field called acf field name not label, put in your acf field name.
- Click publish.
