“Daisho Theme” Documentation by “Flow” 1.9.3

“Daisho Theme”

Created: 12/06/2012 (last updated 30 March 2013)
By: Anthony Jones and Flow
Support Forums: Support Forum

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!

Table of Contents

  1. Info
  2. Installing the Theme
  3. Homepage
    1. Slideshow
  4. Portfolio
    1. SuperSlide Editor
    2. FAQ
  5. Pages
  6. Sidebars & Footer
  7. SEO
  8. Menus
  9. The Design
    1. Grid System
    2. Style Guide
    3. Mobile & Tablets
  10. Shortcodes
    1. (HTML) Tables
    2. (HTML) Lists
    3. (HTML) Quotes
    4. Drop Caps
    5. Toggles
    6. Accordions
    7. Tabs
    8. YouTube Videos
    9. Vimeo Videos
    10. HTML5 Videos
    11. Google Maps
    12. Highlight
    13. PrettyPhoto, Lightbox
    14. Our Team/Services Slider
    15. Widget Area in Content
  11. Misc
    1. Custom Modifications
    2. Support
    3. Updating the Theme
    4. Files (HTML/PHP/JS/CSS/PSD)
  12. Localization (Translations, Internationalization, WPML)
  13. Sources, Credits and Goodbye

A) Info - top

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!

B) Installing the Theme - top

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.

Theme package structure.

Please check a video presenting how to install Daisho (8:06). And here is a text version:

  1. Download the theme - please go to [Themeforest > "Downloads" tab] and find Daisho on your list of purchased files. Download it. Please do not install this ZIP package because you'll receive Missing Stylesheet message.
  2. Unzip.
  3. Go to "Daisho" folder - this one contains another ZIP package with installable theme files.
  4. Upload the theme - go to [Admin Panel > Appearance > Themes > Install Themes > Upload] and pick a ZIP package from "Daisho" folder.
  5. Activate the theme - go to [Admin Panel > Appearance > Themes]. Activate the theme.
  6. Upload the demo sample content - in the package, in "Daisho" folder you'll find one XML file. Go to [Admin Panel > Tools > Import] and upload it there. Please install Contact Form 7 plugin before importing sample content and demo forms will be imported as well. Otherwise, they won't.

Post-installation Steps - top

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:

  1. Attach menus under [Appearance > Menus].
  2. Configure the Footer.
  3. You may need to re-generate contact form shortcode on the contact page.

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.

Common Installation Issues - top

  1. Missing Stylesheet - you're uploading a wrong package. You need to unzip the package that you downloaded from Themeforest. Inside you'll find another one with installable theme files.
  2. Parse Error or a blank page - please use [Admin Panel > Appearance > Themes > Install Themes > Upload] or FTP client like Total Commander to upload the theme. Some versions of Filezilla may not be the best choice. Ideally, please do not unzip the package on your computer. Please transfer theme files from within the ZIP package directly to your server. When you unzip the package files are likely to be modified to your system's fromat and not all FTP clients are able to successfully convert that back to Linux or Windows format.
  3. Max upload filesize limit - Some servers allow only 2MB files to be uploaded. Please contact Server Administrator and let them know to increase that. Demo server has this set to 64MB.
  4. Please create a support ticket if you have any questions about installation or configuration of this theme.

C) Homepage - top

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:

  1. Create a page named "Homepage" under [Admin Panel > Pages],
  2. Attach it under [Daisho > General > Front Page],
  3. Set it to the "Portfolio Template",
  4. Leave out page settings under [Settings > Reading] at "None".

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:

  1. Top Drag-down Panel - to make it work please create a page under [Pages > Add New] (name it like "Info Box") and put there some content. You can use headings, paragraphs and Grid System columns. Please avoid using any content that changes its dimensions (like images after they are loaded). This newly created page can be attached to top box under [Daisho > General > Top Drag-down Panel].
  2. Welcome Text - this text can be configured under [Pages > Homepage > Welcome Text]. It will be displayed only on front page above slideshow or thumbnails grid. Please make sure that "Homepage" is set as your "Front Page" under [Daisho > General]. Furthermore, "Portfolio Template" must be selected for this page.
  3. Slideshow - see below for Slideshow guide.
  4. Static Content - this will display one of your [Daisho > Pages] as static content on the homepage. It works with Classic Homepage only.
  5. Latest Portfolio Entries - this will display your five latest portfolio entries. You need to setup at least one page with "Portfolio Template" in order to make "View Portfolio" link work.
  6. Latest Blog Entries - this will display four of your latest blog entries. You need to setup at least one page with "Blog Template" in order to make "View Blog" link work.
  7. Footer (Client Logos, Copyright Notice and Social Media Icons) - see Footer Section for guide.

