“Daisho Theme” documentation — version 2.7


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. Sources and Credits

A) Installing the Theme - top

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

Installation

You can follow the installation video (2:19) or the steps below to install the theme:

  1. Download the theme by going to the "Downloads" page of themeforest.net and finding this theme on your list of purchased files. 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. To upload and activate the theme go 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:
    1. Install WordPress Importer plugin to have an ability to import the demo content.
    2. Install Contact Form 7 plugin before importing the demo content to have the contact form import as well. Otherwise, it will be skipped.
    3. Install LayerSlider plugin if you'll be using the "Classic Homepage" layout with a slideshow.
    4. Install Visual Composer (page builder) plugin if you'll want to have text in multiple columns.
  4. Import the demo content:
    1. File locations:
      • /core/auto-install/daisho.wordpress.2017-02-07.xml
      • /core/auto-install/LayerSlider_Export_2017-02-01.json
    2. Go to Daisho → Demo and hit the "Import the demo content" button. It will use the official WordPress Importer plugin to import the XML file which contains the content exported from the demo website (posts, pages, comments, categories, news, portfolio, menus). Media library items won't be imported. The demo theme settings and widgets aren't contained in the XML file but will also be imported.
      • Alternatively, you can import the XML file manually using Tools → Import. After importing the demo content this (manual) way you'll have to manually attach the menu in Appearance → Menus and manually configure footer widgets.
    3. Go to LayerSlider WP → All Sliders and import the LayerSlider export file. 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 (like Apache HTTP Server 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.

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 and PNG formats. SVG format (recommended) support can be enabled with plugins. If not uploaded, your blog name and description will be displayed.

Top Drop-down Panel - to make it work create a new page in Pages → Add New (name it like "Info Box") and put there some content. You can use headings, paragraphs and columns. Avoid using any content that changes its dimensions over time. This newly created page can become your top drop-down panel if you pick it in Daisho → General → Top Drop-down Panel.

Menus - you can configure the main menu in 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 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 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.

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:

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.

Here are the 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.

Note: You could add these column classes also 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>.


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, 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 Visual Composer page builder plugin. The demo pages were not created in Visual Composer. Visual Composer is an optional way to create posts and pages which you would use only if you need to create columns or some more advanced layout.

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="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.

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

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 is 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. The WordPress article covers most of what you need to know about child themes.

The theme is based on Underscores framework which is a set of basic starter files that the default themes use. We use the default WordPress themes as reference as well so you can check their functions.php to see how to unhook filters and actions, learn which files and functions can be overwritten (presentational) and which can't (core) etc.

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 third party developers to do 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). Five years of experience is enough to deliver a modification with excellent code quality and in timely manner.


G) Sources and Credits - top

The preview 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 can not be used elsewhere. They are not included in the package. Thank you!

Go To Table of Contents