You’re The New Owner of 'The Retailer' … Now What?
The scope of this documentation file is to provide you with the information you need to help you get started with your new theme. From the first steps of installing the theme, to creating custom pages and styling the whole thing for your needs.
Should you have any questions that are beyond the scope of this help file, please feel free to post them to on our Support Forum.
Getting Started
The first step would be to get familiarized with the zip file you have downloaded from Theme Forest. The zip includes the theme files and all the assets that come with it. Here is a brief description of the theme deliverables.
Theme Files
Assets
Dummy Data — Contains an XML file that you can import into your WP instance to populate your site with dummy data.
PSD Files — Photoshop (.psd) files for the sprites used in the themes as well as a few layouts and elements that will help designers easily sketch ideas using elements from the original 'The Retailer' design.
Documentation — Contains the current help file that comes with the theme as well as the documentation files that come with the 'Slider Revolution' plugin.
License — Licensing information files.
Theme Files — Here are all the theme files you'll need to get started (zipped & unzipped).
Theme Requirements
In order to proceed with the theme installation, you need to make sure you have the latest version of WordPress (3.5+) on your self-hosted site. The theme has been built to work with the latest version of WooCommerce (2.0+) as well as with older versions (1.6+).
Click here to read more about what you need to run WordPress on your host.
Need Help with WooCommerce?
In case you're new to WooCommerce and you need help with the Installation and the Administration of your WooCommerce based shop, you should check out the WooCommerce User Guide →.
Theme Installation & Configuration
This is the full video tutorial that will assist you in installing and configuring your new theme. It covers the following few section of this documentation file:
Theme Upload and Activation
Required and Recommended Plugin Installation
Setting up the WooCommerce Image Options
Dummy Data Import
Homepage & Blog Setup
Navigation Setup
Widget and Widget Areas
Theme Installation
Step 1: Upload and Activation
There are two ways to install WordPress theme, either by uploading the zipped theme file via the WordPress admin theme installer, or by uploading the unzipped theme folder containing all the theme files via FTP.
OPTION 1: Using WordPress Theme Installer
Log into your WP Admin dashboard and browse for Appearance → Themes.
Now go to the secondary tab: Install Themes and click the Upload link option.
Follow the instructions by choosing the file "theretailer.zip", which you can find inside the .zip downloaded from Themeforest ('Theme Files' folder) and click Install now.
Click Activate once the upload has finished and you're ready for the next steps.
OPTION 2: Using FTP
Log into your site via FTP and browse for your WordPress themes folder wp-content/themes
Upload the main theme folder called "theretailer" (unzipped), found inside the .zip file downloaded from Themeforest (in the 'Theme Files' folder).
Once the upload has finished, log into your WP Admin dashboard and browse for Appearance → Themes to activate your new theme.
Step 2: Plugin Installation
A yellow notice at the top of the screen will now suggest to continue with the recommended plugins installation. Click 'Begin installing plugins' and select the plugins you need to install from the list. All plugins must be activated once the installation has finished.
Required Plugins:
Previous and Next Post in Same Taxonomy — Extends the prev/next links to let you limit to same taxonomy. Used for testing WP Core patch, and can be disabled if patch is committed to core.
Recommended Plugins:
WooCommerce — An e-commerce toolkit that helps you sell anything. Beautifully.
Contact From 7 — Allows you to handle the contact form on 'Contact Us' pages.
WooSidebars — Allows you to replace widget areas in your theme for specific pages, archives and other sections of WordPress.
Regenerate Thumbnails — Allows you to regenerate all thumbnails after changing the thumbnail sizes.
Step 3: WooCommerce Image Options
You need to make sure the default WooCommerce image sizes are the correct ones for your newly installed theme. These settings affect the actual dimensions of your product images in the shop pages.
Navigate from your WordPress Dashboard to WooCommerce → Settings → Catalog and find the "Image Options" section at the bottom of the page.
Update those values with the following ones: Catalog Images: Width = 190, Height = 243 Single Product Image: Width = 510, Height = 652 Product Thumbnails: Width = 114, Height = 145
Installing on a site with existing content?
If you are not installing the theme on a fresh WordPress instance, you probably already have posts, pages or products added to your site.
After activating the theme, you'll need to have WordPress recreate all image thumbnails to make the sizes fit with your new theme.
You don't need to do it manually, Regenerate Thumbnails WP plugin can automatically handle this job for you.
Optional Dummy Data Import
The theme comes with a .xml file containing demo content you can import into your WordPress site to populate your database. This will help you get started, in case you are running on a fresh WordPress installation with no content at all.
The XML file includes Demo Blog Pages, Demo Blog Posts, Demo Homepages, Demo Comments, etc. The XML file does not include any of the images in the demo or Revolution Slider data.
From your WP Admin Dashboard, navigate to Tools → Import.
Select the .xml file in the Assets\Dummy Data\ folder from the zip-file you've downloaded from Themeforest.
Navigation Setup
Setting Up New Menus
Follow the next steps to define menus for each of the theme's menu locations. In each menu, you can add as many items you need: links, pages, posts, custom links, shop categories, direct links to products, internal or external link.
Navigate to Appearance → Menus and click Add Menu.
Name it, define your menu links and click Save Menu.
Assign a Menu Location for your newly created menu, by selecting it for the preferred Theme Location.
Menu Locations
The theme comes with 4 custom menu locations. You must define your menu items for each menu location, once you have created your pages.
Top Header Menu
Primary Menu
Secondary Menu
My Account Menu
Theme Options
The Theme Options Panel
The Theme Options Panel helps you easily take control over your site, by allowing you to upload your logo, style the appearance of the theme with your custom colors, change fonts, turn features on and off, without having to write any code.
To access the Theme Options panel, navigate to Appearance → Theme Options.
Note: Clicking 'Options Reset' button will replace your current settings with the default ones. You might consider creating a backup for your options.
Backup and Restore Your Options
After you create a set of settings, you might want to save your work. This is useful if you want to experiment with the options while keeping the old settings in case you need them again.
Navigate to the Backup section in the Theme Options Panel and click the 'Backup Options' button. Once the options page has reloaded, you will be able to restore your options by clicking the 'Restore Options' button.
Transfer Theme Options Data
You will find this feature useful in case you need to transfer the saved options data between different WordPress installs, or you just want to save/import/export different backup versions of your theme options.
Navigate to the Backup section in the Theme Options Panel and paste your code in the 'Transfer Theme Options Data' textbox. Click 'Import Options' and your options should be imported and activated instantly.
Setting Up Pages
Create a New Page
For your flexibility, all pages in the demo are built using a combination of shortcodes and a page template. Take the following steps to create new pages for your site.
Navigate to Pages → Add New.
In the Page Attributes section, select one of the Templates from the list.
Start adding content in the text editor or paste one of the shortcodes combinations (see below) for a pre-defined layout (see below).
Available Page Templates:
Default Template — The default template is used to create most of the pages, except homepages. It's a full width template with no sidebars.
Default Template - Single Footer — Single footer version of the Default Template.
100% Width — Used to create homepages, using 100% of the screen in term of width, giving the option to use a fullscreen slider on your homepage.
100% Width - Single Footer — Single footer version of the 100% Width Template.
Archive — Classic archive page template for WordPress.
Blog — Posts the page template for building a blog.
Page With Sidebar — The default template with sidebar on the right.
Page With Sidebar - Single Footer — Single footer version of the Page With Sidebar Template.
Portfolio 2 Columns — Portfolio listing template with two columns.
Portfolio 3 Columns — Portfolio listing template with three columns.
Portfolio 4 Columns — Portfolio listing template with four columns.
Homepage Setup
To set one of the pages you have create as a Homepage, navigate to Settings → Reading, select "A static page" and choose "Your Homepage" as the Front Page.
Using a Pre-Defined Homepage Layout:
You can quickly build a homepage using one of the pre-defined layouts you can see in the demo, by following the instructions below. All homepage options are created by using a combination of shortcodes and a page template.
Create a New Page and select the template '100% Width'. This page is created using a slider only. Paste the shortcode for your slider in the text editor and you're ready to go.
Create a New Page and select the template '100% Width - Single Footer'. Paste the following code in the WordPress text editor.
Blog Setup
To set up a blog page you have created, navigate to Settings → Reading, select "A static page" and choose your "Blog" page as the Posts Page.
To start adding posts to your blog, navigate to Posts → Add New.
Portfolio Setup
To set up a portfolio, you just need to select the template of choice for listing the portfolio items in your portfolio page. You can choose to list your items on a two, three, or four column layout. Find the template options by navigating to Page Attributes when editing your Portfolio page.
Add New Portfolio Items
Start adding portfolio items, by navigating to Portfolio → Add New.
Using Pre-defined Page Layouts
All pages are conveniently created using shortcode combinations, to maximize the theme's flexibility. The following shortcode combinations will help you get started with creating pages, based on our demo pages. Just copy/paste the code and make sure you're on the "text" tab of the WordPress text editor.
Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.
Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.
Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.
Create a New Page, then paste the following code in the WordPress text editor. The contact form is handled by 'Contact From 7' WP plugin. Leave the 'Default Template' selected for this page.
Create a New Page, then paste the following code in the WordPress text editor. The contact form is handled by the 'Contact From 7' WP plugin. You can create this page using the 'Default Template', the '100% Width' template or the'100% Width - Single Footer' selected for this page.
The Google Maps Shortcode can be used in with full width, as well as inside a specific number of columns you can set using the Columns shortcodes. The height of the map is customizable as well for maximum flexibility. Style the map easily by specifying a main color in the shortcode.
Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.
Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.
Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.
Create a New Page and just select the 'Archive page' template in Page Attributes.
No shortcodes are required to build this page.
Sidebars & Widget Areas
If you navigate to Appearance → Widgets in your admin panel, you will see four widet-ready areas for this theme:
Sidebar: this sidebar will be displayed on the Blog as well as on the pages that use the 'Page With Sidebar' template.
Product Listing: this sidebar will be displayed on the shop pages only, in case the shop sidebar is turned on from the Theme Options panel.
Light Footer: displayed in the lighter, top part of the footer.
Dark Footer: displayed in the darker, lower part of the footer.
To setup you widgets, just drag one widget at a time and drop it in the desired widget area from the list above.
Please note that you can define unique widgets per page for any of the widgetized areas mentioned above, using the WooSidebars plugin that comes with the theme.
Sliders Setup
Creating a New Slide
The sliders are built using the powerful premium wp plugin, Slider Revolution, which comes with this theme. The slides you're creating can be placed on any page of your website, using shortcodes. This quick tutorial will teach you how to set up slides for your site.
Need Help with Slider Revolution?
In case you're new to Slider Revolution and you need help with creating your slides, you should check out the Slider Revolution Documentation, included in the theme files.
Shortcodes
The theme comes with a built-in library of shortcodes that will help you create custom pages or display specific content inside your posts. All shortcodes are accessible in the Post/Page Editor, in a select box, near the 'Add Media' button.
On our Demo Site, you can find examples of usage for all shortcodes, along with descriptions and attributes for each one. You can easily create something similar, by copying the code provided in each shortcode page then pasting it in the text editor of your page.
In V 1.6.5 we have added better support for the way The Retailer handles translation to other languages. This part of the theme was fully re-built in reponse to the numerous requests recevied via our Support Forum.
Important notice for users who translated The Retailer:
After updating, the terms should be reviewed, some new terms may have been added that might require translation. Based on the routine used to translate the theme, follow the steps that relate to your case to help you get started.
Case 1: For WPML users
Rescan the theme for strings (This option requires WPML’s String Translation module, available as part of the Multilingual CMS package.)
Review your existing translation and translate all terms that needs translation.
Case 2: For Multilingual websites (more than 1 language)
Install and activate the WPML Multilingual CMS package:
Edit the file (e.g.: fr_FR.po) with PoEdit and translate all terms.
Save the file and upload the .mo file generated in the same folder \theretailer\language\
Credits
WordPress / WooCommerce / jQuery / Slider Revolution (Premium) — A fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. Fully responsive and mobile optimized. / iOS Slider (Premium) — Touch Enabled jQuery Horizontal Slider Plugin. / Slightly Modded Options Framework — SMOF is a back-end framework for creating and managing options. / TGM-Plugin-Activation — It allows users to install plugins in singular or bulk fashion using native WordPress classes, functions and interfaces. / hoverIntent — A plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! Instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call. / html5shiv — The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. / customSelect — This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable element in order to acheive your desired look. / Superfish — An enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu and adds the following much-sought-after enhancements./ Respond.js — The goal of this script is to provide a fast and lightweight script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. / Footable — A jQuery plugin that aims to make HTML tables on smaller devices look awesome. / Linecons — Linecons Free is a set of remarkable free vector icons. The set contains 48 fully scalable vector icons with outline styles. / Simple WP Retina — Seamlessly replaces images with @2x versions on Retina and other high pixel density screens. Change is performed server side saving requests..