Slideshow - top

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:

  1. Title - it will be displayed to the left.
  2. Description - it will be displayed to the left below Title.
  3. Slide image - an image that has no more than about 400px of height. Images can cross borders of slideshow area.
  4. Button link - if you're planning to use button, you may add here some link.
  5. Button link name - text visible on button.
  6. Buttons X axis offset - you can specify X axis placement of your button (starting from the right side of slide).
  7. Buttons Y axis offset - you can specify Y axis placement of your button (starting from the top of your slide).
  8. Buttons icon (optional) - unique icon for your button.
  9. Slide color - pick any color for your slide (changes background and button colors). Please note that only darker colors will work with light text.
  10. Text color - pick dark or white text for your Title, Description and Button. Always using white colors is recommended.
  11. Image's X axis offset - you can specify X axis placement of your slide image (starting from the middle of slide).
  12. Image's Y axis offset - you can specify Y axis placement of your slide image. Examples: 10px will move it 10px downwards. -10px will move it 10px to the top.

Additional slideshow options are available under [Daisho > Slideshow].

D) Portfolio - top

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 - top

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

Portfolio FAQ - top

Q: Can thumbnails link to external URLs?
Yes. See [Portfolio > Add New > External Link].
Q: Can portfolio arrows go through only selected categories?
Yes. See [Pages > Add New > Loop through selected category projects only?]. To see this option the page must have "Portfolio Template" selected.
Q: Can I stop portfolio projects from being looped?
Yes. See [Pages > Add New > Boundary arrows disappear or loop from the start/end?]. To see this option the page must have "Portfolio Template" selected.
Q: Can I have multiple portfolio pages with different projects?
Yes. See [Pages > Add New]. Each page must have "Portfolio Template" selected. You can either exclude some portfolio categories from being displayed on that page or include in "Page Options" meta box.
Q: How can I manage portfolio on the homepage?
Homepage portfolio uses custom fields and settings that [Pages > Homepage] has provided that the "Homepage" page is set to be your "Front Page" under [Daisho > General > Front Page]. It also needs to be set to "Portfolio Template".
Q: How many projects should I have?
It's best to limit your portfolio pages to a few works. Demo has 13 projects. It's best to stay between 10 and 25 per page. More projects generate additional, unwanted HTTP requests, increase server usage and transfer and the majority of people won't want to open more than around 20 projects anyway.
Q: How many projects shouldn't I have?
Having 50 or 100 projects per page makes no sense from visitor's perspective. Furthermore, it generates HTTP request for every single image and 50 images times ~100kb = 5MB. If you have too many images that are too heavy then devices like iPhone, iPad, Android phones and Windows Phones would run out of memory and close the browser. Please keep in mind that mobile devices and tablets have very limited memory. You can't load hundreds of images at once on them. In addition, it's very important to make your page lightweight to perform smoothly and fast on mobile phones and tablets.
Q: How about Retina and high PPI screens support?
Mobile phones will usually display your thumbnails sharp even if you upload them in 1:1 size. That's because we scale the viewport to consider this. To have images sharp on tablets with larger screens it's advisable to upload twice as large images but as of February 2013 users of such devices are a minority so I would consider if you really want to increase website's weight just to satisfy this small group of people (and it's just to deliver them a little bit better and sharper images where not everyone will even notice this).
Q: Is there a pagination?
No. At this moment we're against it as there's no perfect compromise between the way the filter works and pagination. Each visitor would have to either go to each page to see all works or use the filter to unhide projects that are hidden on further pages. It raises various questionable behaviors and development challenges. For instance what should happen when the visitor is on the second or third page and they use filter and then "All Works"? Should it take him to the first page or the page he was on? Other similar scripts sometimes "reset" the view and sometimes take user back to the place he was in.
Q: Is there "Infinite Scroll"?
Currently, no. If you're planning on implementing any kind of pagination then "Infinite Scroll" should be a better choice than numbered pages. Implementing it is very simple in this case.
Q: What script is used to calculate positions of tiles?
We're using Isotope script.
Q: Are video thumbnails supported?
Yes. Please use this in thumbnail field: [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).
Q: How about SEO?
Entire website is indexed normally by search engines. Including projects.
Q: How about Google Analytics?
Google Analytics requires page refresh to track where users go. Therefore, AJAX websites or websites that dynamically replace content in some other way (like we do) are not fully supported by such scripts. Fortunately, in this theme you can use "External Link" field under [Portfolio > Add New] and link a project to itself. It will open with page refresh and Google Analytics will track this. So, it's like "better user experience" vs. "Google Analytics tracking everything". All other posts and pages are tracked normally, like in other themes.
Q: Are there any other limitations?
Yes. Some shortcodes are not allowed. Clarification: since project data is loaded dynamically, it requires re-initialization of all Javascript-based elements. Most Javascript scripts (like toggle, slideshows etc.) are initialized only once on "document ready" event when you enter a page. When new elements are added to the DOM structure (which means project data is inserted to a project view on the fly) then any scripts that would have been attached to these new HTML elements if this was first page entrance, are not going to be attached (unless there is an event listener that will initialize your script to all future elements of this kind as well). To better picture it: direct entrance to "Shortcodes" page will initialize "toggle" shortcode. But if you add toggle's HTML later on and not on page load then Javascript actions will not be automatically attached to it.

