Support

Account

Search Results for 'wrap main content'

topic

Helping

Issue with Elementor Pro
- 1
- ACF PRO
- 4 months ago
I have a problem on a website between Elementor Pro and ACF pro. It seems to be with the photo galleries, but I’m not sure. The error that appears is the following:

PHP: 2024-08-02 13:43:19 [error X 3][/var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor-pro/modules/dynamic-tags/acf/tags/acf-gallery.php::48] Uncaught TypeError: Cannot access offset of type string on string in /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor-pro/modules/dynamic-tags/acf/tags/acf-gallery.php:48
Stack trace:
#0 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/dynamic-tags/data-tag.php(44): ElementorPro\Modules\DynamicTags\ACF\Tags\ACF_Gallery->get_value()
#1 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/dynamic-tags/manager.php(216): Elementor\Core\DynamicTags\Data_Tag->get_content()
#2 [internal function]: Elementor\Core\DynamicTags\Manager->get_tag_data_content()
#3 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/dynamic-tags/manager.php(109): call_user_func_array()
#4 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/dynamic-tags/manager.php(70): Elementor\Core\DynamicTags\Manager->parse_tag_text()
#5 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/controls/base-data.php(91): Elementor\Core\DynamicTags\Manager->parse_tags_text()
#6 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/controls-stack.php(1329): Elementor\Base_Data_Control->parse_tags()
#7 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/controls-stack.php(1176): Elementor\Controls_Stack->parse_dynamic_settings()
#8 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/css/post.php(298): Elementor\Controls_Stack->get_parsed_dynamic_settings()
#9 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/dynamic-tags/dynamic-css.php(36): Elementor\Core\Files\CSS\Post->render_styles()
#10 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/dynamic-tags/dynamic-css.php(40): Elementor\Core\DynamicTags\Dynamic_CSS->render_styles()
#11 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/css/post.php(178): Elementor\Core\DynamicTags\Dynamic_CSS->render_styles()
#12 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/css/base.php(680): Elementor\Core\Files\CSS\Post->render_css()
#13 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/base.php(180): Elementor\Core\Files\CSS\Base->parse_content()
#14 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/css/base.php(131): Elementor\Core\Files\Base->update_file()
#15 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/css/base.php(227): Elementor\Core\Files\CSS\Base->update()
#16 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/css/post.php(201): Elementor\Core\Files\CSS\Base->enqueue()
#17 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/dynamic-tags/manager.php(488): Elementor\Core\Files\CSS\Post->enqueue()
#18 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/class-wp-hook.php(324): Elementor\Core\DynamicTags\Manager->after_enqueue_post_css()
#19 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters()
#20 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/plugin.php(517): WP_Hook->do_action()
#21 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/css/base.php(274): do_action()
#22 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/files/css/post.php(201): Elementor\Core\Files\CSS\Base->enqueue()
#23 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/frontend.php(1134): Elementor\Core\Files\CSS\Post->enqueue()
#24 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/jet-tabs/includes/addons/jet-accordion-widget.php(1071): Elementor\Frontend->get_builder_content()
#25 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/controls-stack.php(2325): Elementor\Jet_Accordion_Widget->render()
#26 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/widget-base.php(635): Elementor\Controls_Stack->render_by_mode()
#27 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/widget-base.php(776): Elementor\Widget_Base->render_content()
#28 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/element-base.php(483): Elementor\Widget_Base->print_content()
#29 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/element-base.php(1422): Elementor\Element_Base->print_element()
#30 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/element-base.php(483): Elementor\Element_Base->print_content()
#31 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/element-base.php(1422): Elementor\Element_Base->print_element()
#32 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/element-base.php(483): Elementor\Element_Base->print_content()
#33 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/element-base.php(1422): Elementor\Element_Base->print_element()
#34 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/base/element-base.php(483): Elementor\Element_Base->print_content()
#35 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/base/document.php(1875): Elementor\Element_Base->print_element()
#36 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/base/document.php(1800): Elementor\Core\Base\Document->do_print_elements()
#37 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/core/base/document.php(1201): Elementor\Core\Base\Document->print_elements()
#38 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/frontend.php(1158): Elementor\Core\Base\Document->print_elements_with_wrapper()
#39 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-content/plugins/elementor/includes/frontend.php(1053): Elementor\Frontend->get_builder_content()
#40 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/class-wp-hook.php(324): Elementor\Frontend->apply_builder_in_content()
#41 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/plugin.php(205): WP_Hook->apply_filters()
#42 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(1871): apply_filters()
#43 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(958): WP_REST_Posts_Controller->prepare_item_for_response()
#44 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/rest-api/class-wp-rest-server.php(1230): WP_REST_Posts_Controller->update_item()
#45 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/rest-api/class-wp-rest-server.php(1063): WP_REST_Server->respond_to_request()
#46 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/rest-api/class-wp-rest-server.php(439): WP_REST_Server->dispatch()
#47 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/rest-api.php(420): WP_REST_Server->serve_request()
#48 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/class-wp-hook.php(324): rest_api_loaded()
#49 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters()
#50 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/plugin.php(565): WP_Hook->do_action()
#51 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/class-wp.php(418): do_action_ref_array()
#52 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/class-wp.php(813): WP->parse_request()
#53 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-includes/functions.php(1336): WP->main()
#54 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/wp-blog-header.php(16): wp()
#55 /var/www/vhosts/eltallerdeverdes.com/003.eltallerdeverdes.com/index.php(17): require(‘…’)
#56 {main}

Solving

Block preview is wrapped in “extra” div (same classes), affects appearance

I would love to hear some thoughts on this one.

I have multiple blocks on which I have a custom field for adding width classes to the block (I don’t like Gutenbergs approach, I need my own). The selected class is appended to the blocks other regular css classes on the object.

On my ACF blocks I use get_block_wrapper_attributes() to get the classes and then add them to a wrapper div. Apparently these classes is also added to the preview wrapping div in admin which means I get a double effect of my css rules.

It removes the attribute classes on the inner div whenever clicking on the block but it’s back again whenever I reload the page.

Anyone got a clue on why this happens and how I can solve it (my soultion mught be bad, I’m of course open for other totally different solutions)? This worked fine, as far as I know, before the summer (just got back to work and discovered this after updating WP 6.2.2 -> 6.3. and ACF 6.1.7 -> 6.2.0).

Preferably I would not want these classes on the preview wrapping div, however they should in that case not be removed on the inner div when clicking on the preview.

Double width classes creates double distance from the edges

Same classes added to both parent and child div in preview mode of ACF Gutenberg block

My block code:


<?php
$custom_wrapper_classes = 'my-block';
include_once (get_stylesheet_directory() . '/includes/blocks/block-functions.php');

if (function_exists('hest_get_wrapper_attr')) :
	$wrapper_attributes = hest_get_wrapper_attr($block, $custom_wrapper_classes);
endif;

$posts = get_field('my_relationship_field');

if( $posts ): ?>

	<div <?php echo wp_kses_data($wrapper_attributes); ?>>	

		<div class="my-grid">
			<?php
			global $post;
			foreach( $posts as $post): 
				setup_postdata($post);?>

				 <!-- Code for outputting data -->
			<?php
			endforeach; ?>
		</div><!-- .my-grid -->

	</div><!-- .wrapper -->

	<?php
	wp_reset_postdata();

endif; ?>

hest_get_wrapper_attr() looks like this:


<?php
/*
 * Converts Gutenberg saved data attributes (input field by IPM plugin) to 
 * a string to echo on the wrapping div
 */
function conv_data_attributes($data_attributes) {

    $data_attr = '';
    // Regular expression pattern to match the value inside the brackets
    $pattern = '/\[(.*?)\]/';

    // Perform the regular expression match
    if (preg_match_all($pattern, $data_attributes, $matches)) {
        // Extract the matched values
        $values = $matches[1];
        // Remove the commas from each extracted value
        $data_attr = array_map(function ($value) {
            return str_replace(',', '', $value);
        }, $values);
        // Convert the array into a space-separated string
        $data_attr = implode(' ', $data_attr);
    }

    return $data_attr;
}

/*
 * Converts Gutenberg saved gap value to CSS
 * 
 */
function conv_blockgap_value($gap) {
    
    $pattern = "/var:([^|]+)\|([^|]+)\|([^|]+)/";

    $result = preg_replace_callback($pattern, function ($matches) {
        $lastValue = $matches[3];
        $updatedLastValue = preg_replace("/(\d+)([a-zA-Z]?)/", "$1-$2", $lastValue);
        return "var(--wp--{$matches[1]}--{$matches[2]}--{$updatedLastValue})";
    }, $gap);

    $gap = "gap: " . $result . ";";
    
    return $gap;
}

/*
 * Main function to prepare all wrapper classes, styles and attributes
 * 
 */
function hest_get_wrapper_attr($block, $custom_wrapper_classes) {
    
    $wrapper_attributes = '';
    $alignment_classes = '';
    $style = '';

    // Support custom anchor values.
    $anchor = '';
    if ( ! empty( $block['anchor'] ) ) {
        $anchor = 'id="' . esc_attr( $block['anchor'] ) . '" ';
        $wrapper_attributes .= $anchor;
    }

    // Create class attribute allowing for custom "className" and "align" values.
    if ( ! empty( $block['align'] ) ) {
        $alignment_classes .= ' align' . $block['align'];
    }

    if ($block['supports']['alignContent'] == 'matrix') {
        // If matrix
        // Replace spaces: center left becomes center-left
        $alignment_classes .= ' has-custom-content-position is-position-' . str_replace(" ", "-", $block['alignContent']);
    } else {
        if ( ! empty( $block['alignContent'] ) ) {
            // If not matrix, get the alignContent
            // either top, center, or bottom
            $alignment_classes .= ' is-vertically-aligned-' . $block['alignContent'];
        }
    }

    // Block text alignment
    if( !empty($block['alignText']) ) {
        $alignment_classes .= ' has-text-align-' . $block['alignText'];
    }

    // Check if the block has fullHeight turned on
    if( !empty($block['fullHeight']) ) {
        $style .= 'min-height: 100vh;';
    }
    
    // Check if we got custom data attributes to add to our main div
    $data_attr = $block['dataAttributes'] ?? null;
    if ($data_attr && function_exists('conv_data_attributes') ) :
        $data_attr = conv_data_attributes($data_attr);
    endif;

    // Add blockGap value to wrapper attributes
    $gap = $block['style']['spacing']['blockGap'] ?? null;
    if ($gap && function_exists('conv_blockgap_value') ) :
        $gap = conv_blockgap_value($gap);
    endif;

    $style .= $gap;

    $wrapper_attributes .= get_block_wrapper_attributes(
        [
            'class' => $custom_wrapper_classes . $alignment_classes,
            'style' => $style,
        ]
    );

    $wrapper_attributes = $wrapper_attributes . ' ' . $data_attr;

    return $wrapper_attributes;
}

Solved

Can’t get dynamic repeater to display

Hi there,

I’m trying to build a more flexible template that allows the user to simply add content blocks that can be moved around using “Add Row” and then selecting from a dropdown of template blocks. I was using the advanced layout template as a guide and duplicated a number of content/template files. Exported the PHP and added to bottom of the function.php file, as well.

The problem is that when I try to use the new template, the “Add row” button doesn’t show up, so I can’t even tell if it’s partially working. I tried adding the new segments to the Advanced Layout Template but they don’t show up in the drop down either.

All of the new template files I’ve added were pulled from already existing template files, so I know they can work, but need something that’s not so rigid, as we currently can’t change anything or change the order without effecting every site on our website, and if we do add something, it simply doesn’t show up.

A number of the new field groups have custom names, not sure if that matters, tried just applying a new, different template to the page we want to change, but if I do that the page becomes blank on the front end, even though the back end shows content.

Here’s our template PHP page.


<?php
/**
 * Template Name: Master Page Builder
 */
?>

<?php while (have_posts()) : the_post(); ?>
  <?php //get_template_part('templates/page', 'header'); ?>
  <?php get_template_part('templates/content', 'master-page-builder'); ?>
<?php endwhile; ?>

The content file associated with the template file is below.


<?php
// SETTINGS *** Lines 3-11, possibly unnecessary **
global $post;
$pid = $post->ID;
$pSlug = $post->slug;
$parentID = $post->post_parent;

// print $pid;
// print '<br>';
// print $parentID;

//$title = get_field('title');
$colour = get_field('theme_colour');
$hide_content = get_field('hide_content');
?>

<div class="trufflesTheme_<?php if ($colour) : print $colour; else : print 'indigo'; endif; ?> trufflesChildPage">

    <?php 
if ($hide_content) : 
  // Return Nothing
else : ?>

    <section id="trufflesMainContent" class="sectionRow truffles_content">
        <div class="inner">
            <div class="margin">
                <?php the_content(); ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <?php if (have_rows('master_content_type')) : ?>
    <section id="truffles_contentWrapper" class="truffles_contentType truffles_content">
        <?php while (have_rows('master_content_type')) : the_row(); 
  // Available Variables under sub field 'select'
  //full : Full Banner
  //small : Smaller Banner
  //imageanddesc : Image & Description
  //altimageanddesc : Image & Description (Alternative)
  //wysiwyg : Content Editor (WYSIWYG)
  //accordions : Accordions
  //logocloud : Logo Cloud
  //photocolumns : Photo Columns
  //topbanner : Header Banner
  //introduction : Introduction & Booking
  //cta : Call To Action
  //testimonials: Testimonials
  //testimonials: Video Banner
  //linkblocks: Link Blocks
  //homepageimgdesc: Image & Description Home Page Styling
  //bannerheader: Text Header

  $select = get_sub_field('select'); ?>
        <section class="contentType_<?php print $select; ?> sectionRow">
            <?php if ($select == 'full') : ?>
            <?php get_template_part('templates/advanced', 'full'); ?>

            <?php elseif ($select == 'small') : ?>
            <?php get_template_part('templates/advanced', 'small'); ?>
            <?php elseif ($select == 'imageanddesc') : ?>
            <?php get_template_part('templates/advanced', 'imageanddesc'); ?>
            <?php elseif ($select == 'altimageanddesc') : ?>
            <?php get_template_part('templates/advanced', 'altimageanddesc'); ?>
            <?php elseif ($select == 'wysiwyg') : ?>
            <?php get_template_part('templates/advanced', 'wysiwyg'); ?>
            <?php elseif ($select == 'accordions') : ?>
            <?php get_template_part('templates/advanced', 'accordions'); ?>
            <?php elseif ($select == 'logocloud') : ?>
            <?php get_template_part('templates/advanced', 'logocloud'); ?>
            <?php elseif ($select == 'photocolumns') : ?>
            <?php get_template_part('templates/advanced', 'photocolumns'); ?>
            <?php elseif ($select == 'three') : ?>
            <?php get_template_part('templates/advanced', 'threecolumns'); ?>
            <?php elseif ($select == 'embed') : ?>
            <?php get_template_part('templates/advanced', 'embed'); ?>

            <!--  New Content Fields -->

            <?php elseif ($select == 'topbanner') : ?>
            <?php get_template_part('templates/advanced', 'topbanner'); ?>
            <?php elseif ($select == 'introduction') : ?>
            <?php get_template_part('templates/advanced', 'introduction'); ?>
            <?php elseif ($select == 'cta') : ?>
            <?php get_template_part('templates/advanced', 'cta'); ?>
            <?php elseif ($select == 'testimonials') : ?>
            <?php get_template_part('templates/advanced', 'testimonials'); ?>
            <?php elseif ($select == 'videobanner') : ?>
            <?php get_template_part('templates/advanced', 'videobanner'); ?>
            <?php elseif ($select == 'linkblocks') : ?>
            <?php get_template_part('templates/advanced', 'linkblocks'); ?>
            <?php elseif ($select == 'homepageimgdesc') : ?>
            <?php get_template_part('templates/advanced', 'homepageimgdesc'); ?>
            <?php elseif ($select == 'bannerheader') : ?>
            <?php get_template_part('templates/advanced', 'bannerheader'); ?>

            <!-- END New Content Fields -->

            <?php endif; ?>
        </section>
        <?php endwhile; ?>
    </section> <!--  END #truffles_contentWrapper -->
    <?php endif; ?>

    <?php get_template_part('templates/footer-landing'); ?>
</div><!-- end .trufflesTheme -->

And this is referencing a number of built out fields built in php, modelled after the structure of the advanced layout template.

Example below:


<?php 
// TESTIMONIALS
$testimonials_section = get_sub_field('testimonials_section');
?>

<div class="innerTable">

  <?php if($testimonials_section['section_content'] || $testimonials_section['testimonials_slider']):?>
    <div class="testimonials-section">
      <div class="container-wrap">
        <?php if($testimonials_section['section_content']):?>
          <div class="section-content">
            <?php echo $testimonials_section['section_content'];?>
          </div>
        <?php endif;?>
        
        <?php if($testimonials_section['testimonials_slider']):
            echo testimonial_slider($testimonials_section['testimonials_slider']);
        endif;?>

      </div>
    </div>
  <?php endif;?>
</div>

Which is very similar to the advanced layout template fields, like this one below.

<?php // VARIABLES $image = get_sub_field(‘image’); $desc = get_sub_field(‘description’); ?>

<div class=”innerTable”> <?php if ($image) : ?> <div class=”tableLeft”> <div class=”imageBlock”> <div class=”image”> ” alt=”Truffles Catering – <?php $image[‘alt’]; ?>” /> </div> </div> </div> <?php endif; ?> <?php if ($desc) : ?> <div class=”tableRight”> <div class=”descBlock”> <div class=”desc”> <?php print $desc; ?> </div> </div> </div> <?php endif; ?> </div>

And lastly, here’s the PHP that I exported and added to the functions.php file.


/**
 * 
 * Adding New Template and Registering it
 * 
 * */

add_action( 'acf/include_fields', function() {
	if ( ! function_exists( 'acf_add_local_field_group' ) ) {
		return;
	}

	acf_add_local_field_group( array(
		'key' => 'group_649377b3715ff',
		'title' => 'Master Page Builder',
		'fields' => array(
			array(
				'key' => 'field_649377b3bddda',
				'label' => 'Master Content Type',
				'name' => 'master_content_type',
				'aria-label' => '',
				'type' => 'repeater',
				'instructions' => '',
				'required' => 0,
				'conditional_logic' => 0,
				'wrapper' => array(
					'width' => '',
					'class' => '',
					'id' => '',
				),
				'collapsed' => '',
				'min' => 0,
				'max' => 0,
				'layout' => 'block',
				'button_label' => 'Add Content Row',
				'sub_fields' => array(
				),
			),
			array(
				'key' => 'field_6493785744c19',
				'label' => 'Navigation Menu',
				'name' => 'navigation_menu',
				'aria-label' => '',
				'type' => 'select',
				'instructions' => '',
				'required' => 0,
				'conditional_logic' => 0,
				'wrapper' => array(
					'width' => '',
					'class' => '',
					'id' => '',
				),
				'choices' => array(
					'main-navigation' => 'Main Navigation',
					'secondary-menu' => 'Secondary Menu',
					'footer-menu' => 'Footer Menu',
					'weddings-menu' => 'Weddings Menu',
					'corporate-functions-menu' => 'Corporate Functions Menu',
					'social-events-menu' => 'Social Events Menu',
					'truffles-express-menu' => 'Truffles Express Menu',
				),
				'default_value' => false,
				'return_format' => 'value',
				'multiple' => 0,
				'allow_null' => 0,
				'ui' => 0,
				'ajax' => 0,
				'placeholder' => '',
			),
		),
		'location' => array(
			array(
				array(
					'param' => 'page_template',
					'operator' => '==',
					'value' => 'template-master-page-builder.php',
				),
			),
		),
		'menu_order' => 0,
		'position' => 'normal',
		'style' => 'default',
		'label_placement' => 'top',
		'instruction_placement' => 'label',
		'hide_on_screen' => '',
		'active' => true,
		'description' => '',
		'show_in_rest' => 0,
	) );
} );

