Skip to content

Instantly share code, notes, and snippets.

@akshuvo

akshuvo/WordPress Repeater MetaBox.php

Last active April 18, 2024 09:23
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save akshuvo/d3c031bbb2fe89670e70fd3630705cf3 to your computer and use it in GitHub Desktop.
Save akshuvo/d3c031bbb2fe89670e70fd3630705cf3 to your computer and use it in GitHub Desktop.
Download ZIP
Creating a “repeater meta-box” without a Plugin in WordPress
Raw
WordPress Repeater MetaBox.php
<?php
add_action('admin_init', 'gpm_add_meta_boxes', 2);
function gpm_add_meta_boxes() {
add_meta_box( 'gpminvoice-group', 'Custom Repeatable', 'Repeatable_meta_box_display', 'page', 'normal', 'default');
}
function Repeatable_meta_box_display() {
global $post;
$gpminvoice_group = get_post_meta($post->ID, 'customdata_group', true);
wp_nonce_field( 'gpm_repeatable_meta_box_nonce', 'gpm_repeatable_meta_box_nonce' );
?>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$( '#add-row' ).on('click', function() {
var row = $( '.empty-row.screen-reader-text' ).clone(true);
row.removeClass( 'empty-row screen-reader-text' );
row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
return false;
});
$( '.remove-row' ).on('click', function() {
$(this).parents('tr').remove();
return false;
});
});
</script>
<table id="repeatable-fieldset-one" width="100%">
<tbody>
<?php
if ( $gpminvoice_group ) :
foreach ( $gpminvoice_group as $field ) {
?>
<tr>
<td width="15%">
<input type="text" placeholder="Title" name="TitleItem[]" value="<?php if($field['TitleItem'] != '') echo esc_attr( $field['TitleItem'] ); ?>" /></td>
<td width="70%">
<textarea placeholder="Description" cols="55" rows="5" name="TitleDescription[]"> <?php if ($field['TitleDescription'] != '') echo esc_attr( $field['TitleDescription'] ); ?> </textarea></td>
<td width="15%"><a class="button remove-row" href="#1">Remove</a></td>
</tr>
<?php
}
else :
// show a blank one
?>
<tr>
<td>
<input type="text" placeholder="Title" title="Title" name="TitleItem[]" /></td>
<td>
<textarea placeholder="Description" name="TitleDescription[]" cols="55" rows="5"> </textarea>
</td>
<td><a class="button cmb-remove-row-button button-disabled" href="#">Remove</a></td>
</tr>
<?php endif; ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td>
<input type="text" placeholder="Title" name="TitleItem[]"/></td>
<td>
<textarea placeholder="Description" cols="55" rows="5" name="TitleDescription[]"></textarea>
</td>
<td><a class="button remove-row" href="#">Remove</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" class="button" href="#">Add another</a></p>
<?php
}
add_action('save_post', 'custom_repeatable_meta_box_save');
function custom_repeatable_meta_box_save($post_id) {
if ( ! isset( $_POST['gpm_repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['gpm_repeatable_meta_box_nonce'], 'gpm_repeatable_meta_box_nonce' ) )
return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if (!current_user_can('edit_post', $post_id))
return;
$old = get_post_meta($post_id, 'customdata_group', true);
$new = array();
$invoiceItems = $_POST['TitleItem'];
$prices = $_POST['TitleDescription'];
$count = count( $invoiceItems );
for ( $i = 0; $i < $count; $i++ ) {
if ( $invoiceItems[$i] != '' ) :
$new[$i]['TitleItem'] = stripslashes( strip_tags( $invoiceItems[$i] ) );
$new[$i]['TitleDescription'] = stripslashes( $prices[$i] ); // and however you want to sanitize
endif;
}
if ( !empty( $new ) && $new != $old )
update_post_meta( $post_id, 'customdata_group', $new );
elseif ( empty($new) && $old )
delete_post_meta( $post_id, 'customdata_group', $old );
}
@sdcoyle13
Copy link

Hi! Thank you for providing this code - it's very close to what I'm trying to do! I am getting stuck in a couple spots though I was hoping you could help me through! 1. When I add a new input or textarea to the rows, I can't get the content to save in the backend (Wordpress). 2. How do you display the content on the front end? I've successfully done all this before with regular metaboxes, but there seems to be a disconnect (for me) when it comes to repeating metaboxes. Thanks!

@jigar787
Copy link

can you please describe that how to display if i assign this to my custom postttype?
thanks

@HuuDuc97
Copy link

HuuDuc97 commented Aug 5, 2019

How to export data? Thank

@akshuvo
Copy link
Author

akshuvo commented Aug 5, 2019 •
edited

can you please describe that how to display if i assign this to my custom postttype?
thanks

@jigar787 Just change the page to your post type http://prntscr.com/oogp82

@akshuvo
Copy link
Author

akshuvo commented Aug 5, 2019 •
edited

How to export data? Thank

@HuuDuc97 if you export from WordPress Dashboard>Tools>Export then you will get the exported data

@akshuvo
Copy link
Author

akshuvo commented Aug 5, 2019

Hi! Thank you for providing this code - it's very close to what I'm trying to do! I am getting stuck in a couple spots though I was hoping you could help me through! 1. When I add a new input or textarea to the rows, I can't get the content to save in the backend (Wordpress). 2. How do you display the content on the front end? I've successfully done all this before with regular metaboxes, but there seems to be a disconnect (for me) when it comes to repeating metaboxes. Thanks!

@sdcoyle13 I know it's very late to reply. If you still need the help then let me know.

@HuuDuc97
Copy link

HuuDuc97 commented Aug 5, 2019 •
edited

Làm thế nào để xuất dữ liệu? Cảm tạ

@ HữuDuc97 nếu bạn xuất từ ​​Bảng điều khiển WordPress> Công cụ> Xuất thì bạn sẽ nhận được dữ liệu đã xuất

Sorry ! My english is poor. I want to ask how to loop get_post_meta() 'textarea'. Thank you very much !

@akshuvo
Copy link
Author

akshuvo commented Aug 5, 2019

Làm thế nào để xuất dữ liệu? Cảm tạ

@ HữuDuc97 nếu bạn xuất từ ​​Bảng điều khiển WordPress> Công cụ> Xuất thì bạn sẽ nhận được dữ liệu đã xuất

Sorry ! My english is poor. I want to ask how to loop get_post_meta() url. Thank you very much !

You can use foreach( ){ }. If you do var_dump or print_r then you can see how they are structured.

@SreenathSahadevan
Copy link

thanks for you code it work in my custom post type and i get title and description box in it and i can add multiple boxes, but my question is how to get these values in my theme(in side my html), i know i need to use forech for getting all the data but can you give me a simple example a some line of code please.

@akshuvo
Copy link
Author

akshuvo commented Nov 13, 2019

thanks for you code it work in my custom post type and i get title and description box in it and i can add multiple boxes, but my question is how to get these values in my theme(in side my html), i know i need to use forech for getting all the data but can you give me a simple example a some line of code please.

Try $getAllValue= get_post_meta($post_id, 'customdata_group', true);

@SreenathSahadevan
Copy link

SreenathSahadevan commented Nov 15, 2019 •
edited

thanks for you code it work in my custom post type and i get title and description box in it and i can add multiple boxes, but my question is how to get these values in my theme(in side my html), i know i need to use forech for getting all the data but can you give me a simple example a some line of code please.

Try $getAllValue= get_post_meta($post_id, 'customdata_group', true);

thank you.
i found that you already used it in your code for $old = .... ,

@vesna-droid
Copy link

Hello, I'm still learning and cannot figure out how to do this in your repeater code:

  • Have image chosen from the wp media library
  • have wp embedd dialog for youtube, Vimeo and similar content

Thank you if you have time 👌the code is very useful to me already, but these 2 solutions would be excellent.

@Sumukha210
Copy link 

<?php
add_action('admin_init', 'gpm_add_meta_boxes', 2);

function gpm_add_meta_boxes()
{
    add_meta_box('gpminvoice-group', 'Paper Publication Information', 'Repeatable_meta_box_display', 'paper_publication', 'normal', 'default');
}

function Repeatable_meta_box_display()
{
    global $post;
    $gpminvoice_group = get_post_meta($post->ID, 'ra_publications', true);
    wp_nonce_field('gpm_repeatable_meta_box_nonce', 'gpm_repeatable_meta_box_nonce');
?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#add-row').on('click', function() {
                var row = $('.empty-row.screen-reader-text').clone(true);
                row.removeClass('empty-row screen-reader-text');
                row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
                return false;
            });

            $('.remove-row').on('click', function() {
                $(this).parents('tr').remove();
                return false;
            });
        });
    </script>
    <table id="repeatable-fieldset-one" width="100%">
        <tbody>
            <?php
            $publications = array('deccan-herald' => "Deccan Herald", 'kannada-prabha' => "Kannada Prabha", "times-now" => "Times Now", "vijayavani" => "Vijayavani");

            if ($gpminvoice_group) :
                foreach ($gpminvoice_group as $field) {
            ?>
                    <tr>
                        <td width="15%">
                            <select name="publicationName[]" value="<?php if ($field['publicationName'] != '') echo esc_attr($field['publicationName']); ?>">
                                <?php foreach ($publications as $publicationKey => $publicationValue) : ?>
                                    <option value="<?php echo $publicationValue; ?>"><?php echo $publicationKey; ?></option>
                                <?php endforeach; ?>
                            </select>

                        </td>
                        <td width="70%">
                            <input type="text" placeholder="Enter article url" name="publicationUrl[]" value="<?php if ($field['publicationUrl'] != '') echo esc_attr($field['publicationUrl']); ?>" />
                        </td>
                        <td width="15%"><a class="button remove-row" href="#1">Remove</a></td>
                    </tr>
                <?php
                }
            else :
                // show a blank one
                ?>
                <tr>
                    <td>
                        <!-- <input type="text" placeholder="Title" title="Title" name="TitleItem[]" /> -->
                        <select name="publicationName[]">
                            <?php foreach ($publications as $publicationKey => $publicationValue) : ?>
                                <option value="<?php echo $publicationValue; ?>"><?php echo $publicationKey; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </td>
                    <td>
                        <!-- <textarea placeholder="Description" name="TitleDescription[]" cols="55" rows="5">  </textarea> -->
                        <input type="text" placeholder="Enter article url" name="publicationUrl[]" />
                    </td>
                    <td><a class="button  cmb-remove-row-button button-disabled" href="#">Remove</a></td>
                </tr>
            <?php endif; ?>

            <!-- empty hidden one for jQuery -->
            <tr class="empty-row screen-reader-text">
                <td>
                    <select name="publicationName[]">
                        <?php foreach ($publications as $publicationKey => $publicationValue) : ?>
                            <option value="<?php echo $publicationValue; ?>"><?php echo $publicationKey; ?></option>
                        <?php endforeach; ?>
                    </select>
                </td>
                <td>
                    <!-- <textarea placeholder="Description" cols="55" rows="5" name="TitleDescription[]"></textarea> -->
                    <input type="text" placeholder="Enter article url" name="publicationUrl[]" />

                </td>
                <td><a class="button remove-row" href="#">Remove</a></td>
            </tr>
        </tbody>
    </table>
    <p><a id="add-row" class="button" href="#">Add another</a></p>