Multiple Portfolio Pages - top

A short guide on how to create two (or more) different portfolio pages:

  1. Create a few portfolio categories under [Portfolio > Categories] with posts inside them. For this example let's say you have two categories: X and Y (both have 2 published posts inside).
  2. Create two portfolio pages under [Pages > Add New]. Both need to use "Portfolio Template" (pick it to the right). Publish them.
  3. Once published (and only once published) the new tool will appear in custom fields section called "Exlude Portfolio Categories" (you can actually "Include" only some cateogries as well).
  4. For the first page in "Exlude Portfolio Categories" field select category X and hit "Update Page". Once you go to that page ("View Page") you will see that it displays only category Y and posts from that category (but it omits category X because you just excluded it).
  5. For the second page in "Exlude Portfolio Categories" field select category Y and hit "Update Page". Once you go to that page ("View Page") you will see that it displays only category X and posts from that category (but it omits category Y because you just excluded it).
  6. You can use this tool to create many portfolio pages with various setups.

E) Pages - top

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].

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.

IMPORTANT: 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.

F) Sidebars & Footer - top

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:

To create footer columns:

  1. Go to [Daisho > Footer] and list CSS classes that each column should have - each set separated by comma. Demo code: grid_12 grid_not_responsive, grid_12, grid_6 push_6 last, grid_6 pull_6 (detailed description in the table below).
  2. Creating footer column creates new widget areas available under [Appearance > Widgets]. First footer column will get flow-footer-1 ID ("Footer 1" name), second flow-footer-2 ID ("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:

Put "Text Widget" in "Footer 1" under [Apperance > Widgets] with this code: 
<hr>
<div class="footer-client-logos">
  <img src="http://themes.devatic.com/daisho/wp-content/uploads/2012/09/client1.png" alt="">
  <img src="http://themes.devatic.com/daisho/wp-content/uploads/2012/09/client2y.png" alt="">
  <img src="http://themes.devatic.com/daisho/wp-content/uploads/2012/09/client3.png" alt="">
  <img src="http://themes.devatic.com/daisho/wp-content/uploads/2012/09/client4.png" alt="">
  <img src="http://themes.devatic.com/daisho/wp-content/uploads/2012/09/client5.png" alt="">
</div>
Use only: <hr> in "Text Widget" in "Footer 2" under [Apperance > Widgets].

In "Footer 4" in "Text Widget" under [Apperance > Widgets] use:

<div class="copyright_notice">© 2012 Daishō Systems. All Rights Reserved.</div>

In "Footer 3" in "Text Widget" under [Apperance > Widgets] use:

<ul class="footer-social-icons">
  <li><a href="http://your-link">y</a></li>
  <li><a href="http://your-link">t</a></li>
  <li><a href="http://your-link">s</a></li>
  <li><a href="http://your-link">f</a></li>
  <li><a href="http://your-link">m</a></li>
  <li><a href="http://your-link">r</a></li>
  <li><a href="http://your-link">l</a></li>
</ul>

Note: Icons Map. Please use single letters to replace icons.

Normal Mode Responsive Mode Code
grid_12 not-responsive
grid_12 (separator only)
6 pull_6
6 push_6
grid_12 not-responsive
grid_12 (separator)
grid_6 (icons)
grid_6 (copyright)

Demo layout

Demo code: grid_12 grid_not_responsive, grid_12, grid_6 push_6 last, grid_6 pull_6

Breakdown with explanation:

  1. grid_12 grid_not_responsive - first we create a column with <hr> and 5 client logos. It will disappear for mobile devices because 5 logos can neither scale nicely nor re-position nicely (6 logos would be able to do that).
  2. grid_12 - <hr> only in TEXT WIDGET. This will separate content from other footer widgets in mobile mode and in normal mode it separates client logos from other footer widgets.
  3. grid_6 push_6 last - Social Media Icons (they should be placed in flow-footer-4 sidebar in TEXT WIDGET).
  4. grid_6 pull_6 - Copyright Information (it should be placed in flow-footer-3 sidebar in TEXT WIDGET).

G) SEO - top

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...:

  1. ...we already make sure that the general structure of this template is SEO-friendly so you can forget about this aspect,...
  2. ...but we ask you to make sure that you write consistent pages and posts up to W3 recommendations. Usage of headings, sections and paragraphs isn't random. There are some ideas and patterns behind it. It's best to know it all because WordPress won't do this for you and as a website owner it's best to have a general idea on how a typical article should be structured.
  3. And lastly each page and post has some SEO settings (see the image below) that are a nice improvement as well if used well. You can set search engine title and description for each individual sub-page of your website under [Posts > Add New] and [Pages > Add New]. Homepage will use title and description from [Pages > Homepage]. Portfolio projects will use portfolio title and project description as search engine data. Specifying SEO title and description for posts and pages is optional. If not specified - default data will be used.