Surely, it can’t be this difficult to use ACF? Can anyone help me get this to be visible so I can add content blocks on our back-end that anyone can add, move, and (most importantly) be seen on the front-end.

Thank you

Solving

Bug in forum site
Certain keywords in the search seem to break the search results page!

https://support.advancedcustomfields.com/forums/search?bbp_search=wrap+main+content

Unread

Creating reusable component fields?

Hi,

I would like to know how could i use ACF to create reusable component fields that can be managed from one place, let’s say inside the options page.

I’ve tried using clone fields for that but the values don’t get synced between the main and the clones. No matter if the slug has a prefix or not.

Right now i’ve created a way in which i use ACF prepare_field filter. This works for simple fields but i’m not sure how could i use the same logic on for example repeater fields.

Here’s the code i’m running right now

add_filter('acf/prepare_field', function($field){

    $current_screen = get_current_screen();
    if($current_screen && $current_screen->id == 'toplevel_page_theme-settings') return $field;

    $components = get_field('components', 'option');

    foreach($components as $component){

        if(array_key_exists($field['_name'], $component)){
            
            if(isset($field['sub_fields'])){
                   
                foreach($field['sub_fields'] as $field_key => $sub_field){
                    foreach($component[$field['_name']] as $sub_component){
                        if(array_key_exists($sub_field['_name'], $sub_component)){
                            
                            //$field['sub_fields'][$field_key]['value'] = $sub_component[$sub_field['_name']];
                            //consoleLog([$field, $sub_field, $sub_component[$sub_field['_name']]]);

                        }
                    }
                }
            }else{
                $field['value'] = $component[$field['_name']];
            }
            
        }

    }

    return $field;
    
},10,3)

And here’s the ACF output for components field group

{
                "key": "field_638edca18a922",
                "label": "Components",
                "name": "",
                "aria-label": "",
                "type": "tab",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "placement": "left",
                "endpoint": 0
            },
            {
                "key": "field_638edcad8a923",
                "label": "Components",
                "name": "components",
                "aria-label": "",
                "type": "flexible_content",
                "instructions": "Reusable components that can be managed from one place",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "layouts": {
                    "layout_638edcb3c4b41": {
                        "key": "layout_638edcb3c4b41",
                        "name": "get_in_touch",
                        "label": "Get In Touch",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_638edcc28a924",
                                "label": "Heading",
                                "name": "get_in_touch_heading",
                                "aria-label": "",
                                "type": "textarea",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "maxlength": "",
                                "rows": 3,
                                "placeholder": "",
                                "new_lines": ""
                            },
                            {
                                "key": "field_638edcd28a925",
                                "label": "Button",
                                "name": "get_in_touch_button",
                                "aria-label": "",
                                "type": "link",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "return_format": "array"
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    "layout_638f209874700": {
                        "key": "layout_638f209874700",
                        "name": "icon_group",
                        "label": "Icon group",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_638f20b774701",
                                "label": "Icon group",
                                "name": "icon_group",
                                "aria-label": "",
                                "type": "repeater",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "layout": "table",
                                "min": 0,
                                "max": 0,
                                "collapsed": "",
                                "button_label": "Add Row",
                                "rows_per_page": 20,
                                "sub_fields": [
                                    {
                                        "key": "field_638f20ca74702",
                                        "label": "Icon",
                                        "name": "icon",
                                        "aria-label": "",
                                        "type": "image",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "return_format": "array",
                                        "library": "all",
                                        "min_width": "",
                                        "min_height": "",
                                        "min_size": "",
                                        "max_width": "",
                                        "max_height": "",
                                        "max_size": "",
                                        "mime_types": "",
                                        "preview_size": "thumbnail",
                                        "parent_repeater": "field_638f20b774701"
                                    },
                                    {
                                        "key": "field_638f20da74703",
                                        "label": "Background",
                                        "name": "background",
                                        "aria-label": "",
                                        "type": "color_picker",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "enable_opacity": 0,
                                        "return_format": "string",
                                        "parent_repeater": "field_638f20b774701"
                                    }
                                ]
                            }
                        ],
                        "min": "",
                        "max": ""
                    }
                },
                "min": "",
                "max": "",
                "button_label": "Add component"
            }

For “Get In Touch” gield group it works but for “Icon Group” i’m not sure how to exactly achieve that.

Solving

ACF Not working inside WordPress Loop

I’m trying to add a text acf to a custom page template with a custom posts loop.

There are other ACFs on the page however my ACF does not show on the front end unless I place it outside the loop. Below is my code. My call to the ACF in question is <?php the_field(‘post_archive_subheading’); ?> and it won’t work inside the loop.


<?php
/* Template Name: Archive Page Custom */
?>
<?php
/**
 * Post archive template.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package XXXXXXX
 */

$featured_posts = get_field( 'featured_posts', get_option( 'page_for_posts' ) );
$not_in         = array();

if ( $featured_posts && '' !== $featured_posts && 3 === count( $featured_posts ) ) :
  foreach ( $featured_posts as $featured_post ) :
    $not_in[] = $featured_post->ID;
  endforeach;
endif;

$posts_args    = array(
  'posts_per_page' => '12',
  'post__not_in'   => $not_in,
  'paged'          => get_query_var( 'paged' ) ?: 1,
);
$posts_archive = new WP_Query( $posts_args );

get_header(); ?>

  <main id="main" class="site-main custom-page-content">

    <?php get_template_part( 'template-parts/content', 'page-single-hero' ); ?>
    <div class="entry-content page-content blog">
    <?php the_content(); ?>

  </div><!-- .entry-content -->
    <?php if ( has_nav_menu( 'post-categories' ) ) : ?>

    <nav class="post-categories-navigation" aria-label="<?php esc_attr_e( 'Post Categories Navigation', 'ventura-county-coast' ); ?>">
      <button
        id="toggle-categories"
        class="toggle-categories-button hidden"
        aria-pressed="false"
        type="button"
      >
        <?php
          esc_html_e( 'Categories', 'ventura-county-coast' );

          vcc_display_svg(
            array(
              'icon'   => 'close',
              'width'  => '16px',
              'height' => '16px',
              'fill'   => '#5b5f60',
            )
          );
        ?>
      </button>
      <?php
      wp_nav_menu(
        array(
          'fallback_cb'    => false,
          'theme_location' => 'post-categories',
          'menu_class'     => 'menu post-categories',
          'container'      => false,
        )
      );
      ?>
    </nav><!-- .post-categories-navigation -->

    <?php endif; ?>

    <?php if ( $featured_posts && 3 === count( $featured_posts ) && ! is_paged() ) : ?>
      <div class="featured-posts">
        <?php
        foreach ( $featured_posts as $key => $featured_post ) :
          if ( 1 === $key ) :
            ?>
            <div class="featured-end-wrap">
            <?php
          endif;
          ?>
          <div class="featured featured-<?php echo esc_attr( $key + 1 ); ?>">
          <?php
          vcc_display_card(
            array(
              'image' => get_the_post_thumbnail_url( $featured_post->ID, 'full-width' ),
              'title' => $featured_post->post_title,
              'text'  => vcc_get_the_excerpt(
                array(
                  'post' => $featured_post->ID,
                )
              ),
              'class' => '',
              'url'   => get_permalink( $featured_post->ID ),
            )
          );
          ?>
          </div><!-- .featured-# -->

          <?php
          if ( 2 === $key ) :
            ?>
            </div><!-- .featured-end-wrap -->
            <?php
          endif;

        endforeach;
        ?>
      </div><!-- .featured-posts -->
      <?php endif; // $featured_posts ?>

      <?php
      /* Start the Custom Loop */
      $counter = 0;

      if ( $posts_archive->have_posts() ) :
        ?>
        <div class="grid posts-grid">
        <?php

        while ( $posts_archive->have_posts() ) :
          $posts_archive->the_post();
          ?>
          <div class="col col-4 col-md-6 col-sm">
          <?php the_field('post_archive_subheading'); ?>
          <?php
          vcc_display_card(
            array(
              'image' => get_the_post_thumbnail_url( get_the_ID(), 'full-width' ),
              'title' => get_the_title(),
              'text'  => vcc_get_the_excerpt(),
              'class' => '',
              'url'   => get_the_permalink(),
            )
          );
          ?>

          <?php if ( 2 === $counter ) : ?>
            </div><!-- .col.col-4 -->
            </div><!-- .grid -->
            <?php get_template_part( 'template-parts/mailchimp-newsletter' ); ?>

            
            <div class="grid posts-grid"><!-- Open a new .grid -->
          <?php else : ?>
            </div><!-- .col.col-4 -->
          <?php endif; ?>

          <?php
          $counter++;

        endwhile;
        wp_reset_postdata();
        vcc_display_numeric_pagination( $posts_args, $posts_archive );
        ?>

      </div><!-- .grid -->
    <?php
    else :

      get_template_part( 'template-parts/content', 'none' );

    endif;
    ?>
  </main><!-- #main -->

<?php get_footer(); ?>

Helping

Front-End Form won't save when not logged in?

For some reason, my acf field won’t save when we are not logged in. Here is an example on my code:

<?php 

acf_form_head();
get_header(); 
acf_enqueue_uploader();

 ?>
<style>

    section.fusion-tb-header {
    display: none;
}

.avada-page-titlebar-wrapper {
    display: none;
}

section.fusion-tb-footer.fusion-footer {
    display: none;
}

div#wpadminbar{
    display: none!important;
}

a#toTop {
    display: none;
}

a.acf-button.button {
    display: block;
    border: solid 1px #c6d6e3;
    text-align: center;
    background: #c6d6e3;
    color: #fff;
}

input.acf-button.button.button-primary.button-large {
    background-color: #4a5f77;
    border: 0px;
    color: #fff;
    width: 96%;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin: 0 auto;
    display: block;
}
</style>
<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
    <?php while ( have_posts() ) : the_post(); ?>
        <?php acf_form(array(
            'post_id'       => 123,
            'field_groups' => array('group_62e4b1a600eab'),
            'post_author' => 6,
            'kses' => false,
            'form_attributes' => array(
            'enctype' => 'multipart/form-data',
          )
        )); ?>
    <?php endwhile; ?>
  <div class="buffer" style="display:  block; height: 600px; width: 100%;"></div>

  </main><!-- .site-main -->
</div>
             
<script src="https://asapwellmind.wpengine.com/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf.min.js?ver=5.11" id="acf-js"></script>
<script src="https://asapwellmind.wpengine.com/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf-input.min.js?ver=5.11" id="acf-input-js"></script>
<script src="https://asapwellmind.wpengine.com/wp-content/plugins/advanced-custom-fields-pro/assets/build/js/pro/acf-pro-input.min.js?ver=5.11" id="acf-pro-input-js"></script>
<script src="https://asapwellmind.wpengine.com/wp-content/plugins/advanced-custom-fields-pro/assets/inc/select2/4/select2.full.min.js?ver=4.0" id="select2-js"></script>
<?php get_footer(); ?>

Solving

Repeater field – row expiration with date and time picker

Hello,

I am using ACF PRO and I have created a few fields for a home page slider and I am trying to set an expiration date for each slide (each row of ACF) for more than a week already. I have tried to follow a few posts on the internet but nothing actually worked.

I have created a field expiry_date at Custom Fields in the Back end using date time picker but I have no clue and succes on the codding to check if the date has passed = remove the row.

Here is my current code on my home page:

<?php if( have_rows('slider1')): ?>

<div class="main-slider" id="main-slider">
  <div class="slider big-slider slider-wrap">

    <?php while ( have_rows('slider1') ): the_row();
	
			$highlight2 = get_sub_field('highlight1');
			$heading2 = get_sub_field('heading1');
			$date2 = get_sub_field('dateandtime1');
			$live2 = get_sub_field('live1');
			$description2 = get_sub_field('description1');
			$linktext2 = get_sub_field('linktext1');
			$button2 = get_sub_field('button1');
			$image2 = get_sub_field('sliderimage1');
	?>
		
    <div class="slide slick-bg" style="background-image:url(<?php echo $image2['url'];?>">
      <div class="container-fluid position-relative h-100">
        <div class="slider-content h-100">
          <div class="row align-items-center h-100">
            <div class="col-xl-6 col-lg-12 col-md-12">
              <h3 data-animation-in="fadeInUp" data-delay-in="1"><span class="badge bg-warning text-dark"><?php echo $highlight2;?></span></h3>
              <h1 data-animation-in="fadeInUp" data-delay-in="1"><?php echo $heading2;?></h1>
              <div class="slide-info" data-animation-in="fadeInUp" data-delay-in="1">
                <span><?php echo $date2;?></span> <span class="radius"><?php echo $live2;?></span>
              </div>
              <p data-animation-in="fadeInUp" data-delay-in="1"><?php echo $description2;?>

              <div class="slider-buttons d-flex align-items-center" data-animation-in="fadeInUp" data-delay-in="1">

                <?php if($button2):?>
                <a class="btn hvr-sweep-to-right" href="<?php echo $button2;?>" tabindex="0"><i aria-hidden="true" class="fas fa-plus mr-2"></i><?php echo $linktext2;?></a>
                <?php endif;?>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <?php endwhile; ?>
  </div>
</div>
<?php endif; ?>

Solved

2 loops in a DIVI template page

Hello,

I try to display two loops from a custom post type in a template single page.

The first one is diplayed but not the second.

Thank for your help.

Here my code :

<?php

/*
Template Name: Comptes rendus
*/

get_header();

$show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );

$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );

?>

<div id="main-content">
	<?php
		if ( et_builder_is_product_tour_enabled() ):
			// load fullwidth page in Product Tour mode
			while ( have_posts() ): the_post(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
					<div class="entry-content">
					<?php
						the_content();
					?>
					</div> <!-- .entry-content -->

				</article> <!-- .et_pb_post -->

		<?php endwhile;
		else:
	?>
	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php
				/**
				 * Fires before the title and post meta on single posts.
				 *
				 * @since 3.18.8
				 */
				do_action( 'et_before_post' );
				?>
				<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
					<?php if ( ( 'off' !== $show_default_title && $is_page_builder_used ) || ! $is_page_builder_used ) { ?>
						<div class="et_post_meta_wrapper">
							<h1 class="entry-title"><?php the_title(); ?></h1>

						
					<?php

$query2021 = new WP_Query( array( 
'post_type' => 'comptes-rendus',
'orderby' => 'date',
'order'   => 'DESC',

'meta_query' => array(
								array( 
									'key' => 'annee', // name of custom field
									'value' => '2021', // matches exaclty "123", not just 123. This prevents a match for "1234"
									'compare' => 'LIKE' 
								)
)
)
);
// The Query
if ( $query2021->have_posts() ) : ?>
<div class="entry-content" itemprop="text">
<table class="table-cr">
  <thead>
    <tr>
      <th scope="col">Intitulé</th>
      <th scope="col">Date</th>
      <th scope="col">Fichier</th>
      <th scope="col">Poids</th>
    </tr>
  </thead>
<?php // The Loop
$file = get_field('fichier');
while ( $query2021->have_posts() ) : $query2021->the_post(); ?>
  <tbody>
    <tr>
      <td data-label="Intitulé"><?php the_field('intitule'); ?></td>
      <td data-label="Date"><?php the_time( 'j.m.Y' ); ?></td>
      <td data-label="Fichier"><a href="<?php the_field('fichier'); ?>" target="_blank" ><button>Télécharger</button></a></td>
	  <td data-label="Poids"><?php the_field('poids'); ?></td>
    </tr>
<?php endwhile; wp_reset_query();  ?>

</tbody>
</table>
</div>
<?php
$query2020 = new WP_Query( array( 
'post_type' => 'comptes-rendus',
'orderby' => 'date',
'order'   => 'DESC',

'meta_query' => array(
								array( 
									'key' => 'annee', // name of custom field
									'value' => '2020', // matches exaclty "123", not just 123. This prevents a match for "1234"
									'compare' => 'LIKE' 
								)
)
)
);
// The Query
elseif ( $query2020->have_posts() ) : ?>
<div class="entry-content" itemprop="text">
<table class="table-cr">
  <thead>
    <tr>
      <th scope="col">Intitulé</th>
      <th scope="col">Date</th>
      <th scope="col">Fichier</th>
      <th scope="col">Poids</th>
    </tr>
  </thead>
<?php // The Loop
$file = get_field('fichier');
while ( $query2020->have_posts() ) : $query2020->the_post(); ?>
  <tbody>
    <tr>
      <td data-label="Intitulé"><?php the_field('intitule'); ?></td>
      <td data-label="Date"><?php the_time( 'j.m.Y' ); ?></td>
      <td data-label="Fichier"><a href="<?php the_field('fichier'); ?>" target="_blank" ><button>Télécharger</button></a></td>
	  <td data-label="Poids"><?php the_field('poids'); ?></td>
    </tr>
<?php endwhile; wp_reset_query();  ?>

</tbody>
</table>
</div>

						<?php	endif;
						?>
					</div> <!-- .et_post_meta_wrapper -->
				<?php  } ?>

					<div class="entry-content">
					<?php
						do_action( 'et_before_content' );

						the_content();

						wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
					?>
					</div> <!-- .entry-content -->
					<div class="et_post_meta_wrapper">
					<?php
					if ( et_get_option('divi_468_enable') === 'on' ){
						echo '<div class="et-single-post-ad">';
						if ( et_get_option('divi_468_adsense') !== '' ) echo et_core_intentionally_unescaped( et_core_fix_unclosed_html_tags( et_get_option('divi_468_adsense') ), 'html' );
						else { ?>
							<a href="<?php echo esc_url(et_get_option('divi_468_url')); ?>"><img src="<?php echo esc_attr(et_get_option('divi_468_image')); ?>" alt="468" class="foursixeight" /></a>
				<?php 	}
						echo '</div> <!-- .et-single-post-ad -->';
					}

					/**
					 * Fires after the post content on single posts.
					 *
					 * @since 3.18.8
					 */
					do_action( 'et_after_post' );

						if ( ( comments_open() || get_comments_number() ) && 'on' === et_get_option( 'divi_show_postcomments', 'on' ) ) {
							comments_template( '', true );
						}
					?>
					</div> <!-- .et_post_meta_wrapper -->
				</article> <!-- .et_pb_post -->

			<?php endwhile; ?>
			</div> <!-- #left-area -->

			<?php get_sidebar(); ?>
		</div> <!-- #content-area -->
	</div> <!-- .container -->
	<?php endif; ?>
</div> <!-- #main-content -->

<?php

get_footer();

Solved

Missing field inputs on new instance of wordpress

I maintain a wordpress plugin in which we use ACF to add optional fields to the edit page for every post. In production (wordpress 5.4.2), this is working as expected.

When testing this in a new local wordpress instance (5.7.2, with the Classic Editor plugin to bypass Gutenburg), the entire “acf-input” section is missing including the add button for each field.

This is the hook being called to load the fields:


acf_add_local_field_group(
  array(
    'key' => 'group_d5a22594839cd',
    'title' => 'Field group title here',
    'fields' => array(
      array(
        'key' => 'field_496edd4619978',
        'label' => 'Article',
        'name' => 'plugin_prefix_article',
        'type' => 'flexible_content',
        'instructions' => 'Field instructions here',
        'required' => 0,
        'conditional_logic' => 0,
        'wrapper' => array(
          'width' => '',
          'class' => '',
          'id' => '',
        ),
        'layouts' => array(/* removed layouts for verbosity sake */),
        'button_label' => 'Add Article',
        'min' => '',
        'max' => '',
      ),
      array(
        'key' => 'field_55f0cfc948b46',
        'label' => 'Product',
        'name' => 'plugin_prefix_product',
        'type' => 'flexible_content',
        'instructions' => 'Field instructions here',
        'required' => 0,
        'conditional_logic' => 0,
        'wrapper' => array(
          'width' => '',
          'class' => '',
          'id' => '',
        ),
        'layouts' => array(/* removed layouts for verbosity sake */),
        'button_label' => 'Add Product',
        'min' => '',
        'max' => '',
      ),
    ),
    'location' => array(
      array(
        array(
          'param' => 'post_type',
          'operator' => '==',
          'value' => 'post',
        ),
      ),
    ),
    'menu_order' => 10,
    'position' => 'normal',
    'style' => 'default',
    'label_placement' => 'top',
    'instruction_placement' => 'label',
    'hide_on_screen' => '',
    'active' => true,
    'description' => 'Field group description here',
  )
);

This feels like I’m missing something very basic, but I genuinely don’t know what it is.

Solving

Repeater field not working in archive-product.php

Hello!

I am trying to create an FAQ repeater to my archive-product.php (category pages) in WooCommerce + Storefront but unfortunately, it’s not working. It skips right over the “if” statement and just says “Come back later”. Am I missing something here since I’ve never come across an issue like this and didn’t find a solution for this from anywhere else?

Full code of the template:

<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.4.0
*/

defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

/**
* Hook: woocommerce_before_main_content.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
* @hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );

?>
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>

<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description - 10
* @hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
</header>
<?php
if ( woocommerce_product_loop() ) {

/**
* Hook: woocommerce_before_shop_loop.
*
* @hooked woocommerce_output_all_notices - 10
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );

woocommerce_product_loop_start();

if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();

/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );

wc_get_template_part( 'content', 'product' );
}
}

woocommerce_product_loop_end();

/**
* Hook: woocommerce_after_shop_loop.
*
* @hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* @hooked wc_no_products_found - 10
*/
do_action( 'woocommerce_no_products_found' );
}
?>
<div class="container FAQ">
<div class="row">
<div class="col-md-12">
<?php if( have_rows('faq') ):
$i = 1; // Set the increment variable

