“Daisho Theme” Documentation by “Flow” 2.6

“Daisho Theme”

Created: 27 April 2016
By: Flow

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 the support forum. Thanks so much!

Table of Contents

  1. Installing the Theme
  2. Header
  3. Pages
    1. Homepage
    2. Portfolio
  4. Sidebars and Footer
  5. Plugins and Shortcodes
    1. Columns
    2. UI (Tabs, Toggle, Accordion)
    3. Google Maps
    4. Our Team/Services Slider
    5. LayerSlider
    6. Recent Blog Posts
    7. Recent Portfolio Projects
  6. Support
  7. Sources and Credits

A) Installing the Theme - top

You need a working copy of the newest WordPress (minimum required is WordPress 4.5) 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.

Automatic installation

Please follow the installation video (2:19).

Manual installation

  1. Download the theme - please go to themeforest.net and in "Downloads" section find Daisho on your list of purchased files. You can download one of the following on that page:
    • All files and documentation - please do not install this ZIP package because you'll receive Missing Stylesheet message. Please unzip it. In the package you'll find "Daisho" folder - this one contains another ZIP package with installable theme files.
    • Installable WordPress file - this is the installable package that you can install in [Admin Panel > Appearance > Themes > Install Themes > Upload].
  2. Upload and activate the theme - go to [Admin Panel > Appearance > Themes > Install Themes > Upload] and pick the ZIP package with installable theme files. Once it's uploaded, please activate it.
  3. Import demo content
    • Please install at least Contact Form 7 plugin before importing demo content to have contact form import as well. Otherwise, it will be skipped.
    • After you activate the theme you'll see "Install Demo" button. It will automatically delete all posts, pages, comments, revisions, categories, tags, menus, news, portfolio projects, widgets, theme settings and import the demo XML file (posts, pages, comments, categories, media library, news, portfolio, slideshow, menus), theme settings and widgets.
    • If you don't want to delete your existing content you can hit "Skip Setup" button instead of the "Install Demo" button and manually import the XML file with demo content using [Tools > Import]. After importing the demo content you'll have to manually attach the menu in [Appearance > Menus] and configure footer widgets. The XML file is available in the main download package.
    • Example LayerSlider for "Classic Homepage" that you can import in [Admin Panel > LayerSlider > Import Sliders]: LayerSlider_Export_2013-10-24_at_12.24.29.zip (please unzip it before importing).

Common Installation Issues

  1. Missing Stylesheet - please make sure to unzip the package that you downloaded from ThemeForest. Inside you'll find another one with installable theme files.
  2. Max upload filesize limit - some servers allow only 2 MB files to be uploaded by default (like some versions of localhost WAMP or MAMP). Please contact the server administrator and ask them to increase that. The demo server has this set to 128 MB.

The header consists of a top drop-down panel, a logo and a menu.

Logo - You can upload your image logo in [Daisho > General]. It accepts JPG, PNG, SVG and other popular image formats. If not uploaded, your blog name and description will be displayed.

Top Drop-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 the columns shortcodes. Please avoid using any content that changes its dimensions over time. This newly created page can become your top drop-down box if you pick it in [Daisho > General > Top Drag-down Panel].

Menus - you can configure the main menu under [Appearance > Menus]. Attaching a menu to the "Main Menu" location is required. Each menu item has "CSS Classes (optional)" field. Please use this field to specify one of the CSS classes below. It will add an icon to the menu item that you currently edit. If you don't see "CSS Classes (optional)" field, please enable it in the top, right corner in "Screen Options". We use Modern Pictograms icons set in the menu area. Available CSS classes that you can copy and paste for each menu item:

C) Pages - top

The demo consits of five main pages. You can edit them in [Admin Panel > All Pages].

Note: Both new posts and new pages have comments enabled by default. To disable them for both you can uncheck [Settings > Discussion > Allow people to post comments on new articles]. To disable them for pages only you can do that in [Pages > (any page) > Allow Comments]. If the box with "Allow Comments" checkbox is not visible please enable it in the top right corner in "Screen Options". You can also update multiple pages at once in [Admin Panel > All Pages] by selecting them and by picking "Edit" above the list in "Bulk Actions" drop-down menu.

Note: Your blog page will display full posts with HTML formatting enabled unless you use the more tag. This will produce "Continue Reading..." message and will cut the post. You can also specify a manual excerpt in [Posts > Add New > Excerpt] and this will be shown instead of the beginning of a post. If you don't see the "Excerpt" box please enable it in the top right corner of the admin panel in "Screen Options".

Homepage - top

By default the blog is your front page. You can change that to a portfolio page or any other static page in [Admin Panel > Settings > Reading > Front page].

WordPress settings reading - static front page.

Classic Homepage - top

On the demo we use something we call "Classic Homepage" as front page. This is not a special page template though, it's just another standard page with "Default Template" selected. To create such page please create a new page called for example "Homepage" in [Pages > Add New] and use the following content to insert (1) welcome text, (2) LayerSlider, (3) three columns of static text, (4) recent portfolio projects widget and (5) recent blog posts widget:

This page will still display its title and to hide it please add .page-id-1234 .page-header { display: none; } to [Dasisho > Styling > Custom CSS Code] where 1234 is the ID of this page. You can find the ID of your page in the URL while you're editing your page.

Example LayerSlider slider for "Classic Homepage" that you can import in [Admin Panel > LayerSlider > Import Sliders] is located in the main download package in /Daisho/LayerSlider_Export_2013-10-24_at_12.24.29.json (download). Once you import it, please paste its shortcode (usually [layerslider id="1"]) to [Pages > Homepage] below the welcome text.

Note: There used to be a special page template called "Classic Homepage" in versions earlier than 2.4 but it was removed since this page can now be replicated with the default template.

Portfolio - top

Portfolio Pages - you can create one or multiple portfolio pages in [Pages > Add New]. Each one has to have "Portfolio Template" selected. Each one can display different set of posts and categories. You can exclude or include certain categories there. Portfolio pages will not list empty categories.

Portfolio Projects - you can create new projects in [Portfolio > Add New]. Creating a project works just like creating a blog post or a page. You can insert media using "Add Media" button in the top left corner of the editor. Supported media include YouTube, Vimeo, SoundCloud, HTML5 Videos, HTML5 Audio and all other WordPress Embeds. Project title, description and meta data can be created below the editor.

Demo Image Settings - each demo image in each portfolio project has (a) "Alignment" set to "None" or "Center" if it's a portrait image, (b) "Link To" set to "None", (c) "Size" set to at least 1120px.

WordPress Media Library Settings

Image Captions - you can make bolder title for captions using <span class="caption-title">TITLE</span> Description sentence. in "Caption" field for each image.

D) Sidebars and Footer - top

In [Appearance > Widgets] you'll find a widget area called "Sidebar 1". Adding widgets to this one will make them show up on pages that have sidebar enabled. You can enable sidebar for pages in [Pages > (your page) > Layout]. You can have unique sidebar per page using WooSidebars plugin.

Please find [Daisho > General > Footer Layout] in your admin panel. This field accepts a comma-separated list of columns CSS classes. Demo code: grid_12 last widget_no_margin, grid_6, grid_6 last.

Creating a footer column creates a new widget area available under [Appearance > Widgets]. You can create any footer layout and you can use any widgets in footer's columns.

Text Widget in "Footer 1" in [Apperance > Widgets]:

Text Widget in "Footer 2" in [Apperance > Widgets]:

Text Widget in "Footer 3" in [Apperance > Widgets]: Note: Font Awesome Icons Map.

E) Plugins and Shortcodes - top

There is a list of tested plugins available on the support forum. Generally, if a plugin exists for something you need, it should be used. Shortcodes, forms, columns, SEO settings, favicon, Google Analytics code and similar things need to be added with plugins to have it still working when you switch themes. This theme recommends that you install at least Symple Shortcodes and Contact Form 7 plugins to have the shortcodes and the contact form from the demo posts and pages working. It also comes with LayerSlider and Visual Composer. Please note that Visual Composer is not able to edit any of the demo pages. They were not created in Visual Composer. Visual Composer is an optional way to create posts and pages. You may use it to create new pages or you may use the default editor or other plugins like that.

a) Columns - top

Columns can be added with Symple Shortcodes plugin or with Visual Composer. If you'd like to use Symple Shortcodes plugin then on the post editing screen you'll find a red "S" icon when the "Visual" editor is active. It allows you to insert columns. Example for three columns:

There's also our built-in grid system that is used for footer but can be used for posts and pages as well. Columns classes can be added to div elements. Available classes:

  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 in a row.
  14. row - if you need multiple rows of columns, each row needs to be wrapped in a div that can optionally have .row class.
  15. row-wrapper - if you need to style your rows differently you may wrap each row in a div that has .row-wrapper class.
  16. grid_not_responsive - hides a column for mobile phones.
  17. grid_responsive_only - shows a column only for mobile phones.
  18. widget_no_margin - each widget area in the footer has 3rem (48 pixels) of bottom margin. When you create new footer columns you may sometimes need to eliminate that. It works for desktop computer resolutions only. Mobile phones will always have that bottom margin.

Two columns example:

b) UI - top

You can use the red "S" icon in the "Visual" editor when creating a post or page to generate tabs, toggles, accordion, maps and other shortcodes. For backwards compatibility we didn't remove shortcodes that we were using in the previous theme versions. Below is a list of them. These are deprecated but still available:

c) 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 its width to 100% if you wish to make it responsive.

  1. latitude (required) - latitude of the place where the map should be centered.
  2. longitude (required) - longitude of the place where the map should be centered.
  3. zoom (optional) - zoom level. 1 will show entire Earth, 11 will show your location closely, 21 will show individual buildings.
  4. width (optional) - width of the map. 100% is recommended.
  5. height (optional) - height of the map. Some value in pixels, like 350px.

d) Our Team/Services Slider - top

This shortcode creates a carousel of items. It can display titles, short descriptions and images. On the demo website there are three 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]. Default icons set for icon="" parameter is located here: Modern Pictograms.

Our Team page uses the following shortcode to add team members: [content_block title="John Smith" description="Market Research" image="http://themes.devatic.com/daisho/wp-content/uploads/2012/06/team2.png"]Short member description.[/content_block]. Our demo images have the following dimensions: 340 x 273 pixels but that's not a requirement.

News page uses the following shortcode to list news: [content_block post_type="news" posts_per_page="15"]. You can add news in [Admin Panel > News > Add New]. Please note that /news/ slug in the URL is reserved for news archives and can't be used for pages. Please use /our-news/ or other slugs instead.

Available options:

  1. title - the title of an item.
  2. link - a link. The item can be linked to something.
  3. icon - a letter that represents icon from this set Modern Pictograms.
  4. description - short description that will be placed just below the title.
  5. image - a link to an image. The image will be greyed out. Demo images are 340x273px. There is no size limit but images shouldn't much exceed these dimensions.
  6. post_type - a name of a post type (like news) that will be loaded into the carousel. If this is specified, above options won't work.
  7. posts_per_page - a number (like 10). If post_type is specified, you can limit number of posts to show using this.

e) LayerSlider - top

This theme comes with LayerSlider plugin. Its documentation is included in the main download package as well as on the plugin page in admin panel. You can create slideshows for posts or pages with it. It can work for portfolio projects as well if you enable page reloads for it (see the support forum and FAQ).

f) Recent Blog Posts - top

It's a "Classic Homepage" widget that will list four of your recent blog posts: [recent_posts].

g) Recent Portfolio Projects - top

It's a "Classic Homepage" widget that will list five of your recent portfolio projects: [recent_projects].

There is also a shortcode that can display entire portfolio grid on any page: [ns-isotope].

Available options for [ns-isotope] shortcode:

  1. categories - comma separated category IDs to display. Example: [ns-isotope categories="95,97"].
  2. categories_operator - if set to "NOT IN" it will exclude provided categories and display all other categories. Example: [ns-isotope categories="95,97" categories_operator="NOT IN"].
  3. order and orderby - allow you to pick ordering method for the thumbnails. Available options are described on WP_Query: Order and Orderby Parameters.

F) Support - top

In order to register on our Support Forum you need your "Item Purchase Code" which can be found on themeforest.net, in "Downloads" section, after following "License Certificate" link. After creating a support ticket we will usually respond within 24–72 hours. Please visit frequently asked questions thread before posting, maybe your question in already answered there.

Envato ThemeForest Item Purchase Code

Supporting items includes:

Item support does not include:

Custom Modifications - top

All custom modification should be done in a child theme (daisho-child.zip (1 kB)). The WordPress article already covers everything that you need to know about child themes so I'll only mention that we use the default WordPress themes as reference so you can check their functions.php to see how to unhook filters and actions, which files and functions can be overwritten (presentational) and which can't (core).

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 the ones that are frequently requested. If you're looking for extensive custom modifications we recommend hiring freelance developers to accomplish such custom modifications for you. Current worldwide average hourly rate for 3–5 years of experience in HTML/CSS/PHP/JS field is around $50/h as of 2013 (based on Freshbooks Report and Envato's Freelance Statistics Report). 5 years of experience is enough to deliver a modification with excellent code quality and in timely manner.

G) Sources and Credits - top

Daisho was created by Anthony Jones (follow) (design and idea) and Flow (follow) (code).

We'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 the great designers who provided preview content for Daisho.

The designers listed above agreed to use their works as preview content for the demo website but these works can not be used elsewhere. 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.


Go To Table of Contents