Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Add unlimited sidebar in WordPress
.sidebar-info {
padding: 0 8px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
box-shadow: 0 1px 1px rgba(0,0,0,.04);
max-width: 300px;
display: none;
}
.sidebar-info.show {
display: block;
}
.sidebar-info label {
font-weight: bold;
clear: both;
}
.sidebar-info input {
width: 100%;
}
.sidebar-add-actions {
line-height: 100%;
padding: 10px 0 12px;
}
.sidebar-add-actions button:not(:last-child) {
margin-right: 5px;
}
.custom-sidebars-column {
max-width: 300px;
}
.custom-sidebars-column label,
.custom-sidebars-column input {
width: 100%;
}
.custom-sidebars-column .widgets-holder-wrap {
margin: 10px 0 0;
}
.custom-sidebars-column .sidebar-name-edit,
.custom-sidebars-column .sidebar-description,
.custom-sidebars-column .sidebar-add-actions {
display: block;
padding-left: 8px;
padding-right: 8px;
}
.custom-sidebars-column .closed .sidebar-name-edit,
.custom-sidebars-column .closed .sidebar-description,
.custom-sidebars-column .closed .sidebar-add-actions {
display: none;
}
(function( $ ){
$(document).ready( function () {
var wrapper = $('.wrap > h1'),
btn = wrapper.append('<a href="javascript:void(0);" class="page-title-action add-sidebar-btn">Add New Sidebar</a>');
form = $('<div class="sidebar-info"><p><label>Sidebar Name</label><input type="text" name="sidebar-name" id="sidebar-name" val="" /></p><p><label>Sidebar Description</label><input type="text" name="sidebar-desc" id="sidebar-desc" val="" /></p><div class="sidebar-add-actions"><button class="button-secondary cancel-button">Cancel</button><button class="button-primary save-button">Add Sidebar</button></div><div class="result"></div></div>'),
cancel_btn = form.find('.cancel-button'),
save_btn = form.find('.save-button'),
result = form.find('.result');
form.insertAfter(btn);
$('.add-sidebar-btn').on( 'click', function() {
$('.sidebar-info').toggleClass('show');
});
cancel_btn.on( 'click', function() {
$('.sidebar-info').removeClass('show');
});
save_btn.on( 'click', function() {
$('.sidebar-add-actions').hide();
result.html('Loading...');
form.find('input').attr('disabled', '');
$.ajax({
url: ajaxurl,
type: 'POST',
dataType: 'json',
data: {
action: 'pfun_add_sidebar',
name: $('#sidebar-name').val(),
desc: $('#sidebar-desc').val(),
},
success: function(data) {
result.html(data.message);
if ( data.error == false ) {
window.location.reload(true);
} else {
$('.sidebar-add-actions').show();
form.find('input').removeAttr('disabled');
}
}
});
});
return;
});
})(jQuery);
<?php
/**
* Registers a widget area.
*
* @link https://developer.wordpress.org/reference/functions/register_sidebar/
*
* @since Pfun 1.0
*/
function pfun_widgets_init() {
$custom_sidebars = get_option( 'pfun_sidebars', array() );
foreach ( $custom_sidebars as $sidebar ) {
if ( empty( $sidebar ) ) continue;
register_sidebar( array(
'name' => $sidebar['name'],
'id' => $sidebar['id'],
'description' => $sidebar['description'],
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
}
add_action( 'widgets_init', 'pfun_widgets_init' );
/**
* Custom sidebars in admin
*/
add_action( 'admin_print_scripts', 'pfun_admin_print_scripts' );
function pfun_admin_print_scripts( $arg ){
global $pagenow;
if ( is_admin() && ( $pagenow == 'widgets.php' ) ) {
wp_enqueue_script( 'custom-sidebar', get_template_directory_uri() . '/js/custom-sidebar.js', array('jquery') );
wp_enqueue_style( 'custom-sidebar', get_template_directory_uri() . '/css/custom-sidebar.css' );
}
}
/**
* Ajax handler for adding custom sidebar
*/
add_action( 'wp_ajax_pfun_add_sidebar', 'pfun_add_sidebar' );
function pfun_add_sidebar() {
$data = array();
if ( ! current_user_can( 'manage_options' ) ) return;
$mysidebars = get_option( 'pfun_sidebars', array() );
$name = sanitize_title( $_POST['name'] );
$desc = sanitize_text_field( $_POST['desc'] );
if ( ! $name || ! $desc ) {
$data['error'] = true;
$data['message'] = __( 'Please fill in all fields.', 'pfun' );
} else {
$mysidebars[$name] = array(
'name' => $_POST['name'],
'id' => $name,
'description' => $desc,
);
update_option( 'pfun_sidebars', $mysidebars );
$data['error'] = false;
$data['message'] = __( 'Sidebar is added, now reloading page...', 'pfun' );
}
echo json_encode( $data );
die();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment