Manual
-
Upload
faizalexandaria -
Category
Documents
-
view
291 -
download
0
Transcript of Manual
Thank you for purchasing Slash WP Premium WordPress Theme! If you have any questions, please, feel free
to contact us via our online Helpdesk: http://support.dream-theme.com/
Table of contents
1. Introduction .................................................................................................................................................... 3
2. Requirements & Compatibility ....................................................................................................................... 3
3. Slash WP installation and WordPress basic setup ......................................................................................... 4
1. Install WordPress .................................................................................................................................... 4
2. Upload theme ......................................................................................................................................... 4
3. Activate Slash WP ................................................................................................................................... 5
4. Theme options ................................................................................................................................................ 6
4.1. Appearance.......................................................................................................................................... 6
4.2. Backgrounds ........................................................................................................................................ 6
4.3. Misc ..................................................................................................................................................... 9
5. Using Regular Posts and WordPress 3.2 Post Formats. Pages ..................................................................... 10
5.1. Posts .................................................................................................................................................. 10
5.2. Pages .................................................................................................................................................. 13
6. Homepage .................................................................................................................................................... 15
6.1. Slideshow (Slider) Homepage ................................................................................................................ 15
6.1.1. Creating the Homepage Slider Item (Slide) .................................................................................... 15
6.1.2. Displaying the Slider ....................................................................................................................... 17
6.1.3. Making Page a Homepage .............................................................................................................. 18
6.2. Video Homepage ................................................................................................................................... 19
6.3. Static Homepage ................................................................................................................................... 21
7. How to Create and Display the Portfolio ...................................................................................................... 23
7.1. Creating a Portfolio Item ................................................................................................................... 23
7.2. Displaying the Portfolio Page ............................................................................................................ 25
8. How to Create and Display Gallery ............................................................................................................... 26
8.1. Creating a New Photo Album ............................................................................................................ 26
Uploading Photos to Album ..................................................................................................................... 27
8.2. Displaying 2-layer Gallery (Albums) .................................................................................................. 28
8.3. How to display Classical gallery (“flat” gallery) ................................................................................. 29
9. Contact Page ................................................................................................................................................. 30
10. Shortcodes .................................................................................................................................................. 31
a. Multicolumn layout .............................................................................................................................. 31
b. Toggles .................................................................................................................................................. 33
c. Tooltips ................................................................................................................................................. 33
11. PSD-files ...................................................................................................................................................... 33
12. Credits......................................................................................................................................................... 33
12+1. Images on Theme Demo Sites ................................................................................................................ 34
14. Support ....................................................................................................................................................... 35
1. Introduction
Slash WP is a Premium WordPress Theme that has unique modern design as well as powerful and robust
functionality.
It was created to serve you as a portfolio, photo-gallery and blog with native support of WP 3.2. post
formats.
Slash WP will become an effective showcase of your works. This theme provides you with several full-
screen homepage templates: video homepage, awesome slideshow (with the option to preserve original
image proportions), and static-image page.
Portfolio pages allow you to show both photo and video works. Dynamic AJAX filtering + awesome jQuery
Isotope animation makes your portfolio extremely usable and easy to navigate.
Galleries pages have both classical (photos only) and 2-layer (Albums -> Photos) layout types.
Homepage Slideshow, Portfolio and Gallery modules are powered by WordPress custom content types. So
there will be no mess between different types of your content.
Theme Options page and Background Builder function will help you to create pro-looking and sexy skin for
your website and customize it beyond recognition in just a few clicks!
Slash HTML is powered by Highslide JS (awesome lightbox script) and jQuery Isotope (masonry layout
builder). Normally single commercial license for them costs about $30 and $37 respectively, but you get it
free as a part of Slash HTML package.
Please note, that we are shipping Slash WP with jPlayer. Video homepages on our demo are powered by JW
Player (which is not included to theme package, but can be installed separately).
2. Requirements & Compatibility
“Slash WP ” is compatible with the WordPress version 3.2 and later.
Most JavaScript enabled Browsers will make this theme work with no issues!
It has been tested on:
Firefox 3.6 and later;
Safari 4 and later;
Opera 11.10 and later;
Internet Explorer 8 and later (also, it looks quite decent in IE 7);
Google Chrome.
3. Slash WP installation and WordPress basic setup
1. Install WordPress
Download & Install most actual version of the WordPress.
2. Upload theme
Before proceeding, please make sure that following plugins are not installed or deactivated:
- wp-pagenavi;
- options framework.
Unzip the “slash-wp.zip” theme package. There you will find the theme installation file (“dt-slash.zip”),
manual, license, and some PSD files.
To install the heme, in your WordPress Admin Panel (wp-admin) go to “Appearance > Themes > Install
Theme > Upload > Install a theme in .zip format” (see fig. 3.1.) and choose the theme installation file (“dt-
slash.zip”).
Fig. 3.1.
Please note that some hostings have a restriction on a size of a file that you are uploading.
If you cannot install the theme via the standard WP theme installer, please install it via FTP. Simply unzip
the “dt-slash.zip” file and upload the “dt-slash” folder via FTP into “your_site/wp-content/themes/”
Attention! After uploading the theme to your hosting you are to:
1) Set CHMOD 777 to the folder “your_site/wp-content/themes/dt-slash/cache”.
2) Set CHMOD 777 to the folder “your_site/wp-content/themes/dt-slash/languages” (this is optional; do it
only if you want to translate the theme via some translation plugin).
3) Set CHMOD 644 to the file “your_site/wp-content/themes/dt-slash/resize.php”.
4) Set CHMOD 644 to the file “your_site/wp-content/themes/dt-slash/languages/dt_slash.pot” (this is
optional; do it only if you want to translate the theme via some translation plugin).
5) The folder “your_site/wp-content/uploads” must be created. Make sure that CHMOD is set to 777.
3. Activate Slash WP
In “Appearance > Themes > Manage Themes > Available Themes” activate Slash WP by hitting the
correspondent “Activate” link (see fig. 3.2.).
Fig. 3.2.
After activating Slash WP you will notice some Theme options and Custom Post Types (Gallery, Homepage
Slider and Portfolio) in your WordPress admin panel (see fig. 3.3.).
Fig.3.3.
4. Theme options
The theme options page can be found in “WP-admin -> Appearance -> Theme Options” (fig. 4.1). Here you
can upload your logo; change background and fonts; add links to social networks, etc.
Fig. 4.1.
4.1. Appearance
In this tab you can:
- Branding: upload your logo and favicon;
- Menu: change the main menu behavior;
- Fonts:
- use uppercase letters in main menu, widgets headers and buttons captions;
- enable or disable Cufon fonts replacement, choose one of preset fonts or upload your
own;
- Copyright: add your Copyright text and decide whether to give us a credits (“<br>”, “<p>” and
“<a>” THML tags are permitted).
4.2. Backgrounds
On this tab you can choose one of cool preset backgrounds or upload images for your own awesome
background!
How to create a background
The theme background contains of the basic background color overlaid by 2 levels of patterns. For every
level of the background you may choose one of preinstalled images (patterns) or upload your custom
images.
Also you can:
- choose background repeat mode: repeat, repeat-x, repeat-y or no-repeat;
- choose background vertical and horizontal position (this is useful when you are using
unrepeatable image, e.g. some photo as a background);
- Use “position fixed” checkbox to make a “sticky” background.
(see fig. 4.2.)
Fig. 4.2.
Uploading your own images
The image uploader is pretty much the same as the standard WP image uploader (fig. 4.3.):
Fig. 4.3.
Note, that after uploading process is complete, your images will appear right beneath the correspondent
background choosing section (fig. 4.3., step 4).
Also note, that if you want to refuse using your custom image, you are not only to delete that image (fig.
4.4., step 1), but also to uncheck the “upload your own” checkbox (fig. 4.4., step 2):
fig. 4.4.
4.3. Misc
On this tab you can add you Google Analytics HTML code and links to your social profiles.
Also here you can enable the “social likes tab” (see fig. 4.5.):
Fig. 4.5.
Following options are available for it (see fig.4.6.):
- Enable Panel
- Panel is displayed by default
- Make Panel sticky
- Insert the "like" buttons code
Fig.4.6.
5. Using Regular Posts and WordPress 3.2 Post Formats. Pages
5.1. Posts
Regular posts in Slash WP can be created in usual way. Slash WP supports “standard”, “gallery” and
“status” WordPress 3.2 post formats out of the box. They work pretty much the same as in standard
Twenty Eleven 1.2 theme. Here are some tips concerning usage different post formats:
5.1.1. Masonry layout.
Fig. 5.1.
On masonry layout blog page “standard” and “gallery” posts are showing the “excerpt” (or autoexcerpt if
“excerpt” field is empty) field of the posts. But the “status” post will show the “content” field of the post.
5.1.2. Regular layout
Fig. 5.2.
On classical (regular) layout blog page “standard” posts are displaying the “content” field of posts. So, you
will have to use the “more” shortcode to “cut of” your posts (fig. 5.3.):
Fig. 5.3.
“Status” post are showing whole “content” and it cannot be cut off.
But for Gallery posts the “excerpt” (or autoexcerpt) will be shown.
If you cannot see the “Excerpt” box, please, do following (fig. 5.4.):
a) click “Screen Options” in the top right corner of the post adding/editing interface;
b) check the “Excerpt” checkbox;
c) fill the post excerpt in the appropriate box (it is normally located right below the main post editing
area (WYSIWYG)).
Fig. 5.4
5.1.3. Gallery Posts
In both layout modes (classical and masonry) the latest blog entries list the featured image and the excerpt
will be shown. If there is no featured image, first image from the media gallery of this post will be
displayed.
Also, there is an option to prevent the featured image from being shown in the gallery images list. You can
create a new post with “post format” set to “gallery” and hit “publish button”. After the page will be
reloaded appropriate box will appear in the right column of your WP-admin (see fig. 5.5):
Fig.5.5.
5.2. Pages
Pages can be added/edited in the regular way.
Tip. To hide comments on the specific page go to “WP-admin -> Pages” and click the “quick edit” link. You
will see the “Allow Comments” checkbox (fig. 5.6.):
Fig. 5.6.
You can do the same in the theme Adding/Editing interface. Simply check the “Discussion” checkbox in
Screen Option. The appropriate box will appear. (See fig. 5.7.):
Fig. 5.7.
6. Homepage
Slash WP allows you to create 3 types of homepages:
- Slideshow
- Video
- Static
6.1. Slideshow (Slider) Homepage
Fig. 6.1.
6.1.1. Creating the Homepage Slider Item (Slide)
To create a slideshow homepage you will need to create a set of slides to be shown on homepage.
To create the Slide go to the “WP-admin -> Homepage Slider -> Add New”. The Slider Item adding
interface is shown on the fig. 6.2. (Title and Featured Image boxes (highlighted with red frames) are
required).
Fig. 6.2.
Also there are 3 additional optional boxes in the Slide adding interface: WYSIWYG, “Categories” and “Show
options”.
In WYSIWYG box you can add Slide description (see Fig. 6.3., description field is marked “2”).
Fig. 6.3.
If you want to add a “details” link (marked “3” on the fig. 6.3.) to the particular slide, you can add a link in
“Slider link” field the “Slider options” custom box.
Also you can hide the description (marked 1 and 2 on the fig.6.3.) of this particular slide in the slideshow.
To do so, simply check the “Hide post text…” checkbox in the “Slider options” box.
In addition you can have unlimited homepage-like showcase pages on your site! To do that you can
simply add the “Category” (or couple of categories) to the slide. Later you will have the ability to specify
which slider categories will be shown on the particular page (see section “6.1.2. Displaying the Homepage
Slider” below)
6.1.2. Displaying the Slider
The Slider can be displayed by assigning the page template called “Homepage - slideshow” to the page and
clicking “Publish” button. After page reloads you will see Homepage Slideshow setup interface (see fig. 6.4.)
Fig. 6.4.
All slideshow options are gathered in “Options for homepage slider” box. All fields are optional. Here you
can:
1. Enable/disable “static description” on the page. Page title and content will be used as common
description on this page (instead of individual description of slides).
2. Hide/show dotted overlay on the page.
3. By default Slash WP will upscale your slides to fit the browser window. This means that vertical
photos will be cropped and top and bottom parts will be cut off. To prevent this click the “preserve
default slide proportions” checkbox.
4. You can enable slider autoplay and its timing in apptopriate fields.
5. Also you can define which Homepage slider Categories will be shown on this page. This is useful
when you want to have couple of homepage-like pages on your site. You may choose from
following options:
- All – Slides will be shown on this page.
- Only – choose Homepage Slider Categories to be shown on this page.
- Exclude – choose which Homepage Slider Categories will be excluded from being shown on
this page.
6.1.3. Making Page a Homepage
1. Go to the “Settings -> Reading” interface (see fig 6.5.).
2. In the “Front page displays” section choose “A static page (select below)” radio-button (this is
important!).
3. In the “Front page:” selector choose the page that you have created to be the Homepage earlier in
section 6.1.2 (this is important!).
4. Optional. Also you can choose which page will display your blog posts (Classical layout style) in the
“Posts page:” selector.
Fig 6.5.
6.2. Video Homepage
Fig. 6.6.
To create a video homepage, start to create a regular page, select a “Homepage – video” page template
and click “Publish” button. After page reloads you will see a box with options for video page (see fig. 6.7.)
You can upload your video by clicking the “upload” button in the Options for homepage video.
Also there are options for:
- autoplay vido;
- repeat (loop) vide;
- hide description on the page (by default, page title and content are used for page
description);
- hide dotted overlay mask.
You can set up the page featured to be shown while video is loading.
Please note, that by default Slash WP is using freeware “jplayer” player for video playback. If you want the
jwplayer for this purpose, you will need to purchase a license (for commercial websites) and upload
jwplayer to the “dt-slash/js/jwplayer” folder.
How to install the JS Player to Slash WP:
1) Download the JW player here: http://www.longtailvideo.com/players/
2) Download the special skin for JW player, that suits the Slash WP here: http://sl.dream-
theme.com/downloads/glows.zip
3) Unzip the folder with JW player and rename it to “jwplayer”
4) Move the “glows.zip” file with skin to “jwplayer”
5) Upload the “jwplayer” folder to your “themes/dt-slash/js” folder
That’s it!
You can watch the screencast of installation process here: http://www.screenr.com/FJks
Fig. 6.7.
6.3. Static Homepage
Fig. 6.8.
To create a page with static image you can choose the “Homepage - static” page template and click
“Publish” button. After page reloads, you will see the “Options for homepage static” custom box (see fig.
6.9.).
First of all, you will need to set a featured image of the page to create a page background. Also you will be
able to set following page options in the “Options for the homepage static” box:
- hide description;
- hide the dotted overlay mask;
- preserve default background image proportions;
- set the “details” link.
Fig. 6.9.
7. How to Create and Display the Portfolio
7.1. Creating a Portfolio Item
You can create a new portfolio item as easy as a regular post.
Go to the “WP-admin -> Portfolio -> Add New” interface and start creating a new post in usual way. The
Portfolio Item adding interface is shown on fig. 7.1. Required fields are highlighted with the red frame.
Fig. 7.1. (Fields highlighted with red frames are required)
Please note that you can create 2 types of portfolio items: image a video.
To create an image portfolio item you can simply set the featured image.
If you need to create a video item use the “Portfolio options” box. Here you can insert the video HTML code
(e.g. YouTube, Vimeo or other video hosting code). Also here you can disable displaying of portfolio item
meta information and media content (featured image or video). See fig. 7.2. for details:
Fig. 7.2.
Don’t forget to assign the Portfolio Item Category (or categories) - it will be used to define what works
should be displayed on the portfolio page/pages and in Portfolio Category Filter.
Also note, that on the Portfolio list page (in both classical and masonry layout mode) “excerpt” (or
autoexcerpt) will be shown. “Content” will be shown on the Portfolio Item page (see fig 7.3.).
Fig. 7.3.
7.2. Displaying the Portfolio Page
To create a Portfolio page, go to “Pages -> Add New” and start creating the page in the regular way. Select
the “Portfolio - standard” or “Portfolio - masonry” (depending on what portfolio layout you want to get)
page template and hit the “Publish” button. After page reloads you will see the custom box called
“Portfolio options” (see fig. 7.4.).
Fig. 7.4.
Attention! If you have no Portfolio Items created and have not set the number of posts to display on this
page (in the “Portfolio options” box), WordPress may return warning message. There’s nothing to worry
about – as soon as you will set this option all will work just fine.
Also in “Portfolio” options box you may select which Portfolio categories will be shown on this page. If you
have more than 1 category created and selected to display on this page, portfolio category filter will be
shown above Portfolio Items (see fig. 7.5.):
Fig. 7.5.
You may choose from following “Show Category” options:
- All – all portfolio categories will be shown on this page.
- Only – choose portfolio categories to be shown on this page.
- Exclude – choose which portfolio categories will be excluded from displaying on this page.
8. How to Create and Display Gallery
Gallery consists of photo Albums. Each album contains an arbitrary number of photos.
8.1. Creating a New Photo Album
Photo Album can be added via “WP-admin -> Photo Albums -> Add New” interface. Album creation
interface is looks much similar to regular posts (see fig. 8.1. Fields highlighted with red frames are
required).
Fig. 8.1. (Fields highlighted with red frames are required)
“Featured image” box is used to create Album Cover image (this step is optional; if not defined, first photo
from the gallery will be displayed as an Album Cover).
Uploading Photos to Album
To upload images to the album, click “Add an Image” button above the WYSIWYG area (see fig. 8.2.).
Fig. 8.2.
Upload image/images with standard image uploading interface. When the upload process will be
completed, you will see all images uploaded to the current Album. Hit “Save all Changes” and after that
“Insert (or update) gallery” buttons (fig. 8.3.):
Fig. 8.3.
You can manage images in Album as you do in standard WordPress interface (e.g. images can be reordered
by simple drag-and-drop and so on).
8.2. Displaying 2-layer Gallery (Albums)
Fig 8.4.
You can create Photo Albums page/pages from “Pages -> Add New” interface. Process is much the same as
creating Portfolio Page/Pages. The only difference is to choose “Albums” page template. Click the
“Publish” button. “Gallery options” box will appear (see fig. 8.5.).
Attention! If you have no Photo Albums created and have not set the number of posts to display on this
page (in the “Gallery options” box), WordPress may return warning message. There’s nothing to worry
about – as soon as you will set this option all will work just fine.
Also you may choose from which Albums will be shown on this page:
- All – all Photo Albums will be shown on this page.
- Only – choose Albums to be shown on this page.
- Exclude – choose which Albums will be excluded from displaying on this page.
Fig. 8.5.
8.3. How to display Classical gallery (“flat” gallery)
Fig. 8.6.
You can create Classical Gallery page/pages from “Pages -> Add New” interface. Process is much the same
as creating Albums Page. The only difference is to choose “Photos” page template. “Gallery options” are
the same as in “Albums” page template.
9. Contact Page
Fig. 9.1.
The Contact Page can be created as any regular page. The only difference is to choose the appropriate
template called “Contact” in the Page adding/editing interface. After saving the page, you will see the
“contact options” custom box (see fig. 9.2). Here you can enter an email for feedback form (if you will leave
this field blank, all feedback massages will be delivered to email of blog administrator) and google maps
code.
Fig. 9.2.
10. Shortcodes
There are 8 most commonly used shortcodes.
a. Multicolumn layout
1. One-half
Code: [one-half] Your text [/one-half]
To create a framed column, just add the appropriate attribute:
Code: [one-half frame=”y”] Your text [/one-half]
2. One-third
Code: [one-third] Your text [/one-third]
To create a framed column, just add the appropriate attribute:
Code: [one-third frame=”y”] Your text [/one-third]
3. Two-third
Code: [two-third] Your text [/two -third]
To create a framed column, just add the appropriate attribute:
Code: [two -third frame=”y”] Your text [/two -third]
4. One-fourth
Code: [one-fourth] Your text [/one-fourth]
To create a framed column, just add the appropriate attribute:
Code: [one-fourth frame=”y”] Your text [/one-fourth]
5. Three-fourth
Code: [three-fourth] Your text [/three-fourth]
To create a framed column, just add the appropriate attribute:
Code: [three-fourth frame=”y”] Your text [/three-fourth]
6. Frame
This shortcode is using to create a text in frame:
Code: [frame] Your text [/frame]
7. Clear
Sometimes it is necessary to separate multicolumn layout of text or images. For this use shortcode [clear]
or [clear /]
b. Toggles
Code: [toggle title= “toggle title”] Toggle expanded text [/toggle]
c. Tooltips
To create a tooltip, you can use the following shortcode:
Code: [tooltip title=”Tooltip title”] Tooltip extended text [/tooltip]
Note, that extended tooltip text can contain HTML code.
11. PSD-files
We’ve included couple of PSD files that will help professionals to customize theme more deeply. If you need PSD files for all pages you can purchase them from ThemeForest: http://themeforest.net/item/slash/398615
12. Credits
Graphics: Free social icons from http://www.freesocialicons.com/25-free-social-networking-icons/ Free vector icons from http://www.webdesignerdepot.com/2010/07/200-exclusive-free-icons-reflection/ Background patterns: http://www.pixelsandicecream.com/2011/05/new-free-pattern-renaissance-spring-by.html http://dribbble.com/shots/183766-Pattern-Kit-One-Ribbon-Dancer- http://webtreats.mysitemyway.com/tileable-midnight-blue-grunge-patterns/ http://www.patternhead.com/freebies/free-vector-pumpkin-patterns-halloween-jack-o-lanterns http://vectorartbox.com/vector-halloween-wallpaper/ Coding: Jquery http://jquery.com/ Jquery Easing Plugin http://plugins.jquery.com/project/Easing Jquery Validator Plugin http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ Jquery Placeholder Plugin https://github.com/mudge/jquery_placeholder
Highslide http://highslide.com/
Isotope http://isotope.metafizzy.co/
Raphael JS http://raphaeljs.com/
jPlayer http://jplayer.org/
JW Player http://www.longtailvideo.com/players/ (JW Payer is a Shareware. It is NOT included to the Slash
WP theme. Its license must be purchased separately. For details please visit official site:
http://www.longtailvideo.com/order/ )
Options Framework Plugin: http://wptheming.com/options-framework-plugin/
Highslide:
Slash WP template is powered by Highslide JS – one of the coolest lightbox scripts at the market. Please
note, that Highslide is NOT A FREEWARE! It is distributed and can be used only as a part of Slash WP
template. (This means that you cannot use it apart from Slash WP template, unless you purchased the
appropriate license on its official site: http://highslide.com/).
Isotope:
Slash WP uses jQuery Isotope to build masonry-style and filtering. Please note, that it is NOT A FREEWARE!
It is distributed and can be used only as a part of Slash WP template. (This means that you cannot use it
apart from Slash WP template, unless you purchased the appropriate license on its official site:
http://isotope.metafizzy.co/docs/license.html).
Fonts:
http://www.google.com/webfonts
http://www.fontsquirrel.com/
12+1. Images on Theme Demo Sites
Here are some links for ThemeForest authors, who just love to use same images for their items demos, as
we do:)
Images on theme demo:
http://www.shutterstock.com/
IDs: 69062863, 63992515, 60331717, 70561195, 69062863, 26100514, 67378123, 68463703, 71936965,
67418257, 67133575, 67392103, 63092089
14. Support
If you have any question or problems that are beyond the scope of this Manual, please, feel free to contact
us via our online Helpdesk: http://support.dream-theme.com/
Attention! Please note, that we cannot provide the technical support until you specify your Item Purchase
Code. Where can you get it?
Download the manual: http://support.dream-theme.com/verify/Item_Purchase_Code.pdf
or
Watch the screencast: http://www.screenr.com/gHxs