Ninetheme

Honshi - Theme Documentation

01Getting started

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

This document covers the installation and use of this theme and often reveals answers to common problems and issues - we encourage you to read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support forum.

Please read the documents carefully. If you forget to read even one single part of the documentation , your website might not work.

It is likely possible to have easly the demo in three steps :

  1. Upload the theme and make it make it active
  2. Upload the plugins of the theme and make sure that they are active : Go to Appereance > Install Plugins
  3. If the theme has the One-Click installer, please go to : Appereance > Installer Panel , but if has not the One Click installer please use the XML demodata.
  4. If you've followed these steps provided above and also no problem in your host setting, you'll get the same demo within 10 minutes.

01.1Download Your WordPress Theme

Congratulations! You just purchased our Honshi Responsive Multipurpose WordPress theme on ThemeForest. To download the theme log into your ThemeForest account and go to your account profile. Then click on the downloads link. This is where you will find all of your ThemeForest purchases. Locate Honshi, click on the download button and select the installable WordPress file only. Also you can see the following image.

Locate Honshi, click on the download button and select the installable WordPress file only. Also you can see the following image.

This will download the installable Honshi zip file.

02Theme installation

02Theme Installation

02.1How To Install Your Theme

Now that you’ve downloaded this theme, there are two ways you can install the theme.

Important: One of the most common reasons people have issues is because they try uploading the full zip that includes sample data, documentation…etc which displays the “The package could not be installed. The theme is missing the style.css stylesheet.” error.

Please make sure you are uploading only the installable theme which is called theme-file-name.zip. When you download the theme from your ThemeForest downloads it will give you 2 choices one is to download the full zip which you will need to extract to locate the theme and the other one is just the installable theme. Please pay close attention to this.

Step 1: Make sure wordPress is up to date!

The theme is a powerful and makes use of all the latest WordPress functions to ensure the theme is coded as best as possible and is highly optimized, please make sure WordPress is fully up to date before installing the theme! You should ALWAYS be running the latest version of WordPress anyway, because otherwise you put your whole site at risk for potential threats. Never use an outdated version of WordPress!

Step 2: Install via WordPress or FTP

Now that you made sure WordPress is up to date you can go a head and install the theme and there are 2 methods for doing so: via WordPress or via FTP. If you are working with WordPress and buying themes you should pretty much know how to install a theme, but below are some screenshots just incase you don’t know how!

Install Via Cpanel

Install Via WordPress

Log into your WordPress website and browse to Appearance > Themes

Then click on the option to upload theme.

Install Via FTP

Your second installation option is to upload the theme via FTP. For this method first log into your site via FTP and browse to your folder located at wp-content/themes. Unzip the theme file you downloaded from Themeforest and upload only the extracted this themes folder to your server.

02.3.0Theme Demo Installer Wizard

If you can't use Demodata Wizard after theme activate please contact our support team or apply manual steps, we can help you free for demodata installations. If you accomplished to install the demo data with the help of Wizard installer panel, there is no longer need to read the entire installation sections provided in this documentation. You may directly post your questions us.

02.5Import XML demodata

Please follow the following instructions in order to import your xml demodata

Dashboard > Tool > Import > WordPress > Select your file.

02.6Setting Up Front and Blog Page

Select Page Template As Custom Page Template and Click "Publish".

Once you have created your new page:

  1. Go to Settings > Reading
  2. Select A static page from Front page displays section
  3. Select frontpage for Front page
  4. Select Blog for Posts page
If you haven't applied these setting above, your frontpage sections will not be displayed.

02.7 Theme Partials

In our theme, we tried to make it easier the customizability providing much options in the theme partials section. You can find both menu and logo in the header area, while you can find the social icons, widgets in the footer area and also you're able to find the sidebar options in the theme options. In this section, we're going to show you how to add these options providing images to make it more understandable.

02.7.2Blog Page

Blog page has been integrated into Honshi in order to make you able to display your blog post. If you installed your theme using the one click installer, you'll get the Blog page as post page in the static page here : Admin > Settings > Reading . Honshi offers you two options for the post style. The first one is default style and the second one is masonry style.

Default Post Style

