Compare

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our ThemeForest profile page or visit our Theme Support Forum. Thanks so much!

Demo Buy

1 – Installation

Before upgrading 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!

The theme can be uploaded in two ways:

Uploading via WordPress:

  1. Unzip the file you downloaded from ThemeForest.
  2. Login to your WordPress site and navigation to Appearance->Themes
  3. Click on the Install Themes tab and then click the Upload link.
  4. Browse your files to upload the theme, and select the compare.zip file for upload.
  5. Hit the Install Now button and the theme will be uploaded and installed. Note: Do not upload the whole zip file you downloaded from ThemeForest. You only need the compare.zip file enclosed in the zip-file.
  6. Click the Activate link under the Compare theme to switch to the theme.

 

Uploading via FTP:

  1. Using your FTP program, upload the non-zipped “compare” folder into the /wp-content/themes/ folder on your server. Note: Do not upload the entire folder you downloaded from ThemeForest as this includes helpfiles, screenshots etc.
  2. If you have done this correctly then you should end up with the following structure: /wp-content/themes/compare
  3. Login to your WordPress site and navigation to Appearance > Themes
  4. Click the Activate link under the Compare theme to switch to the theme.
2 – Setting up the blog and the homepage

To create the homepage as seen in the demo you must first create a page and call it e.g. “Home”.

  1. So, on the main Menu on the left click Pages > Add New
  2. Enter ‘Home’ for the Title of your page and ensure that you assign the “Home” page template
  3. Publish this page.
  4. To create the blog, create another new Page and call it e.g. “Blog” and publish it.


Next, the you must set the correct Reading settings.

  1. Go to Admin > Settings > Reading and set the Front page displays options as Static Page: Front Page – Home. Posts – Blog (as the image below)
3 – Setting up the slider

    1. To enable the slider, go to Appearance > Widgets and place Custom Slider Widget into Homepage widget area.
    2. To create your slides, navigate to the Slides section in your admin panel and click on Add New.
  1. On the Edit Slide page that appears you can add your slide title, text and featured image

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

 

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

4 – 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.

5 – Setting up the custom menus

If you use version 3.0+ of WordPress, you can setup custom menus to use with our theme. Compare comes with a ‘Main Menu’ intended as the main high-level navigation.

    1. Go to Appearance > Menus. Give your menu a name and build it up using little widgets on the left. You can add pages, categories or custom URLs. Save your menu.
    2. Now simply select the theme location for your newly created menus using a widget on the left. Under Primary Menu, select your menu from the drop-down list, to use it as the site’s main navigation.

You can also create additional menus that you can use in the “Menu Widget” which you can then include in your footer such as the example below that we have added to our demo site.

6 – Price comparison functionality

It is highly recomended that you set WPLANG variable wp-config.php in root folder of your WordPress instalation. 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.
        3. 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

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.
7 – 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.
            • Header 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>
            • Contact Form Settings: Enter the email address where you’d like to receive emails from the contact form, or leave blank to use admin email – to be used in conjunction with the “Contact” custom page template.

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

              Example:
              right, USD, $
              left, GBP, £

              Note:

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

Custom 125 x 125 Ad Widget

This widget allows you to configure and display up-to 6 125×125 Banner Ads.

            • Title: Title of the widget
            • Ad ‘x’ image url: The URL of you banner image e.g. http://www.example.com/image.jpg
            • Ad ‘x’ link url: The destination URL of your banner ad e.g. http://www.example.com
            • Randomize ads order? Check this box to shuffle the display of the banners in a random order on each page load.

Compare also comes with 160×600 Wide Skyscraper, 180×150 Rectangle, 300×250 Medium Rectangle, 300×600 Half Page Ad and a 728×90 Leaderboard ad widgets which work similar to the 125×125 ad widget shown above.

Custom Tabbed Widget

This widget allows you to configure and display popular posts (by comment count), recent posts, latest comments and tags. The tab titles can be changed from the widget options.

Custom Video Widget

This widget allows you to configure and display a single video. The widget requires the user to input video embed code taken from either Vimeo, YouTube, or other video sharing sites and can display a description if required.

Custom Latest Tweets Widget

This widget allows you to configure and display your latest Twitter tweets.

            • Title: Title of the widget
            • Twitter Username: The username of the user’s tweets you wish to display e.g. awesem
            • Number of tweets: Choose the number of tweets to display – max of 20
            • Follow Text: Choose the anchor text of the link to your Twitter profile. Omit this option if you do not wish to display a link.

Custom Testimonial Widget

This widget allows you to configure and display a customer testimonial.

            • Title: Title of the widget
            • Testimonial: The content of the client testimonial to be displayed on your site
            • Client’s Name: Enter the name of your client
            • Client’s Company: Enter your client’s company name.

This widget allows you to display your client’s testimonial.

Homepage Brands / Products

This widget allows you to display brands / products on your homepage as an infinite caroussel.

            • Carousel effect: Choose your transition effect
            • Duration (ms): The time in milliseconds for the transition
            • Scrolled items: Enter the name of scrolled items per transition
            • Auto play: Auto play for the carousel.

Homepage Categories

This widget allows you to display product categories.

Homepage Double Widget

This widget allows you to configure two blocks of copy on the homepage and add your own icons.

            • Title: Title of the widget
            • Icon: Enter the url of your icon or image
            • Content: Enter the content you wish to display

Homepage Highlight

This widget allows you the display an highlighted area that you can use for promotions and announcements.

            • Title: Title of your announcement
            • Text Content that you wish to display

Sidebar Products Categories

This widget allows you to display products categories in the sidebar as defined in Products > Categories

Sidebar Product Search

A widget that allows to search products using preferable price range, categories and brands.

9 – 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.

10 – 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]

11 – Custom page templates

The Compare theme comes with inbuilt custom page templates: Homepage, Full Width, Contact, 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.

Contact Form Template

The Compare theme comes packed with a simple contact form. To use the inbuilt form, simply create a page and use the page template “Contact”. The form will automatically insert below any page content. The form includes jQuery validation to enhance user experience and the recipient email can be configured from the theme options.

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.

12 – 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/

13 – JavaScript files

This theme imports various Javascript files.

            1. jQuery: jQuery is a Javascript library that greatly reduces the amount of code that you must write.
            2. Coin Slider: jQuery Image Slider with Unique Effects. More info here
            3. jQuery Tools dev: The missing UI library for the Web. More info here
            4. carouFredSel: Riding carousels with jQuery. More info here
            5. jQuery Validation Plugin: JQuery Validation Plugin handles the validation of the inbuilt contact form
            6. effects.js: The theme’s custom JS file defines various colour transitions, opacity transitions and dropdown menu settings.
            7. 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
            8. Tabbed Widget JS: Tabbed Widget JS controls the transitions between content tabs when using the Custom Tabbed Widget.
14 – PSD files

We have included four PSDs with this theme:

            1. The homepage layout
            2. The post page layout
            3. The single product comparison page layout
            4. The brands page layout

All PSDs contain styling for all necessary elements including layouts, icons and all custom widgets.

15 – 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 awesome array of additional features available.

16 – Theme support

We provide basic support for all of our WordPress themes available for sale on ThemeForest via the following two channels:

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.

— The AWESEM team

AWESEMThemes are created by AWESEM – Experts in all things WordPress, we design and build themes and plugins, create bespoke solutions and customize existing WordPress sites. Our approach is no-nonsense and personal.