?>
<div id="accordion">
<?
// loop through the rows of data for the tab header
while ( have_rows('faq') ) : the_row();
?>

<div class="card" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="card-header" id="heading-<?php echo $i;?>">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapse-<?php echo $i;?>">
<span class="accordion-title" itemprop="name"><?php the_sub_field('question'); ?></span>
</button>
</div>

<div id="collapse-<?php echo $i;?>" class="collapse" aria-labelledby="heading-<?php echo $i;?>" data-parent="#accordion">
<div class="card-body" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<span itemprop="text"><?php the_sub_field('answer'); ?></span>
</div>
</div>
</div>

<?php $i++; // Increment the increment variable

endwhile; //End the loop

?>
</div>
<?php
else :

// no rows found
echo 'Come back later';
endif;?>
</div>
</div>
</div>

<?php

/**
* Hook: woocommerce_after_main_content.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );

/**
* Hook: woocommerce_sidebar.
*
* @hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );

get_footer( 'shop' );

Solving

Help with inserting correct code for an image repeater

Hey guys

We use ACF Pro for our company website. I have a repeater field set up which only displays images. When using an empty template file, only inserting the repeater code to collect one image everything is working fine and the image is showing up as expected.

Above mentioned code looks like this:

<?php

if( have_posts() ) : while( have_posts() ) : the_post(  );

the_content(); ?>

<!-- Simple text field -->
<h2 style="margin: 10rem 0"><?php the_field('test-titel'); ?></h2>

<!-- Repeater field -->
<?php if( have_rows( 'post_image' ) ) :

   while( have_rows( 'post_image' ) ) : the_row();

   $image = get_sub_field( 'the_image' ); 
   
   echo '<pre>'
      print_r( $image )
   echo '</pre>'
   
   ?>

   <img style="max-width: 100%" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">

<?php endwhile; endif; ?>

<?php endwhile; endif; ?>

However when inserting the same code in the actual template file together with everything else (like get_header(), html and so on…) the image doesn’t appear anymore.

Also I’m not a fan of squeezing in lots of php code inside the existing html so I’d prefer to put it all above. However I’m not sure if this is possible – if this is what makes it break.

Because when inserting it at the top of the php file (before the html starts in order to make less of a mess) all content disappears and only header and footer is displayed. See excerpt below of my inserted code.

<?php get_header(); ?>

<?php
   // The loop
   if( have_posts() ) : while( have_posts() ) : the_post();

   // Custom image field
   if( have_rows( 'post_image' ) ) :

      while( have_rows( 'post_image' ) ) : the_row();

      $image = get_sub_field( 'the_image' ); ?>

<!-- CATEGORY LAYOUT -->
<div id="kits-main">

   <div class="header-group">
      <p class="header-group__header text-center">tjänster

      <img src="<?php echo get_theme_file_uri( '/images/brand-separator-sm.svg' ); ?>" alt="" class="brand-separator" role="presentation">
         <div class="kits-brand">
            <div class="kits-brand__wrapper">
               <p class="kits-brand__name"><?php the_title(); ?>

               <p class="kits-brand__meaning">something something

            </div>
         </div>
      </div>

<div class="container-lg">

   <!-- BREADCRUMBS AND STUFF STILL NOT IMPLEMENTED -->

   <!-- First pair of boxes -->
   <div class="row">
      <div class="col-lg-6 p-0">
         <div class="column--1">
            <div class="content-wrapper constrained">

               <?php if( !empty( $image ) ): ?>
               <img class="box-img box-img-1" 
               src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
               <?php endif; ?>

            </div> <!-- End .content-wrapper -->
         </div> <!-- End .box-column--1 -->
      </div> <!-- End .col-6 p-0 -->

Last in the php document I close the ifs and whiles.

<?php endwhile; endif;?>
<?php endwhile; endif; ?>

<?php get_footer(); ?>

The result is that nothing is returned, at all. ALL the html is stripped out.

Earlier I put everything inside the div with class .content-wrapper .constrained and while it still didn’t produce any result, at least the other content still showed up as usual. I don’t like this approach though since it’s terribly messy.

Details:
Wp theme used: UnderStrap (latest)
ACF Pro version: 5.9.5
ACF Plugins installed: None

Any help is highly appreciated!

Unread

registering field group adding flex layouts via php

Hello ACF friends,

I am trying to register a field group via PHP and creating the layouts from other field groups, my procedure is as follows:


add_action('acf/init', function() {

    $elements = [
        'image_text'
    ];

    $layouts = [];

    foreach ($elements as $element) {

        $acf_json_data = locate_template("inc/acf/exports/group_" . $element . ".json");
        $data = $acf_json_data ? json_decode(file_get_contents($acf_json_data), true) : [];

        if( !empty($data) ) {
            $key = 'layout_' . $element;

            $layout = [
                'key' => $key,
                'name' => $element,
                'label' => $data[0]['title'],
                'display' => 'block',
                'sub_fields' => $data[0]['fields'],
                'min' => '',
                'max' => ''
            ];

            $layouts[$key] = $layout;
        }
    }

    acf_add_local_field_group(array(
        'key' => 'group_main_content',
        'title' => 'Content',
        'fields' => array(
            array(
                'key' => 'field_main_content_flex_content',
                'label' => 'Content',
                'name' => 'flex_content',
                'type' => 'flexible_content',
                'instructions' => '',
                'required' => 0,
                'conditional_logic' => 0,
                'wrapper' => array(
                    'width' => '',
                    'class' => '',
                    'id' => '',
                ),
                'layouts' => $layouts,
                'button_label' => 'Element hinzufügen',
                'min' => '',
                'max' => '',
            ),
        ),
        'location' => array(
            array(
                array(
                    'param' => 'post_type',
                    'operator' => '==',
                    'value' => 'page',
                ),
            ),
        ),
        'menu_order' => 1,
        'position' => 'acf_after_title',
        'style' => 'default',
        'label_placement' => 'left',
        'instruction_placement' => 'label',
        'hide_on_screen' => array(
            0 => 'the_content',
            1 => 'excerpt',
            2 => 'discussion',
            3 => 'comments',
            4 => 'revisions',
            5 => 'slug',
            6 => 'author',
            7 => 'format',
            8 => 'page_attributes',
            9 => 'featured_image',
            10 => 'categories',
            11 => 'tags',
            12 => 'send-trackbacks',
        ),
        'active' => true,
        'description' => 'beschreibung',
    ));

});

The field group I load as layout looks like this:


[
    {
        "key": "group_image_text",
        "title": "Bild und Text",
        "fields": [
            {
                "key": "field_image_text_image",
                "label": "Bild",
                "name": "image",
                "type": "image",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "return_format": "array",
                "preview_size": "medium",
                "library": "all",
                "min_width": "",
                "min_height": "",
                "min_size": "",
                "max_width": "",
                "max_height": "",
                "max_size": "",
                "mime_types": ""
            },
            {
                "key": "field_image_text_text",
                "label": "Text",
                "name": "text",
                "type": "text",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "",
                "placeholder": "",
                "prepend": "",
                "append": "",
                "maxlength": ""
            }
        ],
        "location": [
            [
                {
                    "param": "post_type",
                    "operator": "==",
                    "value": "post"
                }
            ]
        ],
        "menu_order": 2,
        "position": "normal",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "label",
        "hide_on_screen": "",
        "active": false,
        "description": ""
    }
]

This works quite well so far, and I have 3 questions about it.

1. does adding layouts make sense like this? Should I do it in a different way, or should I leave it better?

2. instead of creating the layouts myself, should I rather use the respective field group as a clone field in the layout?

3. i discovered the following little thing. Through an error I became aware of the validation.php. There I had the problem that in line 403 the filter threw an error, because the key $field[‘_name’] was missing.

At this point I’ve done a debug output of $field before this line. Than i found the following:

If the field group is registered using the backend, I have once in the field an ID (51) and a parent (50) and with each Sub Field likewise an ID () and a parent.

See here:

However, if I register the field via PHP these ID’s are 0 or a string and I wonder if this is a problem:

Thanks for a quick feedback on these questions, and thanks also for your great plugin. 🙂

Solving

Custom Page Builder

Hi, I’m trying to add an accordion to this custom page builder but i cant get it to work. Basically i have added open and closing accordion fields to the json file and each has a title and a wysiwyg editor, but it breaks my site when i try to use it.

json code:

[
    {
        "key": "group_553b8b2752aba",
        "title": "Page Builder",
        "fields": [
            
            {
                "key": "field_553b8b4fc8c3b",
                "label": "Page Sections",
                "name": "acf_page_builder",
                "type": "flexible_content",
                "instructions": "",
                "required": 1,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "button_label": "Add Section",
                "min": "",
                "max": "",
                "layouts": [
                    {
                        "key": "56c0e6afec566",
                        "name": "banner",
                        "label": "Banner Image",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_56c0e6efec56d",
                                "label": "Contained",
                                "name": "contained",
                                "type": "true_false",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_56c0a959e8e90",
                                            "operator": "==",
                                            "value": "1"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "message": "Place in a container?",
                                "default_value": 0
                            },
                            {
                                "key": "field_56c0e712ec56e",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_56c0e6efec56d",
                                            "operator": "==",
                                            "value": "1"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            {
                                "key": "field_56c0e6c8ec56c",
                                "label": "Image",
                                "name": "image",
                                "type": "image",
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "return_format": "url",
                                "preview_size": "medium",
                                "library": "all",
                                "min_width": "",
                                "min_height": "",
                                "min_size": "",
                                "max_width": "",
                                "max_height": "",
                                "max_size": "",
                                "mime_types": ""
                            },
                            {
                                "key": "field_56c0f2dcf1e39",
                                "label": "Text",
                                "name": "use_text",
                                "type": "true_false",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "message": "Place text over image?",
                                "default_value": 0
                            },
                            {
                                "key": "field_56c0f2b0f1e38",
                                "label": "Text on Top of Image",
                                "name": "text_on_image",
                                "type": "wysiwyg",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_56c0f2dcf1e39",
                                            "operator": "==",
                                            "value": "1"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "tabs": "all",
                                "toolbar": "full",
                                "media_upload": 0
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    {
                        "key": "554a765bd3324",
                        "name": "button",
                        "label": "Button",
                        "display": "row",
                        "sub_fields": [
                            {
                                "key": "field_554a777fd3328",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            
                            {
                                "key": "field_554a7667d3325",
                                "label": "Button Text",
                                "name": "button_text",
                                "type": "text",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "maxlength": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_554a7684d3326",
                                "label": "Page Linking",
                                "name": "link_to_page",
                                "type": "select",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "choices": {
                                    "anchor": "ID Anchor",
                                    "external": "External Link",
                                    "internal": "Internal Link"
                                },
                                "default_value": [],
                                "allow_null": 0,
                                "multiple": 0,
                                "ui": 0,
                                "ajax": 0,
                                "placeholder": "",
                                "disabled": 0,
                                "readonly": 0
                            },
                            {
                                "key": "field_55aff9e1ee51e",
                                "label": "Anchor",
                                "name": "button_anchor",
                                "type": "text",
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_554a7684d3326",
                                            "operator": "==",
                                            "value": "anchor"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "#",
                                "append": "",
                                "maxlength": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_554a77f8d332b",
                                "label": "External Link",
                                "name": "external_link",
                                "type": "text",
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_554a7684d3326",
                                            "operator": "==",
                                            "value": "external"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "maxlength": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_554a77c9d332a",
                                "label": "Internal Link",
                                "name": "internal_link",
                                "type": "page_link",
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_554a7684d3326",
                                            "operator": "==",
                                            "value": "internal"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "post_type": [],
                                "taxonomy": [],
                                "allow_null": 0,
                                "multiple": 0
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    {
                        "key": "5540bf0259b1d",
                        "name": "content_grid",
                        "label": "Content Columns",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_56c0b470864df",
                                "label": "IMPORTANT",
                                "name": "",
                                "type": "message",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "message": "<p style=\"color: red;\">This section uses <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\">Bootstrap<\/a> columns. Bootstrap divides the page width by columns in divisions of 12. So for 2 columns use width col-sm-6, for 3 columns use width col-sm-4, and so on. In most cases 'Offset' should be set to 0.<\/p>",
                                "new_lines": "wpautop",
                                "esc_html": 0
                            },
                            {
                                "key": "field_554909228473a",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            {
                                "key": "field_56c0b485864e0",
                                "label": "Wrapper Class",
                                "name": "wrapper_class",
                                "type": "text",
                                "instructions": "i.e. col-sm-4 col-sm-offset-4",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "maxlength": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_5540bf1159b1e",
                                "label": "Content Columns",
                                "name": "content_columns",
                                "type": "repeater",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "collapsed": "",
                                "min": 1,
                                "max": 4,
                                "layout": "table",
                                "button_label": "Add Columns",
                                "sub_fields": [
                                    {
                                        "key": "field_5540c0bb59b1f",
                                        "label": "Content",
                                        "name": "content",
                                        "type": "wysiwyg",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": 70,
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "tabs": "all",
                                        "toolbar": "full",
                                        "media_upload": 1
                                    },
                                    {
                                        "key": "field_554a5878c9372",
                                        "label": "Width",
                                        "name": "width",
                                        "type": "number",
                                        "instructions": "",
                                        "required": 1,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": 15,
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": 3,
                                        "placeholder": "",
                                        "prepend": "col-sm-",
                                        "append": "",
                                        "min": 1,
                                        "max": 12,
                                        "step": 1,
                                        "readonly": 0,
                                        "disabled": 0
                                    },
                                    {
                                        "key": "field_554a57bbc9370",
                                        "label": "Offset",
                                        "name": "offset",
                                        "type": "number",
                                        "instructions": "",
                                        "required": 1,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": 15,
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "placeholder": "",
                                        "prepend": "col-sm-offset-",
                                        "append": "",
                                        "min": 0,
                                        "max": 12,
                                        "step": 1,
                                        "readonly": 0,
                                        "disabled": 0
                                    }
                                ]
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    {
                        "key": "553b90972ce3e",
                        "name": "gallery",
                        "label": "Gallery",
                        "display": "row",
                        "sub_fields": [
                            {
                                "key": "field_553bd89149bd2",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            {
                                "key": "field_56c0ef638f980",
                                "label": "Images per Row",
                                "name": "images_per_row",
                                "type": "number",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": 4,
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "min": 2,
                                "max": 6,
                                "step": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_553b90972ce3f",
                                "label": "Images",
                                "name": "images",
                                "type": "repeater",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "collapsed": "",
                                "min": 1,
                                "max": 8,
                                "layout": "table",
                                "button_label": "Add Image",
                                "sub_fields": [
                                    {
                                        "key": "field_553bd41f82d1e",
                                        "label": "Image",
                                        "name": "image",
                                        "type": "image",
                                        "instructions": "",
                                        "required": 1,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "return_format": "url",
                                        "preview_size": "thumbnail",
                                        "library": "all",
                                        "min_width": "",
                                        "min_height": "",
                                        "min_size": "",
                                        "max_width": "",
                                        "max_height": "",
                                        "max_size": "",
                                        "mime_types": ""
                                    },
                                    {
                                        "key": "field_553bd45b82d1f",
                                        "label": "Title",
                                        "name": "title",
                                        "type": "text",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "placeholder": "",
                                        "prepend": "",
                                        "append": "",
                                        "maxlength": "",
                                        "readonly": 0,
                                        "disabled": 0
                                    },
                                    {
                                        "key": "field_553bd48582d20",
                                        "label": "Caption",
                                        "name": "caption",
                                        "type": "text",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "placeholder": "",
                                        "prepend": "",
                                        "append": "",
                                        "maxlength": "",
                                        "readonly": 0,
                                        "disabled": 0
                                    }
                                ]
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    {
                        "key": "561538dcc6acb",
                        "name": "raw_html",
                        "label": "Raw HTML",
                        "display": "row",
                        "sub_fields": [
                            {
                                "key": "field_56c0eb7227216",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            {
                                "key": "field_561538e6c6acc",
                                "label": "HTML",
                                "name": "html",
                                "type": "textarea",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "maxlength": "",
                                "rows": "",
                                "new_lines": "",
                                "readonly": 0,
                                "disabled": 0
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
					
					{
                        "key": "561538dcw4334t",
                        "name": "accordion_row",
                        "label": "Accordion Row",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_56c0ebgdtgs",
                                "label": "accordion-open",
                                "name": "",
                                "type": "accordion",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "open": 0,
								"multi_expand": 0,
								"endpoint": 0,
                            },
							{
                                "key": "field_56c0eb72strgd",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
							{
								"key": "field_553bd45b2twf",
								"label": "Title",
								"name": "accordion-title",
								"type": "text",
								"instructions": "",
								"required": 0,
								"conditional_logic": 0,
								"wrapper": {
									"width": "",
									"class": "",
									"id": ""
								},
								"default_value": "",
								"placeholder": "",
								"prepend": "",
								"append": "",
								"maxlength": "",
								"readonly": 0,
								"disabled": 0
							},
							{
                                "key": "field_553b8ce8yb45rty",
                                "label": "Content",
                                "name": "content",
                                "type": "wysiwyg",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "tabs": "all",
                                "toolbar": "full",
                                "media_upload": 1
                            },
							{
                                "key": "field_56c0ebgdwc3f5",
                                "label": "accordion-close",
                                "name": "",
                                "type": "accordion",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "open": 0,
								"multi_expand": 0,
								"endpoint": 1,
                            },
                            
                          
                        ],
                        "min": "",
                        "max": ""
                    },
                    
                    {
                        "key": "553b8cd6dbe66",
                        "name": "wysiwyg",
                        "label": "Content Editor",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_553bc590fbc55",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            {
                                "key": "field_553b8ce8c8c3c",
                                "label": "Content",
                                "name": "content",
                                "type": "wysiwyg",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "tabs": "all",
                                "toolbar": "full",
                                "media_upload": 1
                            }
                        ],
                        "min": "",
                        "max": ""
                    }
                ]
            }
        ],
        "location": [
            [
                {
                    "param": "post_type",
                    "operator": "==",
                    "value": "post"
                }
            ],
            [
                {
                    "param": "page_template",
                    "operator": "==",
                    "value": "page-templates\/full-width.php"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "label",
        "hide_on_screen": [
            "the_content"
        ],
        "active": 1,
        "description": ""
    }
]

PHP:

<?php

Class ACF_Page_Builder {

	/**
	 * Check if Advanced Custom Fields is Active
	 * @var (Boolean)
	 */
	private $acf_active;

	/**
	 * Check if Simple Contact Forms is Active
	 * @var (Boolean)
	 */
	private $scf_active;

	/**
	 * The final HTML to return with the section data inluded
	 * @var String
	 */
	private $html;

	/**
	 * Formats that can be used in the acfs_add_support and acfs_remove_support functions
	 * @var Array
	 */
	public $supported_formats;

	/**
	 * Variable to declare whether we should use Bootstrap or not
	 * @var Boolean
	 */
	private $use_bs;

	/**
	 * Constructor of the class. Sets some default values
	 */
	function __construct() {

		include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

		$this->acf_active = is_plugin_active( 'advanced-custom-fields/acf.php' ) || is_plugin_active( 'advanced-custom-fields-pro/acf.php' );

		$this->scf_active = is_plugin_active( 'simple-contact-forms/simple-contact-forms.php' );

		$this->supported_formats = array('post_type', 'page_template');

		$this->use_bs = function_exists('get_field') ? get_field('acfpb_use_bootstrap') : false;

	}

	/**
	 * Enqueue the styles and scripts for the public
	 */
	public function enqueuePublic() {

		wp_enqueue_style( 'acfpb-public', plugin_dir_url( __FILE__ ) . '../public/css/acfpb_styles.css', false, NULL, 'all' );

	}

	/**
	 * Enqueue the styles and scripts for the admin
	 */
	public function enqueueAdmin() {

	}

	/**
	 * Retrieves all the section HTML 
	 * @param  String $name The slug used for the sections. Is 'sections' by default
	 * @return String       The final HTML
	 */
	public function getSectionsHTML( $name, $post_id ) {

		if( !$this->acf_active ) return '';

		if( have_rows( $name, $post_id ) ):

			$s = 1;

			$this->html = '<div id="acfpb_sections">';

			while ( have_rows( $name, $post_id ) ) : the_row();

				$layout = get_row_layout();

				if( method_exists(get_class(), 'getSection_' . $layout ) ) :

					$id = 'section_' . $s;

					$class = 'acfpb_section section-' . $layout;

					$style = get_sub_field('bg') ? 'background-color:' . get_sub_field('bg') : '';

					$contained = (boolean) get_sub_field('contained', false);

					if( !$this->use_bs && $contained ) $contained = false;

					$wrapper = get_sub_field('wrapper_class');

					$this->html .= '<div id="' . $id . '" class="' . $class . '" style="' . $style . '"><div class="sectionwrap">';

						if( $contained ) $this->html .= '<div class="container">';

							if( $contained ) $this->html .= '<div class="row">';

								if( $wrapper !== '' ) $this->html .= '<div class="' . $wrapper . '">';

									$this->html .= $this->{'getSection_' . $layout}();

								if( $wrapper !== '' ) $this->html .= '</div>'; // Wrapper finish

							if( $this->use_bs ) $this->html .= '<div class="clearfix"></div>';

							if( $contained ) $this->html .= '</div>'; // Row finish

						if( $contained ) $this->html .= '</div>'; // Container finish

					$this->html .= '</div></div>'; // Section finish

					$s++;

				endif;

			endwhile;

			$this->html .= '</div>'; // Main Wrapper finish

			return $this->html;

		else :

			return '';

		endif;

	}

	/**
	 * Admin function to add the fields to wordpress. Also figures out where to show them based on the acfs_add_support and acfs_remove_support functions
	 */
	public function addFieldsToWP() {

		if( !$this->acf_active ) return false;

		if( function_exists('acf_add_local_field_group') ) {

			// Get the exported field data

			$json = file_get_contents( plugin_dir_path(__FILE__) . '../admin/acf-fields.json' );

			$json_to_php = json_decode( $json, true );

			$acf_fields_array = $json_to_php[0]['fields'];

			// Check if SCF is included or leave it out of the list of fields if not

			if( !$this->scf_active ) {

				foreach ($acf_fields_array[1]['layouts'] as $key => $data) {
					
					if( $data['name'] === 'simple_contact_forms' ) {

						unset( $acf_fields_array[1]['layouts'][$key] );

						break;

					}

				}

			}

			// Create the rest of the field group

			$meta = array(
				'key' 					=> 'group_553b8b2752aba_pb10192283',
				'title' 				=> 'Page Builder',
				'fields' 				=> $acf_fields_array,
				'menu_order' 			=> 10,
				'position' 				=> 'normal',
				'style' 				=> 'default',
				'label_placement' 		=> 'top',
				'instruction_placement' => 'label',
				'hide_on_screen' 		=> array (),
				'location' 				=> array(),
				'active'				=> 1,
				'description' 			=> '',
			);

			// Filter to get the locations

			$location = apply_filters( 'acfpb_set_locations', array() );

			$l = 0;

			foreach ($this->supported_formats as $format) {

				if( !isset($location[$format]) || empty($location[$format]) ) continue;
					
				$meta['location'][$l] = array();

				foreach ($location[$format] as $place) {

					$meta['location'][$l][] = array(
						'param' 	=> $format,
						'operator' 	=> '==',
						'value' 	=> $place,
					);

					$l++;

				}

			}

			acf_add_local_field_group($meta);

		}

	}

	/**
	 * Get the Banner section.
	 * @return String Final string of this section
	 */
	private function getSection_banner() {

		$class = $this->use_bs ? 'img-responsive' : '';

		$html = '<div class="banner-holder">';

			$html .= '<img src="' . get_sub_field('image') . '" class="' . $class . '" />';

			if( get_sub_field('use_text') ) $html .= '<div class="acfpb-hover-text">' . get_sub_field('text_on_image') . '</div>';

		$html .= '</div>';

		return $html;

	}

	/**
	 * Get the button section.
	 * @return String Final string of this section
	 */
	private function getSection_button() {

		$class = get_sub_field('button_class');

		$text = get_sub_field('button_text');

		switch ( get_sub_field('link_to_page') ) {

			case 'anchor':
				$href = '#' . get_sub_field('button_anchor');
				break;

			case 'external':
				$href = get_sub_field('external_link');
				break;

			case 'internal':
				$href = get_sub_field('internal_link');
				break;
			
			default:
				$href = '#';
				break;

		}

		$html = '<a href="' . $href . '" class="' . $class . '">' . $text . '</a>';

		return $html;

	}

	/**
	 * Get the Content Grid section.
	 * @return String Final string of this section
	 */
	private function getSection_content_grid() {

		$blocks = get_sub_field('content_columns');

		$html = '';

		if( count($blocks) > 0 ) :

	        foreach($blocks as $block) {

	            $html .= '<div class="col-sm-' . $block['width'] . ' col-sm-offset-' . $block['offset'] . '">';

	                $html .= $block['content'];

	            $html .= '</div>';

	        }; 

		endif;

		return $html;

	}

	/**
	 * Get the Gallery section.
	 * @return String Final string of this section
	 */
	private function getSection_gallery() {

		$images = get_sub_field('images');

		$html = '';

		switch ( get_sub_field('images_per_row') ) {

			case '2':
				$first_class = 'col-sm-offset-2';
				$class = 'col-sm-4';
				break;

			case '3':
				$first_class = '';
				$class = 'col-sm-4';
				break;

			case '5':
				$first_class = 'col-sm-offset-1';
				$class = 'col-sm-2';
				break;

			case '6':
				$first_class = '';
				$class = 'col-sm-2';
				break;
			
			default:
				$first_class = '';
				$class = 'col-sm-3';
				break;
		}

		if( count($images) > 0 ) :

			$i = 1;

	        foreach($images as $item) {

	        	if( $i === 1 ) $class .= ' ' . $first_class;

	            $html .= '<div class="' . $class . '">';

	                $html .= '<img src="' . $item['image'] . '" class="' . ($this->use_bs ? 'img-responsive' : '') . '" />';

	                if( $item['title'] !== '' ) $html .= '<h4>' . $item['title'] . '</h4>';

	                if( $item['caption'] !== '' ) $html .= '<p>' . $item['caption'] . '</p>';

	            $html .= '</div>';

	            $i++;

	        }; 

		endif;

		return $html;

	}

	/**
	 * Get the Raw HTML section.
	 * @return String Final string of this section
	 */
	private function getSection_raw_html() {

		$html = get_sub_field('html');

		return $html;

	}

	/**
	 * Get the Simple Contact Forms section.
	 * @return String Final string of this section
	 */
	private function getSection_simple_contact_forms() {

		if( !function_exists('simple_contact_form') ) return '';

        $options = array();

        if( get_sub_field('form_title') !== '' ) $options['form_title'] = get_sub_field('form_title');
        
        if( get_sub_field('button') == true ) {

            $options['button'] = true; 
            $options['form_collapsed'] = true;

        	if( get_sub_field('btn_text') !== '' ) $options['btn_text'] = get_sub_field('btn_text');

        }
        
        if( get_sub_field('email_subject') !== '' ) $options['email_subject'] = get_sub_field('email_subject');

        $options['return'] = true;

        $html = simple_contact_form( $options );

		return $html;

	}

	/**
	 * Get the WYSIWYG section.
	 * @return String Final string of this section
	 */
	private function getSection_wysiwyg() {

		$html = get_sub_field('content');

		return $html;

	}
	
		
	/**
	 * Get the Accordion section.
	 * @return String Final string of this section
	 */
	private function getSection_accordion_row() {

		$blocks = get_sub_field('accordion_row');

		$html = '';

		if( count($blocks) > 0 ) :

	        foreach($blocks as $block) {

	            $html .= '<div class"accordion-title">';

	                $html .= $block['accordion-title'];

	            $html .= '</div>';
				
				$html .= '<div class"accordion-content">';

	                $html .= $block['content'];

	            $html .= '</div>';

	        }; 

		endif;

		return $html;

	}

}