Note: You can disable SEO module under [Daisho > General] and use some other SEO plugin instead. Popular choices: Yoast SEO, All in One SEO Pack.

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.

You can use other icons set such as Web Symbols or Raphael Icons if you modify your style.css file (you'll find an example there).

J) The Design - top

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.

a) Grid System - top

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.

Available Grid System Classes - top

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:

  1. grid_1 - 6.333% column
  2. grid_2 - 14.667% column
  3. grid_3 - 23.0% column
  4. grid_4 - 31.333% column
  5. grid_5 - 39.667% column
  6. grid_6 - 48.0% column
  7. grid_7 - 56.333% column
  8. grid_8 - 64.667% column
  9. grid_9 - 73.0% column
  10. grid_10 - 81.333% column
  11. grid_11 - 89.667% column
  12. grid_12 - 98.0% column
  13. last - always add to the last column

Available push classes (use push along with 12 columns classes like <div class="grid_6 push_6">column content</div>):

  1. push_1 - 8.333% push space
  2. push_2 - 16.667% push space
  3. push_3 - 25.0% push space
  4. push_4 - 33.333% push space
  5. push_5 - 41.667% push space
  6. push_6 - 50.0% push space
  7. push_7 - 58.333% push space
  8. push_8 - 66.667% push space
  9. push_9 - 75.0% push space
  10. push_10 - 83.333% push space
  11. push_11 - 91.667% push space

