Compare Theme Documentation

The Compare theme is a powerful WordPress responsive theme letting you create a price comparison website.


Last Modified
: 14/03/2017

Thank you for purchasing our Compare theme. If you have any questions that are beyond the scope of this help file, please feel free to submit a support ticket.

Contents

1 – Installation

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! For backups we recommend BlogVault.

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
    • Compare-WordPress-Price-Comparison-Theme-…….
      • 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
        • compare-old
          • This an old version of the theme (not responsive).
        • compare-responsive
          • This is the folder to use in Option 2 below.
        • licensing
          • This contains licensing information.
        • sample
          • This contains a sample csv product import file.
        • compare-responsive.zip
          • This is the zip file to use in Option 1 below.
        • compare-old.zip
          • This is a zip of the old Compare theme (not responsive)
        • readme.txt
          • This contains some installation information, however as you are already at this page you can find all you need here.

          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.
2 – Set up the pages Homepage, Retailer Page, Brand Page and Blog
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)

Permalinks

For sites with a large number of posts and pages, it is crucial that you set the correct permalink structure as otherwise you could experience significant performance problems.For large sites (100+ posts/pages), we would advise you not to use a custom structure such as/%postname%/ as this can have a dramatic effect on page loading times which can result in your site crashing altogether when you have a lot of traffic.Instead you should consider adding the post ID, (e.g. /%post_id%/%postname%/) as this gets around the problem.

3 – Setting up the Slider

  • 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 is based on the jQuery CoinSlider library. If the slider is not working as expected, then the most likely cause for this are JavaScript errors on site preventing the slider from working correctly. Simply check if there are any JS errors (exactly how depends on your browser) and then try and address those problems highlighted by your browser. 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.

5 – Price Comparison Functionality
It is highly recommended that you set WPLANG variable wp-config.php in root folder of your WordPress installation. Open your wp-config.php file in a text editor and search for define (‘WPLANG’, ”); 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

  1. On the admin menu go to Products > Add New
  2. 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.
  3. Publish the Product as you would a Post or Page.
  4. 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

  1. 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.
  2. 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.
  3. 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.
  4. 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.csv as 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”)

Import Products

  1. 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.
  2. 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.

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

Manage products 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.

Manage retailer

    • 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. Manage categories 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.

Manage brands

    • 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.
6 – Theme Options
Compare comes with a simple to use administration panel. You can access it by navigating to Appearance > Options. The theme options are conveniently spread over a number of tabs. Each tab contains the options that relate to a particular area of the theme.

General settings

            • 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="https://www.wppricecomparison.com/products/compare/" title="IAB Standard Ad 728x90">
              		<img alt="IAB Standard Ad 728x90" src="https://www.wppricecomparison.com/wp-content/uploads/2017/03/728x90.gif" />
              	</a>
              </div>

Price Comparison

            • 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:
              1. 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 numbers, then 3 numbers etc.
              2. If you do not require a currency symbol then simple remove content from this area and save settings.
              3. If you wish to display text instead of a currency symbol, then simply replace the symbol/symbol code with the desired text.
              4. 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

Color settings

            • 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.

Social networks

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.

Miscellaneous

            • 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.
7 – Custom Widgets
Compare comes with a number of widgetised areas and widgets. They can be found under Appearance > Widgets. Available widget areas are as follows on the homepage, plus of course the traditional WordPress sidebar
homepage-widget-areas

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.
8 – Supported Plugins
Compare comes with styles for two popular plugins which you may wish to use. Should you wish to do so, make sure to download latest version of them, install them in your /wp-content/plugins/ directory and activate them in the Appearance > Plugins menu.In both cases you simply need to activate the plugins and the theme will do the rest.

9 – Shortcodes
The Compare theme supports a number of shortcodes for styling purposes.

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

Button

To insert a button enter the following into the post or page editor: [button url=”your_full_url”]Insert text here[/button]

Highlight

To insert a highlighted text enter the following into the post or page editor: [highlight]Insert text here[/highlight]

Drop Cap

To insert a drop cap enter the following into the post or page editor: [dropcap]Insert letter here[/dropcap]

Toggle

To insert a toggle area enter the following into the post or page editor: [toggle title=”your_title”]Insert text here[/toggle]

Youtube

To insert a youtube video enter the following into the post or page editor: [youtube id=”video_id” height=”video_height” width=”video_width” /]

Quotes

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]

10 – Custom Page Templates
The Compare theme comes with inbuilt custom page templates: Homepage, Full Width, Brands and Retailers. These templates can be used on individual pages to alter the display or functionality. 

Homepage

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.

Brands

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.

Retailers

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.

11 – Featured Images
Our theme supports the use of featured images. The theme supports auto-resizing of the featured images and so there is only the requirement to specify a single image. Auto-resizing will only occur however when the image is uploaded for the first time, images that have previously been uploaded will not be resized.To ensure the correct display of images across your site, ensure you specify an image with dimensions of 940×530 or larger.To upload a featured image, go to Posts > Add New or open an existing post in editing mode. Locate the Featured Image module and click the Set featured image link.Clicking the link will open up the usual WordPress image uploader where you will upload the image as usual. Simply make sure that it is either the same size or larger than what the final thumbnail will be. Once you’re done uploading the image, simply click the link that says “Use as featured image”. 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/
12 – Javascript Files
This theme imports various Javascript files.

  • jQuery: jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  • 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.
13 – Compare+
The Compare Price Comparison theme is intended for small price comparison sites with a small number of products that can be managed manually. For larger sites and additional features, Compare can be extended with our Compare+ WordPress plugin which enables you to automatically import affiliate product feeds in XML and CSV format. Please visit our website for more information about the Compare+ Price Comparison Plugin for WordPress.
14 – Theme Support
For support queries, please create a support ticket using your ThemeForest purchase key. We love to hear what you think! Feel free to send us your comments, feedbacks and improvement ideas via the contact form on our ThemeForest profile page. Once again, thank you so much for purchasing this theme. As we said at the beginning, we’d be glad to help you if you have any questions relating to this theme. No guarantees, but we’ll do our best to assist.