Help File

Help File: Sell

Help file last updated on 27 November 2014

1.0 Getting Started

1.1 Downloading The Theme

Download the theme from your ThemeForest Downloads page and unzip the file you just downloaded. You will now see a folder called sell-theme, within the folder you will see the following:


1.2 Installation

Before installing the theme make sure you have installed WordPress 3.5 or higher. You can download WordPress for free from WordPress.org.

It is recommended that you install WooCommerce before installing and activating the theme.

There are two ways to install the theme, please choose the one that best suits you:

1.2.1 Installing Through WordPress Admin Panel

You can also install the theme through the WordPress admin panel. However you will need to make sure the file size of sell.zip does not exceed your upload limit - if it does please see http://wptheming.com/2009/07/upload_max_filesize for more information.

Then to install the theme follow the steps below:

  1. Log in to the WordPress Admin Panel.
  2. Go to Appearance -> Themes.
  3. Click the Install Themes or Add New button.
  4. Finally click the Upload or Upload Theme button and upload sell.zip (NOT sell-theme.zip).

1.2.2 Installing Through FTP

If the theme is too large to upload through the WordPress admin panel you should upload the theme through an FTP client instead.

To set up an FTP client refer to the WordPress documentation on this http://codex.wordpress.org/FTP_Clients.

Once you have set up your FTP client upload the sell folder to your WordPress themes directory wp-content/themes/ (this is in inside the sell-theme folder if you downloaded the main files download).

1.2.3 Activating the theme

Once you have installed the theme you should activate the theme by going to Appearance -> Themes and clicking the Activate link below the Sell theme.


1.3 Installing Required & Recommended Plugins

1.3.1 Installing Plugins

This theme comes with three required plugins:

  1. Sell Plugin: Includes a number of features that you can still use if you switch to another theme such as your slides and custom sidebars.
  2. Visual Composer: Adds a drag and drop page builder and front-end editor which many of the page templates rely on.
  3. WooCommerce Predictive Search PRO: Extensive search features including predictive search.

The theme also recommends several other plugins used in the demo, which do not need to be installed if you don't want to use them. To view the recommend plugins go to Appearance -> Installed Plugins.

You cannot manually update the premium theme plugins unless you have purchased them separately. If these plugins have been updated you will need to wait until a new theme update is released that will include any plugin updates.

1.3.2 Plugin Issues

If the required plugins are not installed go to Appearance -> Install Plugins and click the Install link for each plugin.

Plugins

You can also find the plugins inside the theme folder you downloaded at sell-theme/sell/lib/plugins/. You can then upload each plugin zip file manually as follows:

  1. Log in to the WordPress Admin Panel.
  2. Go to Plugins -> Add New.
  3. Click the Upload link in the top sub-menu and upload each zip file.

1.4 Using Demo Content

The theme comes with two demo files. demo.xml imports example posts, pages, comments, custom fields, categories, tags and widgets.wie imports widgets. The demo content can help you in learning how the theme works.

Before importing the demo content make sure you have installed and activated the WooCommerce plugin.

To add this demo content follow the steps below:

  1. Go to Tools -> Import and select the WordPress option. If you are prompted to install the WordPress Importer plugin you should do this.
  2. Click the Browse button and locate the demo.xml file that is inside the sell-theme/sell/Help/Demo Content/ folder and double click the file to select it and then click the Upload file and import button.
  3. A new screen will appear, check the Download and import file attachments option and click Submit.
  4. To import the demo widgets go to Tools -> Widget Import/Export, click the Choose file button and locate the widgets.wie file that is inside the sell-theme/sell/Help/Demo Content/ folder and double click the file to select it and then click the Import Widgets button.
  5. If you get a message that a widget is not supported or already exists please ignore it. It just means the widget has not been added to the sidebar probably because it's already in the sidebar or it's not enabled on your installation (e.g. BuddyPress widgets).

  6. Now go to Appearance -> Menus and under the Manage Locations tab select "Left Menu" for Left Header Navigation and "Right Menu" for Right Header Navigation.
  7. Finally go to Settings -> Reading, select A static page option and from the Front page drop down menu select the page called "Home" (leave the Posts page drop down menu empty).

1.5 Updating The Theme

