Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to post your questions on support forum. Thanks so much!
Daisho is a portfolio solution for creative professionals and companies looking for a minimal and professional look. Flexible and responsive presentation, smooth navigational flow and clutter-free approach put your works in focus.
This theme was created by Anthony Jones (follow) (design and idea) and Flow (follow) (code). It was tested on WordPress 3.5.1 (minimum required is WordPress 3.5). If you encounter any difficulties please contact us on support forum and we will help you. If you have noticed any bugs please report them and we'll fix them in the nearest update. Once updates become available you will be able to download all the files from ThemeForest again, free of charge. If you have any suggestions regarding this theme let us know! We will improve or fix it if necessary. Okay, so let's get started!
You need a working copy of WordPress installed on your own server (wordpress.com hosting won't work) in order to start. You should know how to use it (e.g. how to enter admin panel, how to write posts etc.). This may help you: New To WordPress - Where to Start.
Please check a video presenting how to install Daisho (8:06). And here is a text version:
Some theme settings and sample posts and pages were imported but you need to take some additional steps to have it work exactly like the demo does. A list of them:
Note #1: "Footers" page will not contain multiple footer columns nor widget in content like on the demo.
Note #2: Attachments ("Media Library") are not imported at all. They are hotlinked from the demo server.
Note #3: Post thumbnails on blog listing page won't appear because Media Library doesn't contain thumbnails.
You can use Thumbnails Grid as homepage or Classic Homepage. This section is focused mainly on Classic Homepage. Thumbnail Grid and portfolios are described in the "Portfolio" section of this document.
Whether you use Thumbnails Grid or Classic Mode please make sure that you:
This is important because custom fields from "Homepage" page will be used on your front page. So, if you'd like to set "Welcome Text" for homepage you would go to [Pages > Homepage > Page Settings > Welcome Text]. If you'd like to change thumbnails order or exclude some portfolio categories from being displayed on your homepage you would go to the same place.
You can enable "Classic Mode" under [Daisho > General]. You can configure it in many different ways. It consists of modules that you can enable or disable. Most of the settings are available under [Daisho > General] or [Pages > Homepage > Page Settings]. Those modules are:
This section covers "Classic Mode" slideshow. Slideshow can be enabled under [Daisho > General]. Slides can be added under [Slideshow > Add New]. Slideshow has fixed dimensions and you'll need to put some work into creating slides manually. Included PSD file contains ready examples. Please note that design work on your side is unavoidable if you'd like to have slideshow with unique images. This theme only provides technical solution to display your slides. Each slide can have the following options:
Additional slideshow options are available under [Daisho > Slideshow].
If you take a look at the demo website you'll notice one global portfolio page. It will display all your portfolio entries (in the order specified under [Pages > Homepage]) with filter to the top.
Filter lists all the portfolio categories that have at least one post in them. Each portfolio entry is a separate post (see admin panel, "Portfolio" section to have a complete list of all your current posts).
SuperSlide Editor is a name of an editor available in [Admin Panel > Portfolio > Add New]. Its current version allows any custom code to be used so you may use "Custom Code" as a standard text editor. There's also an option to use ready presets (Image, YouTube, Vimeo or HTML5 Video). If you need less common media like "SoundCloud Player" please use "Custom Code" to add it.
Here is a video of SuperSlide Editor: http://www.youtube.com/watch?v=xmgQR2oZ9qk
[video poster="http://example.com/poster.jpg" muted="true" loop="true" webm="http://example.com/vid.webm" mp4="http://example.com/vid.mp4" ogg="http://example.com/vid.ogg" controls="false"]. Poster is used instead of a video on "touch" devices like Android, iPhone and iPad because such devices usually have built-in video players that work upon video click and videos are not able to play continously (an user has to explicitly launch a video and
autoplay="true"is ignored). YouTube or Vimeo videos are not supported in this field because they have controls, sound and other features that are not suitable for being displayed on a thumbnail. Before inserting video thumbnails please consider their impact on the size, transfer and loading times. Frankly, they are not recommended (unless really required).
A short guide on how to create two (or more) different portfolio pages:
The theme consists of five main pages (see demo for reference) which are About Us, Services, Blog, Our Team and Contact pages. You can edit them under [Admin Panel > Pages].
[content_block title="Service Name" icon="t"]Service Description[/content_block]. Please keep titles and descriptions very short. There's technical space limitation. For more information please visit Content Block Shortcode section.
[content_block title="John Smith" description="Market Research" image="PATH_TO_IMAGE/team_member1.png"]Short member description.[/content_block]. Please keep titles and descriptions very short. There's technical space limitation. Our demo images have the following dimensions: 340x273px (example image). It will be converted to grayscale image automatically using SVG filter. For more information about this please visit Content Block Shortcode section.
[text* your-name id:your-name watermark "Name *"] [email* your-email id:your-email watermark "Email *"] [textarea* your-message id:your-message watermark 40x6 "Message *"] [submit "SEND"]
Note: Pages will have "Allow comments" set to FALSE (comments disabled) by default and will ignore your preference under [Settings > Discussion]. It seems like more intuitive solution (even if we ignore WordPress options here). Posts will have "Allow comments" set to TRUE by default.
Note: Blog posts listing page uses
the_excerpt(); function and this function doesn't parse
<!--more--> tag. This may be counter-intuitive but it's correct. You can read more about WordPress content, excerpt and teaser in "Make sense of WordPress excerpts and teasers" and on WordPress Codex pages. Ideally, please use the "Excerpt" field available under [Pages > Add New] to create an excerpt manually for each post.
wpautop filter is currently disabled as of WP3.5.1. This is different than in the default WordPress theme and in most of the other themes. We disabled it because of various WordPress bugs that are announced to be fixed in WP3.6 or later. It means that it will not add
<p> tags automatically.
Before we proceed to footer guide, let's first take a look at sidebars. WordPress allows you to attach widgets to sidebars under [Appearance > Widgets]. This theme in addition to that feature introduces [Appearance > Sidebars] section that you can use to create new sidebars. We also added "Sidebars Replacement" tool on [Pages > Add New] where you can replace default sidebar with some other sidebar per page basis.
This feature has been re-created in v1.9. Once you go to [Appearance > Sidebars] you'll be able to create additional sidebars there. More sidebars may be useful only if you'd like to have different sidebar/footer content on different pages.
If you wish to have different sidebar on let's say "About Us" page then please go to [Admin Panel > Pages > "About Us"] and find this box:
Blue Sidebar is the one that you have since the beginning. It is used to store widgets for left sidebar and right sidebar pages. You'll need to pick some replacement sidebar from the list to have it replaced with some other sidebar on this particular page.
Note: If the above meta box is not visible anywhere under [Admin Panel > Pages > "About Us"] then you may need to enable it in "Screen Settings" in the top right corner of the same page.
Go to [Daisho > Footer]. You will find there three options:
class1 class2, class3 class4, class5- this will create 3 containers (but not columns!) where first will have
class2. Please note that to have them appear as columns you actually need to use Grid System classes and not some random classes (but you can add some random classes, too). Example:
grid_6 class1, grid_6would create 2 columns (because
grid_6is a class from Grid System and it creates 50% wide column). First column will have
class1, too which is absolutely optional (it doesn't do anything unless you use it to add your own styling). Please note that creating footer column creates new widget area available under [Appearance > Widgets]. First footer column will get
flow-footer-2ID and so on.
</body>. Usave of SCRIPT and STYLE tags is necessary if you want to put there such information. You can also create there DIVs and other HTML elements (they won't get erased after theme update).
To create footer columns:
grid_12 grid_not_responsive, grid_12, grid_6 push_6 last, grid_6 pull_6(detailed description in the table below).
flow-footer-1ID ("Footer 1" name), second
flow-footer-2ID ("Footer 2" name) and so on. Please go to [Appearance > Widgets] and add widgets to your newly created columns (widget areas).
Demo layout with exact code for each column:
|Normal Mode||Responsive Mode||Code|
Breakdown with explanation:
First of all, you may have heard that "Content is King" and indeed it is very true. 95% of the success depends upon your content. Valuable articles, works, products and websites don't need much more and people will visit and use them often anyway. Nonetheless, you can do a little bit more (remining 5%) to improve SEO...:
Note: For Facebook and other social media services title, description and thumbnails you may use The Open Graph protocol in custom code field. Otherwise, default data will be used (which is often just fine).
Menus can be configured under [Appearance > Menus]. Attaching all the menus to correct locations is required. There are two menu locations - normal and mobile. Normal menu is your main menu as well as all compact menus (project view and blog page). You can add menu icons by going to [Appearance > Menus] and by choosing single letters as menu item descriptions in the "Description" field. By default "Description" field for menus is hidden, so you need to first enable it in "Screen Settings" at the top of WordPress admin panel. See Character Map.
This template follows strict design principles. To ensure that your website is consistent it's best to understand the design ideas, patterns and rules behind it.
Grid System has been revised in v1.9.1. The template now uses a grid that was inspired by Andy Taylor's project called 1140 Grid System. Since the thumbnails on front page have fixed dimensions we had to reduce that to 1120px.
Posts and pages on the website are usually 1120px wide and you can just put there headings, paragraphs and media. But if you'd like to split the content into two or more columns or style individual rows, it's best to use Grid System. You can use Grid System CSS classes to create columns on your website. You can have any number of columns starting from 1 up to 12 in a row on your website. Each column is 1/12 (6.333%) (~93px) wide with 3.8% (~42px) right margin.
Even if you're a user that does know nothing about HTML, I encourage you to investigate the source code of the example grid page, for this is the most effective way to learn this and... there is really no shorter way. Even if we created drag & drop grid builder one day you still need to know what HTML structures are behind this if you're a website owner.
Grid System classes can be added to DIVs (like
<div class="grid_12">column content</div>) and other block elements. Available classes for 12 columns:
Available push classes (use push along with 12 columns classes like
<div class="grid_6 push_6">column content</div>):
Available pull classes (use pull along with 12 columns classes like
<div class="grid_6 pull_6">column content</div>):
Additional classes and information:
.containerto have greater control over the layout. See source code of the example page.
<h6>headings appropriately. They create bottom margins that separate columns.
On standard pages and in posts it's often not necessary but on pages that use "full width" or "no boundaries" templates it may be very useful. Each row of columns must have number of columns that gives exactly 12. If it's not clear enough below are some examples:Example 1:
Two columns next to each other.
<div class="grid_6"><p>column 1 content</p></div> <div class="grid_6 last"><p>column 2 content</p></div>
Three columns next to each other.
<div class="grid_4"><p>column 1 content</p></div> <div class="grid_4"><p>column 2 content</p></div> <div class="grid_4 last"><p>column 3 content</p></div>
8.333% of empty space and one 89.667% column after that.
<div class="grid_1"></div> <div class="grid_11 last"><p>column 2 content</p></div>
16.667% of empty space, two 31.333% columns after that and 16.667% of empty space after those two columns.
<div class="grid_2"></div> <div class="grid_4"><p>column 1 content</p></div> <div class="grid_4"><p>column 2 content</p></div> <div class="grid_2 last"></div>
Let's say that you'd like to have two 48.0% columns next to each other but you'd also like to have the SECOND column (in code) to appear as the FIRST column on the actual website. You'll probably not going to ever use it but below you'll find an example for that.
<div class="grid_6 push_6 last"><p>column 1 content</p></div> <div class="grid_6 pull_6"><p>column 2 content</p></div>
wpautop filter is currently disabled as of WP3.5.1. This is different than in the default WordPress theme and in most of the other themes. We disabled it because of various WordPress bugs that are announced to be fixed in WP3.6 or later. It means that it will not add
<p> tags automatically.
Please check the example typography page to understand how ideally all your articles and pages should be structured.
Spacings and font sizes form a base typographic grid that guarantees that your elements will be well laid out and spaced. If your design can't follow default dimensions (like one of your paragraphs can't have 60px of bottom margin but needs 40px instead) please use inline style to alter font sizes, line heights or margins. You can also wrap paragraphs in
div elements and give a
div different font size to create sections with bigger or smaller fonts. Default values guarantee consistent look, consistent structure and in the long run consistency and articles structured according to W3 recommendations impact SEO as well.
W3 recommendations aren't written in stone, and you're free to modify our suggested structure as well. To what extent all that matters is a subject to a long discussion. You may read more about this in "Headings and sections" section of the HTML5 specification.Example 1:
Example blog post would look like below. Please note
p tags usage. Please start all your main paragraphs with
h2 and children paragraphs (sub-sections of that main section) should be marked with
h3 and children of
h4 and so on.
H1 is used for main page title. Please use
h2 for main headings of your article (unless you're familiar with meanders of HTML5 and you're able to use sectioning elements - then you can use multiple
<h2>Introduction (section-1)</h2> <p>Introductory words paragraph. This article is about animals. (section-1)</p> <!-- middle sections should follow heading=>paragraph(s), heading=>paragraph(s) [...] pattern --> <h2>Cat (section-2)</h2> <p>This parahraph is about cats. (section-2)</p> <p>This parahraph is about cats - continued... (section-2)</p> <h3>Cat Paws (still section-2)</h3> <p>This paragraph describes cat paws in detail. (section-2)</p> <h2>Dog (section-3)</h2> <p>This parahraph is about dogs. (section-3)</p> <h2>Conclusion (section-4)</h2> <p>Paragraph with conclusion words. (section-4)</p>
Example page is below. Please note
p tags usage. This page is correctly formatted two columns page example.
<div class="grid_6"> <h2>About Us (section-1)</h2> <p>This column describes a person or a company. (section-1)</p> </div> <div class="grid_6 last"> <h2>Services (section-2)</h2> <p>This column describes person's skills or company's services. (section-2)</p> </div>
This theme is very simple and has minimal and lightweight structure. Its simplicity will generally contribute to very good mobile devices and tablets compatibility at all times, regardless of the screen size or resolution used. We also use units and percent dimensions whenever possible to cover high PPI as well as low PPI screens.
At the time of writing this section (March 2013) the majority of mobile phones and tablets is only partially completed. Most of them are lacking many features that desktop browsers have, existing features are buggy, neither iOS 6.1.2 nor Android 4.2.2 allows a web developer to create a native-like, smooth application, the market is changing rapidly and thus mobile version of a website is a subject to constant development and improvements.
The template comes with some of the most commonly used shortcodes. If the one that you're looking for is not listed below you can probably find an alternative as a plugin.
Please use standard HTML tags to create table. You can add it
.daisho-table class to make it have different style. Example:
<table class="daisho-table">. There are some other classes available that you can use for entire table or single table cells:
You can create standard HTML UL and OL lists and default styling will be applied. You can add class parameter to each list to change list markers. List of available classes can be found below. Their names correspond to list style type. Example usage:
Note: Some less popular types are not supported by IE.
You should use
<q> HTML tag for short, inline quotations. You should use
<cite> HTML tag to cite book, article or publication title (but not author name). You should use
<blockquote> for long quotations. Available classes:
<blockquote>element. It changes its style.
style="width: 30%;"should be used in conjunction with alignleft or alignright. It defines width of quotation block.
If you need to add quote author or caption you should use
<figure> element should be also used to annotate Illustrations, Diagrams, Photos, Code Listings, etc. Example:
<figure class="alignleft" style="width: 30%;"> <blockquote class="quote-style-2"> <p>The truth may be puzzling. It may be counterintuitive.</p> </blockquote> <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>"</figcaption> </figure>
To create Drop Caps, please use this shortcode:
[drop_cap style="2" bgcolor="#dddddd" color="#787882"]A[/drop_cap]. Here's the list of available properties:
To create Content Toggler, please use this shortcode:
[toggle title="Toggle title" type="1" open="1"]This toggle starts opened![/toggle]. Here's the list of available properties:
To create Accordion, please use this shortcode:
[accordion_group][accordion title="Title 1"]<p>Content 1</p>[/accordion][accordion title="Title 2"]<p>Content 2</p>[/accordion][/accordion_group]. Please note that you can't have any empty spaces between those shortcodes because WordPress will put there unwanted
P tags. Those will cause formatting problems for shortcode parser.
To create Tabs, please use this shortcode:
[tabs style="1"][tab title="Tab 1"]Content 1[/tab][tab title="Tab 2"]Content 2[/tab][/tabs]. Here's the list of available properties for
[tabs] (it's tabs set - it should enclose all
Here's the list of available properties for
To insert YouTube Videos, please use this shortcode:
[youtube link="http://www.youtube.com/watch?v=Yvf2dcPfiHM"]. It will always be 100% wide and it will maintain 16:9 pixel ratio. You need to enclose it in a column if you wish to make it narrower.
To insert Vimeo Videos, please use this shortcode:
[vimeo link="http://vimeo.com/22093944"]. It will always be 100% wide and it will maintain 16:9 pixel ratio. You need to enclose it in a column if you wish to make it narrower.
To insert HTML5 Videos, please use this shortcode:
[video mp4="http://example.com/vid.mp4" ogg="http://example.com/vid.ogg" webm="http://example.com/vid.webm" poster="http://example.com/vid.jpg"]. It will always be 100% wide and it will adjust its pixel ratio to the video you have uploaded. You need to enclose it in a column if you wish to make it narrower. Please note that some WordPress version won't allow you to upload WEBM and/or OGG files to Media Library. You should upload them elsewhere or manually to your server using FTP client.
To insert Google Maps, please use this shortcode:
[gmap latitude="35.631219" longitude="139.769356" zoom="12" "width=100%" height="350px"]. It's best to enclose it in a column and set width to 100% if you wish to make it responsive.
Note: Initializing Google Map in hidden container (like Toggle Shortcode) or the one with unspecified dimensions may lead to issues because maps in such containers should be refreshed when they are changing dimensions. By default refresh happens on window resize.
To insert Highlighted text, please use this shortcode:
[highlight color="#001122" bgcolor="#fff000"]Text[/highlight]. Available options:
Use this code to add lightbox to images or other elements:
<a href="large-image.jpg" target="_blank" rel="prettyPhoto"><img width="300" height="187" src="small-image.jpg" alt="" title="" class=""></a>. If you don't specify
width for an inner image it will scale to full column it is placed in.
There is one shortcode that works only when you're using "Content Slider Page Template" under [Pages > Add New]. It adds carousel of items. On demo there are two examples of such slider. Services page uses the following shortcode for each carousel item:
[content_block title="Service Name" icon="t"]Service Description[/content_block]. Please keep titles and descriptions very short. There's technical space limitation. Default icons set for icon="" is here: Modern Pictograms. Our team uses the following shortcode to add team members:
[content_block title="John Smith" description="Market Research" image="PATH_TO_THE_IMAGE/team_member1.png"]Short member description.[/content_block]. Please keep titles and descriptions very short. There's technical space limitation. Our demo images have the following dimensions: 340x273px. Available options:
Note: We use a very light SVG filter to make images grey. As of November 2012 it works in: Firefox, Chrome, Opera, IE9, but doesn't work in: Safari, IE10. The good news is that it is a W3C recommendation and it should become supported by all browsers and devices (including Safari since 6.0, iOS since 6.0, Blackberry since 10.0) soon. Since Daisho 1.9 images will grey out without any additional action, so you can skip part of the installation video from 3:00 to 4:25. If it doesn't work out of the box for you then most likely you're using IE10 or Safari older than 6.0.
There is one shortcode that allows you to include sidebar directly in post or on page as a part of content. The code:
[flow-sidebar id="sidebar-ID"] where sidebar-ID is the ID of sidebar that you want to include on that page. You should typically use it in one of the Grid System columns. Please note that WordPress doesn't offer such functionality and none of its functions allow storing sidebars in PHP variable for later use - therefore using this shortcode may not be recommended.
Daisho is a clean website that uses clean framework. It might be a good start base for custom modifications. Custom modifications are generally up to users but here are a few useful notes, recommendations, best practices and WordPress standards for those of you that are planning on doing custom modifications:
wp_footer();or other places whenever possibe.
Theme developers are generally not able to help you with custom modifications but you can find and hire third party developers on our support forum. They are not connected with theme developers and thus we can't guarantee their availability but if they are available, they'll follow all best practices and WordPress recommendations to complete custom modifications for you.
Our Support Forum is open Mon-Fri 8AM-4PM CET with exclusions of any European holidays. Average time you will need to wait for an answer is 24-72h (more if it requires fixing a bug). You can post as many support requests as you wish free of charge.
According to the membership agreement with Envato products are provided 'as is' and therefore our support staff will be only able to gather bug reports, suggestions and help you with installation and configuration of the item you purchased (if Installing the Theme section of this document is not sufficient). Unfortunately, we are not able to provide any custom modification services as a part of your purchase. We are willing to help you with modifications that can be easily described on the support forum and that do not exceed 10-15 minutes of work.
If you're looking for extensive custom modifications we recommend hiring third party developers to accomplish such custom modifications for you (they are a separate company). The cost of one hour of their work is always equivalent to the current worldwide average hourly rate for their current skill level (5+ years in HTML/CSS/PHP/JS field). It's $50/h as of 2013. Availability of third party developers depends upon their current workload.
Updates are free and you can re-download them at any time under "Downloads" tab on themeforest.net as long as we update the product and as long as it's live on the marketplace. You can update your theme if a newer version has been released and if you haven't made any custom modifications to its files. If you have made custom modifications directly to the files (such as changing HTML structure) then you'll need to take that into account when updating. Changelog of files we have altered doesn't exist because we usually modify all major files when updating the theme. To update your theme:
Note: Updating process is handled entirely by WordPress. Theme files are temporarily disabled and are not executed when WordPress is updating the theme, so any potential errors can't possibly come from them. If you see any errors such as "The package could not be installed. The plugin contains no files." or "PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature." please seek for solution in search engines, on WordPress Support Forum and from your Server Administrator as these errors are up to your particular WordPress/Server configuration.
Note: Auto Updater module looks for 'daisho' updates. If you put your theme in some other folder, Auto Updater won't work because Auto Update server won't recognize your custom theme name. Server contains package named exactly 'daisho'.
This theme has a responsive layout. All of the information within the main content area is nested within divs that have intiutive class and ID naming (please "Inspect Element" with Web Developer tools to find out selectors). The general template structure is the same throughout the template. Most of the PHP, HTML and CSS code is well commented so it's easy to modify. Framework files are placed in "framework" folder. Everything is gropued into different sections. Standard WordPress file structure is also present.
The main style is in style.css file. It's very well commented so I believe it's easy to understand and modify.
PSD file is included in the package. Almost everything is grouped and different elements are placed on separate layers. PSD file includes only the most important elements of the theme. Everything is layered so it should be easy to make some changes. Some layers may contain vector elements.
The Localization Guide is available on external server only. Localization support was added to Daisho v1.7. POT/PO files were last updated on the 13th February 2013 (during v1.9.1 development).
I've used the following images, icons or other files as listed. Big thanks to all great developers who provided scripts and modules for Daisho.
Big thanks to all great designers who provided preview content for Daisho.
Modules listed above are mainly Open Source, free software or their licenses allow both personal and commercial use, modifications and redistribution. Please check websites and/or licensing folder for more information or email me to get more information. The designers listed above agreed to use their works as preview content for demo website. You may not use their works elsewhere as we have permission to use them only on our live demo website. They are not included in the package. Thank you!
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.