This is the first post type that comes with sidebar. What you need to do to select the default style is set the Blog page as your post page here : Admin > Settings > Reading > select the Blog for your post page. If you select, your post will be shown one under the other as shown below :

Masonry Post Style

This is the first post type that comes without sidebar. What you need to do to select the default style is set the Blog page as your post page here : Admin > Settings > Reading > select the Masonry Blog for your post page. If you select, your post will be shown one under the other as shown below :

02.7.4 Widgets

Honshi makes you able to modify the footer area using the widget areas. Adding widgets is such simple. Browser to Appearance > Widgets and drag and drop your widgets into your footer Columns. The default Footer is composed of Widgets which you can add via Appearance > Widgets. You can also completely style and select your options for your footer via the Customizer. Look at the following images.

NOTE : You should in keep mind that you can add contact form. What you need to do is copy-paste the shortcode of the contact form and drap-drop the ' text 'into the related area as already shown in the images provided below.

02.7.5 How to Add Post Types

Thanking to the Custom Post Type, Honshi makes you able to add your post items in the admin menu, not directly via the shortcodes. We've added some options for both blog posts and portfolio post items. Lets say, for example, you would like to add your portfolio items. What you need to do is Select your post type as Portfolio in the Portfolio ( CPT ) shortcode. Then, you need to go Admin > Portfolio. There, you can add your portfolio items. Please also have a closer look at the following image.

Portfolio Post Types

Honsh, gives you some several post formasts options provided in the metabox area for the portfolion. Each post formats in the metabox area contains different options. In this section, we're going to explain these format sytles one by one.

  1. Gallery Slider Format : What you need to do is just going to metabox area ( at the bottom of the portfolio page ) and you need to select the Open in Single Popup and once you selected, you'll an option below to add your background image for gallery. As you go down the portfolio page, you'll seee a wealth of features in the metabox area. Please also see the attached images to see the point well

  2. Vimeo Format : What you need to do is going to metabox area and select Open in Lightbox option. Then, you need to insert your vimeo / youtube url as shown in the following images
  3. Single Page :If you select this format, you'll be redirected to the details page, when clicked on the portfolio item.

02.8 Honshi Theme Pages

How to Create Pages

Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headache. Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes. By creating a child theme, you create a separate set of files that you can use to customize the theme without affecting the original theme at all. Not only does this make updating easier, it also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original. Click Me To Create A Child Theme

02.8.1 Home Page

Before talking about the homepage section, you have to make sure that you've selected the Custom Page Template under the page attribution on the right side of home page. In Honshi, all the sections has been created with the help of shortcodes of Visual Composer. This means that you can add your contents in the shortcodes without any html code required. Each of the available shortcodes refers to a section on the frontend. Lets say, for example, you would like to change the background image of the Service section on your frontend. Here, what you need to do is just clicking on the Service Item shortcode in the backend editor. Once you clicked to edit the Service Item shortcode, there you'll see the available option for background image. The same thing is for the rest of the shortcodes. You can modify them as you wish without html code required or you dont have to be expert either. Please also have a closer look at the following image to see the available shortcode of Homepage of Honshi on backend editor.

Please also have a closer look at the following shortcode on backend :

Please also have a closer look at the following shortcode on frontend :

02.8.2How to Create Team Page

Honshi provide you the easier way to make you able to create your team page, considering your needs into account. There are several steps that you have to cerafull, while creating your team section. Please have a closer look at the following steps

  1. Firstly, you have to select the Team ( CPT ) shortcode and you have to make sure that you've selected your post type as Team
  2. Secondly, Honshi gives you the option to chose the column number as you desire. Lets say, for example, you have 3 team items. What you need to do is select the 3 row columns. Or if you have 4 items, then you need to select the 4 row column. Here, the point is, there is no restriction on you to chose the column number. Please see the following image to see the point well.
  3. Finally, as a result of using custom post type, you can add your team items here Admin > Team
  4. Team Section Details

    • Select your post type : This means which of the availables post types you would like to use. Team is selected defaultly.
    • Enter post name( title ) : Please go to Admin > Team > Click on the quick edit one of your team item. You'll see both name and the slug name of your team items. Please copy paste the slug of your team item and insert into tema shortcode.
    • Team post style : There are two style for the team section. Style 1 refers to the team without hover on the team section and Style 2 refers to the team with hover overlay color on it.