<?php
}
add_action('save_post', 'custom_repeatable_meta_box_save');
function custom_repeatable_meta_box_save($post_id)
{
    if (
        !isset($_POST['gpm_repeatable_meta_box_nonce']) ||
        !wp_verify_nonce($_POST['gpm_repeatable_meta_box_nonce'], 'gpm_repeatable_meta_box_nonce')
    )
        return;

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return;

    if (!current_user_can('edit_post', $post_id))
        return;

    $old = get_post_meta($post_id, 'ra_publications', true);
    $new = array();
    $invoiceItems = $_POST['publicationName'];
    $prices = $_POST['publicationUrl'];
    $count = count($invoiceItems);
    for ($i = 0; $i < $count; $i++) {
        if ($invoiceItems[$i] != '') :
            $new[$i]['publicationName'] = stripslashes(strip_tags($invoiceItems[$i]));
            $new[$i]['publicationUrl'] = stripslashes($prices[$i]); // and however you want to sanitize
        endif;
    }
    if (!empty($new) && $new != $old)
        update_post_meta($post_id, 'ra_publications', $new);
    elseif (empty($new) && $old)
        delete_post_meta($post_id, 'ra_publications', $old);
}

?>

I want select menu instead of input box, so I modified the above code, but it is not working. Whenever I click on update button, it adds a new repeater field and previously selected values are not displayed. Can anyone help?