reply

In reply to Number Field – Outputting and Sorting Negative Numbers
December 15, 2023 at 9:03 am

Sorry, it’s list.js – https://raw.githubusercontent.com/javve/list.js/v2.3.1/dist/list.js

var List;List =
/******/ (function() { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./src/add-async.js":
/*!**************************!*\
  !*** ./src/add-async.js ***!
  \**************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 1:0-14 */
/***/ (function(module) {

module.exports = function (list) {
  var addAsync = function addAsync(values, callback, items) {
    var valuesToAdd = values.splice(0, 50);
    items = items || [];
    items = items.concat(list.add(valuesToAdd));

    if (values.length > 0) {
      setTimeout(function () {
        addAsync(values, callback, items);
      }, 1);
    } else {
      list.update();
      callback(items);
    }
  };

  return addAsync;
};

/***/ }),

/***/ "./src/filter.js":
/*!***********************!*\
  !*** ./src/filter.js ***!
  \***********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 1:0-14 */
/***/ (function(module) {

module.exports = function (list) {
  // Add handlers
  list.handlers.filterStart = list.handlers.filterStart || [];
  list.handlers.filterComplete = list.handlers.filterComplete || [];
  return function (filterFunction) {
    list.trigger('filterStart');
    list.i = 1; // Reset paging

    list.reset.filter();

    if (filterFunction === undefined) {
      list.filtered = false;
    } else {
      list.filtered = true;
      var is = list.items;

      for (var i = 0, il = is.length; i < il; i++) {
        var item = is[i];

        if (filterFunction(item)) {
          item.filtered = true;
        } else {
          item.filtered = false;
        }
      }
    }

    list.update();
    list.trigger('filterComplete');
    return list.visibleItems;
  };
};

/***/ }),

/***/ "./src/fuzzy-search.js":
/*!*****************************!*\
  !*** ./src/fuzzy-search.js ***!
  \*****************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module, __webpack_require__ */
/*! CommonJS bailout: module.exports is used directly at 8:0-14 */
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {

var classes = __webpack_require__(/*! ./utils/classes */ "./src/utils/classes.js"),
    events = __webpack_require__(/*! ./utils/events */ "./src/utils/events.js"),
    extend = __webpack_require__(/*! ./utils/extend */ "./src/utils/extend.js"),
    toString = __webpack_require__(/*! ./utils/to-string */ "./src/utils/to-string.js"),
    getByClass = __webpack_require__(/*! ./utils/get-by-class */ "./src/utils/get-by-class.js"),
    fuzzy = __webpack_require__(/*! ./utils/fuzzy */ "./src/utils/fuzzy.js");

module.exports = function (list, options) {
  options = options || {};
  options = extend({
    location: 0,
    distance: 100,
    threshold: 0.4,
    multiSearch: true,
    searchClass: 'fuzzy-search'
  }, options);
  var fuzzySearch = {
    search: function search(searchString, columns) {
      // Substract arguments from the searchString or put searchString as only argument
      var searchArguments = options.multiSearch ? searchString.replace(/ +$/, '').split(/ +/) : [searchString];

      for (var k = 0, kl = list.items.length; k < kl; k++) {
        fuzzySearch.item(list.items[k], columns, searchArguments);
      }
    },
    item: function item(_item, columns, searchArguments) {
      var found = true;

      for (var i = 0; i < searchArguments.length; i++) {
        var foundArgument = false;

        for (var j = 0, jl = columns.length; j < jl; j++) {
          if (fuzzySearch.values(_item.values(), columns[j], searchArguments[i])) {
            foundArgument = true;
          }
        }

        if (!foundArgument) {
          found = false;
        }
      }

      _item.found = found;
    },
    values: function values(_values, value, searchArgument) {
      if (_values.hasOwnProperty(value)) {
        var text = toString(_values[value]).toLowerCase();

        if (fuzzy(text, searchArgument, options)) {
          return true;
        }
      }

      return false;
    }
  };
  events.bind(getByClass(list.listContainer, options.searchClass), 'keyup', list.utils.events.debounce(function (e) {
    var target = e.target || e.srcElement; // IE have srcElement

    list.search(target.value, fuzzySearch.search);
  }, list.searchDelay));
  return function (str, columns) {
    list.search(str, columns, fuzzySearch.search);
  };
};

/***/ }),

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module, __webpack_require__ */
/*! CommonJS bailout: module.exports is used directly at 11:0-14 */
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {

var naturalSort = __webpack_require__(/*! string-natural-compare */ "./node_modules/string-natural-compare/natural-compare.js"),
    getByClass = __webpack_require__(/*! ./utils/get-by-class */ "./src/utils/get-by-class.js"),
    extend = __webpack_require__(/*! ./utils/extend */ "./src/utils/extend.js"),
    indexOf = __webpack_require__(/*! ./utils/index-of */ "./src/utils/index-of.js"),
    events = __webpack_require__(/*! ./utils/events */ "./src/utils/events.js"),
    toString = __webpack_require__(/*! ./utils/to-string */ "./src/utils/to-string.js"),
    classes = __webpack_require__(/*! ./utils/classes */ "./src/utils/classes.js"),
    getAttribute = __webpack_require__(/*! ./utils/get-attribute */ "./src/utils/get-attribute.js"),
    toArray = __webpack_require__(/*! ./utils/to-array */ "./src/utils/to-array.js");

module.exports = function (id, options, values) {
  var self = this,
      init,
      Item = __webpack_require__(/*! ./item */ "./src/item.js")(self),
      addAsync = __webpack_require__(/*! ./add-async */ "./src/add-async.js")(self),
      initPagination = __webpack_require__(/*! ./pagination */ "./src/pagination.js")(self);

  init = {
    start: function start() {
      self.listClass = 'list';
      self.searchClass = 'search';
      self.sortClass = 'sort';
      self.page = 10000;
      self.i = 1;
      self.items = [];
      self.visibleItems = [];
      self.matchingItems = [];
      self.searched = false;
      self.filtered = false;
      self.searchColumns = undefined;
      self.searchDelay = 0;
      self.handlers = {
        updated: []
      };
      self.valueNames = [];
      self.utils = {
        getByClass: getByClass,
        extend: extend,
        indexOf: indexOf,
        events: events,
        toString: toString,
        naturalSort: naturalSort,
        classes: classes,
        getAttribute: getAttribute,
        toArray: toArray
      };
      self.utils.extend(self, options);
      self.listContainer = typeof id === 'string' ? document.getElementById(id) : id;

      if (!self.listContainer) {
        return;
      }

      self.list = getByClass(self.listContainer, self.listClass, true);
      self.parse = __webpack_require__(/*! ./parse */ "./src/parse.js")(self);
      self.templater = __webpack_require__(/*! ./templater */ "./src/templater.js")(self);
      self.search = __webpack_require__(/*! ./search */ "./src/search.js")(self);
      self.filter = __webpack_require__(/*! ./filter */ "./src/filter.js")(self);
      self.sort = __webpack_require__(/*! ./sort */ "./src/sort.js")(self);
      self.fuzzySearch = __webpack_require__(/*! ./fuzzy-search */ "./src/fuzzy-search.js")(self, options.fuzzySearch);
      this.handlers();
      this.items();
      this.pagination();
      self.update();
    },
    handlers: function handlers() {
      for (var handler in self.handlers) {
        if (self[handler] && self.handlers.hasOwnProperty(handler)) {
          self.on(handler, self[handler]);
        }
      }
    },
    items: function items() {
      self.parse(self.list);

      if (values !== undefined) {
        self.add(values);
      }
    },
    pagination: function pagination() {
      if (options.pagination !== undefined) {
        if (options.pagination === true) {
          options.pagination = [{}];
        }

        if (options.pagination[0] === undefined) {
          options.pagination = [options.pagination];
        }

        for (var i = 0, il = options.pagination.length; i < il; i++) {
          initPagination(options.pagination[i]);
        }
      }
    }
  };
  /*
   * Re-parse the List, use if html have changed
   */

  this.reIndex = function () {
    self.items = [];
    self.visibleItems = [];
    self.matchingItems = [];
    self.searched = false;
    self.filtered = false;
    self.parse(self.list);
  };

  this.toJSON = function () {
    var json = [];

    for (var i = 0, il = self.items.length; i < il; i++) {
      json.push(self.items[i].values());
    }

    return json;
  };
  /*
   * Add object to list
   */

  this.add = function (values, callback) {
    if (values.length === 0) {
      return;
    }

    if (callback) {
      addAsync(values.slice(0), callback);
      return;
    }

    var added = [],
        notCreate = false;

    if (values[0] === undefined) {
      values = [values];
    }

    for (var i = 0, il = values.length; i < il; i++) {
      var item = null;
      notCreate = self.items.length > self.page ? true : false;
      item = new Item(values[i], undefined, notCreate);
      self.items.push(item);
      added.push(item);
    }

    self.update();
    return added;
  };

  this.show = function (i, page) {
    this.i = i;
    this.page = page;
    self.update();
    return self;
  };
  /* Removes object from list.
   * Loops through the list and removes objects where
   * property "valuename" === value
   */

  this.remove = function (valueName, value, options) {
    var found = 0;

    for (var i = 0, il = self.items.length; i < il; i++) {
      if (self.items[i].values()[valueName] == value) {
        self.templater.remove(self.items[i], options);
        self.items.splice(i, 1);
        il--;
        i--;
        found++;
      }
    }

    self.update();
    return found;
  };
  /* Gets the objects in the list which
   * property "valueName" === value
   */

  this.get = function (valueName, value) {
    var matchedItems = [];

    for (var i = 0, il = self.items.length; i < il; i++) {
      var item = self.items[i];

      if (item.values()[valueName] == value) {
        matchedItems.push(item);
      }
    }

    return matchedItems;
  };
  /*
   * Get size of the list
   */

  this.size = function () {
    return self.items.length;
  };
  /*
   * Removes all items from the list
   */

  this.clear = function () {
    self.templater.clear();
    self.items = [];
    return self;
  };

  this.on = function (event, callback) {
    self.handlers[event].push(callback);
    return self;
  };

  this.off = function (event, callback) {
    var e = self.handlers[event];
    var index = indexOf(e, callback);

    if (index > -1) {
      e.splice(index, 1);
    }

    return self;
  };

  this.trigger = function (event) {
    var i = self.handlers[event].length;

    while (i--) {
      self.handlers[event][i](self);
    }

    return self;
  };

  this.reset = {
    filter: function filter() {
      var is = self.items,
          il = is.length;

      while (il--) {
        is[il].filtered = false;
      }

      return self;
    },
    search: function search() {
      var is = self.items,
          il = is.length;

      while (il--) {
        is[il].found = false;
      }

      return self;
    }
  };

  this.update = function () {
    var is = self.items,
        il = is.length;
    self.visibleItems = [];
    self.matchingItems = [];
    self.templater.clear();

    for (var i = 0; i < il; i++) {
      if (is[i].matching() && self.matchingItems.length + 1 >= self.i && self.visibleItems.length < self.page) {
        is[i].show();
        self.visibleItems.push(is[i]);
        self.matchingItems.push(is[i]);
      } else if (is[i].matching()) {
        self.matchingItems.push(is[i]);
        is[i].hide();
      } else {
        is[i].hide();
      }
    }

    self.trigger('updated');
    return self;
  };

  init.start();
};

/***/ }),

