“Daisho theme” documentation — version 3.2

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. Google Maps
    3. Our Team/Services Slider
    4. LayerSlider
    5. Recent Blog Posts
    6. Recent Portfolio Projects
  6. Support
  7. FAQ
    1. Changelog
    2. Repository
  8. Sources and Credits

A) Installing the Theme - top

You need a working copy of the newest WordPress (minimum required is WordPress 4.8.1) installed on your own server (wordpress.com hosting doesn't allow custom themes) 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.


Follow the steps below to install the theme:

  1. Download the theme from your "Downloads" page on themeforest.net. You can download one of the following on that page:
    • All files and documentation. Do not install this ZIP package because you'll receive Missing Stylesheet error message. You can unzip it and inside you'll find "Daisho" folder which contains another ZIP package with installable theme files.
    • Installable WordPress file. This is the installable package that you can install.
  2. Upload and activate the theme by going to Admin Panel → Appearance → Themes → Install Themes → Upload and pick the ZIP package with the installable theme files.
  3. Install plugins in Appearance → Install Plugins.
  4. Import the demo content:
    1. Go to Daisho → Demo.
    2. Pick the demo content you want to import.
    3. Hit the "Import the demo content" button.
      1. It will use the official WordPress Importer plugin to import the XML files which contain the content exported from the demo website (posts, pages, comments, categories, tags, news, projects, menus and "Advanced Custom Fields" fields). Media library items won't be imported.
        • Alternatively, you can import the XML files manually using Tools → Import. They are located in /admin/auto-install/. After importing the demo content this (manual) way you'll have to manually attach the menu in Appearance → Menus and manually configure the footer widgets.
    4. Go to LayerSlider WP → All Sliders and import the LayerSlider export file located in /admin/auto-install/. LayerSlider slideshows aren't included in the standard XML file.

Common Installation Issues

  1. Missing Stylesheet — if you have downloaded "All files and documentation" package from ThemeForest (instead of "installable WordPress file") please make sure to unzip it. Inside you'll find another ZIP package with installable theme files.
  2. Max upload filesize limit — some servers allow only 2 MB files to be uploaded by default. To fix this, contact the server administrator and ask them to increase that. The demo server has this set to 128 MB.
  3. Menu not imported — due to a temporary bug in the official WP_Import PHP class (affecting version 0.6.3 of WordPress Importer plugin) the menu may not be imported for some users despite being included in the demo XML file. If you're experiencing this issue you'll have to create the menu manually in Appearance → Menus.

Logo — follow the steps to add an image logo to your website:

  1. Upload your image logo in Appearance → Customize → Site Identity (Daisho → General in older versions).
    1. Supported formats: JPG, PNG, GIF and more (see get_allowed_mime_types()).
    2. Recommended format: SVG (can be enabled with plugins, see #24251).
  2. If not uploaded, your Appearance → Customize → Site Title and Appearance → Customize → Tagline will be displayed.

Top Drop-down Panel — follow the steps to enable it:

  1. Create a new page in Pages → Add New (name it e.g. "Info Box") and put there some content. You can use headings, paragraphs and columns. Avoid using any content that changes its dimensions over time.
  2. Assign your newly created page in Daisho → General → Top Drop-down Panel.

Menu — follow the steps to create your main menu:

  1. Create a new menu in Appearance → Menus.
  2. Attach your newly created menu to the "Main Menu" location to make it appear on the front-end.
  3. Optionally specify one of the below icon CSS classes for individual menu items using the available "CSS Classes (optional)" field.
    • If you don't see "CSS Classes (optional)" field you can enable it in the top, right corner in "Screen Options".
    • You can use Modern Pictograms icons with modernpicrograms- CSS class prefix or FontAwesome 4.7.0 icons with fa- CSS class prefix.

C) Pages - top

The demo consits of five main pages. You can edit them in Pages → 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 you can 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 Settings → Reading → Front page displays.

WordPress settings reading

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 Appearance → Customize → Additional CSS 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 LayerSlider → Import Sliders is located in the JSON file in /admin/auto-install/. Once you import it, paste its shortcode (usually [layerslider id="1"]) in Pages → Homepage below the welcome text.

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.

To create a footer go to Daisho → General → Footer Layout. This field accepts a comma-separated list of column CSS classes. The demo code: grid_12 last widget_no_margin, grid_6, grid_6 last.

Creating a footer column creates a new widget area available in Appearance → Widgets. You can create any footer layout and you can use any widgets in the footer's columns. Below you will find the demo widgets:

"Custom HTML" widget in "Footer 1" in Apperance → Widgets:

"Custom HTML" widget in "Footer 2" in Apperance → Widgets:

"Custom HTML" widget in "Footer 3" in Apperance → Widgets: Note: Font Awesome Icons Map.

E) Plugins and Shortcodes - top

Generally, if a plugin exists for something you need, it should be used. Shortcodes, forms, columns, SEO settings, Google Analytics code and similar things need to be added with plugins to have it still working when you switch themes. We separate presentation from functionality as advised by the official theme review requirements.

Note: It is a common misconception that plugins slow down the website. Indeed, a great number of plugins in the official repository is bloated (load even more CSS and JS files than the theme itself, create many database options and requests etc.) but all properly written plugins won't do that and enabling them won't have any statistically significant impact on the website's speed.

This theme recommends that you install at least these plugins to be able to replicate everything that you see on the demo website:

a) Columns - top

The theme also comes with built-in columns. Available column widths:

  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.

Usage: You can add these column classes to div elements on standard posts and pages if you want to create columns without activating Visual Composer plugin. Two columns example: <div class="row"><div class="grid_6">Column 1</div><div class="grid_6 last">Column 2</div></div>.

b) Google Maps - top

To insert the Google Maps map, use this shortcode: [gmap latitude="35.631219" longitude="139.769356" zoom="12" width="100%" height="350px"].

  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. google_api_key (required) — in order to use styled (grayscale) Google Maps maps you need an API key. You can obtain it on the Google's pages.
  4. zoom (optional) — zoom level. 1 will show entire Earth, 11 will show your location closely, 21 will show individual buildings.
  5. width (optional) — width of the map. 100% is recommended.
  6. height (optional) — height of the map. Some value in pixels, like 350px.

c) 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="https://demo.ikonize.com/daisho/wp-content/uploads/2012/06/team2.png"]Short member description.[/content_block]. Our demo images have the following dimensions: 340 × 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 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.

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

e) Recent Blog Posts - top

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

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

If you need further help follow the steps below to resolve your issue fast:

  1. Check the FAQ .
  2. Check the changelog and download and install the newest development version of the item and see if it solves your issue.
  3. If none of the above steps helped contact us.
    • We will usually respond within 24–72 hours in accordance with the item support policy.
    • Over 50% of questions we receive are about custom modifications (which our support team has no expertise to answer). If your question includes a custom modification request visit the relevant FAQ page first.

G) Sources and Credits - top

The demo content for Daisho was provided by:

The people listed above agreed to use their works as preview content for the demo website but these works are not included in the package.