Available pull classes (use pull along with 12 columns classes like <div class="grid_6 pull_6">column content</div>):

  1. pull_1 - -8.333% pull space
  2. pull_2 - -16.667% pull space
  3. pull_3 - -25.0% pull space
  4. pull_4 - -33.333% pull space
  5. pull_5 - -41.667% pull space
  6. pull_6 - -50.0% pull space
  7. pull_7 - -58.333% pull space
  8. pull_8 - -66.667% pull space
  9. pull_9 - -75.0% pull space
  10. pull_10 - -83.333% pull space
  11. pull_11 - -91.667% pull space

Additional classes and information:

  1. container and row - on "no boundaries" page template you can use .row and .container to have greater control over the layout. See source code of the example page.
  2. last - last column within a row needs this class.
  3. grid_not_responsive - hides a column for mobile phones (below width=850px).
  4. grid_responsive_only - shows a column only for mobile phones.
  5. <hr> - you can add <hr> after each row of columns. It will add visible separator. We do this in many places on the demo website.
  6. Inside of each column please use <p> and <h1> to <h6> headings appropriately. They create bottom margins that separate columns.

How to use Grid System? - top

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>

Example 2:

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>

Example 3:

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>

Example 4:

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>

Example 5 (advanced):

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>

b) Style Guide - top

IMPORTANT: 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 h2 and 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 h3 are 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 h1 elements).

<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 2:

Example page is below. Please note h2 and 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>

c) Mobile and Tablets - top

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.

J) Shortcodes - top

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.

Tables - top

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:

  1. table-left - aligns text to the left.
  2. table-center - aligns text to the center.
  3. table-right - aligns text to the right.
  4. table-border-top-left-radius - makes top left corner rounded.
  5. table-border-top-right-radius - makes top right corner rounded.
  6. table-border-bottom-right-radius - makes bottom right corner rounded.
  7. table-border-bottom-left-radius - makes bottom left corner rounded.
  8. table-color-black - makes text black in Daisho style table.
  9. table-color-blue - makes text light blue in Daisho style table.
  10. table-color-dark-blue - makes text dark blue in Daisho style table.
  11. table-weight-bold - makes font bold in Daisho style table.

Lists - top

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: <ul class="list-lower-roman">.

  1. list-armenian
  2. list-circle - empty circles.
  3. list-cjk-ideographic
  4. list-decimal - 1, 2, 3, 4 etc.
  5. list-decimal-leading-zero - 01, 02, 03 ... 10, 11 etc.
  6. list-disc - solid circles.
  7. list-georgian
  8. list-hebrew
  9. list-hiragana
  10. list-hiragana-iroha
  11. list-inherit - takes list style from its parent list.
  12. list-katakana
  13. list-katakana-iroha
  14. list-lower-alpha - a, b, c, d etc.
  15. list-lower-greek - Greek characters.
  16. list-lower-latin - a, b, c, d etc.
  17. list-lower-roman - i, ii, iii, iv etc.
  18. list-none - no list marker is shown.
  19. list-square - solid squares.
  20. list-upper-alpha - A, B, C, D etc.
  21. list-upper-latin - A, B, C, D etc.
  22. list-upper-roman - I, II, III, IV etc.

Note: Some less popular types are not supported by IE.

Quotes - top

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:

  1. quote-style-2 - this class can be added only to <blockquote> element. It changes its style.
  2. alignright - this class can be added to <blockquote> and <figure> elements.
  3. alignleft - this class can be added to <blockquote> and <figure> elements.
  4. width - inline 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> with <figcaption> instead. <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>