02.8.3How to Create Pricing Page

The way you create Team page as explained in the previous part is a referance for you, while creating Pricing page. here are three steps need to be taken carefully, while creating your pricing page

  1. Firstly, you have to select the Pricing ( CPT ) shortcode and you have to make sure that you've selected your post type as Pricing
  2. Secondly, Honshi gives you the option to chose the column number as you desire. Lets say, for example, you have 3 pricing items. What you need to do is select the 3 row columns. Or if you have 4 items, then you need to select the 4 row column. Here, the point is, there is no restriction on you to chose the column number. Please see the following image to see the point well.
  3. Finally, as a result of using custom post type, you can add your pricing items here Admin > Price Table

02.8.4How to Create Shop Page

In Honshi, woocommece plugin has been integrated into the theme in order to create the shop page. There are several steps need to be taken for the creation of shop page. Please see them in the following ;

  1. First, you need to create a blank page named, for example, as Shop.
  2. Secondly, you need to go to Admin > Woocommerce > Products > Add new. Here, you can create as many as products items you want.

  3. Thirdly, if you want the Shop page to be displayed for your products, then please go to Woocomerce > Settings > Products > Display

02.9 Child Theme

Why You Should Be Using Child Themes

Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headache. Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes. By creating a child theme, you create a separate set of files that you can use to customize the theme without affecting the original theme at all. Not only does this make updating easier, it also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original. Click Me To Create A Child Theme

04.1Add Frontpage Contact Form

If you would like to use the demo contact form, please go to Admin > Contact. There, you'll see the contact form named Home contact form. The last step need to be taken is select the form in the contact form 7.

Frontpage Contact Form code:

Please also have a closer look at the following images.

06Theme Settings ( Theme Options )

First, we should know that options are the main pillar of a theme. In other words, theme options are the backbone of a theme. This is the section, where you have full control over your website and can customize as you wish and besides, you do not have to able to know about coding. The major groups of options you can set in the theme are the Theme Options. Here, in Honshi, you have a variety of options regarding the theme including socials, widgetize options etc.

Included:

General Config

  1. Footer height option
  2. Frontpage banner section option for class name, don't forget please.
  3. Logo upload
  4. Favicons upload
  5. Custom css

Theme color : There are a variety of color options provided and you select each as you wish.

Theme sidebars :You can select the sidebar for each of your page

Header / logo options : Upload blog pages parallax background image and header logo options

Meta Tags : You can make the widgetize area on or of based on your desire.

Footer : As said that you can edit the footer area including social, copyright

07Woocomerce options

After install woocommerce plugin you need to set woocommerce pages. Woocommerce page settings here : appereance - theme options. If you want to add woocommerce widgets go here : appereance - widgets

08Translate theme

09Theme Design

As it is already explained in the previous section that the part of the theme has been created with the help of shortcode of the Visual Composer plugin. However, you may not be happy with the design of the theme or they may not be designed as you desire. For example, let says that one of the available section was left aligned, which is not someething you want to be aligned center. Or, you want to change the color any specific element within your website. Here, what you need to do is to be able to know the usage of the css elements. Please have a look at the following videos to learn the main logic of the usage of the Css.

Note : On the othere hand, you can also use the Yellow Pencil plugin in order to modify your website as you desire. You can modif your fonts and color o your elements within your website. Please take a look at the following link for the Yellow Pencil plugin.

Click Here to Get the Yellow Pencil.

10Honshi icons

Icomoon

Font Awesome

In Honshi, we have a variety of icons listed under the Font Awesome. You can use all icons after family prefix, example : fa fa-pencil , copy paste pencil name.

NOTE : Please keep in mind that you must use lowercase when writing the icon's name. For ex. fa fa-Twitter( WRONG ),instead fa fa-twitter( CORRECT )

How to Add an Icon Font Family

You can have a closer look at the following link in order to be able to entegrate a font family into your wordpress theme.

Add Font Family

11Theme problems

2- Question : Why footer is looking broken ?

Footer options in the Theme Options panel.

