Vendor

[one_third]

[/one_third]

[two_third_last]

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our ThemeForest profile page or visit our Theme Support Forum. Thanks so much!

[/two_third_last]

[button target=”_blank” color=”red” url=”http://demo.awesem.com/?theme=vendor”]Demo[/button] [customtextbuttonred url=’http://awesemthemesco.staging.wpengine.com/link/vendor-wordpress-theme’ url_ps=’http://awesemthemesco.staging.wpengine.com/link/vendor-wordpress-theme-ps’]

vendor-preview

1 - Installation

The theme can be uploaded in two ways:

  • WordPress upload: Navigate to Appearance > Add New Themes > Upload. Go to browse, and select the zipped vendor folder (vendor.zip) contained within the file you downloaded from ThemeForest. Hit Install Now and the theme will be uploaded and installed. Do not upload the whole zip file you downloaded from ThemeForest. You only need the deadline.zip file enclosed in the zip-file.
  • FTP upload: Using your FTP program, upload the non-zipped “vendor” folder into the /wp-content/themes/ folder on your server. Do not upload the entire folder you downloaded from ThemeForest as this includes PSDs, screenshots etc. If you have done this correctly then you should end up with the following structure: /wp-content/themes/vendor

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate the theme.

2 - Setting up the blog and the homepage

To create the homepage as seen in the demo you must first create a page and call it e.g. “Home”. You need to ensure that you use the “Home” page template when you publish this page. To create the blog you must first create a page and call it e.g. “Blog”.

Next, head over to your reading settings Admin > Settings > Reading and set the Front page displays options as below.

3 - Post formats

When creating a post, you will be able to choose from a selection of formats. The available formats are:

  • Standard
  • Gallery
  • Link
  • Image
  • Quote
  • Audio
  • Video

“Link”, “Quote”, “Audio” and “Video” have their own custom options. These custom options will only appear once the format is selected.

3.1 – Standard post format

The standard format will show the title and the content.

3.2 – Gallery post format

The gallery format will display a slider with all the images attached to that post. To attach an image to the post, simply upload your images using the media uploader whilst creating or editing the post. Make sure you upload more than one image. If you only want to show one image, use the “Image post format” instead. These images (need to be at least 730px wide) will be resized to fit the theme dimensions.

3.3 – Link post format

The link format has one custom option called “Link URL”. This is where you place the link URL. The title of the post will be the link text. This format will also display the content if you choose to have any.

3.4 – Image post format

The image format will display the title, content and a featured image. Make sure to create a featured image for this post format (using an image at least 730px wide).

3.5 – Quote post format

The quote format has one custom option called “Quote”. This is where you provide the quote content. This format will display the quote along with some content if you choose to have any.

3.6 – Audio post format

The audio format displays the title and content along with a custom audio player. You will have two custom options to fill. The first is the link to an .mp3 file and the second is to an .ogg file. It’s important to fill out both in order for the audio player to work in all browsers. If you only supply one of them then be aware that the file may not work everywhere. You can also add a featured image. It will be displayed above the audio player.

3.7 – Video post format

The video format displays the title and content along with a custom video or an embedded player depending on the options you have entered. If you’re using the self-hosted video solution, you will need to provide both .m4v and .ogv files in order for the video to work in all browsers. You can also optionally provide a featured image that will operate as a video preview.

4 - Setting up the portfolio

To create a new project, navigate to the ‘Portfolio’ section in our admin panel and click ‘Add Project’.

In the WYSIWYG panel that appears you can enter any information about the particular project.
To create thumbnails for the project, ensure you assign a ‘featured image’. For more information on setting featured images, please visit this WordPress guide.

In the meta boxes on this page you assign each project a project type, a category if you will. Assigning a project type will make the projects filterable in the portfolio section. You can add more Project Types by navigating to the ‘Project Type’ section in the admin panel.

Each project can have a custom thumbnail: just paste the URL of your custom thumbnail (Must be 730×584 px). If the field is empty it will use the featured image instead.

You can also provide an external URL (“Project URL”).

You can choose between different formats: image, video or audio. Each format have different options:

  • Image: it will display a slider (if you upload more than one image) with all the images attached to that post. To attach an image to the post, simply upload your images using the media uploader whilst creating or editing the post (don’t forget to use the first image you want as a “featured image”).
  • Video: you can have a custom video or an embedded player depending on the options you have entered. If you’re using the self-hosted video solution, you will need to provide both .m4v and .ogv files in order for the video to work in all browsers. You also must provide a featured image that will operate as a video preview and as a project thumbnail.
  • Audio: you will have two custom options to fill. The first is the link to an .mp3 file and the second is to an .ogg file. It’s important to fill out both in order for the audio player to work in all browsers. If you only supply one of them then be aware that the file may not work everywhere. You must also add a featured image.

To display the portfolio you must create a page and make sure that you use the ‘Portfolio’ page template when you publish it.

5 - Setting up the slider

To create a slider item, navigate to the Slider section in your admin panel and click on Add Slider Item.

On the Edit Slider Item page that appears you can choose between different formats: image, video or content.

Each format have different options, they have a common one: the title (to help you organise your slides).

  • Image: you must upload an image and use it as a featured image (940x350px), you can insert a caption and link it to an external page.
  • Video: you can have a custom video or an embedded player depending on the options you have entered. If you’re using the self-hosted video solution, you will need to provide both .m4v and .ogv files in order for the video to work in all browsers. You also must provide a featured image (for a self-hosted video) that will operate as a video preview.
  • Content: use the WYSIWYG area as you wish.
To change the order of your slides, simply navigate to Slide Order. Drag the slides up or down and they will be saved in that order.

6 - Permalinks

For sites with a large number of posts and pages, it is crucial that you set the correct permalink structure as otherwise you could experience significant performance problems.

For large sites (100+ posts/pages), we would advise you not to use a custom structure such as /%postname%/ as this can have a dramatic effect on page loading times which can result in your site crashing altogether when you have a lot of traffic. Instead you should consider adding the post ID, (e.g. /%post_id%/%postname%/) as this gets around the problem.

For more information on this please have a look at the “And we’re back. Sort of.” article by Steve Douglas.

7 - Setting up the custom menu

Our theme comes with a custom menu location. “Main Navigation” is used for… the site’s main navigation.

Go to Appearance > Menus. Give your menu a name and build it up using little widgets on the right. You can add pages, categories or custom URLs.

Now simply select the theme location for your newly created menus using a widget on the left. Under Main Navigation, select your menu from the dropdown list, to use it as the site’s main navigation.

8 - Theme options

vendor-options

The theme comes with a simple to use administration panel. You can access it by navigating to Appearance > Theme Options. The theme options are conveniently spread over a number of tabs. Each tab contains the options that pertain to a particular area of the theme.

8.1 – General options

  • Enable theme update notifications: Check this to display a message when a new version of the theme is available.
  • Upload logo: Browse your computer and upload your new logo.
  • Enable plain text logo: Should you not have a graphical logo, you can enable a plain text logo which will automatically display your site name and description.
  • Upload desktop favicon (16x16px): Browse your computer and upload your new favicon.
  • Upload mobile favicon (144x144px): Browse your computer and upload your new mobile icon.
  • Sidebar position: Select the position for your sidebar (left or right).

8.2 – Colour options

  • Primary font colour: Choose your primary colour. It will be used for links, buttons, headings.
  • Secondary font colour: Choose your secondary colour. It will be used for the hover state.
  • Header font colour: Choose your header colour.

8.3 – Background options

  • Background colour: Choose your background colour.
  • Background pattern: Select a background pattern.
  • Enable background fixed position: Check this to enable a fixed position for the background pattern.
  • Enable custom background image: Check this to enable the upload of a custom background image.
  • Upload custom image: Browse your computer and upload your new image.
  • Custom image repeat: Select the repeat property of your uploaded image (no-repeat, repeat, repeat-x, repeat-y).
  • Custom image position-x: Select the position-x property of your uploaded image (center, left, right).
  • Custom image position-y: Select the position-y property of your uploaded image (center, top, bottom).

8.4 – Slider options

  • Enable slider: Check this to enable a slider on the homepage (to set up the slides: 5 – Setting up the slider)
  • Effect: Select the effect you want to use for the slider (fade or slide).
  • Autoplay: Milliseconds between slide transitions (enter 0 to disable autoplay).
  • Animation duration: Milliseconds from one slide to the next.
  • Enable previous/next navigation: Check this to create a navigation for previous/next navigation.
  • Enable paging control: Check this to create navigation for paging control of each slide.
  • Enable keyboard: Check this to allow slider navigation via keyboard left/right keys.
  • Enable mousewheel: Check this to allow slider navigation via mousewheel.
  • Enable randomisation: Check this to randomise slider order.

8.5 – Posts & Portfolio options

  • Enable related posts: Check this to show a related posts panel on each post page.
  • Number of related posts: Select the number of related posts you want to display (from 2 to 10).
  • Enable author bio: Check this to show an author bio panel on each post page.
  • Portfolio slug: Enter the slug of your portfolio page. Regenerate your permalinks after saving (Settings > Permalinks > Save changes).
  • Content position: Select the position of your content.
  • Enable slider: Check this to enable a slider on the project page if you have more than 1 image (otherwise they will be underneath each other).
  • Enable related projects: Check this to show a related projects panel on each project page.
  • Number of related projects: Select the number of related projects you want to display (3 or 4).

8.6 – Contact form options

  • Email address: Enter the email address where you want to receive emails from the contact form, or leave blank to use admin email.
  • Greeting message: Enter the greeting message. It will be displayed once the message has been successfully sent.
  • Enable captcha: Check this to enable a captcha. More info here.
  • Captcha public key: Enter your public key. More info here.
  • Captcha private key: Enter your private key. More info here.

8.7 – API options

  • Analytics code: Enter your full Google Analytics code (or any other site tracking code) here. It will be inserted before the closing body tag.
  • FeedBurner URL: Enter your full FeedBurner URL (or any other preferred feed URL) if you want to use FeedBurner over the standard WordPress Feed (e.g. http://feeds.feedburner.com/awesem).

9 - Custom widgets

The theme comes with multiple widgetized areas and multiple custom built widget that can be used many times. They can be found under Appearance > Widgets. Widget areas are as follow:

vendor-widgets

9.1 – 125×125 Ads

This widget allows the display and configuration of 6 125×125 Ads.

  • Title: Title of the widget
  • Select ad type: Select between “Image” and “Custom ad code”
  • Ad ‘x’ image URL: The full URL (including http://) of your image (e.g. http://cdn.awesem.com/images/125×125.png).
  • Ad ‘x’ link URL: The full destination URL (including http://) of your ad (e.g. http://awesemthemesco.staging.wpengine.com).
  • Ad ‘x’ custom code: Enter your full ad code.
  • Randomise ads order: Check this box to shuffle the display of the ads in a random order on each page load.

9.2 – 300×250 Ad

This widget allows the display and configuration of a 300×250 Ad.

  • Title: Title of the widget
  • Select ad type: Select between “Image” and “Custom ad code”
  • Ad image URL: The full URL (including http://) of your image (e.g. http://cdn.awesem.com/images/300×250.png).
  • Ad link URL: The full destination URL (including http://) of your ad (e.g. http://awesemthemesco.staging.wpengine.com).
  • Ad custom code: Enter your full ad code.

9.3 – Featured items

This widget displays two featured items.

  • Title: Title of the item
  • Icon: The full URL (including http://) of your image (best 60×60 px).
  • Content: Content of the item.

9.4 – Flickr

This widget displays your Flickr photos.

  • Title: Title of the widget.
  • Flickr ID: The Flickr ID of the user/group you want to display. More info on how to find out your Flickr ID here.
  • Number of photos: Select the number of photos to display (4 or 8).
  • Type: Select the type of user photos you want to display (user or group).
  • Display: Select how to display the photos (random or latest).

9.5 – Highlight

This widget displays a highlighted message (<h1>).

  • Text: Content of your message (supports shortcodes).

This widget is optimised for the “Homepage – Full width” area.

9.6 – Testimonials

This widget displays your client’s testimonials. You can ad as many testimonials as you want (you need to “Save” before adding a new testimonial).

  • Title: Title of the widget
  • Effect: Select the effect you want to use for the slider (slide or fade).
  • Autoplay: Milliseconds between slide transitions (enter 0 to disable autoplay).
  • Animation duration: Milliseconds from one slide to the next.
  • Enable randomisation: Check this to randomise slider order.
  • Testimonial: The content of the client testimonial to be displayed on your site.
  • Client’s name: Enter the name of your client.
  • Client’s company: Enter your client’s company name.

9.7 – Twitter

This widget displays your latest tweets.

  • Title: Title of the widget
  • Username: Username of your Twitter account (e.g. awesemthemes).
  • Number of tweets: Enter the number of tweets you want to display (max 20).

9.8 – Video

This widget displays a single video.

  • Title: Title of the widget
  • Embedded code: The full embedded code (including http://) of your favorite video sharing website (best at 300px wide).
  • Description: Enter a short description to your video if required.

9.9 – Supported widgets

Our theme fully support the ZillaDribbbler widget (more info here) in case you wanted to showcase your projects from Dribbble.

10 - Supported plugins

Our theme comes with styles for some plugins which you may wish to use. Should you wish to do so, make sure to download the latest version of it, install it in your /wp-content/plugins/ directory and activate it in the Appearance > Plugins menu.

You simply need to activate the plugin and the theme will do the rest.

11 - Shortcodes

The theme supports a number of shortcodes for styling purposes.

11.1 – Alert

To insert a notification message, enter the following into the editor: [alert color=”your_colour”] Insert content here [/alert]

  • colour: Colour of the alert to choose between: blue, dark, green, light, red and yellow.
[alert color="green"] Thank you for purchasing our theme [/alert]

11.2 – Button

To insert a button, enter the following into the editor: [button url=”your_url” color=”your_colour” size=”your_size” icon=”your_icon”] Insert content here [/button

  • url: Full URL (including http://) of the button’s link.
  • colour: Colour of the button to choose between: blue, brown, dark, green, grey, light, magenta, orange, purple and red.
  • size: Size of the button to choose between: small, medium and large (small by default).
  • icon: Icon to add to your button (More info here).
[button url="http://awesemthemesco.staging.wpengine.com" color="green" size="large" icon="icon-shopping-cart"] Buy our themes [/button]

11.3 – Columns

The content can be splited into multiple columns (just make sure it equals to 1):

  • One half: [one_halfInsert content here [/one_half]
  • One third: [one_thirdInsert content here [/one_third]
  • Two thirds: [two_thirdInsert content here [/two_third]
  • One fourth: [one_fourthInsert content here [/one_fourth]
  • Three fourths: [three_fourthInsert content here [/three_fourth]
  • One sixth: [one_sixthInsert content here [/one_sixth]

Note: you must end each set of columns with a “last” (e.g. [one_half_lastInsert content here [/one_half_last]).

[one_half] Etiam porta sem malesuada magna mollis euismod. [/one_half]
[one_fourth] Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. [/one_fourth]
[one_fourth_last] Sed posuere consectetur est at lobortis. [/one_fourth_last]

11.4 – Dropcap

To insert a drop cap, enter the following into the editor: [dropcapInsert letter here [/dropcap]

[dropcap] A [/dropcap] WESEM

11.5 – Highlight

To insert an highlighted part of your content, enter the following into the editor: [highlightInsert content here [/highlight]

[highlight] This is very important [/highlight]

11.6 – List

To insert a colored bullets list, enter the following into the editor: [list color=”your_colour”] Insert list here [/list]

  • colour: Colour of the bullet to choose between: blue, brown, dark, green, grey, light, magenta, orange, purple and red.
[list color="dark"] <ul> <li> Etiam fringilla cursus </li> <li> Aenean purus </li> </ul> [/list]

11.7 – Tabs

To insert a tabbed area, enter the following into the editor: [tabs] [tab title=”your_title”] Insert content here [/tab[/tabs]

You can add as many “tab” as you want.

  • title: Title of your tab.
[tabs] [tab title="Lorem" ] Ligula cras [/tab] [tab title="Ipsum" ] Venenatis ipsum mollis [/tab] [tab title="Dolor sit" ] Magna elit [/tab] [/tabs]

11.8 – Testimonial

To insert a testimonial, enter the following into the editor: [testimonial name=”clients_name” company=”clients_company”] Insert content here [/testimonial]

  • name: Your client’s name.
  • company: Your client’s company.
[testimonial name="Ipsum Aenean" company="Sit Vestibulum Limited"] Nullam id dolor id nibh ultricies vehicula ut id elit. [/testimonial]

11.9 – Toggle

To insert a toggle area, enter the following into the editor: [toggle title=”your_title” state=”open_or_closed”] Insert content here [/toggle]

  • title: Title of toggle area.
  • state: State of the toggle area to choose between: open and closed (closed by default).
[toggle title="Ornare fermentum" state="open"] Maecenas faucibus mollis interdum. [/toggle]

11.10 – Video: Custom video

To insert a self hosted video, enter the following into the editor: [video id=”your_id” m4v=”your_m4v_url” ogv=”your_ogv_url” img=”your_img_url” /]

  • id: Enter an ID for your video. It needs to be unique.
  • m4v: Full URL (including http://) of your .m4v file.
  • ogv: Full URL (including http://) of your .ogv file.
  • img: Full URL (including http://) of the video preview image.
[video id="BigBuckBunny" m4v="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_640x360.m4v" ogv="http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" img="http://peach.blender.org/wp-content/uploads/bbb-splash.png" /]

11.11 – Video: Vimeo

To insert a Vimeo video, enter the following into the editor: [vimeo id=”your_id” width=”your_width” height=”your_height” /]

  • id: Enter the ID of your Vimeo video.
  • width: Width in px of the video frame (590 by default).
  • height: Height in px of the video frame (355 by default).
[vimeo id="1084537" width="940" height="500" /]

11.12 – Video: YouTube

To insert a YouTube video, enter the following into the editor: [youtube id=”your_id” width=”your_width” height=”your_height” /]

  • id: Enter the ID of your Vimeo video.
  • width: Width in px of the video frame (590 by default).
  • height: Height in px of the video frame (355 by default).
[youtube id="YE7VzlLtp-4" width="940" height="500" /]

12 - Custom page templates

The theme comes with four inbuilt custom page templates; Archives, Contact, Full Width and Homepage. These templates can be used on individual pages to alter the display or functionality.

12.1 – Archive template

The theme comes packed with a simple archives template. To use the template, simply create a page using the “Archives” page template. The archive lists will automatically display below any page content. Lists include the last 30 posts, archives by month and archives by subject.

12.2 – Full Width template

The Full Width template allows the creation of a page without a sidebar. The main content will span the full width of the site. To use the template, simply create a page using the “Full Width” page template.

12.3 – Contact template

The theme comes packed with a simple contact form. To use the inbuilt form, simply create a page and use the page template “Contact”. The form will automatically insert below any page content. The form includes jQuery validation to enhance user experience and the recipient email can be configured from the theme options.

12.4 – Homepage template

This template needs to be assigned to your “Homepage” page as explained in “2 – Setting up the blog and the homepage”. You should only assign this template once.

12.5 – Portfolio templates

These templates (3 or 4 columns) need to be assigned to your “Portfolio” page as explained in “4 – Setting up the portfolio”.

13 - Custom login logo

To replace the custom login logo, replace logo-login.png with your chosen image in the theme /_assets/img/ folder. Upload the new image to your server via FTP and the new logo will become visible on the WordPress login screen.

14 - Featured images

Our theme supports the use of featured images. The theme supports auto-resizing of the featured images and so there is only the requirement to specify a single image. Auto-resizing will only occur however when the image is uploaded for the first time, images that have previously been uploaded will not be resized.

To ensure the correct display of images across your site, ensure you specify an image with dimensions of 940×530 or larger.

To upload a featured image, go to Posts > Add New or open an existing post in editing mode. Locate the Featured Image module and click the Set featured image link.

Clicking the link will open up the usual WordPress image uploader where you will upload the image as usual. Simply make sure that it is either the same size or larger than what the final thumbnail will be. Once you’re done uploading the image, simply click the link that says “Use as featured image”.

Once you’re done, a preview of the image should appear in the right-hand box and you are free to insert the image into the post as with any other image.

For more on how to use the WP2.9+ Post thumbnail feature you can view this article – http://en.support.wordpress.com/featured-images/

15 - CSS files

The theme includes a total of 3 CSS files that are used at various times depending on user-controlled options that determine the site’s display. All CSS files, with the exception of the main CSS file (style.css) can be found in the theme’s /_assets/css/ folder.

  • Font-Awesome.css (& font-awesome-ie7.css) – The stylesheet to easily add icons to your content. More info here.
  • Style.css – The theme’s main stylesheet.

15.1 – Using Child Theme to modify the theme

When modifying the theme’s CSS it is advised to use the “Child Theme” (vendor-child-theme) as this will make updating to a newer version of the theme much simpler without overwriting your changes.

15.2 – Main stylesheet index

The main stylesheet is organised by section and includes a styles index for quick navigation. To locate the styles for a particular section, view the index and locate them by number.

/* --

Styles Index
=======
1.0 Reset
2.0 Grid
	2.1 960 < x
	2.2 768 < x < 959
	2.3 x < 767
3.0 Typography
	3.1 Alignements
	3.2 Tables
4.0 Main structure ...

16 - JavaScript files

The theme imports various JavaScript files:

  • jQuery: Library that greatly reduces the amount of code that you must write. More info here.
  • Modernizr: Library that helps to build the next generation of HTML5 and CSS3-powered websites. More info here.
  • Easing: Plugin to give advanced easing options. More info here.
  • Flexslider: Slideshow plugin. More info here.
  • jPlayer: HTML5 audio & video library. More info here.
  • Superfish: Dropdown menu plugin. More info here.
  • Validation: Plugin that handles the validation of the forms (comment and contact). More info here.
  • FitVids: Plugin for fluid width video embeds. More info here.
  • Selectnav: Responsive menu plugin. More info here.
  • Isotope: Plugin that allows the portfolio to be filterable. More info here.
  • Selectivizr: JS utility that emulates CSS3 selectors in Internet Explorer 6-8. More info here.

17 - PSD files

We have included two PSD files with this theme:

  1. colors: PSD for buttons, pins, lists
  2. video-sprite: PSD for the custom video player

18 - Sources and credits

We’ve used the following images, icons or other files as listed:

  • Silk icons by Mark James. More info here.
  • Addictive Flavour icons by Oliver Twardowski. More info here.
  • Minicons icons by Vincent Le Moign. More info here.
  • Font Awesome. More info here.
  • All the images, audio and video sources used for our demo website are listed here.

19 - Theme support

We provide basic support for all of our WordPress themes available for sale on ThemeForest via our AWESEM Support Forum – Register using your ThemeForest Item Purchase Code

We love to hear what you think! Feel free to send us your comments, feedbacks and improvement ideas via the contact form on our ThemeForest profile page.

Once again, thank you so much for purchasing this theme. As we said at the beginning, we’d be glad to help you if you have any questions relating to this theme. No guarantees, but we’ll do our best to assist.

— The AWESEM team

Create a beautiful site in minutes using one of our premium themes.

Purchase your perfect theme for just $99.

© 2016 AWESEM WordPress Themes
Powered by WordPress. Built and maintained by AWESEM.