How to create Most Visited Posts page template

If you’re looking to create a Most Visited Posts page in WordPress, this guide will walk you through everything you need! 🚀

A Most Visited Posts page helps showcase your most popular content, increasing engagement and keeping visitors on your site longer. Below, you’ll find a ready-to-use WordPress page template, along with the necessary code for tracking post views.

📌 Step 1: Create a New Page Template

To get started, create a new file in your theme’s directory and name it page-most-visited.php.

Paste the following code inside it:

<?php
/*
Template Name: Most Visited Posts
*/

get_header(); ?>

<div class="most-container">
    <h1>Most Visited Posts</h1>
    <div class="most-visited-posts">
        <?php
        // Query to get most visited posts
        $args = array(
            'post_type'      => 'post',
            'posts_per_page' => 10, 
            'meta_key'       => 'post_views_count',
            'orderby'        => 'meta_value_num',
            'order'          => 'DESC'
        );

        $query = new WP_Query($args);

        if ($query->have_posts()) :
            while ($query->have_posts()) : $query->the_post(); ?>
                <div class="post-item">
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p><?php echo get_post_meta(get_the_ID(), 'post_views_count', true); ?> Views</p>
                </div>
            <?php endwhile;
            wp_reset_postdata();
        else :
            echo "<p>No posts found.</p>";
        endif;
        ?>
    </div>
</div>

<?php get_footer(); ?>

📌 Step 2: Style the Page with CSS

To make your CSS mobile-friendly, you can use media queries. Here’s an optimized version of your CSS with adjustments for mobile devices. Add this CSS to your theme’s style.css file to make it look great on both desktop and mobile:

/* Desktop styles remain the same */

.most-visited-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    text-align: center;
}

.most-container h1 {
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    text-align: center;
}

.most-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.post-item {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.post-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.post-item h2 a {
    text-decoration: none;
    color: #0073aa;
    margin-top: 20px;
}

.post-item h2 a:hover {
    color: #005177;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .most-visited-posts {
        grid-template-columns: 1fr; /* Single column for smaller screens */
        gap: 15px;
        padding: 10px;
    }

    .most-container h1 {
        font-size: 1.5rem; /* Adjust font size for better readability */
        padding: 10px;
    }

    .most-container {
        padding: 10px;
    }

    .post-item {
        padding: 10px;
        border-radius: 6px;
    }

    .post-item h2 a {
        font-size: 1rem; /* Adjust link font size for smaller screens */
    }
}

📌 Step 3: Track Post Views

To track post views and sort them by popularity, add this function to your functions.php file:

function track_post_views($postID) {
    if (!is_single()) return;

    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);

    if ($count == '') {
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, 1);
    } else {
        update_post_meta($postID, $count_key, ++$count);
    }
}

// Hook into single post view
function count_post_views($post_id) {
    if (!is_single()) return;
    track_post_views(get_the_ID());
}
add_action('wp_head', 'count_post_views');

🎉 Final Steps:

1. Upload the page-most-visited.php to your theme folder.
2. In WordPress, create a new page.
3. Select “Most Visited Posts” as the page template.
4. Publish it and watch your most popular posts appear dynamically!

This method will automatically track post views and display the most visited posts without needing a plugin.

Let me know in the comments if you have any questions or improvements! 🚀

✅ Tags (SEO & Relevance):

WordPress, Most Visited Posts, WordPress Page Template, Custom WordPress Template, WordPress Popular Posts, WP_Query, WordPress Functions, WordPress Code Snippets, Web Development, WordPress CSS, WordPress PHP, WordPress Tutorial, Post Views Counter, Custom WordPress Pages, WordPress Optimization