Tracking the number of views on your blog posts or WooCommerce products can be an insightful way to measure engagement and interest in your content. In this tutorial, we’ll show you two methods to add a post and product view counter to your WordPress site: using Elementor and without using Elementor. By the end of this guide, you’ll know how to easily implement this functionality with just a bit of PHP code and a shortcode.
Method 1: Adding the View Counter Using Elementor
Step 1: Add the PHP Code to Your Theme’s functions.php File
Before we use Elementor to display the view counter, we need to add a simple piece of PHP code to your theme’s functions.php file. This code will track and store the view count for posts and products.
- Navigate to the Theme Editor:
- In your WordPress dashboard, go to Appearance > Theme File Editor. From there, locate and open the
functions.phpfile.
- Add the following code:
// Function to increment and display the view count for posts and products
function increment_and_display_view_count() {
if (is_singular('post') || is_singular('product')) { // Check if it's a post or product page
global $wpdb;
$post_id = get_the_ID();
$user_id = get_current_user_id();
$cookie_name = 'viewed_' . $post_id; // Cookie to track views for guests
$views = get_post_meta($post_id, 'post_views_count', true);
if (!$views) {
$views = 0; // Initialize view count if not present
}
// Check if the user has already viewed the post
$has_viewed = false;
if ($user_id) {
// Check if the logged-in user has already viewed the post
$has_viewed = get_user_meta($user_id, 'viewed_post_' . $post_id, true);
} else {
// Check if the guest user has already viewed the post (using cookies)
if (isset($_COOKIE[$cookie_name])) {
$has_viewed = true;
}
}
// Increment the view count only if the user hasn't viewed the post yet
if (!$has_viewed) {
$views++;
update_post_meta($post_id, 'post_views_count', $views); // Update post meta with new view count
if ($user_id) {
// For logged-in users, store the view in user meta
update_user_meta($user_id, 'viewed_post_' . $post_id, true);
} else {
// For guests, store the view in a cookie
setcookie($cookie_name, '1', time() + (10 * 365 * 24 * 60 * 60), COOKIEPATH, COOKIE_DOMAIN); // Expire in 10 years
}
}
// Return the view count for display
return '' . $views . ' Views';
}
}
// Create a shortcode to use the view count function
function post_view_shortcode() {
return increment_and_display_view_count(); // Return the view count output
}
add_shortcode('count_views', 'post_view_shortcode');
Explanation of the Code:
- View Counter Function: This code checks whether the page being viewed is a post or WooCommerce product. If it is, it retrieves the current view count from the post’s metadata, increases it by one, and updates the metadata.
- Shortcode Creation: We’ve also created a shortcode
87 Views, which can be used to display the view counter in posts, products, or any other part of your site.
Step 2: Use the Shortcode in Elementor
Now that the code is set up, we can use it within Elementor to display the view counter.
1. Open Elementor:
- Navigate to the post or product you want to edit and click the “Edit with Elementor” button.
2. Add the Shortcode:
- Drag a Text Editor widget or a Shortcode widget into the page where you want the view counter to appear.
3. Insert the Shortcode:
- Inside the widget, type the shortcode:
[count_views]
4. Preview and Save:
- Once you save the changes and preview the page, the view counter will be displayed, showing how many times that specific post or product has been viewed.
Step 3: View the Counter
When you visit the post or product, you’ll see a message that looks something like this:
Each time the page is visited, the counter will automatically increase by one.
Method 2: Adding the View Counter Without Elementor
If you’re not using Elementor, don’t worry—you can still implement the view counter easily using the WordPress editor or directly through theme files.
Step 1: Add the PHP Code to functions.php
Just like in the Elementor method, you’ll need to add the same PHP code to your functions.php file. If you’ve already done this, you can skip to the next step.
1. Go to Theme Editor:
- In your WordPress dashboard, go to Appearance > Theme File Editor and open the
functions.phpfile.
2. Add the Code:
- Paste the PHP code provided above into your
functions.phpfile.
Step 2: Use the Shortcode in the WordPress Editor
Once the code is added, you can easily use the shortcode without Elementor.
1. Open the Post or Product:
- Edit the post or product where you want to display the view counter.
2. Add the shortcode:
- In the Classic Editor or the Gutenberg Block Editor, paste the following shortcode wherever you want the view count to appear:
[count_views]
3. Save and View:
- After saving your changes, the view counter will be displayed when you view the post or product.
Step 3: Automatically Add the View Counter to All Posts or Products
If you’d prefer to automatically display the view counter on every post or product page without having to add the shortcode manually, you can add the shortcode directly into your theme’s template files.
1. Go to Theme File Editor:
- Navigate to Appearance > Theme File Editor.
2. Open the Appropriate Template File:
- Open the template file for posts (
single.php) or WooCommerce products (content-single-product.php), depending on where you want the counter to appear.
3. Insert the Shortcode in the Template File:
<?php echo do_shortcode('[count_views]'); ?>
4. Save Changes:
- After saving the changes, the view counter will automatically appear on all post or product pages.
Step 4: View the Automatic Counter
Now, every time someone visits any post or product page, the view count will update and display automatically without the need to manually insert the shortcode each time.
Final Thoughts
Adding a post and product view counter to your WordPress site is a great way to track engagement, and it’s easy to implement using a simple PHP function and shortcode. Whether you prefer to use Elementor or just the default WordPress editor, you now have the tools to add this feature to your site.
Key Takeaways:
- With Elementor: You can use the shortcode in a Text Editor or Shortcode widget to display the view counter.
- Without Elementor: You can directly paste the shortcode into the WordPress editor or hard-code it into your theme’s template files.
By following these steps, you’ll be able to keep track of how many views your posts and products are receiving and display that information directly on your site. Try it out today and start tracking your post and product views!
Feel free to share your thoughts or any questions in the comments below! If you found this guide helpful, don’t forget to subscribe to our newsletter for more WordPress tips and tutorials.