Sample Effect ↑

Deployment

Identify Post-types of Your Articles

Article type identifiers for WordPress posts:

is_sticky(); #Determine whether the blog is stick to top, returns True when positive, and False when negative

post_password_required(); #Determine whether a password is needed, returns True when positive, and False when negative or already entered

get_post_status(); #Returns the status of a blog, results include: publish, pending, draft, auto-draft, future, private, inherit, trash

Find the blog content file or blog list file of your theme. Typically wp-content/themes/[theme]/blog-list (or content).php
Based on the preceding identifiers, add the following lines in the content file, and make sure you insert them in the proper places for the stickers to be displayed correctly:

Set Correspondent CSS Configurations

Add the following class settings in your css file. Typically

wp-content/themes/[theme]/assets/css/style.css:

.top{ position: absolute;content: '';top: 10px;left: -20px;padding: 0 26px;border-top: none;z-index: 1;color: #fff;transform: rotate(-45deg);font-size: 12px;background: #5cd9ce;} 

.pwd{ position: absolute;content: '';top: 10px;left: -20px;padding: 0 26px;border-top: none;z-index: 1;color: #fff;transform: rotate(-45deg);font-size: 12px;background: #dd001b;} 

.pvt{ position: absolute;content: '';top: 10px;left: -20px;padding: 0 26px;border-top: none;z-index: 1;color: #fff;transform: rotate(-45deg);font-size: 12px;background: #ffc700;}

#Add the following attribute if you need a shadow effect. box-shadow: 1px 2px 3px #9c9a9a;

And we are done, clean up your browser cache, the style should now be correctly displayed.