How to Make WordPress Post and Post Type Count

Author: | Posted in Tutorials No comments
How to Make WordPress Post and Post Type Count

Reviewed by Filiz ÖZER on .

Best WordPress post type count tutorial!

Rating: 10 out of 10

We are continuing to write educational articles about WordPress. We write about creating authors page using WordPress codex features. Today we will write about how to add a counter to your site that shows how many articles exist in your site. Just a little difference, not only blog articles but meanwhile you will see how many posts exist in your special pages too. All will be in few simple steps. We prepared a sample html file. You can see in demo link and also can download. If you want to see an example, you can see it at bottom of page on Daily Design Notes.

Post Type Count Tutorial Details

  • Software: HTML – CSS – PHP
  • Difficulty: Professional
  • Estimated Completion Time: 10 minutes
  • Live Preview: DDN Counter
  • Download: ddn-counter.zip

What is the benefit of this counter feature?

Worlds leading theme producers Elegant Themes and ThemeForest are uses similar counter application. If you want to add a counter to your website, we recommend keep reading this article.

elegant themes

You will not only show how many articles are there in your website plus you will show products you added with WordPress post type. In example, in your WordPress theme you have portfolio page feature and you want to show total number of portfolio items in your page.

portfolio show

As you can see above, if you have special areas in your theme you will be able to show your products. Let’s see how;

Step #1 – Add HTML & PHP

At first step, enter the codes we give you below on the area where you want to show your counter on your page. In html folder, numbers given random. You can add codes below to the area where numbers are;

	
Articles publish; ?> Market Items publish; // ?> Coupon Codes publish; // ?>

Step #2 – Add Styles

At second step, We will show you how to add style files. Add codes I give you to the your style.css file of your theme. Don’t forget to fix your image files extension;

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
* html .clearfix{zoom:1}
*:first-child+html .clearfix{zoom:1}

.counter-body {width: 73%;padding:5px; border:5px solid #000; border-radius:5px;margin:120px auto;background:#232323;text-align:center;}

#ddn-count{
	background:#fff;
	height: 60px;
    padding: 20px;
}

#ddn_number {
    background: url(counter.png) no-repeat scroll 0 0 transparent;
    margin-left: 7px;
    width: 143px;
}

#title {
    font-family: 'Oswald',sans-serif;
    font-size: 20px;
    margin:15px;
    text-transform: uppercase;
}

.ddn_counter {
    color: #FFFFFF;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 36px;
    font-weight: bold;
    height: 51px;
    letter-spacing: 30px;
    padding: 10px 0 0 22px;
    position: relative;
    text-align: left;
    text-shadow: -1px -1px 0 #232323;
}

Thats all. Your counter is ready. Lets take a look to the codes one by one. I used “your-post-type-1″ and “your-post-type-2″ post types as examples. Don’t forget to edit this areas for your website.

How can you show counter?

Shows how many articles you shared on your blog;

publish; ?>

Shows total number of post type products you shared on your site;

publish; // ?>

I hope this article will help you in improving your website. We recommend you to read our other tutorials. Please don’t forget to share this article on your social media profiles and also bookmark us.

We made a detailed article before about How to Make Under Construction Page with jQuery Countdown. We highly recommend you to read it.

Add Your Comment