You are on page 1of 35

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 fullscreen 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 (dtslash.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: (see fig. 4.2.) 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.

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.dreamtheme.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 Thats 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. Dont 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. Theres 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. Theres 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
Weve 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-Dancerhttp://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-formvalidation-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