General Requirements
First of all be sure that your server meets requirements recommended by WordPress! All required information can be found at WordPress Codex.
For a case it doesn't contact your hosting provider and ask for updates.
Other than that everything should be fine regarding Browsers and platforms; this theme has been tested on both Windows and MacOS in following Browsers: Firefox, Chrome, Safari, Opera, Internet Explorer 7 (Windows), Internet Explorer 8 (Windows) and Internet Explorer 9 (Windows).
You need to have javascript and cookies enabled for any Browser mentioned above!
TO TOP
Theme Setup Guide
1. Theme Installation
Unzip theme package downloaded from Themeforest to a local drive, any location would work fine. Open unzipped folder and spot another zipped file inside: "sofa_downloadshop.zip". This is so called theme installation file. Now login to WordPress Admin, from Dashboard select:
Appearance > Themes
Spot two tabs on top of Themes screen one of which is tagged with "Install Themes". Select it. Right below selected tab you gonna find submenu, click on "Upload", Browse to theme installation file and hit that "Install Now" button. Confirm theme activation after installation. All of required database tables, plugins and theme required pages will be installed or created automatically!
For a case anything goes wrong, appropriate Admin message will be displayed. According to an error message you'll be able to troubleshoot the problem in Frequently Asked Questions of this document.
2. Save Options of your theme!
First aof all from Dashboard select:
Appearance > Sofa DownloadShop Options
Simply scroll down to the bottom of a very first theme Options screen and hit that "Save Options" button. That will be enough for the beginning, it's for the purpose of saving default theme settings.
You gonna be able to get back to Options screen any time to fine tune theme appearance.
3. Change permalink structure
It is really important to use custom permalink structure with this theme. From Dashboard select:
Settings > Permalinks
Chose the very last option - "Custom Structure" and enter "/%category%/%postname%/" (without double quotes!) into blank input field.
Save Changes.
There are certain problems related to permalink structure change on Windows servers! WordPress codex provides some general guidelines related to a problem so if you are the one - here's something that might help: Using Permalinks. That's why is good idea to stay away from Windows hosting and stick to Unix/Linux.
4. Modify Media settings
In order to make all image sizes (Thubnail, Medium, Large) fit theme's layout, you'll have to change default settings! From Dashboard select:
Settings > Media
Now set all up according to screen grab below.
Save Changes.
5. Enable Membership
This theme will ask buyers to register for site otherwise private downloads section/page can not be created nor users are able to put something in basket. Be sure anyone can register, WordPress keeps that option unchecked! From Dashboard select:
Settings > General
Have a look at the following illustration and tick "Anyone can register" option if disabled by default. "New User Default Role" option should remain as is and set to "Subscriber".
Save Changes.
6. Setup Colorbox plugin
Colorbox plugin will be installed automatically at the time of DownloadShop theme activation, however, plugin's default settings will not be changed unless you do it manually.Some of images (larger view) might open in new/blank page and in order to eliminate such problems set all up properly. From Dashboard select:
Settings > jQuery Colorbox
…and be sure that your own Colorbox settings match to what can be seen on image below.
Save Changes.
TO TOP
How To Work With Your Theme
Essentially, if you know how things work with WordPress, you'll feel comfortable with Sofa DownloadShop too. Beside regular Blog functionality users can maintain web shop that includes the ability to hierarchically create/organize Catalogs and publish Products in it. Catalogs are considered as regular WordPress Categories while Products may be considered as Posts. Not exactly but elaborating technical details is completely irrelevant for an average user.
My friendly advice is to import Dummy Data file before doing anything else. That's how entire Sofa DownloadShop demo site is inflated to your own WP database and can be used to explore theme features and capabilities.
HOW DO I IMPORT DUMMY DATA?
Theme package downloaded from Themeforest contains folder named "___DUMMY_DATA___" inside of which is an XML file named "sofa_downloadshop_dummy.xml".
- Go to your WP Admin (Dashboard) and from main menu select: Tools > Import
- Once there, click on "WordPress" (the very last one on the list)
- Prior to Dummy Data import you'll be asked to install WordPress Importer plugin so do it!
- After plugin activation, browse to "sofa_downloadshop_dummy.xml" file on your local drive and import
- At the end you'll be asked to import all media files too. Import all, you gonna need it.
Essentially, that should be it except the fact that all of Text Widgets will not be found in its place. Go now to check your web shop in Browser, you'll realize what I am talking about. Don't get mad, that's just how things currently work in WordPress. Copy-paste code examples for Home page Widgets can be found in "Frequently Asked Questions" section of this Manuals.
Theme Options page lets you control the appearance of your theme, don't forget to check all out carefully. Each option is well explained if required so you won't get lost. Play around with different settings, that's an easiest way to get familiar with SOFA DownloadShop theme!
TO TOP
Frequently Asked Questions
What to do if I see error messages displayed upon theme activation?
Sometimes - most often because of the lack of permissions on your WordPress database - theme activation results in required database tables/column not being created. It happens extremely rarely but what to do if the following messages can be seen upon theme activation:
You will try to install additional tables and column manually.
- Login to Control Panel of your hosting plan
- Find an icon or link to "phpMyAdmin" - login if required
- Click on database table that is used for Sofa DownloadShop (the list of all databases can be found in left hand sidebar of phpMyAdmin)
- Now select "SQL" tab in order to run required queries
- Select, copy then paste to SQL textarea the following:
CREATE TABLE `wp_purchases_history` (
`id` int(11) NOT NULL auto_increment,
`trans_date` datetime NOT NULL,
`unique_code` varchar(150) NOT NULL,
`trans_status` varchar(100) NOT NULL,
`trans_basket` varchar(1500) NOT NULL,
`user_name` varchar(250) NOT NULL,
`user_email` varchar(250) NOT NULL,
`currency` varchar(20) NOT NULL,
`gross` varchar(20) NOT NULL,
`discount` varchar(20) NOT NULL,
`tax` varchar(20) NOT NULL,
PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `wp_purchases_stats` (
`id` int(11) NOT NULL auto_increment,
`user_id` varchar(10) NOT NULL,
`prod_id` varchar(20) NOT NULL,
`prod_def_box` varchar(20) NOT NULL,
PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;
ALTER TABLE `wp_users` ADD user_faves varchar(255) NOT NULL DEFAULT '';
For a case all of already existing tables use different prefix, you will have to replace all occurrences of "wp_" in code provided above with the proper one! For example; if you can see table names start with something like "wp35BDF_" replace "wp_purchases_history" with "wp35BDF_purchases_history", "wp_purchases_stats" with "wp35BDF_purchases_stats" and "wp_users" with "wp35BDF_users". That should be done PRIOR to running SQL query!
TO TOP
How do I add slides to Nivo (images) slider?
It works as simple as selecting
Nivo-slides > Add New
…from Dashboard. Once there use "Browse" button to select image from your local drive and upload.
After an image is uploaded click on "Set featured image" (right hand sidebar panel "Featured Image") and select your image from Gallery tab.
TO TOP
How to turn Nivo slide into a hotlink?
At the time you are about to select Nivo slide featured image, pay your attention to an extra input field named "Link this image to the following URL". Enter local or remote path (it can't be relative but full path) to a page or file.
TO TOP
Main menu is not displayed in site header! How to make it visible?
The most probably because it hasn't been selected in "Theme Locations" panel. In order to declare your Main Menu from Dashboard select:
Appearance > Menus
…and be sure Main Menu has been created and selected in "Theme Locations".
Main Menu is the only menu that requires explicit declaration! Its name must be "Main Menu" and it must be declared in "Theme Locations". No other menu you create doesn't require explicit declaration nor uses reserved name.
TO TOP
Catalogs can't be added to Menus, what's wrong?
WordPress keeps certain panels hidden until you make them visible in Screen Options. Why? I'm not sure, the most probably in order to keep Admin screens uncluttered. And so is with Catalogs panel. The following image should speak for itself tho.
TO TOP
After importing Dummy Data, 4 columns are missing below Nivo slider. How to get it back there?
The 4 content columns below Nivo slider are widget-ready areas. Theme's demo site uses 4 Text Widgets shared across 4 columns to highlight some inner content. Unfortunately Dummy Data import will not make ANY Text Widget appear in appropriate position. The problem relates to WordPress which means you will have to manually add each and every Text Widget.
From Dashboard select:
Appearance > Widgets
Once there, take a look at the right hand sidebar of Admin screen, it does represent the list of theme's sidebars or layout sections that are widget-ready.
Expand "Home Page Left Column" and drag'n'drop "Text" widget from "Available Widgets" panel to expanded area.
Copy and paste the following code to widget textarea:
<h3 class="center">How it works indeed?</h3>
<img class="aligncenter" src="http://YOURSITE.COM/wp-content/themes/sofa_downloadshop/images/intro_images/how_it_works.png" />
<h4 class="center">$ 35.00</h4>
<p class="center">Out of the box! By adding new product simply upload zipped file. Your file will be automatically renamed for security reasons. Multiple product versions are supported as well! [button floated="center" label="INTERESTED?" font_color="#222222" bg_color="#F1F1F1" link="http://YOURSITE.COM/ANY_PAGE/"]</p>
The same can be applied to other 3 columns; "Home Page Center Left Column", "Home Page Center Right Column"" and "Home Page Right Column"! Replace "YOURSITE.COM" and "YOURSITE.COM/ANY_PAGE" with your own, otherwise no image will be loaded and button click will end up in 404 error (page not found)!
TO TOP
How do I add Product(s) to my DownloadShop theme?
That should be easy one. Go to Dashboard and select:
Products > Add New
Enter the title and product description if required (text editor). Now notice those extra panels below text editor; "Product Definition Box #1", "Product Definition Box #2" and "Product Definition Box #3". These are used for so called product meta-data which includes Price, Size and a File for Sale.
If your Product includes more than one version (for example; stock photos may be found in more than one resolution) you gonna use multiple Product Definition Boxes. Otherwise, one Box will be quite enough.
By default 3 definition boxes are available per single Product, however, you can easily add as many as required from theme Options. From Dashboard select:
Appearance > Sofa DownloadShop Options >> Product Settings : Number of Definition Boxes per Product
If changed, don't forget to Save Options!
Now lets move to a sidebar panels before publishing new Product!
"Publish" panel is the topmost, "Tags" can be seen right below so let's stop here for a while.
You have to be aware of the fact that Product tags are really important: by tagging products you create bonds between them. Related Products scroller will be displayed on each product details page as a result of tags similarity/match between product being viewed and others found in database!
Product tags can be used for navigation as well (Tag Cloud) and are good for SEO.
OK, the next panel is "Catalogs". By ticking one or more Catalogs you are about to assign single Product to a certain group of products. Be smart when creating Catalogs; what would you expect if your role is site visitor (buyer)?
And finally the last important panel: "Featured Image". It should speak for itself: that's an image supposed to represent your Product visually, it'll be used on catalog page, home page, search page, archive and of course as a default photo on Product details page! Upload it.
And that's basically it, feel free to scroll up to "Publish" panel on top and hit that "Publish" button.
TO TOP
How can I add/upload more photos of a single Product?
Do you know how to upload/insert photos to WordPress Post? Well, the same goes for Product. It's true, additional images on Product's front-end page will be re-arranged a little bit but still available.
TO TOP
What are Featured Products and how do I make my Home page display Featured Products only?
Normally, products on home page are listed by date of publish in descending order. But sometimes you'd like to make your own selection and keep only certain ones listed there - regardless the date of publish. How?
When on Product add/edit screen, take a look at the right hand sidebar and look for a panel named "Thumbnail Label, Featured Product?".
Simply tick that "Get it listed at Home Page" checkbox and Publish/Update product.
However, in order to make your Home page display all the featured products exclusively, theme Options require an update too!
Form Dashboard select:
Appearance > Sofa DownloadShop Options >> Home Page : Display only Featured products on home page?
…and tick the checkbox! Don't forget to Save Options.
Thumbnail Label Value and Type selection that can be seen/found in "Thumbnail Label, Featured Product?" panel do not affect Featured Product anyhow! These can be added to non-featured product as well and are used to catch visitor's attention if required.
TO TOP
I'm getting an error by uploading File for Sale, what might be wrong?
The most probably file getting uploaded is too big. Otherwise spoken, file size exceeds the size allowed by server's upload limit. In that case you will have to contact your hoster and ask for limit increase. It's quite easily to find out what's the maximum file size for upload straight from Add Media screen.
TO TOP
What are shortcodes and how do I use it with this theme?
Shortcodes are pre-styled (CSS) elements. By using shortcodes you can easily "convert" a piece of regular text/content into something more appealing and thus make it visually attractive/interesting.
With this theme shortcodes can be found in toolset of WYSIWYG editor. In order to apply desired shortcode you'll need to:
a) select the portion of content required for "transformation"
b) click on appropriate shortcode icon
By clicking on shortcode icon user-friendly dialog box will be opened asking you to provide necessary attributes. Be sure to fill all input fields (wherever required so) before clicking "INSERT" button!
If a certain shortcode doesn't require or affect content "transformation", selection is not required. For example, if you want to add Button shortcode, leave cursor at desired position of button insertion.
TO TOP
How to add icons/links to social profile(s) in site footer?
From Dashboard select:
Appearance > Sofa DownloadShop Options >> Page Footer : Social Profiles
Here's an example code used on theme's demo site which should give you idea how your HTML should be structured:
<a href='http://twitter.com/wp_sofarider'>
<img src='http://YOURSITE.com/wp-content/themes/sofa_downloadshop/images/twitter.png' />
</a>
<a href='http://www.facebook.com/WordPress'>
<img src='http://YOURSITE.com/wp-content/themes/sofa_downloadshop/images/facebook.png' />
</a>
<a href='http://downloadshop.sofarider.com/feed'>
<img src='http://YOURSITE.com/wp-content/themes/sofa_downloadshop/images/rss.png' />
</a>
Don't forget to replace YOURSITE.com with your own domain name (+ WordPress installation folder if not in site root).
TO TOP
How to localize/translate your theme copy?
This theme takes behalf of WordPress' built-in GNU gettext framework and can easily be translated in such manner.
How to start? It's quite simple…
First of all go to http://www.poedit.net/ and download this mini application made for the purpose of translation. It's free and cross-platform ready.
After installation open 'sofa_downloadshop' theme folder and spot another folder inside named 'languages'.
It contains 'sofa_downloadShop.po' file which can be opened/edited with Poedit – an app you just have installed.
Translate all the phrases found in 'sofa_downloadShop.po' and save new file as locale.
What is locale?
Locale is a combination of language and regional dialect. Usually locales correspond to countries. For example, let's say you are about to translate this theme to French. You will have to save it as 'fr_FR.po'. However, in case you need to translate to Brazilian Portuguese, you gonna save it as 'pt_BR.po'. Take a look for more examples provided in WordPress Codex.
After you save translated file, you'll find additional namesake with the different extension - ".mo". That's the one we actually need! You can leave ".po" file in 'languages' folder but ".mo" has to be copied to 'sofa_downloadshop' root folder!
In case you already use localized version of WordPress and a locale of Sofa DownloadShop theme corresponds to the locale of WordPress – no need to read further.
…otherwise you'll have to proceed with the following steps:
- Locate 'wp-config.php'. This file can be found in root of your WordPress installation. Have a look here:
- Open 'wp-config.php' in some text editor, preferably the one capable to display line numbers
- Scroll down to line #72 that reads: define ('WPLANG', '');
- Now…
If you have saved your translation file as 'fr_FR.po', you gonna change it to: define ('WPLANG', 'fr_FR');
If you have saved your translation file as 'de.po', you gonna change it to: define ('WPLANG', 'de');
If you have saved your translation file as 'pt_BR.po' you gonna change it to: define ('WPLANG', 'pt_BR');
More info is available at WordPress Codex
- Save 'wp-config.php' and re-upload to server if edited on local machine!
Once again: in order to make your theme localization file work properly, ".mo" file needs to be present in 'sofa_downloadshop' root folder!
TO TOP
How to prevent directory/files listing and protect my stuff for sale?
You have to be sure that your "uploads" folder doesn't allow files listing otherwise those "clever" dudes might steal everything you have in your DownloadShop! "uploads" folder is location on server where all of images and files are kept/stored by WordPress (YOUR_WP_SITE.com/wp-content/uploads) - including your files for sale, of course.
There are 2 methods that should work fine:
Many hosting plans have directory listing disabled by default so you don't have to be worried! But in order to check whether "uploads" folder on your server does allow files and sub-folders listing, type the following into Browser's address bar:
http://your_wp_site.com/wp-content/uploads
…where "your_wp_site.com" represents domain name. In case you installed WordPress out of domain's root - prepend to "/wp-content/uploads"!
Now take a look at the following screen grab, if you can see something like that, it's time to do something because "uploads" folder is unprotected!
TO TOP
HTML Structure
Sofa DownloadShop theme layout relies on Kailoon's Simple CSS Framework.
Essentially, it's a little bit modified version of 960px grid system - modified by theme author for the purpose of theme layout requirements.
Each and every template file consist of one or more sections while each section starts/end with HTML comment. It has been done to make your life easier - if you are about to modify default layout for some reason.
For example:
<!-- main search start -->
…code…
<!-- main search end -->
This section, as you probably guess, relates to search form in site header ("header.php" template).
Other, common WordPress templates will use the following structure:
<!-- main content start -->
<!-- title start -->
…title…
<!-- title end -->
<!-- content start -->
<!-- wordpress loop start -->
…code…
<!-- wordpress loop end ->
<!-- pagination start -->
…code…
<!-- pagination end -->
<!-- content end -->
<!-- no content start -->
…code…
<!-- no content end -->
<!-- include sidebar start -->
…sidebar…
<!-- include sidebar end -->
<!-- main content end -->
Different templates will use different sections but the example above should give you idea what and where to look for when needed. You can also find similar comments that relate to PHP code.
TO TOP
CSS Files Included
In order to keep things as organized as possible and easy to find, main theme's CSS document has been divided into several smaller files (theme's root folder relative):
It's always good idea to use Developer tools! Each and every modern Browser has it. Developer tools help you inspect ANY website HTML and CSS! By doing so, you can easily find corresponding set of styles in CSS document for any HTML element being inspected.
TO TOP
jQuery/javascript Files Used
WordPress theme development is almost impossible without javascript/jQuery. Most of the javascript used with this theme is written in form of a plugin and as such applied in that manner. Plugin file header contains all required information about author, support web site link and usage license!
- navigation (folder: "sofa_downloadshop/navigation")
ddsmoothmenu.js
This plugin is supposed to handle Main Menu drop-downs and hierarchy. Script download/instructions/updates can be found HERE.
- nivo_slider (folder: "sofa_downloadshop/nivo_slider")
jquery.nivo.slider.pack.js
One of the most widely used and best image sliders available for free. Updates, how-to and support available HERE.
- theme_script (folder: "sofa_downloadshop/theme_script")
-
html5.js
Used by Browsers that do not natively support HTML5 so all of elements get properly styled (IE8 and down, Gecko engine based browsers). More details HERE.
-
jquery.easing.1.3.js
Allows you to set custom easing types for standard animations in jQuery. Project details HERE.
-
jquery.notify.min.js
A jQuery UI Growl/Ubuntu-like Notification plugin/widget. Instructions, how-to and updates can be found HERE.
-
jquery.preloader.js
An awesome image preloader taken from net tuts+ - created by Abhin Sharma.
-
jquery.tools.min.js
Plugin used for horizontal content scrolling (see on Product details page, Possibly Related Products section). More details, support and how-to can be found HERE.
-
jquery.ui.widget.js
jQuery User Interface Library that is required for "Growl/Ubuntu-like Notification plugin/widget" (jquery.notify.min.js). More details HERE.
-
theme.helpers.js
This file consist of smaller chunks of jQuery code (used by shortcodes like Tabber, Toggler), other plugin inits, versatile modification made on HTML elements, etc. Each block of jQuery code is commented so you can't miss the point.
TO TOP
Icons used by Sofa DownloadShop
DownloadShop theme uses numerous icons taken from different iconsets created by different authors. The following list should represent credits to authors and their hard work.
On the other side, some of the icons were created by theme author (icons not mentioned on the list below) and as such Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) licensed.
-
VCard icons (folder: "sofa_downloadshop/images/v_card_widget_icons")
Sanscons, created by P.J. Onori
Downloaded from iconfinder.com
-
Shortcode "Content Icons" (folder: "sofa_downloadshop/images/icons")
Duesseldorf icon pack, created by PC.DE
Downloaded from pc.de
-
Shortcode tools set button icons (folder: "sofa_downloadshop/theme_script/shorties/images")
Icons from "Silk" iconset, created by Mark James (FamFamFam)
Downloaded from famfamfam.com
-
Home page, 4 featured boxes icons (folder: "sofa_downloadshop/images/intro_images")
Icons from "Micro" iconset, created by Blue Malboro
Downloaded from iconfinder.com
-
Versatile icons (folder: "sofa_downloadshop/images/icons")
"Fugue Icons", created by Yusuke Kamiyamane
Downloaded from iconfinder.com
Social icons in page footer; Facebook, Twitter + RSS, created by Artbees
Downloaded from iconfinder.com
Archives and Ticket icon, created by Dale Morrell
Downloaded from 19eighty7.com
Comment icon, created by Dat Nguyen
Downloaded from iconfinder.com
Edit Cart and Remove from Cart icons, created by Paul Armstrong
Downloaded from iconfinder.com
Error icon, created by Visual Pharm
Downloaded from iconfinder.com
Verify Discount Code icon, created by Gentleface (modified by theme author)
Downloaded from iconfinder.com
Alert icon, created by Ben Gillbanks
Downloaded from iconfinder.com
-
Download Icon (used in theme's logo and favicon)
Taken from Orb iconset, created by Taytel
Downloaded from iconfinder.com
TO TOP
Images used by Sofa DownloadShop
All of images used by this theme are taken from Envanto assets library and as such properly licensed for distribution.
TO TOP
PSD aka Design Source Files
The total of 7 PSD layered files are included to theme package (+ theme logo):
- home_page.psd
- inner_page.psd
- post_details.psd
- product_details.psd
- category_products.psd
- category.psd
- contact.psd
- site_logo.psd
Feel free to modify at will! All other variations of basic design files that can be seen in Browser as rendered pages use the same elements and layout.
TO TOP
Third Party Licenses
It has been mentioned earlier that Sofa DownloadShop theme layout relies on Kailoon's Simple CSS Framework. I have bought Extended license which allows me to distribute it with each theme copy.
As an end user of this theme and all of the files included in theme package, you are not allowed to use/re-use (entirely or partially), distribute or sell any of its files including "custom.css", "form.css", "framework.css" and "typography.css" without buying a proper license type!
These files can be found in "sofa_downloadshop/DownloadShop_MANUALS/assets/css" and "sofa_downloadshop/theme_css" folders.
Any eventual purchase of SOFA DownloadShop Extended License doesn't include Extended License of Kailoon's Simple CSS Framework!
TO TOP