Luxury Theme Guide theme

Installing the theme

Install theme using the WordPress back-end

  • Connect to member area and expand the Luxury section under My Downloads. Download the available file to your hard drive.
  • Connect to your WordPress dashboard (wp-admin) and navigate to Appearance -> Themes. Click on the Install Themes tab and then on Upload
  • Use the Browse option to locate the Luxury zip file you downloaded earlier on your hard drive – then click on Install Now. After the installation process is finished activate the theme.

Install using FTP

In case the above steps didn’t work, you can always upload the files directly to your server.

  • First step is the same as above. Connect to member area and download the Luxury zip file to your hard drive.
  • Extract the file using software such as 7-Zip. Use “Extract Here” option, do not extract it into another folder.
  • Connect to your server and upload the Luxury folder to /wp-content/themes. For details regarding this step please open this article.

Step2: Installing WooCommerce

Since WooCommerce is the part that handles all e-commerce functionality you will need to install it before attempting to add any products. To install WooCommerce navigate to wp-admin -> Plugins -> Add New. Inside the search field type WooCommerce and let WordPress find the plugin for you. Once you locate it just hit install and then confirm when asked to activate the plugin. After activation you’ll also be asked to generate WooCommerce page, also hit yes.

In case you run into problems with automatic install, download the plugin and follow the these instructions:

  • Extract the plugin using software such as 7-Zip (use Extract Here option)
  • Connect to your server using FTP. For details open this article
  • Upload the plugin (folder) to wp-content/plugins
  • Go to wp-admin -> Plugins and activate the plugin

WooCommerce is a well-documented plugin and its documentation can be found here. This theme guide will not explain how to handle tax, shipping or create new products. All of that and more is provided inside the extensive WooCommerce guide

Step3(Optional): Load dummy data

In this section we will outline what you should do after installing Luxury and also the easiest way to make your site look like the demo site.

Load dummy widgets/other content

By clicking on just one button you can make Luxury populate your site with some pre-existing content such as the homepage slider, menus and more. To activate this navigate to wp-admin -> Appearance -> Themes and click on the blue “Yes, insert please” button at the top of the page.

Important note: Do not delete the dummy data if you’ve made changes to the dummy posts and pages. By doing so you will delete all the changes made to that content. If you don’t want the dummy data option to show once you’ve activated it go to Appearance -> Themes -> Customize -> General Settings and disable it.

Load dummy products

Even though the dummy data button will populate your site with various content, it won’t create any products. In order to do that navigate to wp-admin -> Tools -> Import and install the WordPress importer (if it isn’t already installed). Once installed, upload the dummy_data.xml file located inside the “dummy-data” folder of the WooCommerce plugin folder.

Once the upload completes you will have dozens of dummy products to explore and modify. Don’t forget to visit the WooCommerce guide for more information on the plugin.

Quick note: Unlike the theme dummy data which can be removed with one click (in Appearance -> Themes). Dummy WooCommerce products must be deleted individually (in wp-admin -> Products).

Need help with installing the theme? Hire us!

Facing Problems in installing the theme? Don’t worry, we’ll do that for you, just click here!

 

Getting started

Set your logo, colors and other theme options

Luxury theme options are available from wp-admin -> Appearance -> Customize. Here you can tweak anything from your logo and background to colors. Some of these options are explained below.

Site Logo and favicon

Changing the logo is as simple as expanding the “Site Logo” section in the options area, clicking on “select a file” b clicking the existing image and loading a new one from your hard drive. You can do the same for the favicon.

Typography

Font style and size of the site can be changed from this section. Use “Google Fonts” and “Font Size” dropdowns.

Remove the Templatic credit

To remove the “Designed by Templatic” credit inside the footer open the Footer section of the theme options area. Now remove/edit the paragraph inside the section.

Setup the navigation bar (menu)

Luxury have two menus: Primary and Secondary. To customize the items that appear there head over to wp-admin -> Appearance -> Menus. You can add and manage various items inside the menu. Post categories, pages, product categories and even individual products can be added to that menu. For details on using this section watch the following video

Once you create the menu activate it on the left side in “Theme Locations”. Assign your menu to the Secondary menu location. If you want a menu beside shopping-cart too then add menu in to “Primary” Theme location.

Setting up the slider

In case you activated the dummy data (in Appearance -> Themes) the slider should already be active. In case it isn’t, head over to Appearance -> Widgets and place the “T -> Slider widget” inside “Front Banner” widget area. To make sure the slider shows on the homepage make sure you’ve set a correct static page as your homepage.

Once the slider widget is placed inside the widget area you can also edit its properties. The banner images and texts can be changed this way:

  1. Text – “Banner Slider Title”, “Banner Slider by line” & “Banner Slider Description” options are responsible for displaying different size texts.
  2. Banner Images – “Banner Slider Image 1 full URL ” is responsible for the slider image. In “Banner Slider Image Full URL” enter the URL of the actual image that should be showing. You can upload these images in wp-admin -> Media. Once uploaded, open the image and copy its URL.

Customizing the homepage

