Tokyo - Personal Portfolio WordPress Theme

Introduction

First of all, Thank you so much for purchasing this template and for being our loyal customer. You are awesome!

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly.

WordPress General

A working version of WordPress.org must be installed before you can install the Tokyo. If you need help installing WordPress, follow the WordPress Codex

Before using any theme, it is important to understand how native WordPress functions work, and how to establish ownership of your new site.

WordPress links you will find useful:

Theme Install

To use Tokyo WordPress Theme, you must be running WordPress 5.0 or higher, PHP 5.6 or higher, Elementor Page Builder 2.0.3 or higher and mysql 5 or higher version. Below is a checklist of items your host needs to comply with to ensure proper.

Tokyo operation:

  • Ensure your web host has the minimum requirements to run WordPress.

  • Make sure the latest version of WordPress is up and running.

  • If necessary, you can download the latest release of WordPress from the official WordPress website.

There are two methods to install the theme. If the normal installation method (a) is not supported by your web host, you will have to use the alternate option (b).

a) Normal Installation

  1. Login to WordPress Admin and browse to Appearance → Themes.

  2. Click on the Add New Theme (or "Install Themes" tab for older versions) and click Upload.

  3. Browse your computer to select "tokyo.zip" (it's in the zip file you downloaded from ThemeForest). Click "Install Now" button.

  4. Login to WordPress Admin and browse to Appearance → Themes.

b) FTP Installation (alternate method)

  1. Use your FTP software to browse to wp-content/themes folder.

  2. Upload the tokyo folder.

  3. Once it's uploaded, go to your WordPress Admin, browse to Appearance → Themes.

  4. Click the Activate link.

Important: After activation, you will be presented with tokyo-core plugin that you should activate. Do not forget to activate it or not all of the theme features will be available.

Note: If you are migration from a theme which used the native featured images functionality of WordPress. Please use the Regenerate Thumbnails plugin to resize all the thumbnails. Click the link above and download the free plugin, and read through the steps it contains, it has all the information you need. Run it from Tools → Regen. Thumbnails.

Demo Content Import

PHP Configuration Limits

  • memory_limit - 96M

  • max_input_vars - 3000

  • max_execution_time - 600

  • post_max_size - 32M

  • upload_max_filesize - 32M

  • allow_url_fopen - ON

Verify your PHP limits

You can check them by installing the WordPress phpinfo() plugin and checking Settings. The first column refers to your installation value, and the second column refers to the limits of your host. The latter values are often lower if you have selected a cheaper hosting package.

You can always contact your host to ask what the current settings are, and have them adjusted if necessary. Some hosts will try to keep PHP limits low to conserve resources. Since are paying for those resources, you should rightfully expect to be getting your money’s worth.

One Click Demo Importer

Important: Please do not import content on a WordPress installation that already has a lot of content. Or the very least, make a backup first. A catastrophic mess can be created.

In some cases you would like to remove demo content. You can remove all posts, pages, etc using WordPress Reset plugin. Be aware that this plugin resets the WordPress database back to it's defaults. Deletes all customizations and content. It does not modify files only resets the database.