3- Question : There are gaps in the page, why ?

Click me, you have not read this section.

4- Question : How to create popup contact form ?

Popup contact form video here.

5- Question : I did everything like in the documentation but menu is invisible?

Solution: Please go to Admin - pages - frontpage and click update

6- Problem : There is a gray area in footer

Solution: Go to appereance -> Theme Options -> Footer and turn off the widgitize footer section

7- Problem : I can not load the demodata or some images.

Solution:Check your server settings or contact service provider. Some hosts block the demodata.

8- Problem : I can nor edit the frontpage.

Solution: You can not change 'frontpage' or frontpage's name in Honshi. Check your 'reading settings' from admin area.

9- Problem : I did al updates and did fresh installaiton but there are some allignment issues.

Solution:Please install latest version of theme. Check your 'Theme Options'. Update your theme via FTP or Wordpress Toolkit.

10- Problem : There is an empty area in frontpage.

Solution: Please check your Visual Composer settings.

11- problem :I have a horizantal scroll bar under the browser.

solution: If you have a horizantal scroll bar under the browser,you can get rid of this problem by applying these settings.Update your theme via FTP or Wordpress Toolkit.

12- problem :How can change the logo setting.

Solution: Please checkTheme Options > Header Logo Options

13- problem :How can I add a section to the frontend

Solution: You can create a page ( must be selected as frontpage section ) and you can control it via primary menu drag and drop function. You must select a page section type in the metabox area ( bottom of page content editor area ).

14- problem :I cannot edit the content of my pages anymore. Why ?

Solution: Plz make sure that you have the latest version of visual composer.

15- problem :How can I edit my social icons, logo etc ?

Solution: Plz go to Admin > Appearance > Theme Options

16- problem :Even though, I have imported Demo Data, I still can see not my page in frontend just like the demo Honshi on Ninetheme

Solution: Please make sure that you have select Frontpage for your frontpage and select Blog for your post in your static pages. If not, plz go to Admin > Setting >Reading > Select Frontpage and Blog.

17- problem :How can I add contact form into the footer area?

Solution: Please go to Appearance > Widgets. (Here, you should get the shortcode of your contact form on 'Contact' and put it into the widget)

18- problem :How can I change the color of an element or dislay an element?

Solution: All you need to do is just get the name of the related class and coding the color and add to css area in Theme Options

