Prepopulate values in the fields of repeater rows
I have ACF repeater fields for CTAs, and I want to display 4 different CTAs, the same across all pages. Repeatedly adding the same buttons is tedious. Is there a way to store default values for ACF repeater fields? I know ACF normal fields have a default value option, but I want different data for each button.
✅ Yes, we can add different default values to repeater fields using JavaScript.
The acf/input/admin_footer hook in Advanced Custom Fields (ACF) is used to insert custom JavaScript or HTML into the footer of the WordPress admin interface, specifically on pages where ACF fields are being edited. This hook is useful when you want to modify or extend the functionality of the ACF field input screens with custom scripts.
/* Prepopulate values in acf repeater block */ function prepopulate_repeater_buttons() { $repeaterButtonsData = [ ['btnColor' => '#27cc8d', 'url' => 'https://buggerspot.com/contact-us/', 'link_text' => 'Contact Us'], ['btnColor' => '#303030', 'url' => 'https://buggerspot.com/about-us/', 'link_text' => 'About Us'], ['btnColor' => '#ffa1a1', 'url' => 'https://buggerspot.com/projects/', 'link_text' => 'Projects'], ['btnColor' => '#0033ff', 'url' => 'https://blog.buggerspot.com/', 'link_text' => 'Blog'] ]; ?> <script type="text/javascript"> (function($) { let buttonsData = <?php echo json_encode($repeaterButtonsData); ?>; function applyRowData() { $('[data-key="field_64461ea8765a9"] .acf-repeater .acf-row:not(.acf-clone)').each(function(index) { if (index >= buttonsData.length) { return; } let row = $(this); let colorField = row.find('[data-key="field_644649f79e104"] input'); let hoverColorField = row.find('[data-key="field_6450e83389ea3"] input'); let btnInputTitle = row.find('[data-key="field_64461f27765aa"] .acf-input .input-title'); let btnInputURL = row.find('[data-key="field_64461f27765aa"] .acf-input .input-url'); let btnLinkNode = row.find('[data-key="field_64461f27765aa"] .acf-input .link-node'); let btnLinkTitle = row.find('[data-key="field_64461f27765aa"] .acf-input .link-title'); let btnLinkURL = row.find('[data-key="field_64461f27765aa"] .acf-input .link-url'); let acfLink = row.find('[data-key="field_64461f27765aa"] .acf-input .acf-link'); if (!colorField.val() && !hoverColorField.val() && !btnInputURL.val()) { colorField.val(buttonsData[index].btnColor); hoverColorField.val(buttonsData[index].btnColor); btnInputTitle.val(buttonsData[index].link_text); btnInputURL.val(buttonsData[index].url); btnLinkNode.append(buttonsData[index].url); btnLinkNode.attr('href',buttonsData[index].url); btnLinkTitle.append(buttonsData[index].link_text); btnLinkURL.append(buttonsData[index].url); btnLinkURL.attr('href',buttonsData[index].url); acfLink.addClass('-value'); colorField.change(); hoverColorField.change(); } }); } $(document).ready(function() { $(document).on('click', '[data-key="field_64461ea8765a9"] .acf-button.acf-repeater-add-row, [data-key="field_64461ea8765a9"] .acf-row-handle .acf-icon:not(.\\-minus)', function() { setTimeout(applyRowData, 100); }); }); })(jQuery); </script> <?php } add_action('acf/input/admin_footer', 'prepopulate_repeater_buttons');
This script prepopulates ACF repeater fields for buttons in the WordPress admin. When adding new buttons in the admin interface, the code automatically fills in predefined data like button color, URL, and text, making it easier for users to add buttons without manually entering the same information repeatedly. The script only fills fields that are empty, ensuring existing data isn't overwritten. It uses an admin_footer hook to inject this functionality into the ACF admin page, and the predefined data is applied whenever a new row is added to the repeater.