Drop Caps - top

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:

  1. color - color of letter in HEX format (like #000000).
  2. style - 1 or 2 - without rounded background color or with rounded background color (letter in circle).
  3. bgcolor - background color of circle surrounding letter in HEX format (like #000000).

Toggles - top

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:

  1. title (required) - title of the toggle.
  2. type (optional) - below is the list of available values
    • empty/none or 1 - normal toggle with arrow.
    • 2 - FAQ style with question mark.
    • 3 - plus/minus style toggle.
    • 4 - filled plus/minus style toggle.
    • 5 - filled arrow style toggle.
  3. open (optional) - 0 or 1 - closed or opened on start.
  4. bgfill (optional) - toggle content gets mild grey background color.
  5. separator (optional) - 0 or 1 - toggle gets bottom separator when set to 1.
  6. fill (optional) - 0 or 1 - this changes toggle to be grey block. Separator and bgfill don't work in this mode.

Accordions - top

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 BR and P tags. Those will cause formatting problems for shortcode parser.

Tabs - top

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 [tab] tags):

  1. style (optional) - 1 or 2 - first is boxed, second is without borders.

Here's the list of available properties for [tab]:

  1. title (required) - title of the tab

YouTube Videos - top

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.

Vimeo Videos - top

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.

HTML5 Videos - top

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.

Google Maps - top

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.

  1. latitude (required) - specify latitude of the place where map should be centered.
  2. longitude (required) - specify longitude of the place where map should be centered.
  3. zoom (optional) - some number that will determine zoom level. 1 will show entire Earth and 10 and more will show only your city.
  4. width (optional) - width of the map. I recommend using 100% for this and decide what the with will be using columns.
  5. height (optional) - height of the map. I recommend using some value in pixels.

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.

Highlight - top

To insert Highlighted text, please use this shortcode: [highlight color="#001122" bgcolor="#fff000"]Text[/highlight]. Available options:

  1. color (required) - specify color of the text or leave blank to use default text color.
  2. bgcolor (required) - specify highlight color of the text or leave blank to use default highlight color.

PrettyPhoto, Lightbox - top

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.

Our Team/Services Slider - top

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:

  1. title - Puts big and bold title. Space is limited to just a few words.
  2. title_link - Item can be linked to something.
  3. icon - letter that represents icon from this set Modern Pictograms.
  4. description - short description that will be put just below title.
  5. image - image that will be greyed out. Demo images are 340x273px. There is no size limit but images shouldn't much exceed those dimensions.

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.

Widget Area in Content - top

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.

K) Misc - top

Custom Modifications - top

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:

  1. Child Themes - please use Child Themes whenever possibe.
  2. Plugins - please use Plugins and hook into wp_header(); or wp_footer(); or other places whenever possibe.
  3. CSS - style changes should be placed either under [Daisho > General > Custom CSS Code] or in your-file.css that should be uploaded to framework/shortcodes/your-folder/your-file.css or at the bottom of original style files if you're using Child Themes.
  4. Javascript - you can add short JS scripts to the footer under [Daisho > Footer]. Other JS scripts should be added using plugins. You can also upload your-file.js framework/shortcodes/your-folder/your-file.js to have it included in the page's footer. Modifying theme scripts directly is not recommended because you won't be able to easily update the theme later on.
  5. HTML and PHP - the only reasonable way to change HTML structure of the theme is to use Child Theme or create a new, stand-alone page template or plugin that you can then save and upload again when you update the theme. Modifying theme's HTML and PHP scripts is not recommended because you won't be able to easily update the theme later on.
  6. Typography Plugin - it's included in the package. Please check example video: http://vimeo.com/22093944. This can be helpful as well.

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.

Support Policy - top

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.

Updating the Theme - top

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:

  1. Re-download - please login to your Themeforest account and go to [Themeforest > "Downloads"]. Download the theme again.
  2. Backup - do backup copy of your previous theme by logging in to your server and by downloading all the previous files (or by renaming "theme-name" folder to "theme-name-backup").
  3. Update - my preferred way to do it is to copy new theme files to "theme-name" folder. It doesn't require re-activation or any other action then. If you're unsure how to do this please just install the theme again using the ordinary way.
  4. Post-update Steps - it's very likely that no other action will be necessary to make it work. Sometimes you will need to re-activate the theme again under [Appearance > Themes] and re-attach things like menus under [Appearance > Menus] or widgets under [Appearance > Widgets].

Automatic Update Service

  1. You can check if the newer version of the theme is available under [Daisho > About], at the bottom.
  2. If it is available, please go to [Daisho > General] and please put a login and a password to your support forum account that have valid Item Purchase Code in the appropriate user profile field.
  3. If your account has a valid Item Purchase Code please go to [Dashboard > Updates] and update the 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'.

Files (HTML/PHP/JS/CSS/PSD) - top

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.

L) Localization (Translations, Internationalization, WPML) - top

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).

M) Sources, Credits and Goodbye - top

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.

Flow on ThemeForest (follow)

Go To Table of Contents

A A A+