What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Create a Hot or Not Image Rating Contest in WordPress

How to Create a Hot or Not Image Rating Contest in WordPress

A hot or not rating contest in WordPress is commonly used to arouse visitors’ interests and that is favored by most websites to further increase interaction with users. It would go so far as to boost traffic on your site. If you are the one who wish to benefit from this great rating system, follow this guide on how to create a hot or not image rating contest by means of a powerful plugin.

The selected method is Hot Or Not plugin and that is designed for holding popular contests on your website. The poll options can be a group of stars, services, products, and something else as you like. Besides, this plugin also enables users to customize displayed text, theme colors and transition messages as needed. Here, we have displayed an example as below, which is a typical image rating contest made by means of Hot Or Not plugin.

Hot or Not Image Rating Example

Install Hot Or Not Plugin on Your Website

Before exploring this powerful contest plugin, you should start with Hot Or Not installation via your WP admin. Get the result as below from Plugins > Add New and click “Install Now” upon activation.

Install Hot Or Not Plugin

Having this plugin activated, two items called “Competitor” and “Hot Or Not” appear on the sidebar. They further enable multiple settings for you to customize the first image rating contest. The “Hot Or Not” item shows you the current version of this plugin, number of competitors and total votes while the “Competitors” is where to add competitors to each contest.

Create a Hot or Not Image Rating Contest in WordPress

Competitor is the core of a hot or not image rating contest, therefore, you are required to create as many new competitors as needed via Competitors > Add New. Before everything, you are required to upload an image for this new competitor by clicking “Add Media” button and then give it a proper name easy to remember. Since we are running a web hosting resource site, all competitors about to create are excellent web hosting providers.

The first example is BlueHost. Resize the image into proper size that cannot go beyond the maximum image height and width. The maximum height and width can be reset via Hot Or Not > Settings > Hot or Not Options. Note that, the permalink for this new hot or not contest is automatically generated as http://yourwebsite.com/competitors/name-of-current-competitor. To help visitors have a rough idea of the current competitor, you’d better add a brief description under the image.

Add New Competitor

And then, you can classify this new hot or not contest into a group if needed and launch competitions among competitors included in a group. Move to the right page and target “Groups” mode. Add a new group to include this competitor and then click “Add New Group” to make it into effect. Perhaps, you can add more groups via Competitors > Groups and fill out each field as required.

Add New Group

The “Discussion” mode is where to set permissions for comments and trackbacks & pingbacks. Check the box respective for a permission to allow it for visitors.

Discussion Permissions

After having all settings done, click “Publish” to create this competitor. And then, you should create as many competitors as planned in the same group and launch a competition among them. First of all, go to Posts/Pages to create a new post or page for this competition about to begin. Here, we create a new page for that purpose.

Switch your page editor to Visual form and click the lightning bolt icon shown on the menu bar. A Hot Or Not Shortcode customization page pops up, including a bunch of settings. Select a shortcode type from two options and fill out which group will be included in the competition. And then, determine whether to display competitor image and description. Click “Insert Shortcode” button to generate the shortcode.

Hot or Not Shortcode

The shortcode is shown on the page editor once confirming all settings on “Hot Or Not Shortcode”. Give your first competition a proper name and then “Publish” this page in real time. Here, we name our new competition as “Competition Test”.

Publish Competition Page

And now, click “View Page” to check this competition on front-end and that should be like the following screenshot. Visitors are able to value the current competitor by selecting a score from 1 to 10 or ignore it by clicking “Skip” button. When a vote occurs, the average value is shown above this competitor, coming with a link to Facebook.

Hot or Note Contest Sample

For the convenience of competition search, we suggest you to create a parent page to include all competitions created just now and that will be added to the navigation bar. Go to Apperance > Menus and add all competition pages to the active menu bar. Drag and drop all competition child pages to subject to the parent page.

If you launch the competitions on a post, then you just need to create a new category at first and classify all competitions into that category. Add this newly created category to your website menu bar and enable visitors to check all competitions conveniently.

Customize Hot Or Not Contest

If you are not satisfied with the appearance of your hot or not contest, go with Hot Or Not customizable options and make some changes to it. Go to Hot Or Not > Settings and this is where to set the image size, Facebook sharing button and transition message. By default, the maximum image size is 350×397 pixels and that allows you to change the height & width if needed.

When it comes to Common Options mode, select “Yes” to show Facebook sharing button above each competitor, or choose “No” if you don’t need to integrate the competition with Facebook. The transition message is used to inform certain users that they have been blocked from your contest. Click “Update All Settings” to confirm the above changes.

Hot or Not options

The “Quick Help” includes a list of frequently asked questions for your reference, in terms of how to enter image or text, how to insert shortcode, how to show Hot Or Not contest, and so on.

Go to Hot Or Not > Customise and this is where to customize the text for voted caption, vote average, skip image, hot caption and not caption. Replace the default settings to any other words if needed and then confirm it by clicking “Update Settings”.

Hot or Not Customization

Move to Hot Or Not > Styling and modify the color of your contest. Select your preview area from two options, including Text Preview and Numbers Preview. And then, save colors from the color disk for text top & button gradient, numbers top & button gradient and number color (hover & static). That leaves enough room for a great Hot Or Not contest design.

Hot or Not Color Settings


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.