“Quentin Wordpress Theme ” Documentation by “WEBNUS” v1.0.3
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Table of Contents
- Package Content
- Getting Started
- Installation
- Setting Up as Demo Site
- Create new Pages
- Setting up the Menu
- Setting up the Home Pages
- Setting up Footer
- Shortcodes
- Theme Options
- Setting up Blog Page
- Setting up the Portfolio
- Setting Up the Contact Us Page
- Setting Up the About Us Page
- Setting Up the FAQ Page
- Creating Custom Sidebars
- Shortcode Generator
- Setting up the Sliders
- How to Translate
- CSS Files and Structure
- JavaScript
- Sources and Credits
A) Package Content - top
Upon downloading the package zip file from Themeforest, you'll have all files you need inside. The package contains the following files:
1) quentin-wp.zip contains quentin theme
2) Quentin_child_theme.zip contains child theme
3) License folder
4) Layer slider Plug-in in folder "Recommended-Plugins"
5) Revolution slider Plug-in in folder "Recommended-Plugins"
6) Visual composer Plug-in in folder "Recommended-Plugins"
7) Shortcode Generator Plug-in in folder "Recommended-Plugins"
8) Documentation folder
B) Getting Started - top
To install this theme you must have a working version of WordPress already installed. For more information regarding installing the WordPress platform, please see the WordPress Codex -
http://codex.wordpress.org/Installing_WordPress
C) Installation: - top
When you are ready to install a theme, you must first upload the theme files and then activate the theme. For this purpose, unzip the file that you downloaded from themeforest (QUENTIN-WP.zip) and there you would find theme (quentin.zip) file and upload it via wordpress installer. The theme files can be uploaded in two ways
FTP Upload
- Unzip the " quentin.zip " file
- Upload the extracted "quentin" theme folder into "/wp-content / themes/" in your wordpress installation
- Unzip the " quentin-wp.zip" file
- For Activate the theme, Go to Appearance > Themes and activate the installed theme
WordPress Upload
- Navigate to Appearance > Themes
- Click Install Themes tab and hit the upload button
- Navigate to find the "quentin.zip" file on your computer and click "Install Now" button
- The theme will be uploaded and installed
- For Activate the theme, Go to Appearance > Themes and activate the installed theme
Plug-ins Install
After install the theme you need to install Plug-ins. You can find these plug-ins in "Recommended-Plugins" folder.
For install each plug-in, Please read install instruction in documentation folder of plug-ins
D) Setting Up as Demo Site (Demo Data Install) - top
We have included the exported XML file from our demo; this allows you to quickly set up your theme the same way our demo is set up. Please note, the XML file does not include images or the slider data. Please find "quentinwordpresstheme.wordpress.2013-05-12.xml" in xml directory and use it. Follow These Steps Below To Import the XML File.
The XML file is included within the download package in "\xml \" folder
- Navigate to WP Admin > Tools > Import
- Select and install WordPress importer (Import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.)
- Once it's installed, select the "quentinwordpresstheme.wordpress.2013-05-11.xml" file and upload it. It will take a few minutes to install and upload all content
- Now navigate to WP Admin > Appearance > Menus page and set 3 menu for Header, Footer and Top Navigation like as below image and hit "save" button.
- Next, navigate to WP Admin > Settings > Reading Settings and set a front page and posts page and hit "save changes" button
- Please have patience; it can take several minutes or longer depending on the speed of your server
- If you have issues with the above process, please read the note below
Install Issue
If The XML file will not load, it's most likely due to host limitations. The easiest way to get around that is to leave the "download images and attachments" box unchecked. That will give you all the pages and posts without the attachments. This is a good option because users will need to use their own images anyways. Troubleshooting For XML
- Make sure the wp-content > uploads folder is writeable
- Make sure you have the uploads folder on your server, if you do not then please make one at wp-content > uploads
- It's possible that your server upload limit is too low, if so, contact your hosting company to temporarily increase it
- Some users may need to set their folder permissions for the wp-content/uploads folder to 777 before being able to upload anything
You can use this bellow link to learn more about install xml for demo
Uploading Sample .XML Data To Your WordPress Theme
E) Create new Pages - top
You can create any number of pages with content. Quentin includes several page templates to choose from, and you will need to choose the page template that suits your needs.
Follow These Steps Below To Create a New Page
- Navigate to Pages and click Add New.
- Input a new name for your page, then look for the Page Attributes on the right hand side of the page
- Parent is usually set to No Parent unless the page you are making is a Side Navigation page
- Then select a page template from the dropdown list. See list of page templates and descriptions below
- You can then select any number of Page Options
- Content for your page goes in the editing field, use the Visual or HTML editor. Page content is mainly built using Shortcodes, see the Shortcodes section for how to use them. You can also use our demo content, see the corresponding section of this document for the demo code of each page
Below are the page templates along with a description of each one
- Default Template: this is the default page templates
- Blog: these is the blog posts page layout templates with large images
- Blog2: these is the blog posts page layout templates with small images
- Blog TimeLine: these is the blog posts page layout templates Like as Facebook TimeLine layout
- Contact: this is the contact page template that you should choose when you make your contact page with Google map & contact form
- FAQ: these is the FAQ posts page template
- Home: these is the page template with Slider widget
- Home Blog: these is the blog posts page layout templates with Slider widget
- Home Portfolio: these is the portfolio page layout templates with Slider widget
- Portfolio: these is the portfolio page layout templates with 2column, 3column, 4column layout Option
- Portfolio Pinterest: these are the portfolio page layout templates Like as Pinterest layout
- Portfolio TimeLine: these is the portfolio page layout templates Like as Facebook TimeLine layout
Quentin supports custom WordPress menus, with up to three levels of dropdown support for the main menu. There are 3 areas of the theme where you can assign a menu; the Header Menu, the Header Top Navigation, and the Footer Navigation Menu. If you've imported the demo data, then please follow those steps and select the demo navigation menu called "Main" as the main navigation. If you are making a new menu and would like to assign it to any of our 3 menu locations, read below.
To setup a new menu, please follow the steps below
Please note that it is better to create your own pages first, even if they are blank pages
- Navigate to Apperance > Menus page
- Click the "+" icon to make a new menu. Enter the name then hit Create Menu
- To add a menu item, you can easily select one of your already made pages on the left hand side and click Add to Menu
- Enter Navigation Label and Title Attribute. To show menu description, don’t forget to click Screen Options and select Description checkbox and enter description
- You can also add menu items by entering a custom name and custom link into the Custom Links box
- You can manage your menus using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section
- After setting up your menu, select the menu you just created as the Main Navigation in the Theme Locations box
- Once it's all done, make sure you click the Save Menu button
Header Top Navigation Menu: Quentin also includes a secondary top navigation option with one of our various header designs. It's called Top Navigation in the menu section of your admin. Follow the steps above to create a custom menu for your top navigation and set it to show in the Theme Locations box.
Footer Navigation Menu: Quentin also includes a secondary Bottom navigation option with one of our various footer designs. It's called Footer Navigation in the menu section of your admin. Follow the steps above to create a custom menu for your top navigation and set it to show in the Theme Locations box.
G) Setting up the Home Pages - top
Create the home page
Quentin includes many pre-designed home page options. Any of the layout options can be used on your home page or any other page via shortcodes, Homepages can be built through a combination of shortcodes or with our pre-designed demo pages. You can mix and match anyway you like. You can create the homepage's content using Visual Composer or classic wordpress editor
- To set up the homepage you must create a new page; you can do so by navigating to Pages › Add New and make sure you set the Template to Home Blank in the Page Attributes box
- To create your home page with shortcodes, click the shortcode icons you want in the Visual Editor and populate your content. To use one of our pre-designed layouts, copy and paste our demo code into the HTML editor of your page. See the demo code for each home page below.
- See our shortcodes section for more detailed info on how to use them
- You can create the homepage's content using Visual Composer or classic wordpress editor
- Finally click Publish or Update
Show up as the home page
Once you have created your home page, you need to select it to show up as the home page. To do this, follow the steps below.
- Navigate to Settings > Reading
- Select A Static Page for Front Page Displays
- Select your new home page for the Front Page
- This is also the same spot you select the Blog page
Home page demo codes
Homepages can be built through a combination of shortcodes or with our pre-designed demo pages.
- To use one of our pre-designed layouts, copy and paste our demo code into the Text editor of your page. See the demo code for each home page below.
- To create your home page with shortcodes, click the shortcode icons you want in the Visual Editor and populate your content. See our shortcodes section for more detailed info on how to use them
Home 1 demo code
Home 2 demo code
Home 3 demo code
Home 4 demo code
Home 7 demo code
Home 8 demo code
To setup footer, navigate to Appearance>Widgets and drag any widget that you want from Available Widgets list and drop to one the footer sliders. Footer slider 1, Footer slider 2, Footer slider 3 or Footer slider 4,
I) Shortcodes - top
Quentin includes a lot of shortcodes. Most pages and elements are built using shortcodes, it provides major flexibility to use them anywhere, and also allows users to quickly and easily build pages. All shortcodes are accessed in the usual spot, which is in the Visual Editor Field. See the screenshot below to see where they are located. Click a shortcode icon and simply populate the content inside of it, some of them have various options to choose from, and the column shortcodes can be wrapped around other content to keep them inside columns. See our demo code for additional examples.
How to Use Column Shortcodes
Column shortcodes are used addition with the other shortcodes when you want to keep your content within a specfic column. For example, you have an image slider, and you want it to only cover half the width of the page. You would then wrap a [one-half] column shortcode around the slider. This is the basis for all columns. Below is an example with a little bit of math that helps explain the process of how you need to specify the order of the columns.
- If you want four columns you'd use four sets of [one-fourth] shortcodes.
- Each set contains and open tag [one-fourth] and a closing tag [/one-fourth]. Your content for the columns goes between the open/close tags.
- The first three of them are "not the last one" so you need to insert last="no", so it looks like this [one-fourth last=" false "]
- However the last column needs to be last="yes" in order to fit all of them in one line, so the last column looks like this [one-fourth last="true"]
- So a row of content in 4 columns looks like this [one-fourth last="false"]...[/one-fourth] [one-fourth last=" false "]...[/one-fourth] [one-fourth last=" false "]...[/one-fourth] [one_fourth last="true"]...[/one-fourth]
J) Theme Options - top
Quentin has an advanced Theme Options panel that is loaded with options. There are too many options to go over in these docs but please take some time and navigate through each tab. Go to Appearance > Theme Options and take a look. We've organized them into logical sets and have given descroptions for items that need it, most things are self explanatory. Be sure to hit Save Changes to save your settings once you are done.
You can also backup your theme options, click on the Import/Export tab and copy the data inside the Transfer Theme Options Data field.
Please find "webnus_options_options_07-05-2013.txt" in xml directory and use it.
K) Setting up Blog Page - top
To setup your blog page, create a new page and name it anything that you want. Make sure the page Template is set to Blog1 or Blog2 or Blog Timeline in the Page Template of Page Attributes Box on the right hand side of the page editor.
Set Blog Options
To select a specific blog page layout design, simply follow the steps below
- Navigate to Theme Options and click on the Blog Options Tab
- In this tab you can configure anything about blog an finally hit save changes
- Then Navigate to Settings > Reading and select your blog page name for the Posts Page
Create posts
After your Blog page is made, you have to create posts to show up on the blog page. Follow the steps below to create a blog post.
- All of your blog posts are made in the Posts section of your wordpress admin. Click on Posts to open the section.
- At the top of the posts page, click on Add New to make a new post. Create a title and insert your post content in the editing field
- On the right hand side of the post page is the Categories box. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a post, simply check the box next to the Category name.
- You can also apply Tags to a post. The Tag box is below the Category box. Simply insert your tags, separate multiple tags with commas
- To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use As Featured Image
- To set a Video. Enter video embedded code in Video post section and Click Save
- To add a sidebar you must first create the sidebar under Appearance > Sidebars. And then select the sidebar you would like to display on this page.
- Once you have everything you want selected, click Publish and your post will show up on your blog page
L) Setting up the Portfolio - top
To setup your portfolio page, create a new page and name it anything that you want. Quentin includes 3 different portfolio templates. Select the page Template of your choice. You can select Portfolio, Portfolio Pinterset or Portfolio Timeline. After you create your new page and select the template you want, you need to make portfolio posts. Each portfolio post you make gets a thumbnail added to the main listing page (by setting a featured image for each post) and also gets a single post page.
Create Portfolio posts
After your Portfolio page is set, you create posts to show up on the portfolio page. Follow the steps below to create a portfolio post.
- All of your portfolio posts are made in the Portfolio section of your wordpress admin. Click on Portfolio to open the section.
- At the top of the page, click on Add New to make a new portfolio post. Create a title and insert your post content in the editing field
- On the right hand side of the post page is the Categories box. These Categories are the filters that will sit above your portfolio images and allow you to filter the different types of projects. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a post, simply check the box next to the name.
- To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use as Featured Image. Setting a Featured Image is important because it is needed for the thumbnails to show up on the main portfolio page.
- Once you have everything you want selected, click Publish and your post will show up on your portfolio listing page and the single post page
Set portfolio Options
To select a specific portfolio page layout design, simply follow the steps below
- Navigate to Theme Options and click on the Blog Options Tab
- In this tab you can configure anything about blog an finally hit save changes
Quentin includes various page templates that you can use; Most of our page elements are shortcodes and can be used anywhere in combination. And we provide our exact demo setup for you to use, the code is below. Or you can also build custom pages using shortcodes. If you use our demo code, you may need to change the image URL's to the images in your media library.
To create Contact Us page, follow the steps below
- Create a new page and name it anything that you want
- In the Page Attributes box on the right hand side, set Template to Contact
- Insert any content you want into the editor fields, such as a heading and text as our demo shows
- To insert the Google Map, email address and, please navigate to Appearance > Theme Options > General and set those options. See the screenshot below
- To use our pre-designed layout, copy and paste our demo code below into the HTML editor of your page.
- To create a custom page with shortcodes, click the shortcode icons you want in the Visual Editor and populate your content. See our shortcodes section for more detailed info on how to use them
- Once you have everything you want selected, click Publish
Contact Page demo code
N) Setting Up the About Us Page - top
Quentin includes various page templates that you can use; Most of our page elements are shortcodes and can be used anywhere in combination. And we provide our exact demo setup for you to use, the code is below. Or you can also build custom pages using shortcodes. If you use our demo code, you may need to change the image URL's to the images in your media library.
To create About Us page, follow the steps below
- Create a new page and name it anything that you want
- In the Page Attributes box on the right hand side, set Template to Default Template
- To use our pre-designed layout, copy and paste our demo code below into the HTML editor of your page.
- To create a custom page with shortcodes, click the shortcode icons you want in the Visual Editor and populate your content. See our shortcodes section for more detailed info on how to use them
- Once you have everything you want selected, click Publish
About Us demo code
About Us2 demo code
About me demo code
Our Team Page Demo code
Testimonials Page Demo code
Services Page Demo code
Pricing Page Demo code
O) Setting Up the FAQ Page - top
Quentin includes a Frequently Asked Questions (FAQ) page that allows you to insert large amounts of content questions organized into Categories using filters, just like the Portfolio Posts can be filtered.
To create the FAQ Page, follow the steps below
- Navigate to FAQ > Add Item
- Create a title which will be the question
- insert in the editor field which will be the answer
- Once you are done, be sure to Publish
Quentin allows users to make an unlimited amount of custom sidebars. And you can apply those sidebars to any page by selecting its name from the Sidebar page option dropdown list. Be sure that you have the page template set to Default, or another sidebar template which allows a sidebar to show. To create a Sidebar, follow the steps below
- Navigate to Appearance > Sidebars
- click the Add New Sidebar button and give it a name and click OK to save it
- Once you are done, you need to add Widgets to the sidebar you just created
- Navigate to Appearacne > Widgets and find your sidebar name on the right hand side
- On the left hand side you will see all the widgets you can use, simply drag and drop the widget you want into your sidebar on the right hand side
- Widgets you drag over have to be populated with content, edit the widget fields and hit Save
- See our Widget section of this documentation for more details on our custom widgets
Q) Shortcode Generator - top
Quentin includes 5 custom widgets. All widgets are accessed in Appearance > Widgets. Drag and drop the widgets you want over into the right hand side where your sidebars and footer widgets are listed. Simply drag your widgets over to the sidebar or footer column, and then populate the content. There are various fields and settings you can choose for each individual widget and all are self explanatory. You can also use multiple widgets per footer column, just drag and drop them into place. And you can put as many widgets as you want inside of a sidebar. Once you have finished populating the widgets, always make sure to hit the Save button to save the settings. Some important notes are below for specific widgets.
First of all please install Shortcode Generator plug-in
R) Setting up the Sliders - top
Quentin includes 2 sliders, the Revolution Slider and the Layer Slider. These sliders include a plug-in that fully integrated into Quentin. Both plugins are the same and work the same way. When you install the theme, the plugins will automatically be installed with the theme and will be able to be access in the sidebar of your wordpress admin. We have an individual section below for each of our 2 sliders that show you how to use each one.
Revolution Slider
Quentin includes Revolution Slider . This slider is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. On top of that, Slider Revolution is fully responsive and mobile optimized and can take on any dimensions.
First of all please install Revolution Slider plug-in
Create Slider
- Click on the Revolution Slider sidebar item
- Click the Create New Slider button
After pressing the "Create New Slider" button you will reach a form where you are asked to enter a Slider Title (used for the Slider overview in this backend) and a Slider Alias (a slug that is used to implement the Slider in your WP later, so keep it simple with no spaces and special chars).
- The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouse over so they are not explained here.
- The Slider Type can be fixed (not responsive, fix dimensions), responsive (changes depending on the size of its max. sizes given later in relation to the screen size) or full width (always 100% in width of the screen size, but height keeping the aspect ratio).
- The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.
- Once you are done, click Create Slider and your new slider will be made
Create Slides
- The next step is creating/editing slides. You get there by just clicking on "Edit Slides" in the Slider Form window.
- Click the New Slide button and select a background
Just press "New Slide" and the native WP Media Upload dialog window will appear. Choose or Upload the slide's background image, choose "Full Size" and then "Insert into Post" (all like you are used to it in your WP editor). You can always click on the pic to change it.
Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown) or delete it with the "Delete" button
- Then click Edit Slide to add content to it
- Inside the slide setting are many fields you can set
- To create a Layer (Caption, Image or Video) press the button "Add Layer" or "Add Layer: Image". In case of a text layer a basic layer will be created you can use the "Text" field in the Layer Params to change the caption on it. The "Style" selectbox shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the "Edit CSS File").
- In case of an Image Layer you will see the native WP Media Up loader again. In case of a Video Layer you will prompted to a custom Video selection wizard.
- You now can move the Layers around via drag & drop or type in the x and y coordinate in the corresponding fields.
- The "Layers Sorting" drag & drop list determines the Layers' z-index. This list specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
- You can click Preview Slide to see a preview
- Then click Update Slide and your slide will be saved
- Repeat the process for each slide you add
Layer Slider
Quentin includes Layer Slider . LayerSlider is the most advanced Responsive jQuery Slider Plug-in with the famous Parallax Effect and optional 3D Transitions! You can use LayerSlider to create a breathtaking Image Slideshow, Banner Rotator or Content Slider to your site!
First of all please install Layer Slider plug-in
Create Slider
- Click on the Layer Slider sidebar item
- Click the Add New button at the top
- The Global Settings tab will open and allow you to set the general settings for your slider such as the width, height, responsive, full width, and much more
- There are many Skins you can select for the Skin field, use any of them listed
- Once you are done, click Save to save the slider
Create Slides
- Click on the Layers tab.
- Layer #1 will already be showing, each layer is one slide and you build multiple Sublayers for additional content that is included in that one slide
- Add a background image for Layer #1 and set other settings for it
- Then create Sub layers for any additional elements you want to show on the slide
- Each sub layer will have its own settings, you can set animations, speed, delay in, links, etc
- You can click Enter Preview to see a preview of the slide
- Repeat the process for each slide you add
- When you are done, click Save Changes
S)How to Translate - top
We provide translation files for you to translate the theme into your language. The translation files Quentin.mo and Quentin.po are located in the languages folder inside your package.
To translate the theme into your language, follow the steps below
- Edit the .po file using POEdit (you can also use qTranslate or WPML plugin)
- Use the translation field to make replacements
- From the file menu, save file with your language name it, for example: it_IT.po. It will generate both a .po and .mo file for your translation.
- Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.
- Then go to your server via FTP, navigate to the theme folder and find the languages folder, its located at wp-content > themes > Quentin > languages
- Upload the language files in the languages folder, and then you're done!
Please Note: If you are interested to help us to translate the theme to your native language please let us know by sending an email to webnus.net@gmail.com
T) CSS Files and Structure - top
we are using 10 CSS files in this template: "style.css" - "color-skins.css" - "base.css" - "skeleton.css" - "slide1.css" - "slide2.css" - "s-columns.css" - "layerslider.css" - "prettyPhoto.css" - "flexslider.css" - contains all general styling, such as colors, font-sizes, etc. but also all of the specific stylings for the page and slider in home page
The "style.css" file is separated into sections using:
.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
I.E. you want to change the header height:
/* HEADER */
#header { padding-top:8px; padding-bottom:3px;}
U) JavaScript - top
This template imports 15 Javascript files.
- jquery.min.js
- modernizr.custom.11889.js
- nav-resp.js
- slide1.min.jquery.js
- bootstrap-alert.js
- bootstrap-dropdown.js
- bootstrap-tooltip.js
- bootstrap-tab.js
- jcarousel.js
- quentin-custom.js
- isotope-custom.js
- isotope.js
- jquery.prettyPhoto.js
- jquery.flexslider-min.js
- jquery.masonry.min.js
V) Sources and Credits - top
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
www.webnus.net
Go To Table of Contents