/***/ "./src/item.js":
/*!*********************!*\
  !*** ./src/item.js ***!
  \*********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 1:0-14 */
/***/ (function(module) {

module.exports = function (list) {
  return function (initValues, element, notCreate) {
    var item = this;
    this._values = {};
    this.found = false; // Show if list.searched == true and this.found == true

    this.filtered = false; // Show if list.filtered == true and this.filtered == true

    var init = function init(initValues, element, notCreate) {
      if (element === undefined) {
        if (notCreate) {
          item.values(initValues, notCreate);
        } else {
          item.values(initValues);
        }
      } else {
        item.elm = element;
        var values = list.templater.get(item, initValues);
        item.values(values);
      }
    };

    this.values = function (newValues, notCreate) {
      if (newValues !== undefined) {
        for (var name in newValues) {
          item._values[name] = newValues[name];
        }

        if (notCreate !== true) {
          list.templater.set(item, item.values());
        }
      } else {
        return item._values;
      }
    };

    this.show = function () {
      list.templater.show(item);
    };

    this.hide = function () {
      list.templater.hide(item);
    };

    this.matching = function () {
      return list.filtered && list.searched && item.found && item.filtered || list.filtered && !list.searched && item.filtered || !list.filtered && list.searched && item.found || !list.filtered && !list.searched;
    };

    this.visible = function () {
      return item.elm && item.elm.parentNode == list.list ? true : false;
    };

    init(initValues, element, notCreate);
  };
};

/***/ }),

/***/ "./src/pagination.js":
/*!***************************!*\
  !*** ./src/pagination.js ***!
  \***************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module, __webpack_require__ */
/*! CommonJS bailout: module.exports is used directly at 5:0-14 */
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {

var classes = __webpack_require__(/*! ./utils/classes */ "./src/utils/classes.js"),
    events = __webpack_require__(/*! ./utils/events */ "./src/utils/events.js"),
    List = __webpack_require__(/*! ./index */ "./src/index.js");

module.exports = function (list) {
  var isHidden = false;

  var refresh = function refresh(pagingList, options) {
    if (list.page < 1) {
      list.listContainer.style.display = 'none';
      isHidden = true;
      return;
    } else if (isHidden) {
      list.listContainer.style.display = 'block';
    }

    var item,
        l = list.matchingItems.length,
        index = list.i,
        page = list.page,
        pages = Math.ceil(l / page),
        currentPage = Math.ceil(index / page),
        innerWindow = options.innerWindow || 2,
        left = options.left || options.outerWindow || 0,
        right = options.right || options.outerWindow || 0;
    right = pages - right;
    pagingList.clear();

    for (var i = 1; i <= pages; i++) {
      var className = currentPage === i ? 'active' : ''; //console.log(i, left, right, currentPage, (currentPage - innerWindow), (currentPage + innerWindow), className);

      if (is.number(i, left, right, currentPage, innerWindow)) {
        item = pagingList.add({
          page: i,
          dotted: false
        })[0];

        if (className) {
          classes(item.elm).add(className);
        }

        item.elm.firstChild.setAttribute('data-i', i);
        item.elm.firstChild.setAttribute('data-page', page);
      } else if (is.dotted(pagingList, i, left, right, currentPage, innerWindow, pagingList.size())) {
        item = pagingList.add({
          page: '...',
          dotted: true
        })[0];
        classes(item.elm).add('disabled');
      }
    }
  };

  var is = {
    number: function number(i, left, right, currentPage, innerWindow) {
      return this.left(i, left) || this.right(i, right) || this.innerWindow(i, currentPage, innerWindow);
    },
    left: function left(i, _left) {
      return i <= _left;
    },
    right: function right(i, _right) {
      return i > _right;
    },
    innerWindow: function innerWindow(i, currentPage, _innerWindow) {
      return i >= currentPage - _innerWindow && i <= currentPage + _innerWindow;
    },
    dotted: function dotted(pagingList, i, left, right, currentPage, innerWindow, currentPageItem) {
      return this.dottedLeft(pagingList, i, left, right, currentPage, innerWindow) || this.dottedRight(pagingList, i, left, right, currentPage, innerWindow, currentPageItem);
    },
    dottedLeft: function dottedLeft(pagingList, i, left, right, currentPage, innerWindow) {
      return i == left + 1 && !this.innerWindow(i, currentPage, innerWindow) && !this.right(i, right);
    },
    dottedRight: function dottedRight(pagingList, i, left, right, currentPage, innerWindow, currentPageItem) {
      if (pagingList.items[currentPageItem - 1].values().dotted) {
        return false;
      } else {
        return i == right && !this.innerWindow(i, currentPage, innerWindow) && !this.right(i, right);
      }
    }
  };
  return function (options) {
    var pagingList = new List(list.listContainer.id, {
      listClass: options.paginationClass || 'pagination',
      item: options.item || "<li><a class='page' href='#'></a></li>",
      valueNames: ['page', 'dotted'],
      searchClass: 'pagination-search-that-is-not-supposed-to-exist',
      sortClass: 'pagination-sort-that-is-not-supposed-to-exist'
    });
    events.bind(pagingList.listContainer, 'click', function (e) {
      var target = e.target || e.srcElement,
          page = list.utils.getAttribute(target, 'data-page'),
          i = list.utils.getAttribute(target, 'data-i');

      if (i) {
        list.show((i - 1) * page + 1, page);
      }
    });
    list.on('updated', function () {
      refresh(pagingList, options);
    });
    refresh(pagingList, options);
  };
};

/***/ }),

/***/ "./src/parse.js":
/*!**********************!*\
  !*** ./src/parse.js ***!
  \**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module, __webpack_require__ */
/*! CommonJS bailout: module.exports is used directly at 1:0-14 */
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {

module.exports = function (list) {
  var Item = __webpack_require__(/*! ./item */ "./src/item.js")(list);

  var getChildren = function getChildren(parent) {
    var nodes = parent.childNodes,
        items = [];

    for (var i = 0, il = nodes.length; i < il; i++) {
      // Only textnodes have a data attribute
      if (nodes[i].data === undefined) {
        items.push(nodes[i]);
      }
    }

    return items;
  };

  var parse = function parse(itemElements, valueNames) {
    for (var i = 0, il = itemElements.length; i < il; i++) {
      list.items.push(new Item(valueNames, itemElements[i]));
    }
  };

  var parseAsync = function parseAsync(itemElements, valueNames) {
    var itemsToIndex = itemElements.splice(0, 50); // TODO: If < 100 items, what happens in IE etc?

    parse(itemsToIndex, valueNames);

    if (itemElements.length > 0) {
      setTimeout(function () {
        parseAsync(itemElements, valueNames);
      }, 1);
    } else {
      list.update();
      list.trigger('parseComplete');
    }
  };

  list.handlers.parseComplete = list.handlers.parseComplete || [];
  return function () {
    var itemsToIndex = getChildren(list.list),
        valueNames = list.valueNames;

    if (list.indexAsync) {
      parseAsync(itemsToIndex, valueNames);
    } else {
      parse(itemsToIndex, valueNames);
    }
  };
};

/***/ }),

/***/ "./src/search.js":
/*!***********************!*\
  !*** ./src/search.js ***!
  \***********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 1:0-14 */
/***/ (function(module) {

module.exports = function (_list) {
  var item, text, columns, searchString, customSearch;
  var prepare = {
    resetList: function resetList() {
      _list.i = 1;

      _list.templater.clear();

      customSearch = undefined;
    },
    setOptions: function setOptions(args) {
      if (args.length == 2 && args[1] instanceof Array) {
        columns = args[1];
      } else if (args.length == 2 && typeof args[1] == 'function') {
        columns = undefined;
        customSearch = args[1];
      } else if (args.length == 3) {
        columns = args[1];
        customSearch = args[2];
      } else {
        columns = undefined;
      }
    },
    setColumns: function setColumns() {
      if (_list.items.length === 0) return;

      if (columns === undefined) {
        columns = _list.searchColumns === undefined ? prepare.toArray(_list.items[0].values()) : _list.searchColumns;
      }
    },
    setSearchString: function setSearchString(s) {
      s = _list.utils.toString(s).toLowerCase();
      s = s.replace(/[-[\]{}()*+?.,\\^$|#]/g, '\\$&'); // Escape regular expression characters

      searchString = s;
    },
    toArray: function toArray(values) {
      var tmpColumn = [];

      for (var name in values) {
        tmpColumn.push(name);
      }

      return tmpColumn;
    }
  };
  var search = {
    list: function list() {
      // Extract quoted phrases "word1 word2" from original searchString
      // searchString is converted to lowercase by List.js
      var words = [],
          phrase,
          ss = searchString;

      while ((phrase = ss.match(/"([^"]+)"/)) !== null) {
        words.push(phrase[1]);
        ss = ss.substring(0, phrase.index) + ss.substring(phrase.index + phrase[0].length);
      } // Get remaining space-separated words (if any)

      ss = ss.trim();
      if (ss.length) words = words.concat(ss.split(/\s+/));

      for (var k = 0, kl = _list.items.length; k < kl; k++) {
        var item = _list.items[k];
        item.found = false;
        if (!words.length) continue;

        for (var i = 0, il = words.length; i < il; i++) {
          var word_found = false;

          for (var j = 0, jl = columns.length; j < jl; j++) {
            var values = item.values(),
                column = columns[j];

            if (values.hasOwnProperty(column) && values[column] !== undefined && values[column] !== null) {
              var text = typeof values[column] !== 'string' ? values[column].toString() : values[column];

              if (text.toLowerCase().indexOf(words[i]) !== -1) {
                // word found, so no need to check it against any other columns
                word_found = true;
                break;
              }
            }
          } // this word not found? no need to check any other words, the item cannot match

          if (!word_found) break;
        }

        item.found = word_found;
      }
    },
    // Removed search.item() and search.values()
    reset: function reset() {
      _list.reset.search();

      _list.searched = false;
    }
  };

  var searchMethod = function searchMethod(str) {
    _list.trigger('searchStart');

    prepare.resetList();
    prepare.setSearchString(str);
    prepare.setOptions(arguments); // str, cols|searchFunction, searchFunction

    prepare.setColumns();

    if (searchString === '') {
      search.reset();
    } else {
      _list.searched = true;

      if (customSearch) {
        customSearch(searchString, columns);
      } else {
        search.list();
      }
    }

    _list.update();

    _list.trigger('searchComplete');

    return _list.visibleItems;
  };

  _list.handlers.searchStart = _list.handlers.searchStart || [];
  _list.handlers.searchComplete = _list.handlers.searchComplete || [];

  _list.utils.events.bind(_list.utils.getByClass(_list.listContainer, _list.searchClass), 'keyup', _list.utils.events.debounce(function (e) {
    var target = e.target || e.srcElement,
        // IE have srcElement
    alreadyCleared = target.value === '' && !_list.searched;

    if (!alreadyCleared) {
      // If oninput already have resetted the list, do nothing
      searchMethod(target.value);
    }
  }, _list.searchDelay)); // Used to detect click on HTML5 clear button

  _list.utils.events.bind(_list.utils.getByClass(_list.listContainer, _list.searchClass), 'input', function (e) {
    var target = e.target || e.srcElement;

    if (target.value === '') {
      searchMethod('');
    }
  });

  return searchMethod;
};

/***/ }),

/***/ "./src/sort.js":
/*!*********************!*\
  !*** ./src/sort.js ***!
  \*********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 1:0-14 */
/***/ (function(module) {

module.exports = function (list) {
  var buttons = {
    els: undefined,
    clear: function clear() {
      for (var i = 0, il = buttons.els.length; i < il; i++) {
        list.utils.classes(buttons.els[i]).remove('asc');
        list.utils.classes(buttons.els[i]).remove('desc');
      }
    },
    getOrder: function getOrder(btn) {
      var predefinedOrder = list.utils.getAttribute(btn, 'data-order');

      if (predefinedOrder == 'asc' || predefinedOrder == 'desc') {
        return predefinedOrder;
      } else if (list.utils.classes(btn).has('desc')) {
        return 'asc';
      } else if (list.utils.classes(btn).has('asc')) {
        return 'desc';
      } else {
        return 'asc';
      }
    },
    getInSensitive: function getInSensitive(btn, options) {
      var insensitive = list.utils.getAttribute(btn, 'data-insensitive');

      if (insensitive === 'false') {
        options.insensitive = false;
      } else {
        options.insensitive = true;
      }
    },
    setOrder: function setOrder(options) {
      for (var i = 0, il = buttons.els.length; i < il; i++) {
        var btn = buttons.els[i];

        if (list.utils.getAttribute(btn, 'data-sort') !== options.valueName) {
          continue;
        }

        var predefinedOrder = list.utils.getAttribute(btn, 'data-order');

        if (predefinedOrder == 'asc' || predefinedOrder == 'desc') {
          if (predefinedOrder == options.order) {
            list.utils.classes(btn).add(options.order);
          }
        } else {
          list.utils.classes(btn).add(options.order);
        }
      }
    }
  };

  var sort = function sort() {
    list.trigger('sortStart');
    var options = {};
    var target = arguments[0].currentTarget || arguments[0].srcElement || undefined;

    if (target) {
      options.valueName = list.utils.getAttribute(target, 'data-sort');
      buttons.getInSensitive(target, options);
      options.order = buttons.getOrder(target);
    } else {
      options = arguments[1] || options;
      options.valueName = arguments[0];
      options.order = options.order || 'asc';
      options.insensitive = typeof options.insensitive == 'undefined' ? true : options.insensitive;
    }

    buttons.clear();
    buttons.setOrder(options); // caseInsensitive
    // alphabet

    var customSortFunction = options.sortFunction || list.sortFunction || null,
        multi = options.order === 'desc' ? -1 : 1,
        sortFunction;

    if (customSortFunction) {
      sortFunction = function sortFunction(itemA, itemB) {
        return customSortFunction(itemA, itemB, options) * multi;
      };
    } else {
      sortFunction = function sortFunction(itemA, itemB) {
        var sort = list.utils.naturalSort;
        sort.alphabet = list.alphabet || options.alphabet || undefined;

        if (!sort.alphabet && options.insensitive) {
          sort = list.utils.naturalSort.caseInsensitive;
        }

        return sort(itemA.values()[options.valueName], itemB.values()[options.valueName]) * multi;
      };
    }

    list.items.sort(sortFunction);
    list.update();
    list.trigger('sortComplete');
  }; // Add handlers

  list.handlers.sortStart = list.handlers.sortStart || [];
  list.handlers.sortComplete = list.handlers.sortComplete || [];
  buttons.els = list.utils.getByClass(list.listContainer, list.sortClass);
  list.utils.events.bind(buttons.els, 'click', sort);
  list.on('searchStart', buttons.clear);
  list.on('filterStart', buttons.clear);
  return sort;
};

/***/ }),

/***/ "./src/templater.js":
/*!**************************!*\
  !*** ./src/templater.js ***!
  \**************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 216:0-14 */
/***/ (function(module) {

var Templater = function Templater(list) {
  var createItem,
      templater = this;

  var init = function init() {
    var itemSource;

    if (typeof list.item === 'function') {
      createItem = function createItem(values) {
        var item = list.item(values);
        return getItemSource(item);
      };

      return;
    }

    if (typeof list.item === 'string') {
      if (list.item.indexOf('<') === -1) {
        itemSource = document.getElementById(list.item);
      } else {
        itemSource = getItemSource(list.item);
      }
    } else {
      /* If item source does not exists, use the first item in list as
      source for new items */
      itemSource = getFirstListItem();
    }

    if (!itemSource) {
      throw new Error("The list needs to have at least one item on init otherwise you'll have to add a template.");
    }

    itemSource = createCleanTemplateItem(itemSource, list.valueNames);

    createItem = function createItem() {
      return itemSource.cloneNode(true);
    };
  };

  var createCleanTemplateItem = function createCleanTemplateItem(templateNode, valueNames) {
    var el = templateNode.cloneNode(true);
    el.removeAttribute('id');

    for (var i = 0, il = valueNames.length; i < il; i++) {
      var elm = undefined,
          valueName = valueNames[i];

      if (valueName.data) {
        for (var j = 0, jl = valueName.data.length; j < jl; j++) {
          el.setAttribute('data-' + valueName.data[j], '');
        }
      } else if (valueName.attr && valueName.name) {
        elm = list.utils.getByClass(el, valueName.name, true);

        if (elm) {
          elm.setAttribute(valueName.attr, '');
        }
      } else {
        elm = list.utils.getByClass(el, valueName, true);

        if (elm) {
          elm.innerHTML = '';
        }
      }
    }

    return el;
  };

  var getFirstListItem = function getFirstListItem() {
    var nodes = list.list.childNodes;

    for (var i = 0, il = nodes.length; i < il; i++) {
      // Only textnodes have a data attribute
      if (nodes[i].data === undefined) {
        return nodes[i].cloneNode(true);
      }
    }

    return undefined;
  };

  var getItemSource = function getItemSource(itemHTML) {
    if (typeof itemHTML !== 'string') return undefined;

    if (/<tr[\s>]/g.exec(itemHTML)) {
      var tbody = document.createElement('tbody');
      tbody.innerHTML = itemHTML;
      return tbody.firstElementChild;
    } else if (itemHTML.indexOf('<') !== -1) {
      var div = document.createElement('div');
      div.innerHTML = itemHTML;
      return div.firstElementChild;
    }

    return undefined;
  };

  var getValueName = function getValueName(name) {
    for (var i = 0, il = list.valueNames.length; i < il; i++) {
      var valueName = list.valueNames[i];

      if (valueName.data) {
        var data = valueName.data;

        for (var j = 0, jl = data.length; j < jl; j++) {
          if (data[j] === name) {
            return {
              data: name
            };
          }
        }
      } else if (valueName.attr && valueName.name && valueName.name == name) {
        return valueName;
      } else if (valueName === name) {
        return name;
      }
    }
  };

  var setValue = function setValue(item, name, value) {
    var elm = undefined,
        valueName = getValueName(name);
    if (!valueName) return;

    if (valueName.data) {
      item.elm.setAttribute('data-' + valueName.data, value);
    } else if (valueName.attr && valueName.name) {
      elm = list.utils.getByClass(item.elm, valueName.name, true);

      if (elm) {
        elm.setAttribute(valueName.attr, value);
      }
    } else {
      elm = list.utils.getByClass(item.elm, valueName, true);

      if (elm) {
        elm.innerHTML = value;
      }
    }
  };

  this.get = function (item, valueNames) {
    templater.create(item);
    var values = {};

    for (var i = 0, il = valueNames.length; i < il; i++) {
      var elm = undefined,
          valueName = valueNames[i];

      if (valueName.data) {
        for (var j = 0, jl = valueName.data.length; j < jl; j++) {
          values[valueName.data[j]] = list.utils.getAttribute(item.elm, 'data-' + valueName.data[j]);
        }
      } else if (valueName.attr && valueName.name) {
        elm = list.utils.getByClass(item.elm, valueName.name, true);
        values[valueName.name] = elm ? list.utils.getAttribute(elm, valueName.attr) : '';
      } else {
        elm = list.utils.getByClass(item.elm, valueName, true);
        values[valueName] = elm ? elm.innerHTML : '';
      }
    }

    return values;
  };

  this.set = function (item, values) {
    if (!templater.create(item)) {
      for (var v in values) {
        if (values.hasOwnProperty(v)) {
          setValue(item, v, values[v]);
        }
      }
    }
  };

  this.create = function (item) {
    if (item.elm !== undefined) {
      return false;
    }

    item.elm = createItem(item.values());
    templater.set(item, item.values());
    return true;
  };

  this.remove = function (item) {
    if (item.elm.parentNode === list.list) {
      list.list.removeChild(item.elm);
    }
  };

  this.show = function (item) {
    templater.create(item);
    list.list.appendChild(item.elm);
  };

  this.hide = function (item) {
    if (item.elm !== undefined && item.elm.parentNode === list.list) {
      list.list.removeChild(item.elm);
    }
  };

  this.clear = function () {
    /* .innerHTML = ''; fucks up IE */
    if (list.list.hasChildNodes()) {
      while (list.list.childNodes.length >= 1) {
        list.list.removeChild(list.list.firstChild);
      }
    }
  };

  init();
};

module.exports = function (list) {
  return new Templater(list);
};

/***/ }),

/***/ "./src/utils/classes.js":
/*!******************************!*\
  !*** ./src/utils/classes.js ***!
  \******************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module, __webpack_require__ */
/*! CommonJS bailout: module.exports is used directly at 24:0-14 */
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {

/**
 * Module dependencies.
 */
var index = __webpack_require__(/*! ./index-of */ "./src/utils/index-of.js");
/**
 * Whitespace regexp.
 */

var re = /\s+/;
/**
 * toString reference.
 */

var toString = Object.prototype.toString;
/**
 * Wrap <code>el</code> in a <code>ClassList</code>.
 *
 * @param {Element} el
 * @return {ClassList}
 * @api public
 */

module.exports = function (el) {
  return new ClassList(el);
};
/**
 * Initialize a new ClassList for <code>el</code>.
 *
 * @param {Element} el
 * @api private
 */

function ClassList(el) {
  if (!el || !el.nodeType) {
    throw new Error('A DOM element reference is required');
  }

  this.el = el;
  this.list = el.classList;
}
/**
 * Add class <code>name</code> if not already present.
 *
 * @param {String} name
 * @return {ClassList}
 * @api public
 */

ClassList.prototype.add = function (name) {
  // classList
  if (this.list) {
    this.list.add(name);
    return this;
  } // fallback

  var arr = this.array();
  var i = index(arr, name);
  if (!~i) arr.push(name);
  this.el.className = arr.join(' ');
  return this;
};
/**
 * Remove class <code>name</code> when present, or
 * pass a regular expression to remove
 * any which match.
 *
 * @param {String|RegExp} name
 * @return {ClassList}
 * @api public
 */

ClassList.prototype.remove = function (name) {
  // classList
  if (this.list) {
    this.list.remove(name);
    return this;
  } // fallback

  var arr = this.array();
  var i = index(arr, name);
  if (~i) arr.splice(i, 1);
  this.el.className = arr.join(' ');
  return this;
};
/**
 * Toggle class <code>name</code>, can force state via <code>force</code>.
 *
 * For browsers that support classList, but do not support <code>force</code> yet,
 * the mistake will be detected and corrected.
 *
 * @param {String} name
 * @param {Boolean} force
 * @return {ClassList}
 * @api public
 */

ClassList.prototype.toggle = function (name, force) {
  // classList
  if (this.list) {
    if ('undefined' !== typeof force) {
      if (force !== this.list.toggle(name, force)) {
        this.list.toggle(name); // toggle again to correct
      }
    } else {
      this.list.toggle(name);
    }

    return this;
  } // fallback

  if ('undefined' !== typeof force) {
    if (!force) {
      this.remove(name);
    } else {
      this.add(name);
    }
  } else {
    if (this.has(name)) {
      this.remove(name);
    } else {
      this.add(name);
    }
  }

  return this;
};
/**
 * Return an array of classes.
 *
 * @return {Array}
 * @api public
 */

ClassList.prototype.array = function () {
  var className = this.el.getAttribute('class') || '';
  var str = className.replace(/^\s+|\s+$/g, '');
  var arr = str.split(re);
  if ('' === arr[0]) arr.shift();
  return arr;
};
/**
 * Check if class <code>name</code> is present.
 *
 * @param {String} name
 * @return {ClassList}
 * @api public
 */

ClassList.prototype.has = ClassList.prototype.contains = function (name) {
  return this.list ? this.list.contains(name) : !!~index(this.array(), name);
};

/***/ }),

/***/ "./src/utils/events.js":
/*!*****************************!*\
  !*** ./src/utils/events.js ***!
  \*****************************/
/*! default exports */
/*! export bind [provided] [no usage info] [missing usage info prevents renaming] */
/*! export debounce [provided] [no usage info] [missing usage info prevents renaming] */
/*! export unbind [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_exports__, __webpack_require__ */
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

var bind = window.addEventListener ? 'addEventListener' : 'attachEvent',
    unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
    prefix = bind !== 'addEventListener' ? 'on' : '',
    toArray = __webpack_require__(/*! ./to-array */ "./src/utils/to-array.js");
/**
 * Bind <code>el</code> event <code>type</code> to <code>fn</code>.
 *
 * @param {Element} el, NodeList, HTMLCollection or Array
 * @param {String} type
 * @param {Function} fn
 * @param {Boolean} capture
 * @api public
 */

exports.bind = function (el, type, fn, capture) {
  el = toArray(el);

  for (var i = 0, il = el.length; i < il; i++) {
    el[i][bind](prefix + type, fn, capture || false);
  }
};
/**
 * Unbind <code>el</code> event <code>type</code>'s callback <code>fn</code>.
 *
 * @param {Element} el, NodeList, HTMLCollection or Array
 * @param {String} type
 * @param {Function} fn
 * @param {Boolean} capture
 * @api public
 */

exports.unbind = function (el, type, fn, capture) {
  el = toArray(el);

  for (var i = 0, il = el.length; i < il; i++) {
    el[i][unbind](prefix + type, fn, capture || false);
  }
};
/**
 * Returns a function, that, as long as it continues to be invoked, will not
 * be triggered. The function will be called after it stops being called for
 * <code>wait</code> milliseconds. If <code>immediate</code> is true, trigger the function on the
 * leading edge, instead of the trailing.
 *
 * @param {Function} fn
 * @param {Integer} wait
 * @param {Boolean} immediate
 * @api public
 */

exports.debounce = function (fn, wait, immediate) {
  var timeout;
  return wait ? function () {
    var context = this,
        args = arguments;

    var later = function later() {
      timeout = null;
      if (!immediate) fn.apply(context, args);
    };

    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) fn.apply(context, args);
  } : fn;
};