For Example:your-class-name { color:#fffff; display:none; }

19- problem :Why I cannot see my content of the sections at frontend?

Solution: Plz make sure that you've filled all the related field in shortcodes on Admin > Pages

20- problem :I use the 3rd demo but would like to use the second header. How can I do that?

Solution: You can use any header you want. There area five types of header in the shortcodes named Fronpage Header 1, Fronpage Header 2, Fronpage Header 3, Fronpage Header 4 and Fronpage Header 5. You can replace any of this within your theme.

12Additional Information

Extra information that you may find useful.

Font Awesome and other font (icon) issues?

If you have trouble with Font Awesome showing strange characters instead of icons, you are most likely using a CDN or external host in some way for the font files. Certain browsers may have issues with that, as they follow certain web standards. (Also make sure that your font files were uploaded correctly, and empty caches)

This can be fixed with for example this sample .htaccess file from MaxCDN. If you wish to read more about this, it relates to CORS headers.

Useful plugins

Many common problems or missing features can usually be solved with plugins. Here is a list of some great ones.

Recommended theme editing software

Link Resources

Learn more and ask about WordPress' standard features. WordPress is in itself an extremely well-documented open platform. It is recommended to search for answers via Google / DuckDuckGo first if you have questions – it almost always give useful information or at least point you in the right direction.

12.1Troubleshooting 101

Do you have a problem with your theme? This quick troubleshooting guide should be the first thing to check through - it will help you find the root cause of the issue.

A WordPress website issue can come from mainly one of 4 areas:

Lets find out where your issue is coming from!

Step 1: Check your plugins

The first thing to do is to see if you have any plugins installed. Do you? If so, go to your admin panel and disable all of them. Now, go back to your site and see if the issue remains. If the problem is gone, then re-activate your plugins one-by-one and check the site between each activation. This way you will directly find the plugin(s) that cause problems.

If your issue remains even with all plugins disabled, go on to the next step.

Step 2: Check your customizations

Have you customized your theme in any way before you noticed the issue? If so, go to the theme demo website of the theme and see if you find the same issue there. If you can not see the issue there, you need to take a look at your customized code and find what may be wrong.

Step 3: Is the issue admin panel related?

If you have problems with media uploads, errors in the WordPress dashboard or other access issues, the likely cause is either an incorrectly setup server or a broken WordPress install.

To see if your problem is related to a broken WordPress install or an incorrect server setup, simply activate a WordPress default theme such as Twenty Twelve. Does the issue remain? Then your issue is not theme related. If the issue goes away with a default theme active, then it's most likely theme related.

Note: Remember cache!

If you apply/repair code to fix issues but see no changes on your website when you save it, check if your website has any cache plugin activated. If so, make sure to empty all caches. Also force-refresh the page when viewing it by pressing F5.

12.2Theme Update service

Theme Update

Low price service for customers who don't want make mistake while updating theme.$15

Complete Theme Installation

Includes; setup theme, setup demodata and all theme settings.$24

Wordpress Installation

Includes; installing Worpress, creating database.$45

Private Demands

If you would like to add any features that non exist in the theme, you can hire an expert among our team. The prices may change from $15 to $24

12.3Learn-WordPress

As you can already imagine that it's becoming an obligatory to have the cotroll over the modification in your theme. So in this regard, if you would like to be able to understand the way how the wordpress work, you better to have a look at the following link.

You can read description on this plugin. Click Me here to learn WordPress

NOTE : Almost all of our customer keep asking us to make some modification including changing color, which may not be provided in the theme options so for these kind of problem, using the chrome css editor is the greatest way to make any change you wish. Here, all you need to do is just take the name of the element you want to change and paste the code in the custom css area provided in the theme options. You can also take a look at the following video to get the point well.

  • Click Me to Learn How to Use Chrome Css Editor
  • NOTE : In the following video, you'll learn how to add google font into your website

  • Click Me to Learn How to Add Fonts into Your Website
  • NOTE : In the following video, you'll learn how to add Revolution Slider into your website

  • Click Me to Learn How to Add Revolution Slider into Your Website
  • NOTE : In the following video, you'll learn how to add woocommerce plugin into your website

  • Click Me to Learn How to Add woocommerce plugin into Your Website
  • If this is your first-time install or if you use the wordpress.org version of the theme, you can skip this step.

    It is a good idea to keep your theme up to date with the latest version, as it often includes important bugfixes or new neat features. If a new version of the theme is available, do the following steps to update it:

    1. Download the latest version.
    2. Locate the theme-file-name.zip file to upload.
    3. Go to Appearance > Themes in the WordPress menu
    4. Activate a default theme temporarily, such as Twenty Twelve (to be able to delete your current theme)
    5. Click on the theme you wish to update, and press the red delete link bottom right. Your admin panel options should remain saved.
    6. Upload the new theme-file-name.zip, as you did on first-time install, and activate it.
    7. Learn more how to use child themes here.

    You are now running the latest and best version of the theme!

    Important: If you haven't used a child theme for your theme customizations, you must do the following steps before each update:

    • Backup your custom.css file if you have used it, it will be overwritten and needs to be re-added after the update.
    • Backup your additional language files if you have created/modified any, they will be removed and need to be re-added after the update.
    • Backup any other custom code.

    12.4How To Use Plugins

    In our theme, we've used a broad of plugins, which are used commonly and makes you able to customize your website in a simple way and looks nice as well. You can find the plugins that we used within our theme at the following list.

    NOTE : The last three plugins work in the same way. Here, you need to do is first make sure that you make these plugins active and then going to the Team, for example, in the dashboard menu and add items as many as you wish and finally, you can use it in any page you want with the help of shortcodes. The same thing for the both price and portfolio as well.

    13Ninetheme Support Center

    Again, thank you for purchasing Honshi. If you need some help, or support please use email or contact form via themeforest profile site. Hope you happy with the theme, all the best with your business.

    You can ask your question on: Ninetheme Support

    If you want to rate it: Honshi Page