Compare Theme Documentation
The Compare theme is a powerful WordPress responsive theme letting you create a price comparison website.
- Version: 2.5
- Last Modified: 21/06/2016
- Set up the pages Homepage, Retailer Page, Brand Page and Blog
- Setting up the Slider
- Setting up the Custom Menus
- Price Comparison Functionality
- Theme Options
- Custom Widgets
- Supported Plugins
- Custom Page Templates
- Featured Images
- Theme Support
IMPORTANT: Please note before an install or upgrade we strongly recommend that you take a full database backup of your site and also take a full copy of your WordPress files to ensure that you can always roll-back in case of any problems during the install/upgrade!
To add the Compare theme to your WordPress site you first need to do the following 2 things:
- Download the Compare zip file from ThemeForest.
- A common mistake people make is to assume that this is the theme zip file and try install using this without unzipping it. This zip file actually contains a number of other folders, this is why it’s very important to do the next step.
- Unzip this file, once unzipped you will see the following folder structure
- This is the top level folder that holds all the good stuff within, this isn’t the one you need to install the feed, within it are the following folders
- This an old version of the theme (not responsive).
- This is the folder to use in Option 2 below.
- This contains licensing information.
- This contains a sample csv product import file.
- This is the zip file to use in Option 1 below.
- This is a zip of the old Compare theme (not responsive)
- This contains some installation information, however as you are already at this page you can find all you need here.
- This is the top level folder that holds all the good stuff within, this isn’t the one you need to install the feed, within it are the following folders
You then have 2 options to get this theme into your wordpress installation:
Option 1: Uploading via WordPress:
- Login to your WordPress site and navigation to Appearance->Themes
- Click on the Install Themes tab and then click the Upload link.
- Browse your files to upload the theme, and select the compare-responsive.zip file for upload.
- Hit the Install Now button and the theme will be uploaded and installed.
- You then need to activate the theme, to do this click the Activate link under the Compare theme to switch to the theme.
Option 2: Uploading via FTP:
- Using your FTP program, upload the non-zipped “compare-responsive” folder into the /wp-content/themes/ folder on your server.
- If you have done this correctly then you should end up with the following structure: /wp-content/themes/compare
- Login to your WordPress site and navigation to Appearance > Themes
- Click the Activate link under the Compare theme to switch to the theme.
One of the first things you need to do is setup some pages so that the theme looks like it does in the demo. To do this follow the instructions below
- Login to WordPress site, in the main Menu on the left click Pages > Add New
- Enter ‘Home’ for the Title of your page and ensure that you choose the “Home page” template from the Template drop down box. You do not need to add anything else here, all content is added through widgets of Compare itself. Publish this page by clicking the Publish button near the top right hand corner of the page. You can see an example homepage here http://demo.wppricecomparison.com/compare/ (Remember until you have setup widgets and content it may not look exactly like this, but after this step you are on your way).
- This theme can show a retailers page which will show a list and logos for retailers which have been setup within Comare. To create the retailer page create another new Page, call it “Retailers”, choose the “Retailers Page” template and click publish. You can see an example retailers page here http://demo.wppricecomparison.com/compare/retailers/
- This theme can display a brands page which will show a list and logos for brands which have been setup within Comare. Clicking each of these logos will take the user to a list of products associated with this brand. To create the brands page create another new Page, call it “Brands”, choose the “Brands Page” template and click publish. A good example of a resulting brand page can be seen here http://demo.wppricecomparison.com/compare/brands/
- To create the blog, create another new Page and call it e.g. “Blog”, leave the template as Default Template and publish it. The blog will show any posts that you publish through the WordPress Posts->Add New page.
- Finally to get the homepage and blog to display at the correct URLS you must set the correct Reading settings. Go to Admin > Settings > Reading and set the Front page displays options as Static Page: Front Page – Home. Posts – Blog (as the image below)
- To enable the slider, go to Appearance > Widgets and place Custom Slider Widget into Homepage widget area.
- To create your slides, navigate to the Slides section in your admin panel and click on Add New.
- On the Edit Slide page that appears you can add your slide title, text and featured image
- The order in which the slides appear can be controlled using the Order field under Attributes on the right hand side of the edit screen. Simply assign an order number to each slide which will then appear in that order (ascending).
- The slider also supports WordPress Featured Images. Simply click on Set Featured Image and upload your image. In the upload modal box, don’t forget to click on Use as featured image.
For more information on featured image visit WordPress Support who have a detailed article on this.
The slider has a number of parameters for e.g. speed, preloading image, fade effect etc. which can be set in the theme options. For more details on this please refer to the plugin documentation.
Edit this line according to language used in your feed, e.g. for the French written feed you must add define (‘WPLANG’, ‘fr_FR’);Products can be managed in two ways:
1. Manually create and/or edit products directly in WordPress
- On the admin menu go to Products > Add New
- Now fill in this details for this Product. Add the Title and Description. Select the Category and Brand for the product. The image for the product is added as a URL.
- Publish the Product as you would a Post or Page.
- Repeat the process above for all the products needed. Your completed set of Products can be viewed by selecting Products > Products. The screenshot you see below is what you see when you visit Compare > Manage Products
2. Import products from a manually created and/or edited CSV file (e.g. using the sample file provided)
CSV product feed import
- To create a CSV product feed suitable for import, firstly familiarise yourself with how to create a CSV feed for your chosen Merchant with the relevant Affiliate Network.
- The CSV product feed needs to be imported into Compare in the correct format with the correct column headings. The easiest way to prepare the data for import is to use the sample data spreadsheet file that we have included in your ThemeForest Compare download folder.
- In the folder sample open spreadsheet-blank-sample-file.csv in your chosen spreadsheet software. *IMPORTANT – If you are using Excel, the file spreadsheet-blank-sample-file.csv should be IMPORTED into Excel by opening Excel and selecting Data > Import External Data > Import Data and selecting the file mentioned above.
- To compile your data for import, copy and paste from the Product Feed from your Affiliate Network into the relevant column in the spreadsheet-blank-sample-file.csvas detailed below:
- UID: Unique ID of the product, must be numeric, if you want to add a new product, just specify a number that hasn’t been used yet.
- CATEGORIES: Categories of the product, comma separated.
- BRAND: Product Brand
- FULL NAME: Product full name, will be displayed as the title of the product
- DESCRIPTION: Description of the product
- IMAGE: Image of the product, use the full URL with “http://”
- RETAILER: Retailer name (retailer will be managed later, see the “Manage Retailers” section)
- PRICE: Price of the product for the given retailer
- SHIPPING: Shipping information of the product for the given retailer
- DEEPLINK: Your affiliate link to the product for the given product
- VOUCHER: Voucher code, if any, for the given retailer
Please bear in mind that the spelling and the case of the categories, brands and retailers must be the same for each product or else two different entities will be created (e.g. “Laptop” is not the same as “laptop”)
- If you have added products to Compare already it is important that before making any changes to the products you export the existing product data as a a CSV file first (semi-colon separated), so that you don’t lose any of the changes you may have done to your products. To export go to Compare > Manage Feed > Download Feed.
- To import the product feed created you created using the spreadsheet-blank-sample-file.csv (you can change the name of this file), Go to Compare > Manage Feed > Import > Upload Feed section.
- If the CSV file has been correctly uploaded, you can click on Import in the the Compare > Manage Feed > Import products section. The products displayed in green were processed successfully, those highlighted in red have not been imported due to a problem with that particular line in the product feed.
Please check our FAQ section if you are having problems importing product data.
The Product Mapping
Two (or more) products having the same UID (first column) will be mapped together and appear as a single product with several retailers in the product comparison table. This way, you only need to set product name and description and image once as the system will automatically use these details from the very first product. However, Price, Deeplink and Shipping are required for every product.
Export the Feed
If you have done any changes to a product and/or a retailer directly in WordPress (see section Manage Products In WordPress), you will need to export the feed BEFORE editing the spreadsheet and re-import the products. To export the feed, click on Download in the Compare > Manage Feed > Download Feed section. Copy the content in the text area into your text editor and save as a .csv file.
Warning: If you forgot to export the feed, prior to importing new data then all your modifications potentially get overwrtitten.
Manage products in WordPress
Products can be managed in the Products section.
- To add a new product, go into Add New and set the title, the description of the product and the product image.
- To add/edit/delete a retailer for this product, go into Compare > Manage Products and click on Manage retailer in the Action column of the product.
- Retailers can be created/edited/deleted from the Compare > Manage Retailers section. Use the form fields to upload a retailer image and specify an URL which will appear in the products comparison tables.
Warning: Deleting a retailer will also delete all associated products and prices for the given retailer.
Categories can be created/edited/deleted within the Products > Categories section.
- To add an image to a category by editing an existing category. You will need to upload an image (or use an already uploaded image). For this image to appear unskewed in the theme it must be size 150 x 100px.
- Brands can be created/edited/deleted from the Products > Brands sections. Add an image to a brand by editing an existing brand. You will need to upload an image (or use an already uploaded image). For this image to appear unskewed in the theme it must have a size of 150 x100px.
- Logo and Favicon Settings: Browse your computer and upload your new logo. Should you not have a graphical logo, you can enable a plain text logo which will automatically display your site name and description. Browse your computer and upload your new favicon.
- Analytics Settings: Enter your full Google Analytics code (or any other site tracking code) here. It will be inserted before the closing head tag.
- Footer advertising area:Enter your leaderboard ad code. For example:
<div class="tz_ad_widget"> <a href="http://www.awesem.com/compare/" title="IAB Standard Ad 728x90"> <img alt="IAB Standard Ad 728x90" src="http://cdn.awesem.com/images/728x90.gif" /> </a> </div>
- Currency Options: Enter a list of currencies to choose from to be used on your site. Simply paste each currency
you.Position, Currency Code, Currency Symbol, Decimal Places To Show, Comma FormattingExample:
right, USD, $,2,[3,3,3,3,3]
left, GBP, £,2[3,3,3,3,3]Note:
- In Comma Formatting [3,3,3,3,3,3] will mean that when reading from right to left after a decimal point a comma will be placed after 3 numbers, then 3 numebrs, then 3 numbers etc.
- If you do not require a currency symbol then simple remove content from this area and save settings.
- If you wish to display text instead of a currency symbol, then simply replace the symbol/symbol code with the desired text.
- You must save your new list of currencies once modified and then once the page has reloaded you are able to choose the currency you desire from the Display Currency dropdown
- Display Currency: Select the currency used for your products across your site. Choose from USD, EUR and GBP. Further currencies to be added over time.
- Buy button text: Enter the display text on your buy button on the price comparison page, e.g. “buy now” or “visit retailer” etc.
- Date format: Used for the last update date displayed in the price comparison table. Read more in the WordPress Codex on date and time formatting
- Gradient #1 Settings: Using the colour picker you can choose your primary, secondary and text shadow colours used by Tabs, Buttons and Headings.
- Gradient #2 Settings: Using the colour picker you can choose your primary, secondary and text shadow colours used by the search bar, prices and hyperlinks across the site
- Background Settings: Using the colour picker you can choose your background color, preinstalled background pattern or upload your own custom background image.
Compare comes with the in-built ability to share posts to various Social Networking. These options enable/disable the functionality and all the user to select which networks to include.
- Default Thumbnails: Compare uses default thumbnail images in case you don’t have a featured image for your slide or post. Browse your computer and upload your new thumbnails.
- Products: Enter the number of products you wish to display per page.
COMPARE: Custom Homepage SEO Text Widget
This widget allows you to display text for SEO purposes on the home page.
- SEO Title: A heading for your homepage
- SEO Text: A block of text for your homepage
COMPARE: Homepage Categories Widget
This widget allows you to display product categories on the home page.
COMPARE: Homepage Products Widget
This widget allows you to display a sections of products on the home page.
COMPARE: Homepage Brands Widget
This widget allows you to display a sections of brands on the home page.
COMPARE: Sidebar Product Search Widget
This widget allows you to provide enhanced searching functionality within the sidebar of your site. This includes searching on the product name, price range, brand selection and category selection.
- Title: A heading for to go above your search widget
- Min Price: A minimum price for the price slider.
- Max Price: A maximum price for the price slider.
- Step: How far the price should go up or down with every movement of the slider.
- Hide widget Sections: Ticking any of the boxes will hide the related part of the sidebar widget.
In both cases you simply need to activate the plugins and the theme will do the rest.
Product Tooltip / Bubble
You can add a tooltip / product bubble to your contextual links by adding [tooltip id=”product_id”]Insert text here[/tooltip] to your post, page or shortcode enabled widget. Simply specify the product ID which you can find in Compare > Manage Products > Product Management
Product Price Comparison Table
You can add a price comparison table for a single product by adding [price-table id=”product_id” /] to your post or page. Simply specify the product ID which you can find in Compare > Manage Products > Product Management
To insert a button enter the following into the post or page editor: [button url=”your_full_url”]Insert text here[/button]
To insert a highlighted text enter the following into the post or page editor: [highlight]Insert text here[/highlight]
To insert a drop cap enter the following into the post or page editor: [dropcap]Insert letter here[/dropcap]
To insert a toggle area enter the following into the post or page editor: [toggle title=”your_title”]Insert text here[/toggle]
To insert a youtube video enter the following into the post or page editor: [youtube id=”video_id” height=”video_height” width=”video_width” /]
To insert a left-aligned pullquote enter the following into the post or page editor: [quote_left]Insert quote here[/quote_left]
To insert a right-aligned pullquote enter the following into the post or page editor: [quote_right]Insert quote here[/quote_right]
This template needs to be assigned to your “homepage” page as explained in Setting the Hompepage. You should only assign this template once.
Full Width Template
The Full Width template allows the creation of a page without a sidebar. The main content will span the full width of the site. To use the template, simply create a page using the “Full Width” page template.
The brands template displays all brands on a single page. The page also features “glossary” selectors to display brands with a certain start letter only. By default, all brands get displayed when the page loads. You should only assign this template once.
In the same way as the brands template, the retailer template displays all retailers on a single page. The page also features “glossary” selectors to display retailers with a certain start letter only. By default, all retailers get displayed when the page loads. You should only assign this template once.
Once you’re done, a preview of the image should appear in the right-hand box and you are free to insert the image into the post as with any other image.For more on how to use the WP2.9+ Post thumbnail feature you can view this article – http://en.support.wordpress.com/featured-images/
- Coin Slider: jQuery Image Slider with Unique Effects. More info here
- jQuery Tools dev: The missing UI library for the Web. More info here
- carouFredSel: Riding carousels with jQuery. More info here
- jQuery Validation Plugin: JQuery Validation Plugin handles validation
- effects.js: The theme’s custom JS file defines various colour transitions, opacity transitions and dropdown menu settings.
- lazyload.js: Delays loading of images. Images outside of viewport (visible part of web page) won’t be loaded before user scrolls to them. More info here
- Tabbed Widget JS: Tabbed Widget JS controls the transitions between content tabs when using the Custom Tabbed Widget.