/***/ }),

/***/ "./src/utils/extend.js":
/*!*****************************!*\
  !*** ./src/utils/extend.js ***!
  \*****************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 4:0-14 */
/***/ (function(module) {

/*
 * Source: https://github.com/segmentio/extend
 */
module.exports = function extend(object) {
  // Takes an unlimited number of extenders.
  var args = Array.prototype.slice.call(arguments, 1); // For each extender, copy their properties on our object.

  for (var i = 0, source; source = args[i]; i++) {
    if (!source) continue;

    for (var property in source) {
      object[property] = source[property];
    }
  }

  return object;
};

/***/ }),

/***/ "./src/utils/fuzzy.js":
/*!****************************!*\
  !*** ./src/utils/fuzzy.js ***!
  \****************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 1:0-14 */
/***/ (function(module) {

module.exports = function (text, pattern, options) {
  // Aproximately where in the text is the pattern expected to be found?
  var Match_Location = options.location || 0; //Determines how close the match must be to the fuzzy location (specified above). An exact letter match which is 'distance' characters away from the fuzzy location would score as a complete mismatch. A distance of '0' requires the match be at the exact location specified, a threshold of '1000' would require a perfect match to be within 800 characters of the fuzzy location to be found using a 0.8 threshold.

  var Match_Distance = options.distance || 100; // At what point does the match algorithm give up. A threshold of '0.0' requires a perfect match (of both letters and location), a threshold of '1.0' would match anything.

  var Match_Threshold = options.threshold || 0.4;
  if (pattern === text) return true; // Exact match

  if (pattern.length > 32) return false; // This algorithm cannot be used
  // Set starting location at beginning text and initialise the alphabet.

  var loc = Match_Location,
      s = function () {
    var q = {},
        i;

    for (i = 0; i < pattern.length; i++) {
      q[pattern.charAt(i)] = 0;
    }

    for (i = 0; i < pattern.length; i++) {
      q[pattern.charAt(i)] |= 1 << pattern.length - i - 1;
    }

    return q;
  }(); // Compute and return the score for a match with e errors and x location.
  // Accesses loc and pattern through being a closure.

  function match_bitapScore_(e, x) {
    var accuracy = e / pattern.length,
        proximity = Math.abs(loc - x);

    if (!Match_Distance) {
      // Dodge divide by zero error.
      return proximity ? 1.0 : accuracy;
    }

    return accuracy + proximity / Match_Distance;
  }

  var score_threshold = Match_Threshold,
      // Highest score beyond which we give up.
  best_loc = text.indexOf(pattern, loc); // Is there a nearby exact match? (speedup)

  if (best_loc != -1) {
    score_threshold = Math.min(match_bitapScore_(0, best_loc), score_threshold); // What about in the other direction? (speedup)

    best_loc = text.lastIndexOf(pattern, loc + pattern.length);

    if (best_loc != -1) {
      score_threshold = Math.min(match_bitapScore_(0, best_loc), score_threshold);
    }
  } // Initialise the bit arrays.

  var matchmask = 1 << pattern.length - 1;
  best_loc = -1;
  var bin_min, bin_mid;
  var bin_max = pattern.length + text.length;
  var last_rd;

  for (var d = 0; d < pattern.length; d++) {
    // Scan for the best match; each iteration allows for one more error.
    // Run a binary search to determine how far from 'loc' we can stray at this
    // error level.
    bin_min = 0;
    bin_mid = bin_max;

    while (bin_min < bin_mid) {
      if (match_bitapScore_(d, loc + bin_mid) <= score_threshold) {
        bin_min = bin_mid;
      } else {
        bin_max = bin_mid;
      }

      bin_mid = Math.floor((bin_max - bin_min) / 2 + bin_min);
    } // Use the result from this iteration as the maximum for the next.

    bin_max = bin_mid;
    var start = Math.max(1, loc - bin_mid + 1);
    var finish = Math.min(loc + bin_mid, text.length) + pattern.length;
    var rd = Array(finish + 2);
    rd[finish + 1] = (1 << d) - 1;

    for (var j = finish; j >= start; j--) {
      // The alphabet (s) is a sparse hash, so the following line generates
      // warnings.
      var charMatch = s[text.charAt(j - 1)];

      if (d === 0) {
        // First pass: exact match.
        rd[j] = (rd[j + 1] << 1 | 1) & charMatch;
      } else {
        // Subsequent passes: fuzzy match.
        rd[j] = (rd[j + 1] << 1 | 1) & charMatch | ((last_rd[j + 1] | last_rd[j]) << 1 | 1) | last_rd[j + 1];
      }

      if (rd[j] & matchmask) {
        var score = match_bitapScore_(d, j - 1); // This match will almost certainly be better than any existing match.
        // But check anyway.

        if (score <= score_threshold) {
          // Told you so.
          score_threshold = score;
          best_loc = j - 1;

          if (best_loc > loc) {
            // When passing loc, don't exceed our current distance from loc.
            start = Math.max(1, 2 * loc - best_loc);
          } else {
            // Already passed loc, downhill from here on in.
            break;
          }
        }
      }
    } // No hope for a (better) match at greater error levels.

    if (match_bitapScore_(d + 1, loc) > score_threshold) {
      break;
    }

    last_rd = rd;
  }

  return best_loc < 0 ? false : true;
};

/***/ }),

/***/ "./src/utils/get-attribute.js":
/*!************************************!*\
  !*** ./src/utils/get-attribute.js ***!
  \************************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 11:0-14 */
/***/ (function(module) {

/**
 * A cross-browser implementation of getAttribute.
 * Source found here: http://stackoverflow.com/a/3755343/361337 written by Vivin Paliath
 *
 * Return the value for <code>attr</code> at <code>element</code>.
 *
 * @param {Element} el
 * @param {String} attr
 * @api public
 */
module.exports = function (el, attr) {
  var result = el.getAttribute && el.getAttribute(attr) || null;

  if (!result) {
    var attrs = el.attributes;
    var length = attrs.length;

    for (var i = 0; i < length; i++) {
      if (attrs[i] !== undefined) {
        if (attrs[i].nodeName === attr) {
          result = attrs[i].nodeValue;
        }
      }
    }
  }

  return result;
};

/***/ }),

/***/ "./src/utils/get-by-class.js":
/*!***********************************!*\
  !*** ./src/utils/get-by-class.js ***!
  \***********************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 53:0-14 */
/***/ (function(module) {

/**
 * A cross-browser implementation of getElementsByClass.
 * Heavily based on Dustin Diaz's function: http://dustindiaz.com/getelementsbyclass.
 *
 * Find all elements with class <code>className</code> inside <code>container</code>.
 * Use <code>single = true</code> to increase performance in older browsers
 * when only one element is needed.
 *
 * @param {String} className
 * @param {Element} container
 * @param {Boolean} single
 * @api public
 */
var getElementsByClassName = function getElementsByClassName(container, className, single) {
  if (single) {
    return container.getElementsByClassName(className)[0];
  } else {
    return container.getElementsByClassName(className);
  }
};

var querySelector = function querySelector(container, className, single) {
  className = '.' + className;

  if (single) {
    return container.querySelector(className);
  } else {
    return container.querySelectorAll(className);
  }
};

var polyfill = function polyfill(container, className, single) {
  var classElements = [],
      tag = '*';
  var els = container.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp('(^|\\s)' + className + '(\\s|$)');

  for (var i = 0, j = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className)) {
      if (single) {
        return els[i];
      } else {
        classElements[j] = els[i];
        j++;
      }
    }
  }

  return classElements;
};

module.exports = function () {
  return function (container, className, single, options) {
    options = options || {};

    if (options.test && options.getElementsByClassName || !options.test && document.getElementsByClassName) {
      return getElementsByClassName(container, className, single);
    } else if (options.test && options.querySelector || !options.test && document.querySelector) {
      return querySelector(container, className, single);
    } else {
      return polyfill(container, className, single);
    }
  };
}();

/***/ }),

/***/ "./src/utils/index-of.js":
/*!*******************************!*\
  !*** ./src/utils/index-of.js ***!
  \*******************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 3:0-14 */
/***/ (function(module) {

var indexOf = [].indexOf;

module.exports = function (arr, obj) {
  if (indexOf) return arr.indexOf(obj);

  for (var i = 0, il = arr.length; i < il; ++i) {
    if (arr[i] === obj) return i;
  }

  return -1;
};

/***/ }),

/***/ "./src/utils/to-array.js":
/*!*******************************!*\
  !*** ./src/utils/to-array.js ***!
  \*******************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 11:0-14 */
/***/ (function(module) {

/**
 * Source: https://github.com/timoxley/to-array
 *
 * Convert an array-like object into an <code>Array</code>.
 * If <code>collection</code> is already an <code>Array</code>, then will return a clone of <code>collection</code>.
 *
 * @param {Array | Mixed} collection An <code>Array</code> or array-like object to convert e.g. <code>arguments</code> or <code>NodeList</code>
 * @return {Array} Naive conversion of <code>collection</code> to a new <code>Array</code>.
 * @api public
 */
module.exports = function toArray(collection) {
  if (typeof collection === 'undefined') return [];
  if (collection === null) return [null];
  if (collection === window) return [window];
  if (typeof collection === 'string') return [collection];
  if (isArray(collection)) return collection;
  if (typeof collection.length != 'number') return [collection];
  if (typeof collection === 'function' && collection instanceof Function) return [collection];
  var arr = [];

  for (var i = 0, il = collection.length; i < il; i++) {
    if (Object.prototype.hasOwnProperty.call(collection, i) || i in collection) {
      arr.push(collection[i]);
    }
  }

  if (!arr.length) return [];
  return arr;
};

function isArray(arr) {
  return Object.prototype.toString.call(arr) === '[object Array]';
}

/***/ }),

/***/ "./src/utils/to-string.js":
/*!********************************!*\
  !*** ./src/utils/to-string.js ***!
  \********************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 1:0-14 */
/***/ (function(module) {

module.exports = function (s) {
  s = s === undefined ? '' : s;
  s = s === null ? '' : s;
  s = s.toString();
  return s;
};

/***/ }),

/***/ "./node_modules/string-natural-compare/natural-compare.js":
/*!****************************************************************!*\
  !*** ./node_modules/string-natural-compare/natural-compare.js ***!
  \****************************************************************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: module */
