Pablo Guides

כלים ומדריכים למפתחי אתרים ואפליקציות על ידי פבלו רותם

create a page template showing a datatable with posts in wordpress using php

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:

  1. Enqueue DataTables Scripts and Styles:
    • Open your theme's functions.php file.
    • Enqueue the DataTables script and styles. You can use a CDN or include the files if you have them locally:
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();
  1. This template includes a DataTable with columns for post title and date. You can customize it by adding or removing columns as needed.
  2. Initialize DataTable:
    • Open your theme's footer.php file and initialize DataTable on the custom template:
<?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>
  1. 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.

Facebook
Twitter
LinkedIn