From time to time free theme updates will be released which will include bug fixes and feature updates.

1.5.1 Activating Update Notifications

In order to receive update notifications you need to do the following:

  1. Go to ThemeForest Downloads page and find this theme.
  2. Check the Get notified by email if this item is updated option as shown in the image below.

Update Notifications

1.5.2 Updating The Theme

Once you have enabled update notifications there are two ways to update your theme as follows:

1.5.2.1 If you have made NO changes to the theme files

If you have made no changes to the theme files you can update the theme as follows:

  1. Download the theme from your ThemeForest Downloads page and unzip the file you just downloaded. You will now see a folder called sell-theme.
  2. Go to Appearance -> Themes and activate another theme.
  3. Now click the Delete link for the Sell theme.
  4. Select Install Themes.
  5. Now click the Upload link in the top sub-menu and upload the new version of sell.zip (NOT sell-theme.zip).

1.5.2.2 If you HAVE made changes to the theme files

It is recommended that you create a child theme to make changes to the theme so you can upgrade automatically without your changes being overwritten. To set up a child theme see Creating A Child Theme.

However if you have made changes to the parent theme's template files you will want to update the theme manually so you do not overwrite these changes as follows:

  1. Download the theme from your ThemeForest Downloads page and unzip the file you just downloaded. You will now see a folder called sell-theme.
  2. Now read the changelog so you can see what files that have been updated, added and/or removed.
  3. You can use DeltaWalker or DiffMerge and compare the code changes between your modified files and the new theme files.
  4. Before uploading the new theme you should make a backup of the current version you have installed. This can be done by downloading the theme folder from your server to your computer.
  5. Now upload the new sell folder that is inside your sell-theme folder to your WordPress themes directory wp-content/themes/.

1.6 Updating The Plugins

Whenever a new version of a plugin is available you will be emailed that the theme has been updated if you activated update notifications as described in the Activating Update Notifications section.

To update the theme plugins do the following:

  1. Update the theme as described in the Updating The Theme section.
  2. Now go to Appearance > Install Plugins and check the plugins that need updating, select Update from the dropdown menu and click Apply.

Updating Plugins


1.7 Basic Troubleshooting

1.7.1 General Issues

Disable all your plugins to see if this fixes any issues you are experiencing. If it does, reactivate the plugins one by one or in groups so you can identify which one is causing the problem.

If the problem is not fixed activate the default Twenty Twelve theme to see if this fixes the issue. If the problem still occurs it is likely a WordPress issue instead of a theme issue and you should post a support topic at the WordPress support site at http://wordpress.org/support.

If the problem is fixed it may be a theme issue, in which case post a support ticket at http://ghostpool.ticksy.com and include your website address and WordPress admin login details.

1.7.2 Does your server have the GD library compiled with its version of PHP?

This theme requires the GD library for image resizing. If your images are not working, check with your host to make sure it is installed.


2.0 Creating Pages

2.1 Creating A Homepage

2.1.1 Creating The Page

  1. Go to Pages -> Add New to create a new page.
  2. Give your page a title.
  3. On the right hand side in the Page Attributes panel select the "Homepage" page template from the Template dropdown menu.
  4. A new section will appear below the text editor in the Page Settings panel called Homepage Settings, which allows you to control the homepage slider.
  5. Go to Settings -> Reading, select A static page option and from the Front page drop down menu select the page you just created (leave the Posts page drop down menu empty).

2.1.2 Adding Slides

  1. By default the homepage slider displays slides (custom post type), but it can also display posts, pages or any other custom post type you have installed.
  2. To add a slide to the slider go to Slides -> Add New.
  3. Add your image, title and content just as you would with a post.
  4. Once created, the slide will automatically show up in the slider.

Since the slider is fullwidth it will always be the same size as the visitor's browser window, therefore the slider images should be as large as possible so they do not look pixelated on larger screens. Images above 1200px in width and 1000px in height should look good on most screens.


2.2 Creating A Blog Page

To set up a blog page to display all your posts you first need to create some posts as follows:

  1. Go to Posts -> Add New to create a new post.
  2. Give your post a title and content in the text editor.
  3. Scroll down to the Post Settings panel where you can control the way the post looks.
  4. On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this post.
  5. After uploading or selecting your featured image click the Set featured image button in the image upload window.
  6. On the right-hand you can assign your post to categories from the Categories panel e.g. "Blog".

