PatioTime WordPress Theme Documentation v1.2

1. WordPress Basics

To install PatioTime theme, first you need a self-hosted WordPress site. Click the link below to go to WordPress download page, there you will find useful information about installing WordPress.

WordPress Download Page

If you are new to WordPress, we recommend reading some articles about basic knowledge of WordPress before you get started. WordPress is a powerful system with a lot of features, knowing some basics about it will help you to manage your site easily.

• How to install WordPress
• General basics you need to know about WordPress
• FAQ New To WordPress
• WordPress Official User Guide & Support
• Google WordPress Basic Tutorials
• WPBeginner - Beginner's Guide for WordPress

2. PatioTime Installation

2.1 Theme Requirements

Theme Requirements

To use PatioTime theme, please make sure your server meets the following requirements:

• WordPress 5.3 or higher
• PHP 5.6 or higher
• mysql 5.2 or higher

Minimum PHP requirements

If you encounter any issue listed below, it is related to low PHP configuration limits:

• Can't upload the theme to your site
• Can't import a demo
• "Are You Sure You Want to Do This" Error
• White screen
• Can't install plugins on the dashboard
• Internal Server Error
• Connection Timed Out
• Maximum execution time exceeded
• Allowed Memory Size Exhausted error
• and other similar issues

The solution is to increase those PHP configuration limits. Please log into your hosting cPanel and change them. Or you can try to contact your hosting provider and ask them to increase those limits to a minimum as follows:

Your Website Configuration

About PHP:

• PHP Version - The minimum PHP version required for PatioTime is 5.6, but we recommend always using the latest stable version of PHP whenever possible. And WordPress recommends using PHP 7+ (please refer to this article: https://wordpress.org/about/requirements/ ).
• For your security - PHP versions lower than 7.0 have reached the official end of their life cycle and may expose your site to security vulnerabilities. We strongly recommend that you no longer use the old PHP version, please always update to the latest version (Supported Versions of PHP).

In most cases you cannot update the PHP version yourself and need to contact your host about this. The upgrade process is an easy process and should be something your host can do for you without impacting your website or charging you a fee.

How to update your PHP version – by WooCommerce

About WordPress:

• WordPress Version - Although the minimum WordPress version requirement for running PatioTime theme is 5.0, we recommend always using the latest version of WordPress. There are many reasons why you should keep your WordPress updated (security, new features, bug fixes, speed, compatibility). You may like to read this article.

2.2 Theme Installation

We assume that you already have a running WordPress site. Now let's install PatioTime theme.

You need to download the theme zip file from ThemeForest first. Go to Downloads on ThemeForest, and find PatioTime. Download the files and find patiotime.zip - that's what you need for installation.

Installing the theme via WordPress admin panel

1. On your website admin panel, go to Appearance > Themes > Add New > Upload Theme.
2. Choose patiotime.zip you just downloaded.
3. Install and activate it.
4. You will see the notice “This theme requires/recommends the following plugins…”, please click on those links and follow instructions to install those plugins.
5. Done.

Installing the theme via FTP

If you can't install the theme via WordPress admin panel, you can try to install it via FTP.

1. Find the file - patiotime.zip, unzip it.
2. Upload the unzipped folder to your FTP > WordPress site root > wp-content > themes.
3. Go back to your site admin panel > Appearance > Themes, activate PatioTime theme.
4. You will see the notice “This theme requires/recommends the following plugins…”, please click on those links and follow instructions to install those plugins.
5. Done.

Please note: If you are going to write custom code for the theme, then please check this section.

2.3 Install Required Plugin

As mentioned above, when installing & activating PatioTime theme, you will see the notice "This theme requires the following plugin: PatioTime Core". It is the PatioTime Theme function extensions - including these features: post like, post sharing, gallery slider, Instagram feed and more.

Please follow the steps below:

1. After Installing PatioTime theme, activate it, then you will see a note box, it says: "This theme requires the following plugin: PatioTime Core." Click on Begin installing plugin link.
2. After clicking on "Begin installing plugin" link, it will go to "Install Required Plugins" page (or you can get to that page via Appreance > Install Plugins), then click on Install link below "PatioTime Core".
3. Then activate "PatioTime Core".

2.4 Recommended Plugins

As mentioned above, when installing & activating PatioTime theme, you will see the notice "This theme recommends the following plugins…". Those plugins are not required to use the theme, but will extend the theme basic functionality. All those plugins are hosted on the official WordPress repository and are made by other authors. You don't need to install and activate all of them, just choose those you will use on your site.

1. After Installing PatioTime theme, activate it, then you will see a note box, it says: "This theme recommends the following plugin: …" Click on "Begin installing plugin" to install it.
2. After clicking on "Begin installing plugin" link, it will go to "Install Required Plugins" page, tick the boxes of the plugins you will need on your site, then choose "Install" from "Bulk Actions" drop down list and click on "Apply" button. (You can install the required plugin and recommended plugins at one time.)
3. Then don't forget to activate those plugins.

The recommended plugins are:

• Elementor - The leading website building platform for WordPress.
• One Click Demo Import - To import theme demo data for a quick start.
• Contact Form 7 - To create a contact form and add it to your page.
• MailChimp for WordPress - To create a subsribe form and can add it to content area, widget areas and site footer.
• Yoast SEO - To optimize your website SEO.
• WooCommerce - To build your own online shop.

2.5 Image Size

To make sure images on your site always look sharp and clear on all devices, the recommended width of images is at least 1920 px when it is supposed to be a full-width image.

Images will be scaled and saved into different sizes after you upload them. If your website already has some images before switching to PatioTime theme, you will need to regenerate these images into the new sizes. Please use this plugin: Regenerate Thumbnails. Otherwise, the theme will use the original images when the proper image sizes cannot be found, which may slow down your website performance.

You can set image sizes via dashboard > Settings > Media.

Recommended media sizes for PatioTime theme:

• Thumbnail size - Max Width: 150, Max Height: 150
• Medium size - Max Width: 300, Max Height: 300
• Large size - Max Width: 1024, Max Height: 1024
• Full size - 1920 x 1280 (3:2)

After you change the media size settings, when you upload new images they will be scaled and saved into the new sizes. But for the existing images, you can use this plugin to regenerate the new sizes: Regenerate Thumbnails.

Optimizing Images

Image quality and quantity are important for a website speed & performance, and also important for user experience. You need to find a balance between them.

Before uploading your images to your website, please optimize your images first (using Photoshop or other image editing tools). Please check this article: How to Optimize Images for Better Web Design & SEO.

• Optimal file size: The number of bytes the file takes up on your computer. This is the factor that can slow your website way down. A 15MB (megabyte) image is huge. Large images or full-screen background images should be no more than 1 MB. Most other small web graphics can be 300 KB or less.
• Image size: The actual dimensions of your image, in pixels. As we mentioned in the Image Size subchapter, the recommended width of images is at least 1920 px when it is supposed to be a full-width image (for example, a fullwidth post slider on the homepage). If the image is not used as a full-width image, you can resize your image to a smaller size.

After uploading your images to your website, you can install this plugin to further optimize them: Smush.

2.6 Theme Basic Settings

After installing and activating the theme, please go to Dashboard > PatioTime, there you will find some basic settings for the theme.

The Required Plugin

In this panel, you will find some basic information about the required plugin "PatioTime Core". And there are 2 options:

• Auto update the plugin when updating the theme
• Auto activate the plugin when activating the theme

When there is a newer version of the theme, after updating the theme itself, you usually need to update the required plugins to ensure maximum compatibility with the theme. However, in rare cases, some users may forget to update the plugin after updating the theme, and then some problems will occur.

In addition, some users may switch themes, they may forget to activate the required plugin after switching back to PatioTime theme, and then they will find that some features no longer work.

In order to avoid the above situations, we recommend checking both options.

Restaurant Information

In this panel, you can add some basic information for your restaurant. These information can be used in many different places on the site.

• Restaurant Address
• Restaurant Telephone Number
• Restaurant Email
• Opening Hours

For example, the restaurant information will be displayed in the default site header's top bar.

Or, if you are using the Header Builder to create a custom site header, you can add the Restaurant Info element/widget.

Opening Hours

At the bottom of the "Restaurant Information" page, you can add your restaurant's Opening Hours.

To display Opening Hours on your website:

• Please go to Appearance > Widgets, and add the custom widget PatioTime Opening Hours to the sidebar:

  

• When you edit a page/post/custom block, please add the Opening Hours element/widget.

  

Docs & Support

In this panel, we provide the link to the online documentation so that users can easily access the documentation, without having to save the URL to the browser.

3. Updating

3.1 Update Theme

Auto Update with Envato Market Plugin

We recommend Envato Market plugin. It can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.

Then go to Envato Market > Settings, click on the link to generate a personal token, and then insert it below, then save changes.

When generating your personal token, please use the same Envato account you used when purchased the theme, and make sure you have checked the following 3 permission options:

1. View and search Envato sites
2. Download your purchased items
3. List purchases you've made

Once the Envato API connection is made from the Settings page, a list of available Themes will be shown. This will list all WordPress Themes that have been purchased through the Envato Market / ThemeForest. The page may look like this:

If there is a newer version for a theme or a plugin, it will show a notice, and you can update the item by clicking on the link Update Available.

Since the plugin checks for updates periodically, if you don't see the update notification, please wait for a while.

You can find more instructions about this plugin on this page: https://envato.com/market-plugin/

3.2 Update Required Plugin

When updating PatioTime theme, if you also see this note:

"The following plugin needs to be updated to its latest version to ensure maximum compatibility with this theme: PatioTime Core."

1. Please click on Begin updating plugin link to update the PatioTime Core plugin. Alternatively, you can go to Appearance > Install Plugins.
2. You can see the status of "PatioTime Core" is "Active, Requires Update". And it also shows the Installed Version of "PatioTime Core" on your site, and you can find there are messages about Minimum required version and Available version. Please click on the Update link below "PatioTime Core".
3. After the plugin updated, please click on the "Return to Required Plugins Installer" link.
4. You may see the plugin's status "Installed But Not Activated". If so, please click on the Activate link to reactivate the required plugin.

3.3 After Updating theme or any plugins

If you have installed any cache plugin to optimize performance, such as the "W3 Total Cache" plugin, then, after updating the theme and the required plugin (or any other third-party plugins), you need to minify CSS again, and then clear the website cache. If you are using "W3 Total Cache", please follow these steps:

1. On your website dashboard, please navigate to the top admin bar > "Performance" > "Purge Modules" > click "Minify".
2. Then please click "Purge All Caches".

3. Click "Purge Modules > Page Cache: All".
4. Click "Purge Modules > Opcode Cache".
5. Then, please also clear the browser cache.

If you are using another cache plugin, you can also find similar features in the cache plugin.

4. Demo Importing

To import the demo content, please make sure you have installed the recommended plugin One Click Demo Import, and please also install and activate all other recommended plugins (you can deactivate the unnecessary plugins later).

After installing PatioTime theme and required/recommended plugins, refresh the page, you will see Import Demo Data under Appearance in the left sidebar. Click it, then you will see the available demos. Choose one demo, click on the Import button.

It can take a couple of minutes, please wait.

Please note: Don't import multiple demos to the same site, it will create duplicate data.

1. On the demo import page, you will see there is a note:

   

   If you want to build the subscription form with the plugin MailChimp for WordPress, click on the link to get to the settings page of the plugin, then enter your MailChimp API key, and create a form. Please read more in this section.
2. If you also need an online shop on your site, please install and activate WooCommerce plugin. You can add your products from scratch or import some dummy data. Please find more information in this section.

If you encounter issues while importing a demo

It happens rarely, but if you have issues while importing a demo, please check the documentation Import Issues written by the author of the plugin One Click Demo Import (which we are using for demo importing feature in the theme).

Error: Internal Server Error (500)

If you see this error message after clicking on import button, this usually indicates a poor server configuration, usually on a cheap shared hosting (low values for PHP settings, missing PHP modules, and so on). Please see this article to know how to fix it.

Alternatively, you can provide us with the following information so that our developer can check that for you:

1. Your website URL.
2. Your website login information. You can use this plugin to create a Temporary Login Without Password.
3. Which demo you'd like to import, so that we can help you import the demo.
4. Your (or a temporary) FTP account, so that we can check the error log on your website.
5. Please open a support ticket at Loft.Ocean Help Center, and send these information to our support team.

5. Theme Options

On your site admin panel, please go to Appearance > Customize, there you can customise and personalise your theme layout and styles.

5.1 Site Identity

You will find the following options in this section:

• Logo – Upload your custom brand image then display it as site logo in the site header.
• Logo Width – To keep your custom brand image look sharp on retina devices, we recommend upload an image with 2x size and give 1x size. For example, upload an image which is 200 x 200 px, and enter 100 px as the image width value.
• Site Title – Enter your site title and it will show in the site header below the logo image.
• Tagline – Input the brief description of your site.
• Display Site Title and Tagline – Uncheck it to hide site title and tagline so only show the logo image.
• Site Icon – Upload a square image to use it as a browser and app icon (the favicon) for your site.

Upload a SVG Logo

If you need to upload a SVG logo, please use this plugin: Safe SVG or SVG Support.

5.2 Site Layout & Site Width

To customize your site layout, please go to WordPress Customizer > General > General Layouts.

You can change the following settings:

• Choose custom background color for the entire site.
• Upload a site background image.
• Content Max Width - Select "Custom" and then you can enter a custom maximum width. The default content max width is 1200px.

Elementor Content Width

You may also need to adjust the width of the Elementor page in order to match the content width set in the theme options.

The default content maximum width of the theme is 1200 pixels, while the default content maximum width of Elementor is 1140 pixels. For best results, always keep these two data consistent.

Therefore, if you change the Content Max Width in the Customizer, please also change the Elementor Content Width to the same value.

How to change the Elementor Content Width: Simply "Edit with Elementor" any page or post, click the hamburger menu icon in the upper left corner of the Elementor Widget Panel, and click on Site Settings > Layout > Content Width.

This is a global setting that will take effect on all Elementor pages on the current site when changed.

5.3 Colors & Styles

You can change general color settings, and also can override color settings for specific elements, like site header, mobile menu, site footer, etc.

General Color Settings

Please go to WordPress Customizer > Colors & Styles > General Colors, there you can:

• Choose a basic color scheme for your site: Light or Dark.
• You can choose an Primary Accent Color. The accent color will be applied to links (hover state), buttons, and other highlighted elements.
• You can set Secondary Accent Color
• You can also modify text/background colors for the 2 color schemes.

Links Colors

Please go to WordPress Customizer > Colors & Styles > Links, there you can set link colors separately for Light & Dark color schemes.

Button Styles & Colors

Please go to WordPress Customizer > Colors & Styles > Buttons, there you can set the Default Button Shape, and Default Button Colors.

These colors and the button shape can be overwritten when editing each specific button with Elementor.

Forms Basic Styles

Please go to WordPress Customizer > Colors & Styles > Forms, there you can set the Global Form Field Style, and change the Field Border Width.

5.4 Site Header

Setting Up the Site Header

Please go to WordPress Customizer > Site Header > Header, there you can:

• Use the Default Site Header - Then you can adjust the following options:
  • Enable Sticky Header effect or not.
  • Enable / Disable the Overlap Header
  • Display / Show the Top Bar - Your restaurant information (Where to add these information?) will be displayed in the Top Bar.
  • Display / Show the Search Icon
  • Display / Show the Mini Cart - WooCommerce is required.
  • If you'd like to change more elements for the site header, please use the Header Builder to create a custom header and select it as the site header.
• Select a Custom Site Header
  • Please create a site header in the Header Builder (more details can be found in this sub-chapter), and then you can select it and set it as the global site header here.
  • Enable Sticky Header effect or not. - If enabled, please select a site header from the dropdown list.

What is set here is the global site header of the entire site. You can choose different site headers for different pages. For related settings, please refer to the Single Page Options section.

5.5 Mobile Menu

Go to Appearance > Customizer > Site Header > Fullscreen/Mobile Menu.

By default, the following elements will be displayed automatically in the mobile menu screen:

1. Primary Menu (How to manage menus)
2. Social Menu (How to create your social menu)
3. Copyright Text (or any custom text)
4. Logo Image - Upload via the Customizer > Site Identity > Logo
5. Restaurant Information (Where to add these information)

To know more details about how to set up menus, please read Menu section in this documentation.

You can also change the following styles of the mobile menu:

1. Background Color
2. Background Image
3. Text Color
4. Entrance Animation
5. Width

Custom Mobile Menu

If you would like to change more content/styles of the mobile menu, please create a new Custom Block (please navigate to Dashboard > Custom Blocks), and then select it to display in the mobile menu. For the detailed instructions, please see this subsection of the documentation.

5.6 Site Footer

Please go to Appearance > Customizer > Site Footer, there are 4 sub sections:

• Before Footer – Enter some content or select a Custom Block to display before the Site Footer Area globally.
• Footer Main – Select a Custom Block as the global Site Footer.
• Instagram – Display a Fullwidth Instagram Feed in site footer. Please set up your Instagram first.
• Footer Bottom – Add your copyright text to the bottom bar of the site footer. And you can change the colors of this area.

How to manage the custom blocks: please navigate to Dashboard > Custom Blocks (for more details please refer to this section).

The above four subsections can be displayed or hidden individually on each page. For related settings, please refer to the Single Page Options section.

5.7 Typography

Please go to Appearance > Customizer > Typography to customize font options for text.

• Heading
• Subheading
• Text
• Blog
• Secondary
• Widget Title
• Menu

How to add Adobe Fonts to your website

1. Assuming you already have a valid Adobe subscription, now you can start by browsing the library of Adobe Fonts. When you find a font you like, click the </> button to add the family to a web project.

   

   You can also click on the font name to open the family page and see all of the font weights and styles that are available to use. Then click </> Add to Web Project at the top of the page to add the family to a web project.

   

2. In the Add fonts to a Web Project window, you'll name your web project and decide which fonts should be included.

   

   You'll be able to make changes to the project settings from the My Adobe Fonts page later, too.
3. Then please click the Edit Project button.

   

   Find the Project ID:

   

4. Please copy the Project ID, and paste it to your website Dashboard > PatioTime Dashboard > Custom Font > Adobe Fonts > Adobe Project (TypeKit) ID, and then click the Sync button.

   

   Then wait until the Sync result message appears.

   

5. Then, you will find the Adobe Fonts you added when customizing Typography in the Customizer.

   

   And you will also find them when editing Typography with Elementor.

   

How to upload custom fonts to your website

Before uploading your custom fonts, it is necessary to prepare .woff and/or .woff2 files of the fonts. If you have a custom font file in another format, such as .ttf, please convert it to .woff and .woff2 using an online conversion tool, for example, you can use this free tool: CloudConvert.

1. On your website dashboard, please navigate to PatioTime Dashboard > Custom Font > Custom Fonts, then enter a font name, select the font weight, and then upload the font files. You can add more fonts, or remove fonts. Please click the Save Changes button.

   

2. Then, you will find the Custom Fonts you added when customizing Typography in the Customizer.

   

   And you will also find them when editing Typography with Elementor.

   

5.8 Instagram

Instagram General Settings

You can add your Instagram feed on your website. Please note: your Instagram account needs to be public to show feed on your site.

Please go to Appearance > Customizer > General > Instagram.

Set up your Instagram

Before June 2020:
For most users, there is no need to add the Instagram Access Token to display the Instagram feed on the website. Only a few users need to add the Instagram Access Token because of a connection problem between their websites and Instagram.

Since June 2020
However, starting in June 2020, Instagram made changes. Because of these changes, from June 2020, it is required to add the Instagram Access Token to connect your website with your Instagram account before you can display the Instagram feed on your website.

Please follow the guide below to connect your website with your Instagram account:

1. Install a third party plugin: "Smash Balloon Social Photo Feed". Please install and activate this plugin Smash Balloon Social Photo Feed (Formerly "Smash Balloon Instagram Feed").
2. Connect your website with your Instagram account. Please go to your WordPress dashboard, find "Instagram Feed" in the sidebar. Then please click on the Add New button (as shown in the screenshot below) to connect your website with your Instagram account. After clicking the button, please follow the instructions displayed to operate. It will guide you connect your Instagram account and create a new feed.

   

3. Done.
4. You can create multiple feeds and display them in different places.

Now you can display your Instagram feed on your website.

• Footer Fullwidth Instagram Feed - Please go to Appearance > Customizer > Site Footer > Instagram, enable the feature and choose a feed from the dropdown list.
• Instagram Feed in the sidebar - Please go to Dashboard > Appearance > Widgets, find PatioTime Instagram widget and add it to the sidebar, then you can select a feed you've created.
• Adding Instagram Feed with Elementor - When you edit a page/post/custom block by using Elementor, please find PatioTime Elements > Instagram widget, add it to the content, and then select a feed you've created.

"Why do I need to install this third-party plugin?"

In order to resolve this Instagram connection issue, you need to add your Instagram Token to your website. Since Instagram API made changes frequently, we use this third party plugin "Smash Balloon Social Photo Feed" to manage Instagram Token. This is a plugin specifically made for Instagram feed, which is stable and frequently updated. Please keep it activated so that it can connect your website with your Instagram account.

Instagram Cache

By default, the Instagram cache will exist for up to 2 hours, which means that if your Instagram has just added some new photos, those photos will not be shown on your website until the cache expires. In some cases, you may like to manually clear the cache. Please open your WordPress Customizer, go to General > Instagram, find the “Clear Instagram Cache” option, and click the “Clear Cache” button.

Enable AJAX

If you use any caching plugin on your site, you may find that sometimes your Instagram photos stop updating, especially if you haven’t updated your site content for a while, such as posting a new article. This is because the Instagram feature uses PHP code to render content by default. When the cache plugin works, the code of the Instagram feature may not run.

To avoid this problem, please open your WordPress Customizer, go to General > Instagram, find the “Load Instagram pictures dynamically with AJAX” option, tick the box to enable this option.

Common Problem with Instagram

Instagram feed cannot be displayed on your website?

5.8 Yoast SEO Breadcrumbs

You can display the Yoast SEO breadcrumbs on your website. Breadcrumbs are a way to help your users better navigate your site and its structure. Additionally, they can appear on Google and provide a better user experience.

Please note: this feature is provided by the third party plugin Yoast SEO. If you have any questions or problems while using this feature, please contact Yoast SEO Support for further help.

1. Please install and activate the third party plugin Yoast SEO.
2. On your website dashboard, please navigate to SEO > Search Appearance > Breadcrumbs, enable the feature.

   

3. After enabling this feature, Yoast SEO will show the Breadcrumbs as JSON-LD in the source code of each page/post. It will display in Google search results for better SEO. However, when visitors browse your website, they won’t see the breadcrumbs (but this will not affect your website SEO).
4. This step is actually optional, and this is the feature provided by our theme. After you enable the Breadcrumbs in Yoast SEO settings, if you also want to display the breadcrumbs on the pages of your website, please open the WordPress customizer and navigate to General > Breadcrumbs to enable Breadcrumbs.

5.10 Ads

Manual Ads

PatioTime provides several places for manually inserting ads.

• Sidebar
  • To add an ad banner (image with link) into the sidebar, please edit the "Widgets", add Image widget.
  • To add ad code (e.g. Google AdSense), please edit the "Widgets", add Custom HTML widget and insert code in this widget.
• Page/Post Content - Add the ad banner image, or copy & paste the ad code.

Google AdSense Auto Ads

If you are using Google AdSense Auto Ads, Google will automatically place ads where they’re likely to perform well. More information about this feature can be found here: About Auto ads

The Possible Issue:
Therefore, we cannot control where the ad is inserted on your website. Sometimes, you may find that the sticky sidebar is incorrectly positioned and may overlap other content. This is due to the fact that when Google AdSense Auto Ads inserts ads to the sidebar, it is not added in the correct position, causing the position of the sticky sidebar to be calculated incorrectly.

The Solution:
Because we cannot control where the ad is inserted on your website, to resolve this issue, the possible solutions are as follows:

• Option #1 - Please turn off "Google Auto ads". And then, you can manually add the AdSense code to your website. Please refer to the previous sub chapter: Manual Ads.
• Option #2 - If you want to use "Google Auto ads", you can disable the "Sticky Sidebar" feature (in the WordPress Customizer > "Sidebar" section).

Important! After making changes, please clear your website cache and browser cache, and reload the page to check again.

6. Elementor Related

6.1 Elementor General Settings

Before editing any page/post/header/custom block with Elementor, please navigate to your website dashboard > Elementor > Settings. And please make sure you have ticked the following checkboxes:

• Post Type - Pages, Custom Blocks, Header Builder. If you'd like to use Elementor to edit single posts, please also tick "Posts".
• Disable Default Colors
• Disable Default Fonts

6.2 Header Builder

Please make sure you have installed and activated the following plugins:

• PatioTime Core
• Elementor

Then, please navigate to Dashboard > Header Builder. Please create a new site header, and edit it with Elementor.

After that, please open the Customizer and navigate to Site Header > Header > Custom Header, and then select the site header you just created from the dropdown list.

Creating a new site header

1. After installing and activating PatioTime Core & Elementor, please navigate to Dashboard > Header Builder. There you can see the list of all the site header created. You can create, delete, duplicate, and edit the site headers. To set one of them to be the global site header, please open the WordPress customizer and navigate to Site Header > Header.

   

2. After the initial installation of the theme, if you did not import the demo, there will be a "Sample Site Header" on this page. It will help you work quickly. You can edit this header directly, or copy one and edit it, or simply create a brand new one.

   

3. When editing a site header with Elementor, in the left sidebar, you will find PatioTime Elements. Here you can find common elements in the site header of a website, such as Site Logo, Navigation Menu, Mini Cart, etc.

   

How to set up a transparent overlap site header

1. When editing a site header, click the Gear icon in the left sidebar, and then you will find PatioTime Site Header Settings, enable overlap header.

   

2. If you want the header to have a transparent background, just don't add a background color to sections and columns.
3. If the site header is to be displayed on a dark background (for example, the hero section below), you may want the text to be white. Select each Column, then navigate to Style Tab > [PatioTime] Color Scheme, set to Dark, the color of the elements in that column will change to white.

   

4. If you site's default color scheme is set to Light, now you probably won't be able to see any elements in the editor. In the upper right corner of the editor you can find Color Mode Simulator, click DARK and the editor background will turn black so you can see what's on the page. The Color Mode Simulator only works in the editor, it will not affect the page in the front-end.

   

How to set up a sticky site header

1. Please open the WordPress Customizer and navigate to Site Header > Header, find Sticky Header option, and choose Always sticky or Sticky when scroll up.
2. And then find Select Sticky Header option and select a header from the dropdown to be the sticky header.

   

3. The sticky site header can be the same as the normal site header, or you can create a separate site header to use as the sticky header, so that the sticky site header can have a different background color or even different content.

6.3 Custom Blocks

Please make sure you have installed and activated the following plugins:

• PatioTime Core
• Elementor

Then, please navigate to Dashboard > Custom Blocks. Please create a new item, and edit it with Elementor.

The Custom Blocks can be used in many different places.

Site Footer

After creating a custom block, please open the Customizer and navigate to Site Footer > Footer Main, and then select the site footer you just created from the dropdown list.

The Section Before Site Footer

You can set another Custom Blocks to show before the site footer section on every page of the site. Please open the Customizer and navigate to Site Footer > Before Footer, and then select a custom block.

Mega Menu

After you create a custom block, if you want to display it as a mega menu of one menu item of your website's Primary Menu (see Menu Locations), please follow the detailed instructions in this section of the documentation.

Custom Mobile Menu

1. Go to Dashboard > Custom Blocks, create a new custom block and name it "Mobile Menu" (or any other name you like).

   

2. Please edit the custom block with Elementor. You can add any elements/widgets inside.

   

3. Then, please open the Customizer > Site Header > Fullscreen/Mobile Menu, then select the "Mobile Menu" custom block you've created. (Click the screenshot below to see the larger one.)

   

4. You can change more options, such as Entrance Animation, Width, etc.

Popup Box

The theme provides 2 types of popup box:

• Automatic popup: You can set whether the page will pop up immediately after opening or after a period of time (for example, after 5 seconds, after 10 seconds, etc.)
• Popup after button click

For these two popup methods, the content in the popup box comes from Custom Blocks.

1. How to enable the Automatic popup:

Please open the Customizer > General > Popup Box, then you can enable the feature and select a Custom Block to display as the popup window's content.

2. How to enable the Popup after button click:

When editing a page/post/site header/custom block with Elementor, please add a PatioTime Button element to the content, and then you will find the Popup Box options. Please enable the feature and select a custom block.

6.4 Elementor Elements/Widgets

PatioTime theme extends Elementor's original functionality to provide more comprehensive tools for restaurant websites. When editing any page or post with Elementor, you will find 31 PatioTime Elements.

1. Button - Can change the button's Style, Shape, Size, Color, and enable the Popup Box.
2. Section Title - Including Subtitle, Title, Text, and a Button.
3. Rounded Image
4. Food Menu - When adding food menu titles, if the title is long, you can add <br> to wrap the text. (New feature added in version 1.2.0.)
   In HTML, the <br> element creates a line break. You can add it wherever you want text to end on the current line and resume on the next.
5. Opening Hours - Automatically obtain and display the "Opening Hours" you filled in on the Dashboard > PatioTime > Restaurant Info page.
6. Restaurant Info - Automatically obtain and display the "Restaurant Info" you filled in on the Dashboard > PatioTime > Restaurant Info page.
7. Social Menu - Display your social menu. How to setup your social menu?
8. Site Logo - Display the default logo image you uploaded via the Customizer > Site Identity, and it will be linked to your site's homepage automatically. You can choose to use another image when editing this element.
9. Testimonials
10. Image Gallery
11. Info Box
12. Block Links
13. OpenTable Form
14. List
15. Instagram
16. Food Card
17. Count Down
18. Call to Action
19. Team Member
20. Divider
21. Vertical Divider
22. Mobile Menu Toggle
23. Navigation Menu
24. Search
25. Tabs - Each tab content can be simple text, or a custom block.
26. Blog
27. Slider - The content of each slide is a selected custom block.
28. Contact Form 7 - The plugin Contact Form 7 is required.
29. MailChimp for WP - The plugin MailChimp for WordPress is required.
30. Mini Cart - The plugin WooCommerce is required.
31. Products - The plugin WooCommerce is required.

6.5 PatioTime Library

To save you time, we have created our own library of pre-made page templates and blocks that can be added to your pages with one click. All of these elements are responsive and can be used anywhere on your website.

When editing a page/post with Elementor, please open the PatioTime Templates library and select the template you need and insert it to your content.

Once templates are added to your page, they may look a little bit different because their styles depend on your website settings such as fonts and colors, page width, current page template, and more.

6.6 PatioTime Extra Features for Elementor

PatioTime provides some extra options when using Elementor.

Section - Stretch Section to Fullwidth

1. Section Content Width - PatioTime Section Fullwidth

When editing a section, please find [PatioTime Layout] > Stretch Section to Full Width, enable it, the section will be stretched to the same width as the screen, while the content inside still has a padding around.

2. Section Content Width - Fullwidth

When a Section's Content Width is set to Fullwidth, the section will be stretched to the same width as the screen. There is no padding around this section's content.

3. Section Content Width - Boxed

When a Section's Content Width is set to Boxed, the section has a padding around.

Section - Background Parallax

When editing a section, please navigate to the Style Tab > [PatioTime Animation], and then you can enable Parallax on Scroll animation.

Y axis translation - Controls the displacement of the background on the y-axis (longitudinal), the larger the value, the greater the background offset.

Column - Color Scheme

When editing a column, you can set its Color Scheme.

1. For example, your site's global color scheme is set to Light, and you want to change one column to Dark Color Scheme. So you change the column's background color to dark, and now you will find that the content (text or/and icons, etc.) cannot be seen clearly because they are also dark. The quick solution is the change the column's color scheme: please find [PatioTime] Color Scheme.

   

2. There are 3 options:
   • Inherit - Inherit your global color mode settings. When changing the global color mode, the color mode of the column will also change.
   • Light - Change to Light Color Mode. It does NOT affect the background setting for the column, but the content in the column will change to dark so that it can be seen on a light background. When changing the global color mode, the color mode of the column does not change.
   • Dark - Change to Dark Color Mode. It does NOT affect the background setting for the column, but the content in the column will change to white (or light grey) so that it can be seen on a dark background. When changing the global color mode, the color mode of the column does not change.

   

3. Please note: If the color of an element in this column is changed, for example, you change the color of an icon to blue, then changing the color scheme of this column will not affect it, the icon color will always be blue.

Column - Switching Column Orders Vertically on mobile view

If you want to simply reverses the ordering of columns in a section on tablet/mobile view, go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.

But if there are multiple columns in this section and you want to be more free to adjust their vertical order on mobile devices, for example, put the second column at the front, followed by the first column, the third column, the fourth column, then, please edit the COLUMN > Style Tab > [PatioTime] Color Order.

7. Menu

7.1 Manage Your Menus

PatioTime theme supports 3 menu locations:

• Primary Menu - supports at most level 3 menu (Parent Menu > Sub Menu > Sub Menu)
• Social Menu - Level 1 Menu (No sub menu)
• Footer Bottom Menu - Level 1 Menu (No sub menu)

To manage site menus, we need to locate the WordPress Menus panel.

1. On your website admin panel, go to Appearance > Menus.
2. You will find there are 2 tabs: Edit Menus & Manage Locations. On the Edit Menus tab, you can create menus and add items into it. On the Manage Locations tab, you can select which menu appears in each location.

And you can also manage menus in the customizer (Appearance > Customize > Menus).

For more details about WordPress Menu, please click the link to read the WordPress Menu User Guide: https://codex.wordpress.org/WordPress_Menu_User_Guide

To open a menu item in a new tab:

When editing a menu item, check the box of "Open link in a new tab".

If you can't find the option, it is most likely hidden by default. Please scroll up to the top of the screen, and click the Screen Options, then make sure the Link Target box is checked.

7.2 Primary Menu

The Primary Menu will be displayed in the default site header & default mobile menu. If you use the Header Builder to create a site header, please add Navigation Menu widget and select an existing menu.

1. On your website dashboard, go to Appearance > Menus > Edit Menus.
2. Create a new menu. Give it a name, for example, "Main Menu". Then click on the "Create Menu" button. And add some items into it.
3. Find "Menu Settings" option > "Theme locations", check the box before "Primary Menu".
4. Click on "Save Menu" button.

The primary menu is at most 3-level-deep (Parent Menu > Sub Menu > Sub Menu).

And you can also manage your primary menu in the customizer (Appearance > Customize > Menus > find the Primary Menu).

7.3 Social Menu

The Social Menu can be used in different places:

• In the sidebar - PatioTime Social widget;
• In the sidebar - PatioTime Profile widget (after checking the "Display Social Icons" option);
• In the mobile menu;
• In the site header - please use the Header Builder;
• In the site footer;
• In the content area - Please use Elementor editor, and select Social Menu widget.

Please follow the instructions below to create your social menu:

1. On your website dashboard, go to Appearance > Menus > Edit Menus.
2. Create a new menu. Give it a name, for example, "Social Menu". Then click on the "Create Menu" button.
3. Find "Custom Links" on the left. Enter the link of your social media site, for example, "https://twitter.com/LoftOcean". And you can also enter some text into "Link Text" field, it's optional, and you can enter any text here. Just need to give a correct URL. Click "Add to Menu" button.
4. Repeat to enter your other social media sites' links.
5. Find "Menu Settings" option > "Theme locations", check the box before "Social Menu".
6. Click on "Save Menu" button.

Please see the screenshot of editing the social menu as reference:

Now your social menu is ready to use.

And you can also manage social menu in the customizer (Appearance > Customize > Menus > find your Social Menu).

Open the social icon link in a new tab when click

1. When create/edit a menu item, tick the box before “Open link in a new tab”.
2. If you can't find the option, it is most likely hidden by default. Please scroll up to the top of the screen, and click the Screen Options, then make sure the Link Target box is checked.
3. Click on “Save menu” button to save the changes. Done.

7.4 Mega Menu

In PatioTime theme, the Primary Menu supports mega menu.

1. When editing your Primary Menu, click the small triangle icon next to a menu item, and you can find the option: Dropdown Displays a Mega Menu. Please enable it.
2. Then you can select a Custom Block from the list, and set the mega menu's width and color scheme.

   

3. For example, we created a Custom Block called "Food Menu Dropdown",

   

   It looked like this:

   

   After we set it as the mega menu of one item inside of the primary menu, it looked like this on the website:

   

8. Archive Pages

8.1 Posts General Options

Please go to Customizer > Blog > Blog General. There you can:

• Change the text showing on the "read more" buttons.
• Choose a Pagination Style for posts archive - there are 4 options:
  • Next/Prev Links
  • With Page Numbers
  • Load More Button
  • Infinite Scroll
• Change the Post Excerpt Length for each posts layout.

8.2 Static Blog Page

In your site admin panel, go to Settings > Reading panel, find the option Front page displays, choose A static page. In the drop down menu for Posts page select a page, for example, "Blog".

The page assigned as the blog page (posts page) is the Static Blog Page.

To customize the layout of the static blog page, please go to Customizer > Blog > Blog Page. There you can:

• Choose the sidebar layout
• Select a Posts Layout
• Choose to show or hide post excerpt
• Choose to show or hide "Read More" button.
• Display selected post meta
• Decide the number of Posts displayed Per Page.

8.3 Category

Edit a category

Go to Posts > Categories, when adding a new category or edit an existing one, you can add a Category Image for this category. This image will be used in the following situations:

• Page header background image of the category archive page.
• Custom Widget: PatioTime Category widget.

8.4 Author Info

The author information will show:

• At the top of Author Archive page
• After single post content (the author's biographical info need to have some content)

Author information includes the author profile picture, biographical info and Social Media Icons.

Where to find the Author Page?

Author pages are Archive pages. They are not static pages that can be found in the "All Pages" list on your website. When you add a new user to the website, WordPress will automatically generate the page for this user (author). It's the same as the "category" or "tag" archive page.

To find an archive page of an author on your website, please go to your WordPress dashboard > "Users" > "All Users", you will find all users on this website. Hover your cursor over the row and then click on "View" link, then the archive page of this author will display.

To add the author archive page to your menu, please copy the page URL in the browser address bar, then add it as a "Custom Link" to your menu.

Edit Author Bio & Social Icons

To edit author biographical info and Social Media Icons, go to your site dashboard > Users > All Users, find the user you are going to edit, click to open the Edit User page, there you can edit the biographical info.

Edit Author Profile Picture

To add or edit the author profile picture, please visit https://en.gravatar.com/ for more information.

Hide Author Info Box on Single Post

To hide the author info box after single post content, please go to Customizer > Blog > Single Post > Post Footer Section > Display Author Info Box, then uncheck the box.

9. Posts

9.1 General Single Post Options

Please go to Customizer > Blog > Single Post, there you can set the default post settings for all single posts.

Options:

• Post Header Section - Default background color and text color. The featured image of a post will be used as the background image of the Post Header Section.
• Default Sidebar Layout - You can change the sidebar layout for each post while editing that post. Please see the next sub-chapter Specific Single Post Options.
• Header Meta - Display the selected post meta in the header of the post, including: Author Name/Categories/Publish Date/Comment Counts.
• Post Footer Section - Display the selected post meta in the footer of the post, including: Tags/Comment Counts/Like Counts/Social Sharing Icons.
  • Footer Meta - Post Tags.
  • Social Media Sharing Buttons - Display or hide the Social Media Sharing Button after post content.
  • Display Author Info Box
  • Display Post Pagination - Links to the Previous & Next Posts.
• Related Posts - Display a group of posts, can be posts of the same category/tag/author.

9.2 Specific Single Post Options

In Gutenberg Editor

The options for a single post: in the Gutenberg editor, click on the "Theme Settings" toggle button. Then click on each setting title to expand the sub panel.

In Classic Editor

When editing a post, scroll down the page and you can find the "PatioTime Single Post Options" panel.

9.3 Post Like & Social Sharing

On each single post, you will find the Post Like button and some Social Sharing buttons displayed after the post content.

Visitors can click these buttons to interact with the post: like it, or share it via social media platforms.

You can choose to show or hide these buttons. Please open your WordPress customizer, then go to General > Social Share Buttons > then find the Social Icons option. Tick the checkbox to show a button.

10. Pages Settings

PatioTime provides some features specifically for Pages.

10.1 Choose Page Template

In Gutenberg Editor

When editing a page, in the Settings sidebar, please find the "Template" panel. There you can change the page template.

In Classic Editor

When editing a page, please find the "Page Attributes" panel. There you can change the page template.

10.2 Single Page Options

When editing a single page, you can find more options for this page.

In Gutenberg Editor

In the Gutenberg editor, click on the "Theme Settings" toggle button.

In Classic Editor

When editing a page, scroll down the page and you can find the "PatioTime Single Page Options" panel.

The list of the options:

• Site Header - You can hide the site header on this page, or select another site header for this page.
• Page Title Section - You can hide the Page Title Section, or change its size, background color, text color.
• Site Footer - You can choose to hide some elements in the site footer only for this page.

10.3 Hide Page Title Section

You can hide the default page title section for a page.

In Gutenberg Editor

In the Gutenberg editor, click on the "Theme Settings" toggle button. Then click on "Page Title Section" to expand the sub panel, and then enable the Hide Page Title Section option.

In Classic Editor

When editing a page, scroll down the page and you can find the "PatioTime Single Page Options" panel. Then please tick the box of "Hide Page Title Section" option.

11. Newsletter Signup Form

11.1 Setup Newsletter Signup Form

PatioTime theme supports creating subscribe form with the plugin MailChimp for WordPress. It is one of our recommended plugins when installing the theme.

After installing and activating the plugin, please follow the steps below to setup the plugin:

• Step 1 - Enter MailChimp API
• Step 2 - Create the Newsletter Signup Form
• Step 3 - Select a list for the subscribers

Step 1 - Enter MailChimp API

Please make sure you have installed and activated the plugin. Then get to the settings page of the plugin, and enter your MailChimp API key.

To get your MailChimp API key, you can click on the link "Get your API key here" to get to MailChimp site, log into your MailChimp account, and create a key.

After entering your MailChimp API key, you will find the "Your Mailchimp Account" option, and your Mailchimp lists will be displayed.

Step 2 - Create the Newsletter Signup Form

Please go to MC4WP (MailChimp for WP) > Form to create and edit your Newsletter Signup Form. If you have imported a demo of the theme, then you have imported this form, and you can edit the form title and content.

You can also choose to copy the code below and paste into the form field, and then change some text to suit your website:

<div class="fields-container">
  <input type="email" name="EMAIL" placeholder="Your Email Address" required="">
  <input type="submit" value="Subscribe">
</div>

<p>
  <label>
    <input name="AGREE_TO_TERMS" type="checkbox" value="1" required=""> I agree to the <a href="#" target="_blank">terms & conditions</a>.
  </label>
</p>

Step 3 - Select a list for the subscribers

When editing a form, please click on the "Settings" tab and find the "Lists this form subscribes to" option, make sure you have selected at least one list.

11.2 Add Newsletter Signup Form in sidebar (widget area)

On your site admin panel, please go to Appearance > Widgets. On the page you can see all of the available widgets are listed at the left side of the page. Find the widget "MailChimp Sign-Up Form", drag and drop it into a widget area, or click on the widget and choose a widget area to put it in.

11.3 Add Newsletter Signup Form to Content

You can add the newsletter signup form to the content of any page.

Please edit a page with Elementor, then please find PatioTime Elements and choose MailChimp for WordPress. Add this widget to the content, and then select a form from the drop down list.

11.4 Mailchimp for WordPress Documentation

12. WooCommerce

12.1 Installation & Setup

Install WooCommerce

First of all, you need to install and activate the free plugin WooCommerce. Please read WooCommerce official documentation to know how to install and use this plugin.

Set up the Shop page

Upon activating the plugin, you are prompted with a Setup Wizard. We strongly advise following these steps, as it takes you through initial setup.

When finishing setup, WooCommerce creates the following 4 new pages:

1. Shop – No content required.
2. Cart – Contains [woocommerce_cart] shortcode and shows the cart contents
3. Checkout – Contains [woocommerce_checkout] shortcode and shows information such as shipping and payment options
4. My Account – Contains [woocommerce_my_account] shortcode and shows each customer information related to their account, orders, etc.

If you want to set the Shop page to another page:
To change the setting of the Shop page (the products index page), on your site dashboard, please go to WooCommerce > Settings > Products tab > Display tab, there you can find the option Shop Page, select what page you want to be the default shop page (you can choose the shop page created by WooCommerce, or create a new page and choose it). Please check WooCommerce official documentation Configuring WooCommerce Settings about this part.

Import WooCommerce Dummy Content

Right after installing WooCommerce you may find you have an empty store. There are no products, orders, reviews, and more by default. You can start to create your own products, or perhaps you’d like to see what sample orders and products look like, then you can choose to import some dummy content. Please check this article Importing WooCommerce Dummy Data to know details.

Setup your product image size

Product Images settings can be found under the Customizer, in WooCommerce > Product Images:

And after changing image sizes, please don't forget to regenerate your thumbnails.

Blurry Product Images?
Please read this article to know how to Fixing Blurry Product Images.

12.2 Shop Customization

After you have set up your online store and created some products, you can tweak the layout of the shop index page and single product page via WordPress customizer. Please go to Customizer > WooCommerce to customize your shop pages.

12.3 Product Addons

If you'd like create some food addons (extra product fields) like in the screenshot below, please install and activate this plugin: Advanced Product Fields (Product Addons) for WooCommerce.

1. Please install and activate the plugin "Advanced Product Fields (Product Addons) for WooCommerce".

   

2. Please go to WooCommerce > Product Fields > Add New. For example, we created a new field group called "Pizza Extra".

   

3. Click Add a Field button, then you can add extra options like "Pizza Size" or "Pizza Toppings". Then you can add a set of rules to determine when this field group should appear.

   

4. When creating a new field, you can set its Type, Label, Options, and etc.

   

Plugin Documentation:

13. Item Customization

13.1 Not included in item support

Please note: according to ThemeForest Support Policy, Item Customization is not included in item support:

Item support does not include services to modify or extend the item beyond the original features, style and functionality described on the item page. For customization services that will help you tailor the item to your specific requirements, we recommend contacting the author to see if they privately offer paid customisation services or checking out the great service providers on Envato Studio.

And as we don't provide any customization service, when you need help with item customization, we recommend hire a developer to do the customization work for you. And you can check Envato Studio – there are many developers providing theme customization service. You can search with keywords “Theme Customization” to find the suitable developers for your project.

13.2 Additional CSS

Sometimes you might like to add some custom CSS to your site to personalize some elements' styles. In the customizer, please locate to Additional CSS sub section and add your custom CSS code. Like the example showing in the screenshot below:

This is a default feature of WordPress since WordPress v4.7. If you can’t find Additional CSS sub section in your customizer, then it means your WordPress version is lower than 4.7, please update your WordPress to the latest version.

And after adding custom CSS code, if you don't see any changes, please clear your site cache and your browser cache, then refresh the pages and check again.

13.3 Child Theme

If you are going to write custom code for the theme, please use Child Theme.

A child theme is a theme that inherits the functionality and styling of the parent theme. Child themes are the recommended way of modifying an existing theme.

Please download the whole package of PatioTime theme (not just the installable WordPress theme zip file), unzip it and you will find WordPress Child Theme > patiotime-child.zip. Install the parent theme first, then install the child theme, and activate the child theme.

Then you can change code or write your own custom styles for the theme in the child theme files. Later when you need to update the theme, just update patiotime.zip (the parent theme), so your custom code changes will not be overwritten (because they are all in the child theme).

You may like to read more regarding the child themes on official WordPress codex page: https://codex.wordpress.org/Child_Themes.

13.4 Copy the customization made in the parent theme to the child theme

Since WordPress treats the parent theme and the child theme as 2 different themes, based on WordPress logic, it cannot automatically inherit customizer settings.

Therefore, if you need to switch to the child theme after using the parent theme for a while and keep all the customizations made in the parent theme, please follow the steps below.

You can use this plugin Customizer Export/Import to export the customizer settings of the parent theme, and then import the data to the child theme (or vice versa).

Here is an example of exporting the parent theme customizer settings and importing them to the child theme customizer:

1. Please make sure you are currently using the PatioTime parent theme. Then install and activate the plugin Customizer Export/Import.
2. Open the customizer, you will find a new section "Export/Import" in the customizer. Click the "Export" button to export the customizer settings of the PatioTime parent theme. You will get a file called "patiotime-export.dat".

   

3. Please close the customizer, and go back to your website dashboard.
4. Now, please switch to (activate) the child theme, then open the customizer, go to "Export/Import" section, and then import the "patiotime-export.dat" file. Done.

   

After switching to the child theme, if you find that menus have disappeared, please reassign the menus to the menu locations.

14. Translation

When working with PatioTime theme, you can translate everything to any language, and you can also make a bilingual/multilingual site.

• If you need to translate your site, and your site only needs to use one language, please continue reading this chapter.
• If you are going to make a bilingual/multilingual site, please check the next chapter.

You can use Loco Translate to translate the theme text.

Table of Contents:

• 14.1 Translating Theme with Loco Translate
• 14.2 Use Loco Translate to change some text (instead of translating)

14.1 Translating Theme with Loco Translate

You can install this third-party plugin on your website and translate the theme text directly from your website dashboard: Loco Translate.

Please read the plugin's documentation for the detailed user guide:

• Loco Translate - Beginner's guide.
• More Guides and Tutorials.

Get started

When using Loco Translate, on your website dashboard, please go to "Loco Translate" > "Themes" > find "PatioTime" (or "PatioTime Child", depending on which theme is activated). Click on "PatioTime" then you will be able to add a new language, or edit the translation of an existing language.

Choose a location for translations

When "Initializing new translations", please find "Choose a location": you will choose where to save your translation file. (More details can be find here.)

• Custom - Recommended. This is Loco's protected folder under "wp-content/languages/loco/" which is safe from automatic updates. If this folder doesn't exist you may need to create it and ensure it has the correct permissions.
• System - Files saved here can be overwritten by WordPress's own language installer. If you have disabled WordPress automatic translation updates, you can select this option.
• Author - Please do not select this option. If you select this option, your translation file will be saved in the theme folder. Every time you update the theme, all the files in the theme folder will be overwritten, which will cause your translation to be lost.

"What if I choose the incorrect save location for the translations?"

You can change the location for translations. On the editor screen of a language, please click the "Relocate" tab, there you can change the location, and then click "Move Files".

Translate the strings of the theme

Once on the editor screen you'll see all the strings included in the .pot file of the theme. The basics of the editor should be fairly intuitive. Select the English string at the top and enter your translation in the pane at the bottom. You just need to enter a translation and save it.

Have questions or problems with Loco Translate?

Please kindly note: Loco Translate is a third-party plugin created and maintained by other authors (not us), when you need help with this plugin, please contact the author of the plugin. This is the support forum for "Loco Translate".

14.2 Use Loco Translate to change some text (instead of translating)

You can use Loco Translate to change some text instead of translating it.

For example, if you'd like to change the text of the load more button from "Load More Posts" to "Load More Recipes" (from one English word to another English word), please follow the steps below:

1. Install and activated the third-party plugin: "Loco Translate". You can read this subchapter of the documentation for the basics about this plugin.
2. You can check and confirm the language used on your website by navigating to "Settings" > "General" > "Site Language". For example, our website is not a multilingual website and the main language is "English (United States)".

   

3. On your website dashboard, please go to "Loco Translate" > "Themes" > find "PatioTime". Click on "PatioTime" then you will be able to add a new language. So we add "English (United States)", and then start translating.

   

4. You can enter a keyword to search. For example, we enter "Load More Posts" and search.
5. Select the source text at the top, and enter your "translation" in the pane at the bottom: "Load More Recipes".

   

6. Save.
7. You can repeat these steps to change other text.

15. Bilingual / Multilingual - Polylang

If you are going to create a bilingual or multilingual website, we recommend using Polylang or WPML.

In this chapter, we will provide simple explanations and points to explain how to make your WordPress site to be a bilingual/multilingual site when you are using PatioTime theme and the third-party plugin Polylang.

If you want to use WPML, please read the next chapter.

Please note: because Polylang is a third-party plugin, so we will only provide links to this plugin’s official documentation. We will not be able to provide details about how to use this plugin, or provide support service for this plugin.

Step 1 – Basic Knowledge

There are several different types of content that need to be translated separately:

• Theme Strings: they are strings written in the theme code. Please continue reading to know more information in Step 2.
• Dynamic content: like posts, pages, categories, and user defined strings. To translate those content, you can use the Polylang plugin. Please continue reading to know more information in Step 3.
• Newsletter Signup Form: Please find the details in Step 4.

Step 2 – Translate Theme Strings

Theme Strings: they are strings written in the theme code (included in the .pot file), for example, "Join the Conversation" (Comments Section Title) on each single post or page. To translate these strings, please follow this guide: Translating the theme.

Please make sure you have translated all the Theme Strings you need.

Step 3 – Translate Dynamic Content with Polylang

1. Setup wizard:
   When activating Polylang for the first time, the setup wizard is automatically launched with all the necessary steps to configure more easily a multilingual website. You should follow each step one by one until you reach the “Ready!” step at the end of the setup wizard. Please read this article for details: https://polylang.pro/doc/setup-wizard/.
2. Translate User Defined Strings
   

   Polylang allows you to translate user defined strings such as the site title, the tagline, or the widget titles. Moreover themes and plugins can allow you to translate their options here.

   To translate User Defined String, you must use the Strings Translations Table of the Polylang plugin.
   Please read this article: https://polylang.pro/doc/strings-translations/

   There are 2 types of User Defined String:

   • Strings entered with WordPress core features: such as the site title, the tagline, or the widget titles.
   • Strings entered with theme and plugins. Please see more details below:
   Theme Options Strings: They are strings entered in the theme options (customizer). When customizing your site with PatioTime theme, you will be able to enter many custom text in the customizer. To translate any custom text you entered in the customizer you need to use Strings Translations table of the Polylang plugin.
   
   To locate Strings Translations Table: on your site admin panel > Languages > Strings Translations.
   
   For example, you can change the text of "Read More" buttons to "Continue Reading", or you can change the related posts section's title "Other Posts You May Enjoy" to any other text like "Read more articles in this category". After you have entered/modified custom text in the customizer, you can find these text shown in the Strings Translations Table.
3. Create Menus
   You have to create one menu per language and save them. Please read this article: https://polylang.pro/doc/create-menus/.
4. About Widgets

   For all widgets you have now the possibility to choose to display it for all languages (default) or only one language. If you select "All languages" you will have the possibility to translate the title in the Strings translation option.

   Please read this article: https://polylang.pro/doc/widgets/.
   
   Please note: for custom widget PatioTime Category, you have to create one widget per language, because you have to choose different categories for each language.
5. Translating pages, posts, categories and tags
   Please read this article: https://polylang.pro/doc/translating-pages-posts-categories-and-tags/.
6. Translating Custom Post Types: Including Site Headers and Custom Blocks.
   Please navigate to Languages > Settings, find Custom post types and Taxonomies and click Settings.

   

   And then please make sure that you have ticked the checkboxes for Custom Blocks and Header Builder.

   

   After that, you can translate the Custom Blocks and Site Headers just like translating pages or posts.

Step 4 – Translate Newsletter Signup Form

On your website dashboard, please go to PatioTime Dashboard > Integrations, you will find the MC4WP Multilingual Manager for Polylang. This option will show when Polylang and MC4WP are installed and activated.

• If you are using the premium version of the "MailChimp for WordPress" plugin, you can create multiple forms. Therefore, please create different forms for each language, and then select a different form for each language on this page.

  

• If you are using the free version of the "MailChimp for WordPress" plugin, you can only create one form. Then, please click the Translate the Form link to translate this form into another language.

  

  You will be redirected to the form edit page. You just need to edit the form title, content and messages into the target language. And save the changes.

  

19. Bilingual / Multilingual - WPML

In this chapter, we will provide some explanations and points to explain how to make your WordPress site to be a bilingual/multilingual site when you are using PatioTime theme and the third-party plugin WPML.

19.1 What you will need

• PatioTime theme
• A recent version of WPML, including the WPML Multilingual CMS, WPML String Translation and WPML Media add-ons.

19.2 Essential Resources

• WPML's Getting Started Guide will help you in setting up WPML in a few minutes. You will want to refer later to some of its subtopics, such as Language Setup, String Translation, Translating Custom Post Types and etc. We recommend that you keep this guide open while following this tutorial.
• PatioTime's documentation will provide you with all the information needed to set it up.

19.3 How to Translate

Table of Contents:

• Step 1 – Getting started
• Step 2 - Translating pages and posts
• Step 3 - Translating post categories and tags
• Step 4 - Translating custom post types
• Step 5 - Translating texts coming from the theme & WordPress Core
• Step 6 - Translating Newsletter Signup Form
• Step 7 - Translating Menus
• Step 8 - Translating widgets
• Step 9 - Language Switcher
• Step 10 - Translating WooCommerce Elements

Step 1 – Getting started and WPML's Set-up Wizard

1. Install and activate PatioTime theme, the required plugin and recommended plugins (please refer to PatioTime Installation).
2. Install and activate the main WPML components (Please see WPML Getting Started Guide for complete reference):
   • WPML Multilingual CMS (the core plugin)
   • String Translation
   • Media Translation
3. Set up WPML. When you first activate WPML a Setup Wizard will help you specify the essential settings required to prepare your site for multilingual content. Follow the wizard you can:
   • Choose your site’s languages
   • Choose your URL format
   • Register WPML
   • Choose your translation mode (see the next section for more details)

After setting up your site, you can also customize your site’s language switcher, which is added to the footer by default.

Translation Mode Options (See details)

You have two options for translating your site: Translate Everything or Translate Some. The WPML setup wizard will try to choose the best option for you depending on how much content is on your site.

• Translate Everything
  All of the site’s main content will be automatically translated into all secondary languages as content is published or updated. Translations can then be reviewed on the front-end and edited by the user (or local translator) if needed.
• Translate Some
  Users can pick and choose what to translate, when to translate it, and who will translate it. This mode allows for content to be translated manually, translated via WPML's Advanced Translation Editor, translated by professional translation services, or even translated by a team of local translators.

Step 2 - Translating pages and posts

When you have created some pages and posts on your website, you can translate them into other languages.

For example, if you are going to translate a page. On your website dashboard > "Pages" > in the "All Pages" list, you will see these icons (translation controls) in the "Language" column. Or, you will find the "Language" box when editing the page.

Click on the "+" button of the language you are about to translate the content to. For example, "German". This creates a new German translation for it. Then enter the content written in German. And publish the page.

If you need to updating the translation of a page or post, please go to "Pages" or "Posts". For the translated pages or posts, the "+" icon will change to a pencil icon. Click on the pencil icon if you need to modify your translation.

Step 3 - Translating post categories and tags

Translating Post Categories:

1. Navigating to Posts > Categories, as an example we will create a category and name it "Vegan", also upload a category image for it, and click on the Add New Category button. (Please refer to Edit a category.)
2. When editing this category, find the Language box, and click on the "add" link to add the translation of the category.

   

3. Fill the Name and Slug fields with the category translation, and also choose the same category image for it, and then click on the Add New Category button.

Translating post tags

Translating post tags is just as same as translating categories. The only difference is you only need to enter tag Name and Slug.

Taxonomy Translation

You can also translate post categories and tags via WPML Taxonomy Translation.

1. Navigating to WPML > Taxonomy Translation. Select Tags (or Categories) from the Select the taxonomy to translate drop-down menu. Then click on the "+" icon or the pencil icon to translate a tag (or a category).

   

2. The Term Translation box will pop up. Enter the translation and click on "Save" button.

   

Step 4 - Translating custom post types

To translate Custom Post Types: Custom Blocks & Site Headers, please follow the steps below:

1. Navigating to WPML > Settings > Post Types Translation, find Custom Blocks & Header Builder, make sure they are Translatable.

   

2. Then you can navigate to Header Builder > All Site Headers, click on the "+" button of the language you are about to translate the site header to. For the translated pages or posts, the "+" icon will change to a pencil icon. Click on the pencil icon if you need to modify your translation.

   

Step 5 - Translating texts coming from the theme & WordPress Core

WPML String Translation allows users to translate texts that are not in posts, pages, and taxonomies. This includes the site’s tagline, general texts in admin screens, widget titles, and many other texts. Therefore, the following texts need to be translated on the String Translation screen. (Read more about WPML String Translation.)

• Theme Strings - They are strings written in the theme code (included in the .pot file), for example, "Join the Conversation" (Comments Section Title) on each single post or page.
• Theme Options Strings - They are strings entered in the theme options (customizer). When customizing your site with PatioTime theme, you will be able to enter many custom text in the customizer. To translate any custom text you entered in the customizer you need to use String Translation screen of WPML.
• Theme Dashboard Strings - The Restaurant Info & Opening Hours added via Patio.Time Dashboard.
• Strings entered with WordPress core features - Such as the site title, the tagline, widgets.

By default, WPML doesn’t scan or load these translation files into the database. Because of this, you will not be able to find these strings on the WPML → String Translation page. If you want to translate or edit these strings, you first need to scan the translation files of the related theme or a plugin.

1 - Scanning the theme

To translate texts coming from the theme and plugins, you need to scan them first. Go to the WPML → Theme and plugins localization page and find Strings in the themes box. Select "PatioTime" and click the Scan selected themes for strings button.

2 - Translating the texts

Please navigate to WPML > String translation page. Then you can:

• Select "PatioTime" in the Select string within domain dropdown list.
• If you have imported a demo, or you have changed any settings in the customizer, please select "admin_texts_theme_mods_patiotime" in the Select string within domain dropdown list to find the text added in the customizer.
• Or, you can enter some keywords copied from the texts you want to translate into the Search for: field and search.

For example, let's translate the "Load More Posts" button. The original text is entered in the customizer.

1. Navigate to WPML > String translation. Enter "load more" and search. You will see the search result as shown below, click on the "+" button (or the pencil icon button) of the language you are about to translate (or modify the translation).

   

2. Add your translated text. You can save your translation by hitting the Enter or Tab keys on your keyboard or simply clicking out of the window. The Tab key allows you to switch between languages without having to click.

   

Step 6 - Translating Newsletter Signup Form

1. Installing an Add-on

Please download and install this add-on: MailChimp for WordPress Multilingual. Please go to WPML and log into your account, then please go to "Download" page to download the MailChimp for WordPress Multilingual add-on. And then upload it to your website, install and activate it just as you would any other WordPress plugin.

2. Translating the form

Please read the WPML's Offical Documentation: MailChimp for WordPress Multilingual.

Step 7 - Translating Menus

WPML lets you translate WordPress menus and create different menus per language. You can translate menus manually, or have WPML synchronize menu content. Please check Translating Menus for more details.

Step 8 - Translating widgets

WPML lets you easily translate your Widgets via the String Translation screen. This requires that the WPML String Translation module is installed. The module is available in the Multilingual CMS version.

Besides translating widgets, WPML allows you to display different widgets for different languages.

Step 9 - Language Switcher

A language switcher allows visitors to select the language in which they want to read your content. WPML lets you add a language switcher in different ways: in a menu, as a widget, or in the site’s footer. You can also use it to show links above or below your posts, offering them in other languages.

To add and customize language switchers, go to WPML → Languages in the WordPress dashboard, then you will find the following settings on this page:

• Language switcher options
• Menu language switcher
• Widget language switcher
• Footer language switcher
• Links to translation of posts
• Custom language switchers

Each language switcher type has its own settings. This allows you full and independent control over what it includes and how it looks. When clicking on the "Pencil" icon, it will show a dialog box with settings for the menu language switcher.

Step 10 - Translating WooCommerce Elements

If you run an online store with WooCommerce on your website, you can also translate your store into multiple languages. WPML comes with the WooCommerce Multilingual addon which allows you to fully translate your online store, and run WooCommerce stores with several languages and currencies.

For the detailed instructions, please read Multilingual and Multi-Currency WooCommerce Sites Made Easy.

16.4 Need Help for WPML

If you need help with using WPML with PatioTime theme, please head over to WPML technical forum. Before posting about issues, we recommend that you review this quick checklist:

• Make sure you have the latest versions of the theme and of the WPML plugins, and that they are all activated. These include WPML Multilingual CMS, WPML String Translation and WPML Translation Management.
• Check that the problem does not appear if the WPML plugins are deactivated, and it does appear when only the core WPML plugins are activated.

17. FAQs

18. Need Our Support?

What is Item Support Service?

When you purchasing products from Envato Market, a supported item includes item support for 6 months from the purchase date. During those 6 months, we (as the author of the theme) are available to provide the item support services.

You may like to read more details about What is Item Support?.

What's included & What's not included in Item Support?

We can help with:

• Answering questions about how to use the theme
• Answering technical questions about the theme (and included third party assets)
• Help with defects in the theme or included third party assets
• Theme updates to ensure ongoing compatibility and to resolve security vulnerabilities

We cannot help with:

• Item customization
• Installation of the item
• Issues about your web hosting, server environment, or software installed on your machine
• Questions related to third party assets
• Questions related to the basic use of WordPress (We have collected some WordPress Beginner Tutorials, hope this helps.)

Please check ThemeForest Item Support Policy for more details.

What you should do first before asking your question?

To speed along the support request, please check by following the guide below:

1. Make sure your site is running the latest version of WordPress.
2. Make sure that the PatioTime theme and the required plugin "PatioTime Core" have been updated to the latest version. Some known issues may have been fixed in an update.
3. Update to the latest version of other plugins on your website.
4. Check our Online Documentation first.
5. Disable any other plugins and then check if it fix the issue.
6. If you still cannot find a solution, please open a support ticket at Loft.Ocean Help Center.

Submitting a support request

When submitting your support request, please include the following information in as much detail as possible so that we can get more clues about your questions/problems:

• Your website URL
• Which version of the theme you are using
• Detailed description of the issue or the question
• Screenshots of the problem
• Any notices or error messages
• Any other information that you find useful
• Since we have multiple products, please indicate which product your question corresponds to

And please write in English. Thanks!

How long does it take for LoftOcean support to reply to your support request?

• We provide support for our customers Monday to Friday: 10 AM to 6 PM (UTC+10).
• Support requests will be processed in the order received. Usually we reply to all requests within 24 hours.
• If it is a weekend, our response time may take 48 hours or more: if you submit a support request on Friday night in our time zone, we won’t be able to see it and start working on it until the next Monday’s business hours.

We will carefully handle every user's support request. When you encounter a problem, please send us the detailed information of the problem. If we do not respond to you immediately, please don't worry, maybe it is just during our non-working hours (night or weekend), or it is because there are other users' requests in the request queue ahead of your requests.

The requests in the queue will be processed one by one. Therefore, when you submit a support request, please be sure to provide as much information as possible so that when we start to process your request, we can have enough information and provide accurate answers instead of asking for other necessary information (this will cause it to take longer to solve the problem for you).

Need to renew your support?

If you have less than 6 months remaining on a support item you’re eligible to renew your support. For more information about Item Support renewals, please see Extending and Renewing Item Support.