create a page template showing a datatable with posts in wordpress using php
To create a DataTable from posts in WordPress using PHP, you can use the DataTables jQuery plugin along with the WordPress functions to fetch and display posts. Here's a step-by-step guide:
- Enqueue DataTables Scripts and Styles:
- Open your theme's
functions.phpfile. - Enqueue the DataTables script and styles. You can use a CDN or include the files if you have them locally:
- Open your theme's
function enqueue_datatables_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('datatables', 'https://cdn.datatables.net/1.11.10/js/jquery.dataTables.min.js', array('jquery'), null, true);
wp_enqueue_style('datatables-style', 'https://cdn.datatables.net/1.11.10/css/jquery.dataTables.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_datatables_scripts');
Create a Custom Page Template:
- In your theme, create a custom page template (e.g.,
template-datatable.php) and add the following code:
<?php
/*
Template Name: DataTable Template
*/
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<table id="posts-table" class="display">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<!-- Add more columns as needed -->
</tr>
</thead>
<tbody>
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
);
$query = new WP_Query($args);
while ($query->have_posts()) : $query->the_post();
?>
<tr>
<td><?php the_title(); ?></td>
<td><?php the_date(); ?></td>
<!-- Add more columns as needed -->
</tr>
<?php endwhile;
wp_reset_postdata();
?>
</tbody>
</table>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();
- This template includes a DataTable with columns for post title and date. You can customize it by adding or removing columns as needed.
- Initialize DataTable:
- Open your theme's
footer.phpfile and initialize DataTable on the custom template:
- Open your theme's
<?php
// Enqueue DataTables script again to ensure it's available in the footer
wp_enqueue_script('datatables', 'https://cdn.datatables.net/1.11.10/js/jquery.dataTables.min.js', array('jquery'), null, true);
?>
<script>
jQuery(document).ready(function ($) {
$('#posts-table').DataTable();
});
</script>
<?php wp_footer(); ?>
</body>
</html>
- Create a Page and Apply the Template:
- In the WordPress admin, create a new page.
- Apply the "DataTable Template" as the template for this page.
Now, when you view this page, it should display a DataTable with posts from your WordPress site. Customize the columns and styling according to your requirements.