Adding Portfolio Posts

  1. Portfolio Posts → Add New

  2. Insert Title

  3. Portfolio Options (here you can enter some information about your portfolio post, for example vimeo URL and etc.). Please fill only one field from these options. Let's see options step by step.

    • Post Images - You can upload your images here. This will mean that your portfolio type will be a gallery.

    • Vimeo URL - Enter vimeo URL here. For example: https://vimeo.com/312334044

    • Youtube URL - Enter youtube URL here. For example: https://www.youtube.com/watch?v=Amq-qlqbjYA

    • SoundCloud URL - Enter SoundCloud URL here. For example: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/252739311&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=truehttps://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/252739311&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true

  4. Attach your post to any category (Add some categories first, if you don't have any)

  5. Set Featured Image (Required) - This is used as Coverage of Post everywhere in the theme. (Suggested Minimal Image Size: 2000x2000)

  6. Publish:

    • Visibility (optional) - Change that option to Password protected if you want to hide your post from public

    • Click the "Publish" button

How to edit portfolio post with Elementor

Portfolio Page Setup

Before setup portfolio page, we suggest you to add some portfolio posts.

  1. Pages > Add New
  2. Insert Title
  3. Insert Page subtitle from Page Options
  4. (Required) Choose "Portfolio Page" from Template, inside "Page Attributes" box.
  5. Page Options - Change these options as you wish
  6. Add Featured Image (optional)
  7. Click the "Publish" button

#1 Screenshot

#2 Screenshot

OR see this video tutorial

Setup Homepage

Creating home page is a simple process. Homepage is made with the help of our "FREL ELEMENTS" and "Elementor Page Builder" elements. Add any element to the page as you wish.

  1. Pages -> Add New
  2. Insert Title
  3. Switch to Elementor Page Builder
  4. Drag and Drop any Elements from FREL ELEMENTS or Elementor Elements
  5. Page Options - make changes as you wish
  6. Click the "Publish" button

After you create homepage:

  1. Settings -> Reading -> Front page displays
  2. Choose a "Static Page"
  3. Set newly created "Home" page.
  4. Click "Save Changes" button

Blog Page and Adding Posts

Set Blog Page

  1. Pages > Add New
  2. Insert Title
  3. (Required) Choose "Blog Page" from Template inside "Page Attributes" box.
  4. Page Options - Change these options as you wish
  5. Advanced Options - Change these options as you wish
  6. Add Featured Image (optional)
  7. Click the "Publish" button

How to add a blog page

Adding Posts

Adding a new post is the same way as default WordPress installations, however, there are extra options that might need explaining.

Featured Image

While the theme can function without featured images, it's highly recommended that you add a featured image to each post. This not only makes your site/blog more lively but also improves user experience.

To set the featured image, use the WordPress normal method.

Recommended Image Size (for Blog Posts)

Image size (dimensions) will depend on what type of layout you're using throughout your WordPress installation or per individual post basis. This image will not only be used on the post, but also on the category listing pages.

Compatible with all layouts and default slider: 2000x2000 (width x height)

Supported Post Formats

Video Format

Setup your post normally and set a featured image. Copy the embed code of the video from YouTube, Vimeo or any other site that gives you video embed codes. Paste the code in the "Add Video" box.

Note: Videos will be resized to fit the container so you can choose a larger embed format if the video site allows you to specify size/dimensions.

Gallery Format

  1. Click "Add Image" button
  2. Choose Images
  3. Click "Select" button

Audio Format

Audio post format supports only soundcloud audio. Insert audio url to input.

Image Format

Image format works very similar to a standard post. Just set a featured image and you're done.

Author Avatar

The theme uses Gravatar to display users avatars . to craete or change your Gravatar :

If you have never setup a Gravatar account:
  1. Register / login to Gravatar. Upon registering, use the same email address that is associated with your WordPress User Profile.
  2. Upload your photo and associate it with that specific email address.
If you already registered at gravatar.com, follow these steps:
  1. Click on "My Gravatars" .
  2. click on "Add a New Email" .
  3. Then, you'll need to click on "Add a New Image" .
  4. Upload an image .
  5. Then select the email address, and then select your image from bottom. Now it's associated with that email address. Click Save .
  6. It will take about 5-10 minutes to propagate on the internet, and then will appear on site.

Setup Menu

If you have imported demo content follow (a). Otherwise, follow (b) to create a new menu.

(a) Existing Menu
  1. Go to to Appearance > Menus.
  2. In the "Manage Locations" area, under Main Navigation, select Main Menu. Click Save.
(b) Creating a New Menu
  1. Go to to Appearance > Menus.
  2. Click on the + button or the create a new menu link. Enter a menu name and click Create Menu.
  3. Using the Custom Links and Pages boxes at the left, add items to the menu and drag/drop to arrange them.
  4. (optional) If you would like to use this menu in navigation, in the "Manage Locations" area, under Main Navigation, select your newly created menu. Click Save.
  5. Click Save Menu and that is all.

Mobile Menu either setup in above way. You just need to choose proper location. There are two locations "Main Menu" and "Mobile Menu". That's it.

Widgets

You can use any shortcodes in widgets. Just use text widget and put shortcode into it. Besides theme custom widget which may helpful for you. Listed below:

  1. Marketify Business Hours
  2. Marketify Estimate
  3. Marketify Brochure
  4. Marketify About
  5. Marketify Social
  6. Marketify News
  7. Marketify Custom Categories

Translation & Internalization

Theme comes with .po file included under the languages folder. To translate:

  1. Download and install Poedit.
  2. Open tokyo.po file located here \wp-content\themes\tokyo\languages\ using poedit tool and translate the existing text to your own
  3. Save the file with the locale (for example: ru_RU.po). If you have already setup WordPress in your language, you can get it from your wp-config.php file under, for example: define('WPLANG', 'ru_RU');. In this case, you would save your file as ru_RU.po.
  4. Step above should have generated a .po and a .mo file. Copy both these files and put them into the languages folder of the theme.

Your Language & Localization

After translating, you may wish to use the correct locale to translate and localize your WordPress installation completely. Refer to Installing WordPress In Your Language at WordPress Codex to learn how to.

Theme Options Structures

Theme Options will help you to manage all functionalities of the theme. Here you can see that each tab has own options to change something.

Let's discover them in details.

I. General

1. Dark Mode Switcher

You can enable and disable dark mode with this switcher

2. Page Title for Blog

It is a page subtitle for blog page, when as homepage was chosed "Your latest posts"

3. Blog URL

This URL will be used for all Prev & Next Box

4. Magic Cursor

  • Default - if enabled, default cursor icon will be change with magic cursor on whole website
  • Link - if enabled, default cursor icon will be change with magic cursor on hover links or buttons
  • Slider - if enabled, default cursor icon will be change with magic cursor when cursor inside of any sliders

Also you can change magic cursor's color here with your choice.

II. Page Preloader

In this section you can enable or disable preloader. And can change its background and line colors.

III. Main Colors

In this section you can enable change theme's heading, body, button background and hover colors.

IV. Logo

In this section you can upload your logo for desktop, retina and mobile devices.

V. Desktop Navigation

In this section you can change skins of Navigation and can change copyright details

VI. Mobile Navigation

In this section you can manage appearance of mobile navigation. "Autocollapse menu on click", enabling this option means that after clicking on mobile menu item, mobile menu will closed. "Menu open default", enabling this option means that mobile menu will opened by default (without clicking on trigger). Also here you can edit mobile menu colors, such as: background, menu items color and etc.

VII. Typography

You can change theme's necessary fonts

VIII. Portfolio

In this section you can manage with portfolio options.

IX. Share Options

In this section you can manage with share options.

X. Custom CSS

In this section you can enter your custom CSS code.

XI. SEO

In this section you can manage with some SEO HTML tags.

XII. Options Object

In this section you can get object of all theme options you entered in Javacscript Console (DevTools)

XIII. Import / Export

In this section you can import from xml file or from URL, and export theme options.

FAQ

#1. I have a problem with demo importer because of using not SSL certification on my website. How can I upload a demo content in this case?

SSL Certification is need to import a demo content with one click demo importer functionality in order to avoid transferring data. Please, enable SSL Certificate on your host. To enable SSL Certificate on your host just contact your host provider.

SSL Certificate is important for your clients. Why you need an SSL certificate?

Websites need SSL certificates to keep user data secure, verify ownership of the website, prevent attackers from creating a fake version of the site, and convey trust to users.

If a website is asking users to sign in, enter personal details such as their credit card numbers, or view confidential information such as health benefits or financial information, then it is essential to keep the data confidential. SSL certificates help keep online interactions private and assure users that the website is authentic and safe to share private information with.

More relevant to businesses is the fact that an SSL certificate is required for an HTTPS web address. HTTPS is the secure form of HTTP, which means that HTTPS websites have their traffic encrypted by SSL. Most browsers tag HTTP sites – those without SSL certificates – as "not secure." This sends a clear signal to users that the site may not be trustworthy – incentivizing businesses who have not done so to migrate to HTTPS.

An SSL certificate helps to secure information such as:

  • The domain name that the certificate was issued for

  • Which person, organization, or device it was issued to

  • Which Certificate Authority issued it

  • The Certificate Authority's digital signature

  • Associated subdomains

  • Issue date of the certificate

  • The expiry date of the certificate

  • The public key (the private key is not revealed)

If you don't want to enable SSL Certificate and upload a demo content without it, see next video tutorial about how to do it.

#2. I got the issue during installing your theme. How can I fix this issue?

If you got any issues during installation of our theme, disable all your third party plugins in plugins page and try again.

#3. How to update the theme?

  • Backup and Remove the old version of the theme from your dashboard.

  • Download new version of the theme from https://themeforest.net/downloads and upload it to your dashboard. Make sure that you are using latest version.

  • Remove “Tokyo Core” plugin. Then, it appears as required plugin at the top of your dashboard. Re-install it.

#4. I created pages but I’ve got 404 pages everywhere.

Go “Settings - Permalinks”, choose “Post Name” from Common Settings and push “Save Changes” button.

#5. I can't edit widgets after importing a demo content because of some issues.

Please install classic widgets plugin to fix this issue: https://wordpress.org/plugins/classic-widgets

#6. I can't edit Portfolio Posts via Elementor

Go to Elementor ● Settings and enable Portfolio Posts