You may have seen product comparison system or Smartphones specifications comparison system on several website. In those websites, visitors can choose two items, and then system generates a head to head comparison of the selected items. This way, it becomes very easy for a visitor to compare features of two of the items that there is a tie between.

We can see this kind of feature-comparison system on several popular websites such as GSM Arena (the largest Mobile website), many eCommerce websites (FlipKart etc).

For the web developers, it is an easy task to add features-comparison system to any CMS. The simple and straight-forward  approach to achieve this sort of customizations is “throwing a decent amount of money on hourly basis and hiring a web developer.” But it, seriously costs an arm and a leg, and it doesn’t good for those who don’t want to spend beyond their limit.

Additionally, if you rely upon a developer who creates custom code for your CM, it means you will go on paying him forever. PHP (or any other web language) software requires regular maintenance and bug fixing that generally involved heavy costs when it comes to custom development.

Comparison System Formidable Pro

On the other hand, if you do it using a reputed and well supported WordPress plugin, about which you are pretty sure that it will not die in near future, it will be the most affordable and the most suitable way for you.

Formidable Pro is one of the plugins, who are firmly supported by its developers and they are one of the most helpful and hard-working guys on the planet, I have ever seen.

In my previous posts, I have told you about the endless abilities of this powerful plugin to build custom database applications that are growing constantly in new releases. See this post to learn how to setup frontend form entries-management (add, display, search, edit entries on WordPress pages) with Formidable Pro and then get back here to learn how to enable post comparison system utilizing this plugin.

  • Add the following HTML customization in your View (you can make desired changes to this customization. We have used CSS to keep three CSS blocks side by side)

Add this segment in “before content section”

Get the code here

Add this segment in “content section”

Get the code here

Add this segment in “after content section”

Get the code here

  • In View Advanced Settings > Sort and Filter section, add the following filter –
Entry ID [is like] [get param=”compare”] (here you can replace blue text with any other text)
  • Now get back to your phone Advanced search form (name it Compare form)

Add two fields in that form;

  1. Item 1 (Dynamic Dropdown field)
  2. Item 2 (Dynamic Dropdown field)
  • On form setting page. Set the redirect URL to something like this
http://..youdomain……/compare-page/?compare=[210 show=id],[211 show=id]

replace the blue text with your domain name, green text with your compare page URL slug (where you have placed the the View)

210 and 211 are the id of Item 1 and Item 2 fields (replace these IDs with the ids of the fields in your compare form)

Now place the form in the same page where you have put the View (put the compare form shortcode just above the View shortcode)

All is done. Your comparison system is now ready. Let it be known that you can create posts with Formidable Forms and customize post content using Formidable Views. This way, you can create a comparison system for your posts or custom post types, keeping two posts side by side.

About Shams

Shams, a professional blogger, has expertise in WordPress and Web Hosting. He is used to playing around with WordPress plugins, themes, web hosting services and some other innovative stuff regarding web design. He sifts out good stuff for web designers and reviews it to help them choose what they really need.

Being an energetic tech enthusiast, he regularly pens down breaking news and tutorials related to technology particularly Smartphones and other gadgets. Sometimes writes tech tips too. It was the dawn of Internet age when he started dabbling in it and has since been delving into the realm of the internet. He occupies a permanent burrow in virtual world.

He can be reached at.- here