The blog page is just an ordinary post category page which you can add to your navigation menu as follows:

  1. Go Appearance -> Menus and from the left-hand side in the Categories panel, select the categories you want to add to your menu.

2.3 Creating A Contact Page

The contact page is an ordinary page that uses a shortcode provided by the Contact Form 7 plugin to display the contact form. To set up your contact page do as follows:

  1. Install and activate the Contact Form 7 plugin.
  2. Go to Contact from the main menu on the left and click Add New to create a contact form.
  3. Once you've created your contact form it will give you a shortcode to copy and paste e.g. [contact-form-7 id="2804" title="Untitled"].
  4. Go to Pages -> Add New to create a new page.
  5. Give your page a title and in the text editor paste the shortcode you just copied.

2.4 Creating A Product Category

2.4.1 Creating A Category

In order to create product categories you first need to install and activate WooCommerce. Once installed WooCommerce will automatically create a page called "Shop" which will display all of your products across all product categories. To add this to your navigation menu do as follows:

  1. Go Appearance -> Menus and from the left-hand side in the Pages panel select the page called "Shop" and add it to your menu.

To set up individual product categories do as follows:

  1. Go to Products -> Categories and create a new category.
  2. Now when you create a product you can assign it to this category just like you do with a post.
  3. Go Appearance -> Menus and from the left-hand side in the Product Categories panel select the product categories you want to add your menu.

If you can't see the Product Categories panel click the Screen Options button in the top right corner and check the Product Categories option.

2.4.2 Adding Product Filters To The Info Bar

The info bar is the area across the top of the page just below the header. To add product filters (colour, size etc.) do as follows:

  1. Go to Appearance -> Widgets and drag and drop the WooCommerce Price Filter and WooCoomerce Layered Nav widgets into the Info Bar widget area on the right-hand side of the page.

Info Bar

In order to use the WooCoomerce Layered Nav widget you need to create attributes for your products. If you are unsure how to do this read the WooCommerce documentation on this at http://docs.woothemes.com/document/product-variations


2.5 Creating A Product

In order to create products you first need to install and activate WooCommerce.

Once you have installed WooCommerce, the WooCommerce documentation provides a detailed outline on how to create a product at http://docs.woothemes.com/document/managing-products.

The theme adds an additional section to product page that allows you to add content to all product pages such as shipping, returns and sizing chart information. To add this content do the following:

  1. Go to Appearance -> Theme Options -> Product Page Settings and find the Product Content text box.
  2. You will see there is already content in the text box that creates three links to shipping information, returns information and a sizing chart which all open in a lightbox (you can see what this content looks like by viewing a product page you have created).
  3. You can either modify the existing code or remove it and add your own.

2.6 Visual Composer (Page Builder & Shortcodes)

This theme comes bundled with the Visual Composer plugin, which provides a drag and drop interface for creating complex page layouts and provides many shortcodes. This can all be accessed by creating or editing a page and clicking the Visual Composer button.

For more information on using the Visual Composer refer to the video below:

An About Us page and FAQs page have been built using the Visual Composer, you can import these from the demo.xml file or create these yourself by following the steps below:

2.6.1 About Us Page

  1. Go to Pages -> Add New to create a new page.
  2. Give your page a title.
  3. Click the blue Classic editor button to switch to the text interface.
  4. Click the Text tab.
  5. Copy and paste the code from the following into the text editor: http://pastebin.com/raw.php?i=Q0zcgxy4.
  6. Now click the blue Visual Composer button to switch back to the visual interface.

2.6.2 FAQs Page

  1. Go to Pages -> Add New to create a new page.
  2. Give your page a title.
  3. Click the blue Classic editor button to switch to the text interface.
  4. Click the Text tab.
  5. Copy and paste the code from the following into the text editor: http://pastebin.com/raw.php?i=tYMD2vRy.
  6. Now click the blue Visual Composer button to switch back to the visual interface.

3.0 Theme Sections

3.1 Header

3.1.1 Changing The Logo

  1. Go to Appearance -> Theme Options -> General Settings and find the Custom Logo Image option.
  2. You can either copy and paste your logo URL into the text box or click the Upload button to insert an image from your media library.
  3. If you use an image form the media library, select the image you want and then click the Insert into post button at the bottom of the window.
  4. For retina support make your logo double the width and height you want to display it at, you can then specify the logo width and height in the options.
  5. If you do not want the header to be fixed to the top of the page go to Theme Options -> Style Settings -> Fixed Header and disable the option.

3.2 Navigation Menus

3.2.1 Creating Menus

  1. Go to Appearance -> Menus to set up your left and right header navigation menus.
  2. Click the create a new menu link and create two menus.
  3. Click the Manage Locations tab and select your menus from the Left Header Navigation and Right Header Navigation drop down menus.
  4. To create dropdown menus drag the menu items you want in the dropdown inwards and underneath the parent link as shown in the image below.

Navigation Menus

3.2.2 Using UberMenu

The mega menu functionality seen in the theme demo is added by the UberMenu plugin. I would love to include this plugin with the theme but this is currently not allowed.

If you do not purchase the UberMenu plugin the dropdown navigation will still work, but with less functionality.

If you decide to purchase the UberMenu plugin the Left Header Navigation will automatically work with the plugin without any need to change the plugin settings.

3.2.2.1 UberMenu 3 (newer version)

To use the theme's own styling for the UberMenu do as follows:

  1. Go to Appearance -> UberMenu -> Basic Configuration and from the Skin dropdown menu make sure "None (Disable)" is selected.

To add the image of the woman as seen in the demo content "Women" menu, do as follows:

  1. Go to Appearance -> UberMenu -> General Settings -> Widgets and in the Number of Widget Areas text box add the number of widget areas you want to create (in this case just add "1") and click Save All Settings.
  2. Now go Appearance -> Widgets and add a Text widget to the new widget area called [UberMenu] UberMenu Widget Area 1.
  3. Within the widget add your image tag e.g. <img src="http://domain.com/woman-menu-image.jpg" alt="Womens Menu Image" />.
  4. Now go back to Appearance -> Menus, hover your mouse over the "Image" menu item, click the UberMenu button and from the Widgets tab select the UberMenu Widget Area 1 from the Reusable Widget Area dropdown menu.

3.2.2.2 UberMenu 2 (older version)

To use the theme's own styling for the UberMenu do as follows:

  1. Go to Appearance -> UberMenu -> Style Configuration and from the Style Preset dropdown menu make sure "Black and White" is selected.

To add the image of the woman as seen in the demo content "Women" menu, do as follows:

  1. Go to Appearance -> UberMenu -> Descriptions, Shortcodes, Widgets and in the Number of Widget Areas text box add the number of widget areas you want to create (in this case just add "1") and click Save All Settings.
  2. Now go Appearance -> Widgets and add a Text widget to the new widget area called UberMenu Widget Area 1.
  3. Within the widget add your image tag e.g. <img src="http://domain.com/woman-menu-image.jpg" alt="Womens Menu Image" />.
  4. Now go back to Appearance -> Menus, locate the "Image" menu item and select the UberMenu Widget Area 1 from the Display a Widget Area dropdown menu.

UberMenu

3.2.2 Only Show Links On Mobile Devices

If you only want to show specific menu links on mobile devices and hide them on desktop devices, for instance if you had links in the right menu and then want then shown in mobile menu when the right menu is removed, do as follows:

  1. Go to Appearance -> Menus and click the Screen Options button in the top right corner of the page and check the CSS Classes option.
  2. Add your menu items to both the left and right menus.
  3. Now for the left menu only, go to the link you want to hide on desktop devices and show on mobile devices.
  4. In the CSS Classes text field add nav-mobile-link.

3.3 Sidebars

The sidebar area is used to display widgets. By default all pages display the Standard Sidebar. To create a new sidebar and assign it to a page do as follows:

  1. Go to Appearance -> Sidebars, click the Add Sidebar link and give your new sidebar a name.
  2. Now go to the desired page and scroll down to the settings panel and select one of your sidebars from the Sidebar drop down menu.
  3. To change the sidebar on all posts, pages, categories, products etc. this can be done from Appearance -> Theme Options.
  4. Now go to Appearance -> Widgets and drag and drop widgets from the Available Widgets panel over to the widget areas on the right.
  5. You can add any shortcodes, scripts, advertisements within a Text widget.

3.4 Footer

The footer comes in two sections. The first section contains the social icons, copyright text and language selector. The second section contains the footer widgets. To set up both sections do as follows:

3.4.1 Setting Up The Bottom Footer

  1. Go to Appearance -> Theme Options -> General Settings and add your social links in the social icon text fields (start each link with http://).
  2. To replace the default copyright text, add your own text in Copyright text box.
  3. If you have installed the WPML plugin a language selector will be displayed on the right-hand side in the footer, to remove this disable the WPML Language Selector option.
  4. If you do not want the footer to be fixed to the bottom of the page go to Theme Options -> Style Settings -> Fixed Footer and disable the option.

3.4.2 Setting Up The Footer Widgets

  1. Go to Appearance -> Widgets and drag and drop widgets from the Available Widgets panel over to the five footer widget areas on the right.
  2. Each footer widget area represents a new column in the footer

4.0 Styling Your Site

4.1 Style Settings

With this theme you can style every element of the site as follows:

  1. Go to Appearance -> Theme Options -> Style Settings.
  2. Simply change the colors using the color picker or input your own color code.
  3. Click the Save Changes after you have finished editing this section.

4.2 Page Background

  1. Go to Appearance -> Background to add your own background colour or upload your own background image.

4.3 Customizing The Theme

If you want to customize the theme beyond what the Style Settings section offers the theme allows you to make customizations without editing the theme files so your changes are not lost when updating the theme. There are two ways of editing the theme as follows:

4.3.1 Creating A Child Theme

This theme comes with a child theme called "sell-child". A child theme inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a small change or extensive changes. Whenever you update the theme any changes you make to the child theme will not be overwritten. To install the child theme do as follows:

  1. Go to Appearance -> Themes -> Install Themes -> Upload and click Choose File and select the sell-child.zip file from inside sell-theme folder you downloaded from ThemeForest.

For more information on child themes refer to the WordPress documentation at http://codex.wordpress.org/Child_Themes.

4.3.2 Custom CSS Settings

You can also add your custom CSS code from the theme options, however this is limited as you cannot edit the template files like you can with a child theme. To add your custom CSS code do the following:

  1. Go to Appearance -> Theme Options -> CSS Settings and add your CSS code to the Custom CSS text box.

4.3.3 Developer Tools

An excellent way of editing your theme is to use the developer tools that come with most modern browsers. The developer tools allow you to see what HTML elements need to be styled and allows you to edit the styling of the theme within the browser window. These changes are not permanent and nobody else sees them, it's just a great way of adjusting the look of your site quickly. Here are some links to the developer tools for each of the major browsers:


5.0 Advanced

5.1 Translation

5.1.1 Translating The Theme

  1. Install the translation program Poedit.
  2. Open the sell-theme/sell/languages/en_EN.po file with Poedit.
  3. To translate the file with Poedit refer to the documentation at http://urbangiraffe.com/articles/translating-wordpress-themes-and-plugins/3.
  4. Locate wp-config.php, which is in the root directory of your WordPress installation and change the language. For more information see http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Manually_Installing_Language_Files for more information.
  5. If you want your website to support multiple language you can use the WPML plugin.

5.1.2 Updating Your Translation Files

  1. If you have updated the theme and the changelog says the translation files have been updated, if you have modified the translation files or created new ones you will want to update them rather than using the new ones.
  2. To do this insert your modified translation file (e.g. en_EN.po) into the sell-theme/sell/languages/ folder overwriting the new file.
  3. Now open this file in PoEdit and click Update and it will display the text changes since the latest theme update.

5.2 Optimizing Page Speed

In order to improve the page load speed you will want to optimize your site. This is not something the theme alone can do as it would make editing the theme difficult for the customer and relies on your own site content.

We recommend you follow the steps provided by GTmetrix at http://gtmetrix.com/wordpress-optimization-guide.html.


5.3 SEO Optimization

The theme was created with the best SEO practice in mind, but to add greater SEO functionality we recommend you use the WordPress SEO by Yoast plugin.


6.0 Credits