With dummy data, the widgets are being loaded too. Though in case it is manual install or want to edit the stuff move to Appearance -> Widgets section. Some widget areas and relative widgets inside it can be placed. Below is the list of different widget areas and their suitable widgets for homepage:

  • Header Right: WooCommerce Product Search, T → WooCommerce Shopping Cart. This area comes in top-right of screen besides primary menu.
  • OffCanvas: The offcanvas sidebar will appear on the left side when you click on the menu icon in devices with smaller widths.
  • Home Page Content: T → Products Slider is the suitable widget. It comes immediately after the slider on home page.
  • Home Page – After Content Left: Suitable widget is – T → Products Slider. It comes on left hand side of the main content area on home page.
  • Home Page – After Content Right: Suitable widget is – T → Latest News. It comes on right hand side of the main content area on home page.
  • Home Page – After Content Fullwidth: Suitable widgets are WooCommerce Top Rated Products, WooCommerce Recently Viewed & T → Advertisement Widget. The gray colored full width background is from this area.
  • Footer: Suitable widgets are: Custom Menu, Text, T → Social Media, T → Newsletter, T → Advertisement Widget, T → Author Widget, etc…
  • Footer Full Width: Tiny strip coming above footer is from this area. We have placed simple Text widget there and have used font-awesome icons to show icons like phone/truck. Below is the sample code of the text widget:
[CODE]
<div class=”row”>
<div class=”large-12 columns”>
<ul>
<li>
<i class=”fa fa-money”></i>
<h2>
<span>Money</span> back Guarantee
<small>On Orders Overs $75</small>
</h2>
</li>
<li>
<i class=”fa fa-truck”></i>
<h2>
<span>Free</span> Shipping
<small>On Orders Overs $75</small>
</h2>
</li>
<li>
<i class=”fa fa-phone”></i>
<h2>
<span>Order</span> Online
<small>Phone: 1 (234) 56 78 901</small>
</h2>
</li>
</ul>
</div>
</div>
[/CODE]

Going deeper

Contact Us Page:

Contact us page is powered by Contact Form 7. It is free WordPress plugin. Go to Wp-admin -> pages -> Add new. Add the contact page shortcode there.

Style your page

Page/posts of your site can be styled easily by using some html tags. These are the different styles available you can give in to description of your page.

These are the html tags of different styles:

Translating Luxury

To translate Luxury you will need software like Poedit. Using Poedit you need to load en_US.po located inside your /languages folder and translate it. For detailed instructions on translating with Poedit open our localization tutorial.

Along with the included .po file, Luxury is also WPML compatible. Once you purchase the plugin install it in the same way you did the WooCommerce plugin. Once installed, open the WPML documentation (will be provided after purchasing) and start translating. The actual translating process is no different than with any other WordPress theme.

Compatibility with third-party plugins

Along with the super-important WooCommerce mentioned a few times already, Luxury is also compatible with some other plugins which you can/should use to extend the functionality of your theme. The most important of those are:

  • WordPress SEO by Yoast – by far the best SEO plugin inside the WordPress plugins directory. Since Luxury doesn’t come with SEO features built-in it’s highly recommended you install a plugin such as WP SEO by Yoast.
  • All in one SEO pack – This is another SEO plugin which is also compatible with Luxury. It is also one of the most popular SEO plugin that can be used in to site.
  • Gravity Forms – Unlike the SEO plugin, Gravity Forms is a premium plugin, but work every penny! It allows you to setup everything from simple contact forms to extensive and powerful order forms.

Important note: We cannot provide support for setup issues with these plugins; you can get support from the plugin makers. However, feel free contact us in case of any compatibility issues as these plugins are officially supported.

Frequently asked questions

My homepage isn’t showing the widgets I set, why?

For those widgets to show you must set a page created using the “Home Page” template as the static homepage. To make that happen follow these instructions:

  • Head over to wp-admin -> Pages -> Add New and create a new page using the “Home Page” template. The template can be selected on the right side of the screen, under “Page Attributes” section. You only need to enter the page title, the description (content area) can stay empty.
  • Now go to Settings -> Reading and under “Front page displays” choose the “A static page” option.
  • In the “Front page” dropdown select the page you created a few moments ago.

Once you perform these steps all widgets added to the “Front Banner” or “Home Page – Content” area will appear on the homepage.

Why are my video pages conflicting with the sticky header?

Most people won’t have a problem with this, but if you do instead of entering the embed code like this

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/1yyRPI7Mu3M?rel=0″ frameborder=”0″ allowfullscreen></iframe>

Enter it like this
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/1yyRPI7Mu3M?rel=0?wmode=transparent” frameborder=”0″ allowfullscreen wmode=”transparent”></iframe>

In other words, add ?wmode=transparent to the end of the source (src) URL and wmode=”transparent at the end of the iframe.

Customizing Luxury / Developer section

Make little tweaks using the custom css editor

The classes and css parameters can be overwritten with the default style by placing your new at Appearance -> Custom CSS Editor. Once you save data in it, the new style will be applied automatically in to front end.

Firebug is a nice help to find which CSS class we have applied to a particular element.

To learn more about custom.css visit the following article.

Create a child theme

Child themes are the best way to customize a theme without compromising the main (parent) theme. Updates become a major issue when updating parent themes, since you often need to update files that you’ve previously tweaked. With child themes your core (parent) files are left alone and all modifications are performed inside a separate folder.

Since creating child themes isn’t theme-specific there are a number of articles available online that you can utilize. These two will provide a great starting point:

  1. Child themes (WordPress Codex)
  2. How to create a child theme (ManageWP)

Key Luxury files

In this area we’ll try to outline some of the theme’s sections and the files that control them, i.e. the files you must edit in order to make changes. It’s up to you whether changes will be made directly in the files or via the child theme.

Homepage logo area – header.php
Post detail page – single.php
Post listing page (blog page) – archive.php
Most widgets – /functions/tmpl_widgets.php

 

 

Need help with installing the theme? Hire us!

Facing Problems in installing the theme? Don’t worry, we’ll do that for you, just click here!