<?php namespace PageInfo;
add_action( 'admin_menu', function() {
add_menu_page('All of the pageinfo', 'Pageinfo', 'edit_pages', 'pageinfo', __NAMESPACE__.'\\createAdminPage', 'dashicons-clipboard', 6);
});
function createAdminPage() {
?>
<div class="wrap">
<?php
// This queries wordpress for every page and outputs the url and ID for each one.
$pageInfo = new \WP_Query([
'post_type' => [
'post',
'page'
],
'posts_per_page' => -1,
'orderby' => 'ID',
'order' => 'ASC'
]);
?>
<style>
:root, html {
background: #eee;
color: #3f4d59;
min-height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
td {
padding: 1em;
}
td:not(:last-child) {
border-right: 1px solid rgba(0,0,0,.05);
}
th {
border: 0;
border-collapse: collapse;
padding: 1.2em;
font-size: 1.25em;
background: rgba(205, 235, 255, .2);
}
tr {
background: rgba(255,255,255,.8);
}
tr:nth-child(2n) {
background: rgba(255,255,255,.4);
}
input {
width: 100%;
padding: 1em;
border: 0;
-webkit-appearance: none;
}
</style>
<div id="pageInfo" style="margin: 0 auto;width: 80%; max-width: 1024px;">
<h1>Pages & Posts</h1>
<p><small><em>
This page shows all of the existing posts and pages in an easy to read format. You can also filter by the page url.
</em></small></p>
<strong><label for="search">Filter</label></strong>
<input v-model="searchQuery" name="search">
<h2 v-if="!filteredPages.length">No results, sorry</h2>
<p>{{ filteredPages.length }} result(s)</p>
<table style="margin: 2em 0;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th><strong>TITLE</strong></th>
<th><strong>URL</strong></th>
<th><strong>ID</strong></th>
<th><strong>LINK</strong></th>
</tr>
</thead>
<tbody>
<tr v-for="page in filteredPages">
<td v-html="page.title"></td>
<td><a v-bind:href="page.url">{{ page.url.slice(1).length > 0 ? page.url.slice(1) : "home" }}</a></td>
<td>{{ page.id }}</td>
<td>[link id="{{ page.id }}"]text[/link]</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script>
new Vue({
el: '#pageInfo',
computed: {
filteredPages: function () {
return this.pages.filter(function(item){
return item.url.indexOf(this.searchQuery) > -1;
}.bind(this));
}
},
data: {
searchQuery: '',
pages: [
<?php if ($pageInfo->have_posts()): while($pageInfo->have_posts()):
$pageInfo->the_post();
$url = parse_url(get_the_permalink());
?>
{
url: '<?php echo $url['path']; ?>',
id: '<?php the_ID(); ?>',
title: '<?php the_title(); ?>',
},
<?php endwhile; endif; ?>
]
}
});
</script>
<?php
}