Skip to content

Instantly share code, notes, and snippets.

@dingo-d
Last active February 14, 2016 20:38
Show Gist options
  • Save dingo-d/440ecd4cad3a744e2870 to your computer and use it in GitHub Desktop.
Save dingo-d/440ecd4cad3a744e2870 to your computer and use it in GitHub Desktop.
A gist based on repeater fields as seen https://gist.github.com/da1nonly/2057532 by da1nonly with added wordpress post link ability using wpLink by modifying this answer http://wordpress.stackexchange.com/questions/127088/how-can-i-use-the-built-in-wordpress-browse-link-functionality/135843#135843
<?php
add_action('admin_init', 'add_meta_boxes', 1);
function add_meta_boxes() {
add_meta_box( 'repeatable-fields', esc_html__('Related Articles', 'mytheme'), 'my_related_articles_meta_box_display', 'post', 'normal', 'high');
}
function my_related_articles_meta_box_display() {
global $post;
$repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);
wp_nonce_field( 'repeatable_meta_box_nonce', 'repeatable_meta_box_nonce' );
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
'use strict';
$('#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;
});
$('#repeatable-fieldset-one tbody').sortable({
opacity: 0.6,
revert: true,
cursor: 'move',
handle: '.sort'
});
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners
function _init() {
$('body').on('click', '#add-link', function(event) {
function add_empty_row() {
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;
}
if ( !$('#repeatable-fieldset-one tbody').find('tr:first-of-type').hasClass('empty-row screen-reader-text') ) {
if ($('#repeatable-fieldset-one tbody').find('tr:first-of-type input[name="article_name[]"]').val() !== '') {
add_empty_row();
}
} else{
add_empty_row();
}
_addLinkListeners();
_link_sideload = false;
if ( typeof wpActiveEditor != 'undefined') {
wpLink.open();
} else {
window.wpActiveEditor = true;
_link_sideload = true;
wpLink.open();
}
return false;
});
}
/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
$('body').on('click', '#wp-link-submit', function(event) {
var linkAtts = wpLink.getAttrs();
var link_val_container = $('.article_link').eq(-2);
var name_val_container = $('.article_name').eq(-2);
var link_text = $('#wp-link-text').val();
link_val_container.val(linkAtts.href);
name_val_container.val(link_text);
var $frame = $('#content_ifr'),
$added_links = $frame.contents().find("a[data-mce-href]");
$added_links.each(function(){
if ($(this).attr('href') === linkAtts.href) {
$(this).remove();
}
});
wpLink.textarea = $('body');
_removeLinkListeners();
return false;
});
$('body').on('click', '#most-recent-results ul li', function(event){
var item_title = $(this).find('.item-title').text();
$('#wp-link-text').val(item_title);
});
$('body').on('click', '#wp-link-cancel', function(event) {
function remove_empty_row() {
$('#repeatable-fieldset-one tbody>tr:eq(-2)').remove();
return false;
}
remove_empty_row();
_removeLinkListeners();
return false;
});
}
function _removeLinkListeners() {
if(_link_sideload){
if ( typeof wpActiveEditor != 'undefined') {
wpActiveEditor = undefined;
}
}
wpLink.close();
$('body').off('click', '#wp-link-submit');
$('body').off('click', '#wp-link-cancel');
}
/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
init: _init,
};
})(jQuery);
// Initialize
link_btn.init();
});
</script>
<style type="text/css">
#repeatable-fieldset-one .icons{
font: 400 20px/1 dashicons;
speak: none;
display: inline-block;
padding: 0 2px 0 0;
top: 0;
left: -1px;
position: relative;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none!important;
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#repeatable-fieldset-one .icons:active{
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#repeatable-fieldset-one a .icons{
color: #0073aa;
}
#repeatable-fieldset-one a:hover .icons{
color: #0073aa;
}
#repeatable-fieldset-one .icons .dashicons-menu:before{
content: "\f333";
}
</style>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="40%"><?php esc_html__('Article Name', 'mytheme'); ?></th>
<th width="50%"><?php esc_html__('URL', 'mytheme'); ?></th>
<th width="2%"></th>
<th width="2%"></th>
</tr>
</thead>
<tbody>
<?php
if ( $repeatable_fields ) :
foreach ( $repeatable_fields as $field ) {
?>
<tr>
<td><input type="text" class="widefat article_name" name="article_name[]" value="<?php if($field['article_name'] != '') echo esc_attr( $field['article_name'] ); ?>" /></td>
<td><input type="text" class="widefat article_link" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>
<td><a class="button remove-row" href="#">-</a></td>
<td><a class="sort"><i class="icons dashicons-menu"></i></a></td>
</tr>
<?php
}
else :
?>
<tr>
<td><input type="text" class="widefat article_name" name="article_name[]" /></td>
<td><input type="text" class="widefat article_link" name="url[]" value="http://" /></td>
<td><a class="button remove-row" href="#">-</a></td>
<td><a class="sort"><i class="icons dashicons-menu"></i></a></td>
</tr>
<?php endif; ?>
<tr class="empty-row screen-reader-text">
<td><input type="text" class="widefat article_name" name="article_name[]" /></td>
<td><input type="text" class="widefat article_link" name="url[]" value="http://" /></td>
<td><a class="button remove-row" href="#">-</a></td>
<td><a class="sort"><i class="icons dashicons-menu"></i></a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" class="button" href="#"><?php esc_html_e('Add another', 'mytheme'); ?></a>
<p><a id="add-link" class=".link-btn button" href="#"><?php esc_html_e('Add posts', 'mytheme'); ?></a>
</p>
<?php
}
add_action('save_post', 'my_related_articles_meta_box_save');
function my_related_articles_meta_box_save($post_id) {
if ( ! isset( $_POST['repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['repeatable_meta_box_nonce'], '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, 'repeatable_fields', true);
$new = array();
$names = $_POST['article_name'];
$urls = $_POST['url'];
$count = count( $names );
for ( $i = 0; $i < $count; $i++ ) {
if ( $names[$i] != '' ) :
$new[$i]['article_name'] = stripslashes( strip_tags( $names[$i] ) );
if ( $urls[$i] == 'http://' )
$new[$i]['url'] = '';
else
$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
endif;
}
if ( !empty( $new ) && $new != $old )
update_post_meta( $post_id, 'repeatable_fields', $new );
elseif ( empty($new) && $old )
delete_post_meta( $post_id, 'repeatable_fields', $old );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment