<?php
$scporder_options = get_option( 'scporder_options' );
$scporder_objects = isset( $scporder_options['objects'] ) ? $scporder_options['objects'] : array();
$scporder_tags = isset( $scporder_options['tags'] ) ? $scporder_options['tags'] : array();
$advanced_view = isset( $scporder_options['show_advanced_view'] ) ? $scporder_options['show_advanced_view'] : '';
?>
<style>
.epsilon-toggle {
position: relative;
display:inline-block;
user-select: none;
}
.epsilon-toggle__items {
box-sizing: border-box;
}
.epsilon-toggle__items > * {
box-sizing: inherit;
}
.epsilon-toggle__input[type=checkbox] {
border-radius: 2px;
border: 2px solid #6c7781;
margin-right: 12px;
transition: none;
height: 100%;
left: 0;
top: 0;
margin: 0;
padding: 0;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.epsilon-toggle__track {
background-color: #fff;
border: 2px solid #6c7781;
border-radius: 9px;
display: inline-block;
height: 18px;
width: 36px;
vertical-align: top;
transition: background .2s ease;
}
.epsilon-toggle__thumb {
background-color: #6c7781;
border: 5px solid #6c7781;
border-radius: 50%;
display: block;
height: 10px;
width: 10px;
position: absolute;
left: 4px;
top: 4px;
transition: transform .2s ease;
}
.epsilon-toggle__off {
position: absolute;
right: 6px;
top: 6px;
color: #6c7781;
fill: currentColor;
}
.epsilon-toggle__on {
position: absolute;
top: 6px;
left: 8px;
border: 1px solid #fff;
outline: 1px solid transparent;
outline-offset: -1px;
display: none;
}
.epsilon-toggle__input[type=checkbox]:checked + .epsilon-toggle__items .epsilon-toggle__track {
background-color: #11a0d2;
border: 9px solid transparent;
}
.epsilon-toggle__input[type=checkbox]:checked + .epsilon-toggle__items .epsilon-toggle__thumb {
background-color: #fff;
border-width: 0;
transform: translateX(18px);
}
.epsilon-toggle__input[type=checkbox]:checked + .epsilon-toggle__items .epsilon-toggle__off {
display: none;
}
.epsilon-toggle__input[type=checkbox]:checked + .epsilon-toggle__items .epsilon-toggle__on {
display: inline-block;
}
.scpo-reset-response {
margin-left:15px;
color:#0085ba;
}
</style>
<div class="wrap">
<h2><?php _e( 'Simple Custom Post Order Settings', 'simple-custom-post-order' ); ?></h2>
<?php if ( isset( $_GET['msg'] ) ) : ?>
<div id="message" class="updated below-h2">
<?php if ( $_GET['msg'] == 'update' ) : ?>
<p><?php _e( 'Settings Updated.', 'simple-custom-post-order' ); ?></p>
<?php endif; ?>
</div>
<?php endif; ?>
<form method="post">
<?php
if ( function_exists( 'wp_nonce_field' ) ) {
wp_nonce_field( 'nonce_scporder' );}
?>
<div id="scporder_select_objects">
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row"><?php _e( 'Check to Sort Post Types', 'simple-custom-post-order' ); ?></th>
<td>
<label>
<div class="epsilon-toggle">
<input id="scporder_allcheck_objects" class="epsilon-toggle__input" type="checkbox">
<div class="epsilon-toggle__items">
<span class="epsilon-toggle__track"></span>
<span class="epsilon-toggle__thumb"></span>
<svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
</svg>
<svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 2 6">
<path d="M0 0h2v6H0z"></path>
</svg>
</div>
</div>
<?php _e( 'Check All', 'simple-custom-post-order' ); ?></label><br>
<?php
$post_types_args = apply_filters(
'scpo_post_types_args',
array(
'show_ui' => true,
'show_in_menu' => true,
),
$scporder_options
);
$post_types = get_post_types( $post_types_args, 'objects' );
foreach ( $post_types as $post_type ) {
if ( $post_type->name == 'attachment' ) {
continue;
}
?>
<label>
<div class="epsilon-toggle">
<input class="epsilon-toggle__input" type="checkbox"
name="objects[]" value="<?php echo $post_type->name; ?>"
<?php
if ( isset( $scporder_objects ) && is_array( $scporder_objects ) ) {
if ( in_array( $post_type->name, $scporder_objects ) ) {
echo 'checked="checked"';
}
}
?>
>
<div class="epsilon-toggle__items">
<span class="epsilon-toggle__track"></span>
<span class="epsilon-toggle__thumb"></span>
<svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
</svg>
<svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 2 6">
<path d="M0 0h2v6H0z"></path>
</svg>
</div>
</div>
<?php echo $post_type->label; ?></label><br>
<?php
}
?>
</td>
</tr>
</tbody>
</table>
</div>
<div id="scporder_select_tags">
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row"><?php _e( 'Check to Sort Taxonomies', 'simple-custom-post-order' ); ?></th>
<td>
<label>
<div class="epsilon-toggle">
<input id="scporder_allcheck_tags" class="epsilon-toggle__input" type="checkbox">
<div class="epsilon-toggle__items">
<span class="epsilon-toggle__track"></span>
<span class="epsilon-toggle__thumb"></span>
<svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
</svg>
<svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 2 6">
<path d="M0 0h2v6H0z"></path>
</svg>
</div>
</div>
<?php _e( 'Check All', 'simple-custom-post-order' ); ?></label><br>
<?php
$taxonomies = get_taxonomies(
array(
'show_ui' => true,
),
'objects'
);
foreach ( $taxonomies as $taxonomy ) {
if ( $taxonomy->name == 'post_format' ) {
continue;
}
?>
<label>
<div class="epsilon-toggle">
<input class="epsilon-toggle__input" type="checkbox"
name="tags[]" value="<?php echo $taxonomy->name; ?>"
<?php
if ( isset( $scporder_tags ) && is_array( $scporder_tags ) ) {
if ( in_array( $taxonomy->name, $scporder_tags ) ) {
echo 'checked="checked"';
}
}
?>
>
<div class="epsilon-toggle__items">
<span class="epsilon-toggle__track"></span>
<span class="epsilon-toggle__thumb"></span>
<svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
</svg>
<svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 2 6">
<path d="M0 0h2v6H0z"></path>
</svg>
</div>
</div>
<?php echo $taxonomy->label; ?></label><br>
<?php
}
?>
</td>
</tr>
</tbody>
</table>
</div>
<div id="scporder_advanved_view">
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row"><?php _e( 'Check to see advanced view of Post Types ', 'simple-custom-post-order' ); ?></th>
<td>
<label>
<div class="epsilon-toggle">
<input class="epsilon-toggle__input" type="checkbox"
name="show_advanced_view" value="1" <?php checked( '1', $advanced_view, 'checked="checked"' ); ?>>
<div class="epsilon-toggle__items">
<span class="epsilon-toggle__track"></span>
<span class="epsilon-toggle__thumb"></span>
<svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
</svg>
<svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 2 6">
<path d="M0 0h2v6H0z"></path>
</svg>
</div>
</div>
<?php echo __( 'Show advanced view of Post Types', 'simple-custom-post-order' ); ?>
</label><br>
<p class="description"><?php _e( 'NOTICE: This is for advanced users only.', 'simple-custom-post-order' ); ?></p>
<!--@todo : @giucu please look into below description. -->
<p class="description"><?php _e( 'Check to include other custom post types. You will need to update your settings after enabling this option.', 'simple-custom-post-order' ); ?></p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="submit">
<input type="submit" class="button-primary" name="scporder_submit" value="<?php _e( 'Update', 'simple-custom-post-order' ); ?>">
</p>
</form>
<div class="scpo-reset-order">
<h1>Want to reset the order of the posts?</h1>
<div id="scpo_reset_select_objects">
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row"><?php _e( 'Check to reset order of Post Types', 'simple-custom-post-order' ); ?></th>
<td>
<?php
foreach ( $post_types as $post_type ) {
if ( $post_type->name == 'attachment' ) {
continue;
}
?>
<label>
<div class="epsilon-toggle">
<input class="epsilon-toggle__input" type="checkbox"
name="<?php echo $post_type->name; ?>" value="">
<div class="epsilon-toggle__items">
<span class="epsilon-toggle__track"></span>
<span class="epsilon-toggle__thumb"></span>
<svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
</svg>
<svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true"
role="img" focusable="false" viewBox="0 0 2 6">
<path d="M0 0h2v6H0z"></path>
</svg>
</div>
</div>
<?php echo $post_type->label; ?></label><br>
<?php
}
?>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<a id="reset-scp-order" class="button button-primary" href="#">Reset order</a>
<span class="scpo-reset-response"></span>
</div>
</div>
<h3>Like this simple plugin?</h3>
<p>Make sure to <a href="https://wordpress.org/support/plugin/simple-custom-post-order/reviews/?filter=5"><strong>rate it</strong></a> and visit us at <a href="https://colorlib.com/wp/"><strong>Colorlib.com</strong></a></p>
</div>
<script>
(function ($) {
$("#scporder_allcheck_objects").on('click', function () {
var items = $("#scporder_select_objects input");
if ($(this).is(':checked'))
$(items).prop('checked', true);
else
$(items).prop('checked', false);
});
$("#scporder_allcheck_tags").on('click', function () {
var items = $("#scporder_select_tags input");
if ($(this).is(':checked'))
$(items).prop('checked', true);
else
$(items).prop('checked', false);
});
// Reset order function
$('#reset-scp-order').click(function (e) {
e.preventDefault();
var btn = $(this),
item_input = $(this).parents('.scpo-reset-order').find('input:checked'),
items = [],
data = {
action: 'scpo_reset_order',
scpo_security: '<?php echo wp_create_nonce( 'scpo-reset-order' ); ?>'
};
if (item_input.length > 0) {
item_input.each(function (i, item) {
items.push(item.name);
});
data['items'] = items;
$.post("<?php echo admin_url( 'admin-ajax.php' ); ?>", data, function (response) {
if (response) {
btn.next('.scpo-reset-response').text(response);
setTimeout(function(){
location.reload(true);
},1500);
}
});
}
});
})(jQuery)
</script>
All system for education purposes only. For more tools: Telegram @jackleet