/*! CommonJS bailout: module.exports is used directly at 124:0-14 */
/***/ (function(module) {

"use strict";

var alphabet;
var alphabetIndexMap;
var alphabetIndexMapLength = 0;

function isNumberCode(code) {
  return code >= 48 && code <= 57;
}

function naturalCompare(a, b) {
  var lengthA = (a += '').length;
  var lengthB = (b += '').length;
  var aIndex = 0;
  var bIndex = 0;

  while (aIndex < lengthA && bIndex < lengthB) {
    var charCodeA = a.charCodeAt(aIndex);
    var charCodeB = b.charCodeAt(bIndex);

    if (isNumberCode(charCodeA)) {
      if (!isNumberCode(charCodeB)) {
        return charCodeA - charCodeB;
      }

      var numStartA = aIndex;
      var numStartB = bIndex;

      while (charCodeA === 48 && ++numStartA < lengthA) {
        charCodeA = a.charCodeAt(numStartA);
      }
      while (charCodeB === 48 && ++numStartB < lengthB) {
        charCodeB = b.charCodeAt(numStartB);
      }

      var numEndA = numStartA;
      var numEndB = numStartB;

      while (numEndA < lengthA && isNumberCode(a.charCodeAt(numEndA))) {
        ++numEndA;
      }
      while (numEndB < lengthB && isNumberCode(b.charCodeAt(numEndB))) {
        ++numEndB;
      }

      var difference = numEndA - numStartA - numEndB + numStartB; // numA length - numB length
      if (difference) {
        return difference;
      }

      while (numStartA < numEndA) {
        difference = a.charCodeAt(numStartA++) - b.charCodeAt(numStartB++);
        if (difference) {
          return difference;
        }
      }

      aIndex = numEndA;
      bIndex = numEndB;
      continue;
    }

    if (charCodeA !== charCodeB) {
      if (
        charCodeA < alphabetIndexMapLength &&
        charCodeB < alphabetIndexMapLength &&
        alphabetIndexMap[charCodeA] !== -1 &&
        alphabetIndexMap[charCodeB] !== -1
      ) {
        return alphabetIndexMap[charCodeA] - alphabetIndexMap[charCodeB];
      }

      return charCodeA - charCodeB;
    }

    ++aIndex;
    ++bIndex;
  }

  if (aIndex >= lengthA && bIndex < lengthB && lengthA >= lengthB) {
    return -1;
  }

  if (bIndex >= lengthB && aIndex < lengthA && lengthB >= lengthA) {
    return 1;
  }

  return lengthA - lengthB;
}

naturalCompare.caseInsensitive = naturalCompare.i = function(a, b) {
  return naturalCompare(('' + a).toLowerCase(), ('' + b).toLowerCase());
};

Object.defineProperties(naturalCompare, {
  alphabet: {
    get: function() {
      return alphabet;
    },

    set: function(value) {
      alphabet = value;
      alphabetIndexMap = [];

      var i = 0;

      if (alphabet) {
        for (; i < alphabet.length; i++) {
          alphabetIndexMap[alphabet.charCodeAt(i)] = i;
        }
      }

      alphabetIndexMapLength = alphabetIndexMap.length;

      for (i = 0; i < alphabetIndexMapLength; i++) {
        if (alphabetIndexMap[i] === undefined) {
          alphabetIndexMap[i] = -1;
        }
      }
    },
  },
});

module.exports = naturalCompare;

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		if(__webpack_module_cache__[moduleId]) {
/******/ 			return __webpack_module_cache__[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	// module exports must be returned from runtime so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__("./src/index.js");
/******/ })()
;
//# sourceMappingURL=list.js.map

In reply to acf/load_field not displaying values
January 17, 2023 at 6:41 pm

Sorry, it’s a lot of code, but thank you for your time. I don’t know the best way to share it, but hopefully this is okay.

I’m using this filter:

add_filter('acf/load_field/key=field_604de6ee3ffc6', 'acf_load_post_type_groups');

to add subfields to a field of type “Group” (because I need them to be dynamic).

Here is the group field:

acf_add_local_field_group(array(
	'key' => 'group_604dda92ef574',
	'title' => 'Archives',
	'fields' => array(
		array(
			'key' => 'field_604de6ee3ffc6',
			'label' => 'Archives',
			'name' => 'archive_options',
			'aria-label' => '',
			'type' => 'group',
			'instructions' => 'Archive pages are lists such as the main blog page, search results, and category and tag pages. Choose layout, appearance, and other options for such pages from the list below for each post type.',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'layout' => 'block',
			'acfe_seamless_style' => 0,
			'acfe_group_modal' => 0,
			'acfe_group_modal_close' => 0,
			'acfe_group_modal_button' => '',
			'acfe_group_modal_size' => 'large',
			'sub_fields' => '',
		),
	),
	'location' => array(
		array(
			array(
				'param' => 'options_page',
				'operator' => '==',
				'value' => 'theme-options',
			),
		),
	),
	'menu_order' => 10,
	'position' => 'normal',
	'style' => 'seamless',
	'label_placement' => 'top',
	'instruction_placement' => 'label',
	'hide_on_screen' => '',
	'active' => true,
	'description' => '',
	'show_in_rest' => 0,
	'acfe_display_title' => '',
	'acfe_autosync' => '',
	'acfe_form' => 0,
	'acfe_meta' => array(
		'604dddb8749bf' => array(
			'acfe_meta_key' => '',
			'acfe_meta_value' => '',
		),
	),
	'acfe_note' => '',
));

The ‘sub_fields’ => ”, part is getting loaded from a function in functions.php using that filter.

Here’s the function:

(ATTACHMENT-1)

Here’s what I get when I look at the php that is being generated by ACF:

(ATTACHMENT-2)

And here’s how it looks on my Theme Options page:

archive-options-page

Each post type has the same set of options. Everything else on the options page is saving just fine, but not this stuff.

My fields are getting generated but nothing is saving. I originally said that it was saving to the database, but it’s not now.

The database looks kind of weird, too:

acf-database-rows

Any idea what I’m doing wrong? I assume there’s something seriously wrong with that function even though the fields are getting generated.

1-load-sub-f....txt

2-field-grou....txt

In reply to 2 loops in a DIVI template page
June 11, 2021 at 11:11 pm

Ok, i resolve myself my problem.
My new code is :

<?php

/*
Template Name: Comptes rendus
*/

get_header();

$show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );

$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );

?>

<div id="main-content">
	<?php
		if ( et_builder_is_product_tour_enabled() ):
			// load fullwidth page in Product Tour mode
			while ( have_posts() ): the_post(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
					<div class="entry-content">
					<?php
						the_content();
					?>
					</div> <!-- .entry-content -->

				</article> <!-- .et_pb_post -->

		<?php endwhile;
		else:
	?>
	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php
				/**
				 * Fires before the title and post meta on single posts.
				 *
				 * @since 3.18.8
				 */
				do_action( 'et_before_post' );
				?>
				<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
					<?php if ( ( 'off' !== $show_default_title && $is_page_builder_used ) || ! $is_page_builder_used ) { ?>
						<div class="et_post_meta_wrapper">
							<h1 class="entry-title"><?php the_title(); ?></h1>
						</div> <!-- .et_post_meta_wrapper -->
				<?php  } ?>

					<div class="entry-content">
					<?php
						do_action( 'et_before_content' );
			

$query2021 = new WP_Query( array( 
'post_type' => 'comptes-rendus',
'orderby' => 'date',
'order'   => 'DESC',
'meta_query' => array(
						array( 
						'key' => 'annee', // name of custom field
						'value' => '2021', // matches exaclty "123", not just 123. This prevents a match for "1234"
						'compare' => 'LIKE' 
					)
)
)
);
						// The Query
if ( $query2021->have_posts() ) : ?>
<div class="entry-content" itemprop="text">
<table class="table-cr">
  <thead>
    <tr>
      <th scope="col">Intitulé</th>
      <th scope="col">Date</th>
      <th scope="col">Fichier</th>
      <th scope="col">Poids</th>
    </tr>
  </thead>
<?php // The Loop
$file = get_field('fichier');
while ( $query2021->have_posts() ) : $query2021->the_post(); ?>
  <tbody>
    <tr>
      <td data-label="Intitulé"><?php the_field('intitule'); ?></td>
      <td data-label="Date"><?php the_time( 'j.m.Y' ); ?></td>
      <td data-label="Fichier"><a href="<?php the_field('fichier'); ?>" target="_blank" ><button>Télécharger</button></a></td>
	  <td data-label="Poids"><?php the_field('poids'); ?></td>
    </tr>

</tbody>
<? endwhile; ?>
</table>
</div>
<?php endif ;

$query2020 = new WP_Query( array( 
'post_type' => 'comptes-rendus',
'orderby' => 'date',
'order'   => 'DESC',
'meta_query' => array(
						array( 
						'key' => 'annee', // name of custom field
						'value' => '2020', // matches exaclty "123", not just 123. This prevents a match for "1234"
						'compare' => 'LIKE' 
					)
)
)
);
						// The Query
if ( $query2020->have_posts() ) : ?>
<div class="entry-content" itemprop="text">
<table class="table-cr">
  <thead>
    <tr>
      <th scope="col">Intitulé</th>
      <th scope="col">Date</th>
      <th scope="col">Fichier</th>
      <th scope="col">Poids</th>
    </tr>
  </thead>
<?php // The Loop
$file = get_field('fichier');
while ( $query2020->have_posts() ) : $query2020->the_post(); ?>
  <tbody>
    <tr>
      <td data-label="Intitulé"><?php the_field('intitule'); ?></td>
      <td data-label="Date"><?php the_time( 'j.m.Y' ); ?></td>
      <td data-label="Fichier"><a href="<?php the_field('fichier'); ?>" target="_blank" ><button>Télécharger</button></a></td>
	  <td data-label="Poids"><?php the_field('poids'); ?></td>
    </tr>

</tbody>
<? endwhile; ?>
</table>
</div>
<?php endif; wp_reset_postdata(); ?>
					
					
					</div> <!-- .entry-content -->
					<div class="et_post_meta_wrapper">
					<?php
					
					/**
					 * Fires after the post content on single posts.
					 *
					 * @since 3.18.8
					 */
					do_action( 'et_after_post' );

						
					?>
					</div> <!-- .et_post_meta_wrapper -->
				</article> <!-- .et_pb_post -->

			<?php endwhile; wp_reset_postdata(); ?>
			
			</div> <!-- #left-area -->

			<?php get_sidebar(); ?>
		</div> <!-- #content-area -->
	</div> <!-- .container -->
	<?php endif; ?>
</div> <!-- #main-content -->

<?php

get_footer();

Thank you !

In reply to List posts by date picker with pagination
May 10, 2021 at 11:55 pm

It’s not that I’m apposed to sharing, not really anything super secret, but the scope of what I have is too huge to share on a forum.

In order to get pagination to work correctly you need to use a pre_get_posts filter on on the archive. Or at least that is the easiest way for me to do it. I suppose that you can do it with get_posts(), but it would be more difficult. When you modify the main query then you can use built in WP functions for the pagination links.

For example, here is my pagination code on one site that uses a simple previous/next link, I use my own function because I wrap the links in bootstrap columns.


function events_nav_links() {
  if (!get_previous_posts_link() && !get_next_posts_link()) {
    return;
  }
  ?>
    <div class="row events-archive-nav" style="margin-bottom: 2em;">
      <div class="col-6 text-left previous">
        <?php previous_posts_link("&laquo; Earlier Events"); ?>
      </div>
      <div class="col-6 text-right next">
        <?php next_posts_link("Later Events &raquo;"); ?>
      </div>
    </div>
  <?php 
}

This one uses pagination links to show page numbers


// maybe page links
$current_page = max(1, get_query_var('paged'));
$args = array(
  'base' => get_pagenum_link(1).'%_%',
  'format' => 'page/%#%/',
  'prev_text' => '<i class="fal fa-chevron-left"></i>',
  'next_text' => '<i class="fal fa-chevron-right"></i>',
  'current' => $current_page,
  'mid_size' => 5,
  'type' => 'array'
);
$page_links = paginate_links($args);
if (!empty($page_links)) {
  ?>
    <div class="row">
      <div class="col-12 event-page-links number-page-links">
        <div class="row justify-content-center">
          <?php 
            foreach ($page_links as $link) {
              //$link = str_replace('//', '/', $link);
              $extra_classes = array();
              if (preg_match('/(prev|next)/', $link)) {
                $extra_classes[] = 'icon';
              } elseif (preg_match('/current/', $link)) {
                $extra_classes[] = 'current';
              } else {
                $extra_classes[] = 'page';
              }
              $class = '';
              if (!empty($extra_classes)) {
                $class = ' '.implode(' ', $extra_classes);
              }
              ?>
                <div class="col-auto link<?php echo $class; ?>">
                  <?php echo $link; ?>
                </div>
              <?php 
            }
          ?>
        </div>
      </div>
    </div>
  <?php 
} // end if page links

Like I said, I don’t know if it’s possible to do something similar using get_posts() in the template, but it will be more difficult. I try to always use built in WP functions when I can and using WP’s built in pagination functions are easier than trying to build something yourself. Altering the main query through a pre_get_posts_filter is just easier.

the following is a pre_get_psots filter from a site that only shows current and future events in the archive


function events_archive_only_children($query) {
  if (is_admin() || !$query->is_main_query()) {
    return;
  }
  // tests to make sure that we are displaying an event page
  if (!isset($query->query_vars) ||
      !isset($query->query_vars['post_type']) ||
      $query->query_vars['post_type'] != $this->post_type) {
    // test for event-category tax
    if (!isset($query->query_vars) ||
        !isset($query->query_vars['event-category'])) {
      // test for event-tag tax
      if (!isset($query->query_vars) ||
          !isset($query->query_vars['event-tag'])) {
        // test for event-type
        if (!isset($query->query_vars) ||
            !isset($query->query_vars['event-type'])) {
          // text for event-visitor-type
          if (!isset($query->query_vars) ||
              !isset($query->query_vars['event-visitor-type'])) {
            // not of the possible query vars for events is set
            return;
          }
        }
      }
    }
  }
  // double check we are not on a single page
  if (is_single()) {
    return;
  }
  
  // custom query parameters (custom search form) that might be set
  // if visitor's browser does not support JS
  // redirect to correct URL based on event rewrite rules
  // custom taxonomies include event type and visitor type
  $type = false;
  $visitor = false;
  if (isset($_GET['e-type']) && !empty($_GET['e-type'])) {
    $type = $_GET['e-type'];
  }
  if (isset($_GET['e-visitor']) && !empty($_GET['e-visitor'])) {
    $visitor = $_GET['e-visitor'];
  }
  if ($type || $visitor) {
    $url = '/event/';
    if ($type) {
      $url .= 'type/'.$type.'/';
    }
    if ($visitor) {
      $url .= 'visitor/'.$visitor.'/';
    }
    wp_redirect($url, 301);
    exit;
  }
  
  // posts_per_page
  // setting on options page allows client to set
  if (function_exists('get_field')) {
    $post_id = $this->options_page;
    $posts_per_page = get_field('events_per_page', 'events_options');
    if ($posts_per_page === 0) {
      $posts_per_page = -1;
    }
    $query->set('posts_per_page', $posts_per_page);
  }
  
  // this framework uses parent/child events
  // to allow multiple event start and and dates
  // and recurring events
  // only show child events on the admin
  $query->set('post_parent__not_in', array('0'));
  
  
  if (isset($query->query['year'])) {
    // doing a date query
    // The following converts standard WP date searches
    // into a meta query on start & end dates ACF date/time fields
    // and removes the WP date query
    // shows any event starting in the selected year/month/day
    $date = $query->query['year'].'-';
    unset($query->query['year']);
    $query->query_vars['year'] = '';
    if (isset($query->query['monthnum'])) {
      $date .= $query->query['monthnum'].'-';
      unset($query->query['monthnum']);
      $query->query_vars['monthnum'] = '';
    };
    if (isset($query->query['day'])) {
      $date .= $query->query['day'];
      unset($query->query['day']);
      $query->query_vars['day'] = '';
    };
    $meta_query = array(
      'relation' => 'AND',
      'start_date_clause' => array(
        'key' => 'start_date',
        'value' => $date,
        'compare' => 'LIKE',
      ),
      'end_date_clause' => array(
        'key' => 'end_date',
        'value' => date('Y-m-d H:i:s'),
        'compare' => '>',
        'type' => 'DATETIME'
      )
    );
  } else {
    // not doing a date query
    // add standard meta query to only show current or upcoming events
    $meta_query = array(
      'relation' => 'AND',
      'start_date_clause' => array(
        'key' => 'start_date',
        'compare' => 'EXISTS',
      ),
      'end_date_clause' => array(
        'key' => 'end_date',
        'value' => date('Y-m-d H:i:s'),
        'compare' => '>',
        'type' => 'DATETIME'
      )
    );
  }
  $query->set('meta_query', $meta_query);
  
  // order by start/end date acf fields
  $order = array(
    'start_date_clause' => 'ASC',
    'end_date_clause' => 'ASC',
    'title' => 'ASC'
  );
  $query->set('orderby', $order);
}

In reply to ACF Form does not save on initial submit.
April 13, 2021 at 11:28 pm

I have mentioned that I am using acf_form_head() and form tags to wrap the code.

acf_form_head(); 
get_header(); 
?>
<div class="sectiontlp" style="display:none;">
</div>
<div id="main" class="page editlistingtemplate">
    <form action="" class="acf-form" method="post">
        <div id="content">
            <?php
                print_r($_POST);
                $builder = new BGC_Content_Builder();
                echo $builder->content;
            ?>
        </div>
    </form>
</div>

Its working fine on my local machine somehow. Not sure what the issue is. I have followed the instructions for acf_form clearly as mentioned. I can see the data is fine in the $_POST variable its just not saving.

- In reply to ACF blocks cramped in right sidebar of editor
- November 9, 2020 at 9:01 am
I also find this UI/UX issue to go against the whole principle of Gutenberg. The main point of Gutenberg is for users (our less-technical clients) to be able to easily edit block content. It just makes sense for all the block content fields/settings/controls to be wrapped in accordions in the edit post sidebar.

The repeater field is one of the best parts of ACF, and it feels like it just wasn’t even considered how it would display in the narrow edit post sidebar.

I could increase the width of the sidebar, but not all clients have large screens to work on, and the Gutenberg editor real-estate is valuable so I would not want to decrease it by much.

Any ideas besides “edit mode”? I would love to hear from Elliot on this, as it really seems like something that needs addressing.

Thanks for hearing me out. 🙂

In reply to Custom Page Builder
October 26, 2020 at 11:07 am

ok, after some reading i think what i need to do is make it as a repeater field to display as an accordion in my page builder, but i still cant get it to show in my template:

json:

[
    {
        "key": "group_553b8b2752aba",
        "title": "Page Builder",
        "fields": [
            
            {
                "key": "field_553b8b4fc8c3b",
                "label": "Page Sections",
                "name": "acf_page_builder",
                "type": "flexible_content",
                "instructions": "",
                "required": 1,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "button_label": "Add Section",
                "min": "",
                "max": "",
                "layouts": [
                    					
					{
                        "key": "561538dcw4334t",
                        "name": "accordion_row",
                        "label": "Accordion Row",
                        "display": "row",
                        "sub_fields": [
                           {
								"key": "field_5f95ee9195280",
								"label": "Accordion",
								"name": "accordion",
								"type": "repeater",
								"instructions": "",
								"required": 0,
								"conditional_logic": 0,
								"wrapper": {
									"width": "",
									"class": "",
									"id": ""
								},
								"collapsed": "",
								"min": 0,
								"max": 0,
								"layout": "table",
								"button_label": "",
								"sub_fields": [
									{
										"key": "field_5f95eebb95281",
										"label": "Accordion Title",
										"name": "accordion_title",
										"type": "text",
										"instructions": "",
										"required": 0,
										"conditional_logic": 0,
										"wrapper": {
											"width": "",
											"class": "",
											"id": ""
										},
										"default_value": "",
										"placeholder": "",
										"prepend": "",
										"append": "",
										"maxlength": ""
									},
									{
										"key": "field_5f95eece95282",
										"label": "Accordion Content",
										"name": "accordion_content",
										"type": "wysiwyg",
										"instructions": "",
										"required": 0,
										"conditional_logic": 0,
										"wrapper": {
											"width": "",
											"class": "",
											"id": ""
										},
										"default_value": "",
										"tabs": "all",
										"toolbar": "full",
										"media_upload": 1,
										"delay": 0
									}
								]
							}

                        ],
                        "min": "",
                        "max": ""
                    },
                    
                    
                ]
            }
        ],
        "location": [
            [
                {
                    "param": "post_type",
                    "operator": "==",
                    "value": "post"
                }
            ],
            [
                {
                    "param": "page_template",
                    "operator": "==",
                    "value": "page-templates\/full-width.php"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "label",
        "hide_on_screen": [
            "the_content"
        ],
        "active": 1,
        "description": ""
    }
]

PHP:

<?php

Class ACF_Page_Builder {

	/**
	 * Check if Advanced Custom Fields is Active
	 * @var (Boolean)
	 */
	private $acf_active;

	/**
	 * Check if Simple Contact Forms is Active
	 * @var (Boolean)
	 */
	private $scf_active;

	/**
	 * The final HTML to return with the section data inluded
	 * @var String
	 */
	private $html;

	/**
	 * Formats that can be used in the acfs_add_support and acfs_remove_support functions
	 * @var Array
	 */
	public $supported_formats;

	/**
	 * Variable to declare whether we should use Bootstrap or not
	 * @var Boolean
	 */
	private $use_bs;

	/**
	 * Constructor of the class. Sets some default values
	 */
	function __construct() {

		include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

		$this->acf_active = is_plugin_active( 'advanced-custom-fields/acf.php' ) || is_plugin_active( 'advanced-custom-fields-pro/acf.php' );

		$this->scf_active = is_plugin_active( 'simple-contact-forms/simple-contact-forms.php' );

		$this->supported_formats = array('post_type', 'page_template');

		$this->use_bs = function_exists('get_field') ? get_field('acfpb_use_bootstrap') : false;

	}

	/**
	 * Enqueue the styles and scripts for the public
	 */
	public function enqueuePublic() {

		wp_enqueue_style( 'acfpb-public', plugin_dir_url( __FILE__ ) . '../public/css/acfpb_styles.css', false, NULL, 'all' );

	}

	/**
	 * Enqueue the styles and scripts for the admin
	 */
	public function enqueueAdmin() {

	}

	/**
	 * Retrieves all the section HTML 
	 * @param  String $name The slug used for the sections. Is 'sections' by default
	 * @return String       The final HTML
	 */
	public function getSectionsHTML( $name, $post_id ) {

		if( !$this->acf_active ) return '';

		if( have_rows( $name, $post_id ) ):

			$s = 1;

			$this->html = '<div id="acfpb_sections">';

			while ( have_rows( $name, $post_id ) ) : the_row();

				$layout = get_row_layout();

				if( method_exists(get_class(), 'getSection_' . $layout ) ) :

					$id = 'section_' . $s;

					$class = 'acfpb_section section-' . $layout;

					$style = get_sub_field('bg') ? 'background-color:' . get_sub_field('bg') : '';

					$contained = (boolean) get_sub_field('contained', false);

					if( !$this->use_bs && $contained ) $contained = false;

					$wrapper = get_sub_field('wrapper_class');

					$this->html .= '<div id="' . $id . '" class="' . $class . '" style="' . $style . '"><div class="sectionwrap">';

						if( $contained ) $this->html .= '<div class="container">';

							if( $contained ) $this->html .= '<div class="row">';

								if( $wrapper !== '' ) $this->html .= '<div class="' . $wrapper . '">';

									$this->html .= $this->{'getSection_' . $layout}();

								if( $wrapper !== '' ) $this->html .= '</div>'; // Wrapper finish

							if( $this->use_bs ) $this->html .= '<div class="clearfix"></div>';

							if( $contained ) $this->html .= '</div>'; // Row finish

						if( $contained ) $this->html .= '</div>'; // Container finish

					$this->html .= '</div></div>'; // Section finish

					$s++;

				endif;

			endwhile;

			$this->html .= '</div>'; // Main Wrapper finish

			return $this->html;

		else :

			return '';

		endif;

	}

	/**
	 * Admin function to add the fields to wordpress. Also figures out where to show them based on the acfs_add_support and acfs_remove_support functions
	 */
	public function addFieldsToWP() {

		if( !$this->acf_active ) return false;

		if( function_exists('acf_add_local_field_group') ) {

			// Get the exported field data

			$json = file_get_contents( plugin_dir_path(__FILE__) . '../admin/acf-fields.json' );

			$json_to_php = json_decode( $json, true );

			$acf_fields_array = $json_to_php[0]['fields'];

			// Check if SCF is included or leave it out of the list of fields if not

			if( !$this->scf_active ) {

				foreach ($acf_fields_array[1]['layouts'] as $key => $data) {
					
					if( $data['name'] === 'simple_contact_forms' ) {

						unset( $acf_fields_array[1]['layouts'][$key] );

						break;

					}

				}

			}

			// Create the rest of the field group

			$meta = array(
				'key' 					=> 'group_553b8b2752aba_pb10192283',
				'title' 				=> 'Page Builder',
				'fields' 				=> $acf_fields_array,
				'menu_order' 			=> 10,
				'position' 				=> 'normal',
				'style' 				=> 'default',
				'label_placement' 		=> 'top',
				'instruction_placement' => 'label',
				'hide_on_screen' 		=> array (),
				'location' 				=> array(),
				'active'				=> 1,
				'description' 			=> '',
			);

			// Filter to get the locations

			$location = apply_filters( 'acfpb_set_locations', array() );

			$l = 0;

			foreach ($this->supported_formats as $format) {

				if( !isset($location[$format]) || empty($location[$format]) ) continue;
					
				$meta['location'][$l] = array();

				foreach ($location[$format] as $place) {

					$meta['location'][$l][] = array(
						'param' 	=> $format,
						'operator' 	=> '==',
						'value' 	=> $place,
					);

					$l++;

				}

			}

			acf_add_local_field_group($meta);

		}

	}

		
	/**
	 * Get the Accordion section.
	 * @return String Final string of this section
	 */
	private function getSection_accordion_row() {

		if( have_rows('accordion') ):
	$i = 1; // Set the increment variable
	
	echo '<div id="accordion">';
 	
 	// loop through the rows of data for the tab header
    while ( have_rows('accordion') ) : the_row();
		
		$header = get_sub_field('accordion_title');
		$content = get_sub_field('accordion_content');

	?>
		
		<div class="card">
		    <div class="card-header" id="heading-<?php echo $i;?>">
		      <h5 class="mb-0">
		        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapse-<?php echo $i;?>">
		          <?php echo $header; ?>
		        </button>
		      </h5>
		    </div>
		
		    <div id="collapse-<?php echo $i;?>" class="collapse" aria-labelledby="heading-<?php echo $i;?>" data-parent="#accordion">
		      <div class="card-body">
		        <?php echo $content; ?>
		      </div>
		    </div>
		 </div>    
		
		
	<?php $i++; // Increment the increment variable
		
	endwhile; //End the loop 
	
	echo '</div>';

else :

    // no rows found
    echo 'Come back tomorrow';

endif;

	}

}

In reply to Get terms for current post in single post…
July 29, 2020 at 11:47 pm

If it is useful, i give the full code of my single page (but the problematic part is in my first post!).

<?php
/*
** single.php
** mk_build_main_wrapper : builds the main divisions that contains the content. Located in framework/helpers/global.php
** mk_get_view gets the parts of the pages, modules and components. Function located in framework/helpers/global.php
*/

get_header(); ?>
<div id="theme-page" class="master-holder  clearfix" itemscope="itemscope" itemtype="https://schema.org/Blog">
<div class="mk-main-wrapper-holder">
<div id="singforma" class="theme-page-wrapper mk-main-wrapper mk-grid full-layout false">
<?php Mk_Static_Files::addAssets('mk_blog');

$blog_style = 'blog-style-'.mk_get_blog_single_style();
$blog_type = 	'blog-post-type-'.mk_get_blog_single_type();
$holder_class = $blog_type . ' ' .$blog_style;
$post_type =  get_post_type();
$startdate = get_field( "date_debut" );
$enddate = get_field( "date_de_fin" );
$commune = get_field( "commune" );
$cp = get_field ("code_postal");
$termsf = get_the_terms( get_the_ID(), 'famille');
if( !empty($termsf) ) { 
$famille = array_pop($termsf);}
$terms = get_the_terms( get_the_ID(), 'produit');
if( !empty($terms) ) { 
$term = array_pop($terms);}
$priceinter = get_field('tarif_inter', $term ); 
$prerequis = get_field('prerequis', $term );
$public = get_field('public', $term );
$objectif = get_field('objectif', $term );
$moyenpeda = get_field('moyens_pedagogiques', $term );
$programme = get_field('programme', $term );
$duration = get_field('duree_de_la_formation', $term );
$termsi = get_the_terms( get_the_ID(), 'intervenants');
if( !empty($termsi) ) { 
$termi = array_pop($termsi);}
$post_objects = get_field('prenom_et_nom', $termi );
$interpres = get_field('presentation', $termi ); ?>
<div class="singformpage"><div class="singheadinf"><?php echo '<span class="sdatef"><i class="far fa-calendar-alt"></i><br/>'."Du ".$startdate . " au ".$enddate.'</span>'?>
<?php if ($commune==""){echo "";} else {echo '<span class="splacef"><i class="fas fa-map-marker-alt"></i><br/>'.$commune." (".$cp.")".'</span>';}?>
<?php if ($duration=="") {echo "";} else {echo '<span class="sdurationf"><i class="fas fa-stopwatch"></i><br/>'.$duration.'</span>';} ?></div>
<?php if ($prerequis=="") {echo "";} else {echo '<h2 class="titsection">'."Prérequis".'</h2><p class="singsection">'.$prerequis.'</p>';} ?>
<?php if ($public=="") {echo "";} else {echo '<h2 class="titsection">'."Public concerné".'</h2><p class="singsection">'.$public.'</p>';} ?>
<?php if ($objectif=="") {echo "";} else {echo '<h2 class="titsection">'."Objectif".'</h2><p class="singsection">'.$objectif.'</p>';} ?>
<?php if ($moyenpeda=="") {echo "";} else {echo '<h2 class="titsection">'."Support pédagogique".'</h2><p class="singsection">'.$moyenpeda.'</p>';} ?>
<?php if ($programme=="") {echo "";} else {echo '<h2 class="titsection">'."Programme".'</h2><p class="singsection programme">'.$programme.'</p>';} ?>
<?php
$terms1 = get_terms("intervenants");

if( $terms1 )
{
	foreach( $terms1 as $term1 )
	{
		$value1 = get_field('prenom_et_nom', 'intervenants_'.$term1->term_id);
		
		 echo $value1;
		
	}
};?>
<?php
$productname=get_field('nom_du_produit');
$posts = get_posts(array(
	'posts_per_page'	=> -1,
	'post_type'			=> 'formations',
	'meta_key'		=> 'nom_du_produit',
	'meta_value'	=> $productname
));

if( $posts ): ?>
	
	<ul>
		
	<?php foreach( $posts as $post ): 
		
		setup_postdata( $post );
		
		?>
		<li>
			<a href="<?php the_permalink(); ?>"><?php the_title(); echo get_field( "date_debut" );?></a>
		</li>
	
	<?php endforeach; ?>
	
	</ul>
	
	<?php wp_reset_postdata(); ?>

<?php endif;
?>
</div>
<div class="sidebforma"><?php echo do_shortcode( '[mk_custom_sidebar sidebar="sidebar-18"]' ); ?></div>
</div></div></div>
<?php get_footer();

In reply to Trigger Email On Front End Form Update
May 26, 2020 at 5:21 pm

Hi @prithsr

Ok, if I’ve understood right, here’s how I think I’d possibly approach it:

I’d use the acf/save_post function:

add_action('acf/save_post', 'my_acf_save_post');
function my_acf_save_post( $post_id ) {

    // Get newly saved values.
    $values = get_fields( $post_id );

    // Get post author ID
    $author_id = get_post_field ('post_author', $post_id);

    // Add a custom field to the user 
    update_user_meta( $author_id, 'some_custom_field', '1' );

}

You could then query the users via a php file you run on cron:


	#query our users
	$args  = array(
		'role__in'     	=> array('editor'),
		'role__not_in' 	=> array('administrator'),
		'exclude'      	=> array(1),	
        'meta_query'        => array(
			array(
				'key'       => 'some_custom_field',
				'value'     => 1
			)
        )					
	);	
	$user_query = new WP_User_Query( $args );
	$user = get_userdata( $user->ID );

You could wrap the whole query in a date check to compare the current date with the date set by the user

If the date matches and the query returns a result, you can then reset the custom meta for the user/author:

    // Reset custom field to the user 
    update_user_meta( $user->ID, 'some_custom_field', '0' );

So roughly the email function could look like:

###################################################
# Send Emails When custom_post_typePublished
###################################################
add_action( 'transition_post_status', 'send_email_notification', 10, 3 );
function send_email_notification( $new_status, $old_status, $post ) {

	if ( 'publish' !== $new_status or 'publish' === $old_status || 'custom_post_type' !== get_post_type( $post ) )
	return;
	
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
	return;	
	
	#get the post ID, we can now use this on both publish and update functions
	$post_id = $post->ID;	
	
	#add date check here
	$todays_date = '';
	$specific_date  = '';
	if ($todays_date == $specific_date ) {

		#query our users
		$args  = array(
			'role__in'     	=> array('subscriber'),
			'role__not_in' 	=> array('administrator'),
			'exclude'      	=> array(1),	
			'meta_query'        => array(
				array(
					'key'       => 'some_custom_field', //only want to send to specific users
					'value'     => '1'
				)
			)					
		);	
		$user_query = new WP_User_Query( $args );
		
		#get our email data if we have any results
		if ( ! empty( $user_query->get_results() ) ) {
			#create an array
			$email_recipients = array();
			foreach ( $user_query->get_results() as $user ) {
				$user = get_userdata( $user->ID );
					
				$email_recipients[] = array(
					'forename'	=> $user->first_name,
					'email'		=> $user->user_email
				);	
				
				update_user_meta( $user->ID, 'some_custom_field', '0' ); //reset the custom meta until front end form retriggers
			}
		}
		
		#filter duplicates (may not need this)
		#$email_recipients = array_unique($email_recipients);	
		
		#proceed with the email if we have a result
		if ($email_recipients) {
	
			foreach ($email_recipients as $recipients) {			
	
				$to			= $recipients['email'];
				$subject	= "Email Subject Goes Here";
				$message	= "<p>Dear {$recipients['forename']}</p>";
	
				#create the headers
				$headers = array(
					'Content-Type: text/html; charset=UTF-8',
					#'Cc:' . '[email protected]',
					#'Bcc:' . '[email protected]',				
					'From: '.get_option( 'blogname' ).' <[email protected]>'
				);	
				#send the email
				wp_mail ($to, $subject, $message, $headers);					
			}
		}	
	
	}

}

It may require some spit and polish but should be a rough starting point I hope!?

Cheers

- In reply to ACF gallery + simple lightbox problem
- February 6, 2020 at 8:30 am
i’m seeing this issue too – almost certainly i’m doing something stupid but i’ve done this now in so many sites and i can’t for the life of me figure out what’s different here.

here’s the code:
```
<?php $images = get_field('project_images');
if( $images ): ?>
 <div class="car-main-col" id="masonry-wrap" data-columns>    
  <?php foreach( $images as $image ): 
   $content = '<div>';
   $content .= '<a class="gallery_image" href="'. $image['url'] .'">';
   $content .= '<img src="'. $image['sizes']['medium'] .'" alt="'. $image['alt'] .'" />';
   $content .= '</a>';
   $content .= '</div>';
  if ( function_exists('slb_activate') ){
  $content = slb_activate($content);
  }
  echo $content;?>
  <?php endforeach; ?>
 </div>
<?php endif; ?>
```
and the page can be seen here: https://dev-cro.matmartin.co.uk/project/function/

i’ve tried running it outside the masonry plugin (salvattore.js) and in separate default page templates without the extra functionality. no dice.

any help would be most welcome.

thanks.

In reply to Frontend form – post via ajax?
January 17, 2020 at 4:12 am

Thanks everyone for posting their snippets, I thought I would share my compendium version of this just to bring it together as of Jan 2020 for other people looking to do something similar.

I can’t dedicate a million hours to solving everyone’s issues in the future but hopefully this will be useful.

My scenario was that I wanted to have a modal pop up on a button, load in an acf_form using a wordpress ajax request, and then submit it back via ajax before showing a success modal and letting the user return to the page.

I have used jquery-modal for the modal library. Installed via npm install jquery-modal then enqueued the scripts/styles using normal wordpress features.

I have used this tutorial for figuring out how to do ajax requests – https://benmarshall.me/wordpress-ajax-frontend-backend/

The template that my WordPress ajax call returns is an acf_form() call:

acf_form(array(
	'post_id' => 'new_post',
	'post_title' => true,
	'new_post' => array(
		'post_type' => 'yourposttypehere',
		'post_status' => 'publish'
	),
	'form' => true,
	'submit_value' => __("Add your post-type", 'textdomain'),
));

I have a button to trigger it:


	<a class="woocommerce-Button button js-addposttype-button" href="#">
		<?php esc_html_e('Add post-type', 'textdomain'); ?>
	</a>

And this monster of JS:


    function setupAddPostTypeAJAX() {
        $('.js-addposttype-button').on('click', function (e) {
            e.preventDefault();

            this.blur(); // Manually remove focus from clicked link.

            var data = {
                action: 'get_posttype_add_form',
                security: myPostTypeAjax.security,
            };

            $.post(myPostTypeAjax.ajaxurl, data, function (response) {
                // cant use jquery .wrap() here as it doesnt return the wrapped string
                response = "<div class='modal'>" + response + "</div>";
                var modalContent = $(response).appendTo('body');
                acf.do_action('append', modalContent);

                var $form = modalContent.find(".acf-form");

                $form.on('submit', function (event) {
                    event.preventDefault();
                });

                modalContent.modal();

                $form.find('.acf-form-submit .acf-button').on('click', function () {
                    args = {
                        form: $form,
                        reset: true,
                        success: function ($form) {
                            // Fix for Safari Webkit – empty file inputs kill the browser
                            // https://stackoverflow.com/a/49827426/586823
                            let $fileInputs = $('input[type="file"]:not([disabled])', $form)
                            $fileInputs.each(function (i, input) {
                                if (input.files.length > 0) {
                                    return;
                                }
                                $(input).prop('disabled', true);
                            })

                            var formData = new FormData($form[0]);

                            // Re-enable empty file $fileInputs
                            $fileInputs.prop('disabled', false);

                            acf.lockForm($form);

                            $.ajax({
                                url: window.location.href,
                                method: 'post',
                                data: formData,
                                cache: false,
                                processData: false,
                                contentType: false
                            }).done(response => {
                                acf.unlockForm($form);
                                // show new modal saying posttype added
                                var modalSuccessMessage = '<div class="modal">Your posttype has been added.</div>';
                                $(modalSuccessMessage).appendTo('body').modal();
                                
                                // could also fire off a wordpress ajax here to update the underlying page data
                                // if you are display a list of some kind of posttype and adding to it with this
                            });
                        }
                    }

                    acf.validateForm(args);
                });
            });
        });
    }

Its a combination of the various snippets that I’ve found throughout these forums so MASSIVE thanks to the people that have done the work on this before me. It would have been so many more hours of work without your helpful posts. I’m really grateful.

As I understand it, this will support file uploads in your form of you have file fields. If you do then check the official acf_form page docs as there is an extra thing you will need to do for the wp uploader.

Good luck everyone!

Viewing 25 results - 1 through 25 (of 61 total)

1 2 3 →

Advanced Custom Fields

Support

Account

Search Results for 'wrap main content'

topic

Issue with Elementor Pro

Block preview is wrapped in “extra” div (same classes), affects appearance

Can’t get dynamic repeater to display

Bug in forum site

Creating reusable component fields?

ACF Not working inside WordPress Loop

Front-End Form won't save when not logged in?

Repeater field – row expiration with date and time picker

2 loops in a DIVI template page

Missing field inputs on new instance of wordpress

Repeater field not working in archive-product.php

Help with inserting correct code for an image repeater

registering field group adding flex layouts via php

Custom Page Builder

reply

In reply to Number Field – Outputting and Sorting Negative Numbers

In reply to acf/load_field not displaying values

In reply to 2 loops in a DIVI template page

In reply to List posts by date picker with pagination

In reply to ACF Form does not save on initial submit.

In reply to ACF blocks cramped in right sidebar of editor

In reply to Custom Page Builder

In reply to Get terms for current post in single post…

In reply to Trigger Email On Front End Form Update

In reply to ACF gallery + simple lightbox problem

In reply to Frontend form – post via ajax?

Welcome

Forums

Helping Others

About

Help

Community

Products