pageinfo.php

<?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 &amp; 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
}