@itcomindo
Copy link

@akshuvo thanks for your code

But I have some questions:

  1. How the way If I need to add this into my option page
  2. How to call or display value from each repeater

Thanks so much bro it's help many user BTW

@24hdevelopers
Copy link

this code add to plugin this code is working but how to get all post field data to product page

@hmbashar
Copy link

hmbashar commented Sep 4, 2023

it's doesn't work for me.

@hmbashar
Copy link

hmbashar commented Sep 5, 2023

it's doesn't work for me.

Not working, thank you so much for this code.

@MOHD-Z
Copy link

MOHD-Z commented Jan 11, 2024

its great and the code is working fine. but if I want to add 2 Repeater MetaBox it will not work. e.x first repeater contain fields for (TitleItem = name) and (TitleDescription = tel) then add second repeater contain ( TitleItem = gender) and (TitleDescription = Male) , the hole values will saved in both Repeater with same data numbers.

@vinay123456
Copy link

this is copy pase code becasue gpm is clinet project . this is written by Me in last 10 yeare ago. i am added in stackflow profile. make your self logic

@akshuvo
Copy link
Author

akshuvo commented Feb 12, 2024 •
edited

this is copy pase code becasue gpm is clinet project . this is written by Me in last 10 yeare ago. i am added in stackflow profile. make your self logic

Hi @vinay123456 , Yes this was copied from stackovflow I guess. I used to use this code in many projects frequently. So I created this gist to find this code quickly. Obviously I was making self logic on top of this code.

Thanks for sharing this code block.

@rezaei68
Copy link

thanks bro !
Data is not saved! How to save them as unserials.

@vinay123456
Copy link

vinay123456 commented Feb 17, 2024 •
edited

It seems like you are mentioning that you've created repter code for an "without plugin", aligning with your business logic and client requirements. If you're looking for someone to connect with you or discuss your work, you might want to reach out through the provided website link (https://www.coderwolves.com/contact-us/).
**connct with skype ** https://join.skype.com/invite/w6QdOavrsO3i

If you have any specific questions or if there's something specific you'd like assistance with regarding your custom code or any related topic, feel free to provide more details, and I'll do my best to help within the scope of my capabilities.

@rezaei68
Copy link

this is copy pase code becasue gpm is clinet project . this is written by Me in last 10 yeare ago. i am added in stackflow profile. make your self logic

Hi @vinay123456 , Yes this was copied from stackovflow I guess. I used to use this code in many projects frequently. So I created this gist to find this code quickly. Obviously I was making self logic on top of this code.

Thanks for sharing this code block.

thanks bro !
Data is not saved! How to save them as unserials.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment