To install Berry 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.
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.
To use Berry theme, please make sure your server meets the following requirements:
WordPress 5.0 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
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:
max_execution_time
30
max_input_time
60
memory_limit
256M
post_max_size
64M
upload_max_filesize
64M
1.3 Theme Installation
We assume that you already have a running WordPress site. Now let's install Berry.
You need to download the theme zip file from ThemeForest first. Go to Downloads on ThemeForest, and find Berry. Download the files and find berry.zip - that's what you need for installation.
If you download the whole package, please unzip it, in the "WordPress Theme" folder, find berry.zip.
Or, you can download the Installable WordPress File Only - which is berry.zip.
Please do not upload the zip file of the entire package (which contains "All files and documentation") for installation.
Or you will see "The package could not be installed. The theme is missing the style.css stylesheet" error message. If you see
this error message, please unzip the file you tried to upload and then find "berry.zip" file in it.
On your website dashboard, go to Appearance > Themes > Add New > Upload Theme.
Choose berry.zip you just downloaded.
Install and activate it.
You will see the notice “This theme requires/recommends the following plugins…”, please click on those links and follow instructions to install those plugins.
Done.
Please note: If you are going to write custom code for the theme, then please also upload the berry-child.zip file (you will
find it in the folder "WordPress Child Theme" in your download package), then install 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 berry.zip (the parent theme), so your custom code changes
will not be overwritten (because they are all in the child theme).
1.4 Install Required Plugin
As mentioned above, when installing & activating Berry theme, you will see the notice "This theme requires the
following plugin: Berry Extension". It is the Berry Theme function extensions - including these features: post like, post sharing,
gallery slider, Instagram feed and more.
Why do you need to install the required plugin?
Because of WordPress code standards and ThemeForest requirements: "Themes execute
the presentation and styling of content, while plugins handle content creation and functionality." Therefore, some features must be
included in the required plugin but not included in the theme itself.
After Installing Berry theme, activate it, then you will see a note box, it says: "This theme requires the following plugin:
Berry Extension." Click on "Begin installing plugin" to install it.
Begin installing plugin
After clicking on "Begin installing plugin" link, it will go to "Install Required Plugins" page,
then click on "Install" link below "Berry Extension".
Install Required Plugins
Then don't forget to activate "Berry Extension".
Activate Required Plugins
Please note: Before version 1.3, the required plugin "Berry Extension" was activated automatically after installation.
But since version 1.3, we cancelled the auto-activation because of the latest Envato WordPress theme requirements.
Therefore, after installing/updating the plugin, please always make sure the plugin is activated.
If you need to find "Berry Extension" zip file, please:
You can download the whole package, unzip it to get a folder and open it, then go to "Plugin"
to find "berry-extension.zip".
1.5 Recommended Plugins
As mentioned above, when installing & activating Berry 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.
After Installing Berry 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.
Recommended Plugins
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.)
Install Recommended Plugins
Then don't forget to activate the plugins.
The recommended plugins are:
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.
When updating Berry theme, please follow the following 2 steps:
Step 1 - Update the theme first;
Step 2 - Then, please also update the Required Plugin: "Berry Extension". (See details here)
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.
You will see this note while installing Berry theme, please click it to install and activate Envato Market plugin.
Activate Envato Market plugin
Or you can download the plugin from its official download page: https://envato.com/market-plugin/. And then upload
it to your site and install it.
Then go to Envato Market > Settings, click on the link to generate a personal token, and then insert it below,
then save changes.
Click on the link to generate a personal token
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:
View and search Envato sites
Download your purchased items
List purchases you’ve made
There will show new tabs: Themes & Plugins (if you have purchased both themes & plugins from Envato).
As you can see in the screenshot below: if there is a newer version for a theme or a plugin,
it will show the notice, and you can update the item by clicking on the link Update Available.
When an item can be updated
Update Manually
Please follow steps below when you need to update Berry theme manually on your site:
Download the zip file of the latest version of Berry from ThemeForest.
Extract the zip file and find berry.zip.
Extract berry.zip and locate the berry folder
Log into your website via FTP, get into the theme folder (wp-content/themes/berry), and upload the contents of the local berry folder
to replace the old content in the berry folder on your website.
1.7 Update Required Plugin
When update Berry theme, if you also see this note, please click on "Begin updating plugin" link to update the
Berry Extension plugin as well.
Please remember to update Berry Extension plugin if see this note while updating the theme.
Reactivate the Required Plugin - Please make sure to reactivate Berry Extension plugin after updating. If the required plugin is not activated, some features will not be available.
To import the demo content, please make sure you have installed the recommended plugin One Click Demo Import while installing Berry theme.
After installing Berry 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 9 demos' screenshots. 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.
One Click Demo Import
When importing finished, please follow the steps below:
Menus have been imported, but you will need to tell WordPress where to use the menus. Go to Appearance > Menus.
Choose Main Menu, then find "Menu Settings" option > "Theme locations", check the box before "Primary Menu". Click on "Save Menu" button.
Main Menu Location
Choose Social Menu, then find "Menu Settings" option > "Theme locations", check the box before "Social Menu". Click on "Save Menu" button.
Social Menu Location
On the demo import page, you will see there is a note:
Demo Import - Setup MailChimp for WordPress
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.
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 Berry 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.
Import Demo Manually
If you don't want to import everything of a demo, you can choose any one of them and import manually. Demo files are located in the Berry theme folder > inc > ocdi.
Import Content Only
In the ocdi folder, find these 2 folders: Content Default & Content Strawberry.
Open either of the folders, there is the file "demo-content.xml" in it. It is the content data file.
On your site dashboard, please go to Tools > Import, choose WordPress and install it.
Install WordPress Import Tool
After installing, click on "Run Importer", choose "demo-content.xml" in one of those 2 folders,
upload and import.
Import Widgets Only
In the ocdi folder, find these 2 folders: Content Default & Content Strawberry.
Open either of the folders, there is the file "widgets.wie" in it. It is the widgets data file.
Please install this free plugin: Widget Importer & Exporter. Install and activate this plugin,
then go to Tools > Widget Importer & Exporter, choose "widgets.wie" in one of those 2 folders,
upload and import.
Import Customizer Settings Only
In the ocdi folder, you can see the 9 folders: default-1, default-2, ... , strawberry-1, strawberry-2, ...
Open any one of those folders, you can find the file "customization.dat" in it, that's the customizer data of that demo.
Please install this free plugin: Customizer Export/Import. Install and activate this plugin,
then go to Appearance > Customize > Export/Import > Import,
choose "customization.dat", upload and import.
1.9 WooCommerce Installation
Berry theme supports WooCommerce since v1.2. You can sell products on your own site with Berry theme and WooCommerce plugin.
Upon installation, WooCommerce creates the following 4 new pages via its Onboarding Wizard:
Shop – No content required.
Cart – Contains [woocommerce_cart] shortcode and shows the cart contents
Checkout – Contains [woocommerce_checkout] shortcode and shows information such as shipping and payment options
My Account – Contains [woocommerce_my_account] shortcode and shows each customer information related to their account, orders, etc.
To set up the shop 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.
Customize your shop & product pages
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 read the sub chapter Theme Customizer > Shop of Berry documentation to find out more.
2. Theme Customizer
Go to Appearance > Customize, there you can customise and personalise your theme layout and styles.
Go to Appearance > Customize to customise your theme.
2.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. Supports SVG logo
since version 1.1.2. When upload a SVG logo, please always click "Skip Cropping" button.
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.
Show Site Identity on Homepage Only – New feature added in v1.3.
Site Icon – Upload a square image to use it as a browser and app icon for your site.
2.2 General
In this section you can set general options for your site.
Site Layout – Fullwidth / Boxed.
Boxed Layout Options – When choose Boxed for Site Layout option, there will
show more options for Boxed Layout.
Site Max Width – Set the max width of inner content page.
Background Color – Choose any background color for outer area.
Background Image – Upload a background image for your site. If you cannot see background image, please
go to Colors > General and set Page Background to be transparent.
Read More Button – You can change the text on the Read More button after each post.
Button Style – Default / Slide.
you can control the style of all buttons on your site, including post “Read More” button,
submit button in forms (like comment form, Contact Form 7, Subscribe form, etc).
Button Style - Slide: When hover on the button, the primary background color will slide in.
Page/Post Header
Enable parallax for large featured image in header - Check to enable parallax scrolling effect for featured image in page/post header,
and also works for the large gallery slider in gallery-format post's header. Please note: it only works when screen width is larger than 1024 px.
Load Post Meta ( Like Count ) Dynamically with AJAX - Recommend enabling this option if any caching plugins are used on your site. (New feature added in version 1.8.0)
2.3 Header
In this section you can choose nav bar style, show or hide elements in site header.
Header Layout – Nav Bar + Logo / Logo + Nav Bar.
Navigation Style – Top Bar / Off Canvas. Choose “Top Bar”, then the site menu items will show in the nav bar at the top of the browser.
Choose “Off Canvas”, then the site menu will hide,
and show when click on the hamburger menu button. Please note: “Top Bar” nav style will be changed to “Off Canvas” when screen is narrower than 980px.
Navigation Style - Top BarNavigation Style - Off Canvas
Sticky Navigation – Check to make the navigation bar always sticks to the browser top, so it’s always visible when scroll the page.
Social Icons – Check to show your social menu in the site header.
Fold Social Icons – Check to fold social icons and hover/click to show them. Please note: Social icons will always be folded when screen width is smaller than 980px.
Fold Social Icons
Enable Search – Check to show the search field in the site header.
Background Image – Upload a background image for your site header.
Header Image – Upload an image and it will be shown as the “Off Canvas” menu background when the menu is expanded. If the navigation style is “Top Bar”, the image will show as the expanded menu background
when screen is narrower than 980px.
Header Image is used as the expanded off-canvas menu background.
2.4 Footer
In this section you can choose to show or hide elements in site footer, and set its layout.
Instagram Feed – Important Notice: Since June 2020, because Instagram made changes to API again, the previous method of displaying your Instagram feed
no longer works. We have found a more stable solution for the frequrently changed Instagram API. Please click here to know how to set up your Instagram.
Footer Column – You can choose from 1 to 3.
Footer Logo – Check and upload a logo image to show it in the site footer.
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.
Footer Text – Check it, then enter some text content. It supports HTML tags. So you can use < h1 > to < h6 > tags,
and < p >, < ul > tags to style the content.
Footer Social – Check to show your social menu in the site footer.
Footer Background Image – Upload a background image for your site footer.
Back To Top – Check to show the “Back To Top” bar in the site footer. It will scroll back to page top when click on the bar.
Footer Menu - New feature added in v1.6. Please see the details in this section.
Footer - 2 Columns.
2.5 Colors
In this section you can change element’s color/background color/border color of your site.
2.5.1 General
The settings in this sub section will work globally.
Primary Color – This color will be used for links in content, the text of categories and publish date of posts, buttons, and more.
Primary Color
Base Text Color – It’s your site basic text color, will be applied to all text, like headings, navigations, footer text, widget text and more.
Content Text Color – This color will be applied to the post/page content text, but H1 to H6 headings will not be included. Headings will still use the base text color.
Page Background Color – It’s the background color for the site page/inner content page (when choose "Boxed Layout").
Default is #F7F7F7.
Make page background color to be transparent – Tick the box to make page background color to be transparent, so if your site has a background image it won't be covered by the background color.
2.5.2 Site Header
Background Color – Choose any color in the color picker to use it as the site header background color.
Make site header background color to be transparent – Tick the box to make site header background color to be transparent.
Text Color – Choose a color for site title and tagline.
2.5.3 Nav Bar
Nav Color Scheme – Light / Dark.
Nav Highlight Color – Default / Primary Color. Choose “Default” then no highlight color. Choose “Primary Color” to use the primary color for the highlighted nav item.
Nav Background Color – Choose any color in the color picker to use it as the nav bar background color.
Nav Bar Colors
2.5.4 Footer
Footer Background Color – Choose any color in the color picker to use it as the site footer background color.
Footer Text Color – Choose a color for text in the site footer.
Back To Top Color Scheme – Light / Dark.
Back To Top Background Color – Choose a custom background color for “Back To Top” bar.
Footer Colors
2.5.5 Blog Page
Featured Slider Color Scheme – Light / Dark.
Featured Boxes Section Background – Choose a custom background color for Featured Boxes Section.
2.5.6 Sidebar
Widget Background Color – Choose a custom background color for the widgets in sidebar.
Widget Border Color – Choose a custom border color for the widgets in sidebar.
Widget Title Color – Choose a color for widgets' titles in sidebar.
Remove Widget Border – Enable it to hide widget border. Then the "Widget Border Color" will not work.
2.6 Blog Page
In this section you can control the layout and posts style for the blog/posts page of your site. If your site homepage displays your latest posts, then your homepage is the blog/posts page, so you can also customize your homepage here.
2.6.1 Page Layout
Please open your customizer and navigate to Blog Page > Page Layout. You can select a page template for your blog page. There are 3 options:
Fullwidth
With Right Sidebar
With Left Sidebar
Homepage Layout
2.6.2 Featured Slider
Check to show a slider of some posts at the top of the post archive. And more options for it will show:
Choose Slider Style – Large Slider / Carousel 2 Col / Carousel 3 Col.
Hide categories – You can choose to hide posts' categories meta (New feature since v1.2.5).
You can choose to remove these posts from Latest Posts Archive (New feature since v1.1.3).
Then you will be able to select one or multiple categories/tags. Please hold the CTRL key (PC) or COMMAND key (Mac) to select multiple items.
Post Number - Enter a number to decide how many posts will be show in the slider. 1 to 6. If enter 3, then the latest 3
posts from the categories/tags you choose in the option above will be appear in the slider.
Disable animation when hovering on text - When enable this option, no animation when hovering cursor on the featured slider.
Check to Enable Auto Play - The featured slider will be auto-played. Then the 3 options below will show:
Pause Duration - Enter a number to set the pause duration of each slide. Default: 5000 ms.
Transition Speed - Enter a number to set the transition speed. Default: 500 ms.
Pause when hover - Enable it, then auto play will be paused when hover on the featured slider.
2.6.3 Custom Hero Image
Since v1.2.8, users can display a custom hero image instead of the Featured Slider.
In customizer, please go to Blog Page > Featured Slider Alternative. Enable the option, choose
A simple hero image from the dropdown list, then upload your custom hero image.
Add Custom Hero Image
Please note: when enable "Featured Slider Alternative", the Featured Slider created by Berry theme will be removed from your blog/home page.
2.6.4 Custom Slider
Since v1.2.8, users can display a custom slider created by a third-party plugin instead of the Featured Slider created by Berry theme.
Please install and activate a plugin for creating your custom slider. There are many choices, free or premium. You might like to search on
wordpress.org/plugins/ to find a suitable plugin for your site.
Then create your custom slider. Copy the shortcode of the slider.
Open your WordPress customizer, go to Blog Page > Featured Slider Alternative. Enable the option, choose
Shortcode of a slider created by a third-party plugin from the dropdown list, then paste the shortcode into the field.
Add Custom Slider
Please note: when enable "Featured Slider Alternative", the Featured Slider created by Berry theme will be removed from your blog/home page.
Why use a third-party plugin for creating a custom slider?
WordPress theme controls over the look and presentation of the material on your website, plugin extends your site functionality. Although Berry theme
also provides some extra functionalities, but there already are many great plugins for creating sliders. They are powerful and flexible, some
are maintained well by their authors.
It's better to provide a simple and convenient interface to support those third-party plugins than to create our own
built-in custom sliders feature from scratch.
Please also note: Usually those third-party plugins provide design options so Berry theme doesn't contain any style for those plugins.
2.6.5 Featured Boxes
Featured Boxes section is a new feature since version 1.1.3. Here you can upload background image for each box, then enter box title and link to each one.
Featured Boxes
2.6.6 Post Archive
Here you can control the latest post archive layout.
Customize Homepage Post Archive Layout
Posts Layout
Classic
Classic Card
List
List Card
Grid - 1 Col
Grid - 2 Cols
Grid - 3 Cols
Classic Grid - 2 Cols (New since v1.1.3)
Classic Grid - 3 Cols (New since v1.1.3)
Flip Grid - 2 Cols (New since v1.1.3)
Flip Grid - 3 Cols (New since v1.1.3)
Hide categories – You can choose to hide posts' categories meta (New feature since v1.2.5).
Show at most x posts – Enter a number to decide how many posts show per page. It’s the same feature as WordPress dashboard > Settings > Reading > Blog pages show at most x posts.
2.7 Archive Pages
In this section you can set the layout and style of the 4 types of archive pages:
Category Archive
Author Archive
Tag Archive
Date-based Archive
Just like Blog Page, you can choose the page layout and archive layout. And there is another option "Show all posts on one page", check it to
ignore "show at most x posts" setting and list all posts of this archive on one page.
And the Hide categories option is available since v1.2.5, so you can choose to show or hide posts' categories meta on specific archive pages.
For example, to change the category archive pages' layout, please go to Customizer > Archive Pages >
Category, there you can choose page layout, posts layout, and more.
Category Archive Layout
Show subcategories on parent category page
Since v1.2.4, you can choose to show subcategories instead of posts on parent category page.
In the Customizer, go to Archive Pages > Category, you will see the option at the bottom of the panel:
Show subcategories on parent category page
2.8 Post
In this section you can control single post default template, and show or hide some elements on single post.
Default Template – Fullwidth / With Right Sidebar / With Left Sidebar.
You can change each post's template while editing it (click here to know details).
Single Post Header Style – Fullwidth Featured Image on Top / Normal Featured Image below Post Title.
Post Share – Check to show social share buttons. Then you can check to select some social medias.
Related Posts – Check to show related posts, then choose to show related posts by category or tag. Related posts will be randomised each time refresh the page, and will show at most 3 posts.
Related Posts Title – Give a title of the related posts section
Author Info Box – Check to show the author info box after single post content.
2.9 Shop
In this section you will be able to style your WooCommerce shop pages (New feature since v1.2).
Sidebar – Set sidebar layout for shop page & single product page, and also choose which sidebar to display.
General Sidebar Layout – Fullwidth / With Right Sidebar / With Left Sidebar.
It controls sidebar layout for your shop archive pages: Shop page, category archives, tag archives, search archive.
Single Product Sidebar Layout – Fullwidth / With Right Sidebar / With Left Sidebar.
Sidebar Content – Main Sidebar / Shop Sidebar. If choose Shop Sidebar then you can
add shop related widgets to this sidebar and only display those widgets on shop pages.
Shop Page – Controls styles of shop index page.
Page Header Style – Overlay / Normal.
Show at most x products per page - Removed since v1.2.8 because WooCommerce provides better solution for this since WooCommerce v3.3.x.
WooCommerce Shop Catalog Columns & Rows options
2.10 Typography
Please open the customizer and navigate to "Typography". In this section you will be able to set font options for text, such as
Font Family, Content Font Size, Font Weight, etc.. Please read the following content for more information.
Typography Settings
2.10.1 Font Family
Options in this sub section will work for the whole site. You can choose 2 different fonts for different types of text. All 800+ Google Fonts are included in the drop down lists.
You can visit the site of Google Fonts to view the style of each font, then go back to the customizer of your website
and select the font you like from the font list.
Primary Font Family – It’s the font family for the main text content: Page/post content and title, widgets text, and more.
Secondary Font Family – This font will be used for: Widgets title, navigation items in site header, posts categories, author name and publish date of posts/comments, and more.
2.10.2 Content
In this sub section you can tweak page/post content text style for Heading Text and Content Text separately.
Heading Text – H1 to H6 heading in page/post content. Options including:
Font Weight
Letter Spacing
Text Transform
Style
Content Text – Options including:
Font Size
Line Height
2.10.3 Page/Post Title
In this sub section you are going to set font style for single page/post title, and posts title on blog/posts page and archive pages. Options including:
Font Weight
Letter Spacing
Text Transform
Style
2.10.4 Widget Title
Options including:
Font Weight
Letter Spacing
Text Transform
Style
2.10.5 Post Excerpt
Options including:
Enable custom font settings
Font Size
Line Height
Enable Dropcap
2.11 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:
Add custom CSS to your site
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.
2.12 Instagram Settings
When using Berry theme, you can display your Instagram feed on your website: in site footer as a fullwidth section, or in a widget area (sidebar) by
adding the custom widget "Berry 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 AGAIN, and the old API will be deprecated at the end of June 2020. The new Instagram API is currently enabled.
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.
For users who have previously added the token manually in the old way, since you are using the old Instagram API (will be deprecated after June 29, 2020), so please follow the steps below to reconnect your Instagram account.
Please follow the steps below to connect your website with your Instagram account:
Install the bridge plugin we made: "LoftOcean Instagram": Please click the plugin download link, and then install and activate this plugin on your website.
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.
Connect your website with your Instagram account, and create new feeds (Smash Balloon v6.x updated interface).
Enable an option in your Customizer: Please open your WordPress customizer, then go to "Instagram Settings" > find "Using Instagram Token" option, tick the box, and save the changes. After that,
please click on the "Clear Cache" button.
Enable an option in your Customizer.
Select one of the feeds you created.Select one of the feeds you created
Done. Please keep these two plugins installed and activated. And please make sure your Instagram account is public.
Please note: After connecting your website to your Instagram account, you can only display the Instagram feed from the linked Instagram account.
"Why do I need to install these two plugins?"
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.
Bridge plugin "LoftOcean Instagram": This is a bridge plugin. After activating this plugin, the Berry theme can work with the "Smash Balloon Social Photo Feed" plugin,
so your Instagram feed can be displayed in the theme’s built-in locations (sidebar and footer), with the style set by the theme.
After connecting your website with your Instagram account, you can display your Instagram feed in the site footer, or use a widget to display the feed in the sidebar.
Instagram feed in site footer: Please open your WordPress Customizer, then go to "Footer" > find "Instagram Feed" options. Enable the option and the Instagram feed will be displayed in the site footer.
You can add a title (it's optional). If you want to link the title to your Instagram profile page, please also enter your Instagram account name into the "Instagram Username" box, and then check the box of "Link Title to Instagram Account" option.
Instagram feed in sidebar: Please use the custom widget "Berry Instagram" to display Instagram feed in the sidebar.
If you are new to WordPress, you may like to read this tutorial: How to Add and Use Widgets in WordPress.
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 Instagram Settings,
find the "Clear Instagram Cache" option, and click the "Clear Cache" button.
Please note: this is a new feature added since Berry v1.4.
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 Instagram Settings,
find the "Load Instagram pictures dynamically with AJAX" option, tick the box to enable this option.
Please note: this is a new feature added since Berry v1.4.
Common Problem with Instagram
Instagram feed cannot be displayed on your website?
Please check by following the steps below:
Please check whether the required plugin "Berry Extension" is installed and activated.
If you update the theme, please make sure you also update the required plugin "Berry Extension".
Please check if you have enabled the "Instagram" feed in your site footer.
Please make sure your Instagram account is public.
Instagram Cannot Show since October 24, 2020?
This problem is caused by the Instagram API change that happened on October 24, 2020. Unfortunately, this specific change was not mentioned in the Instagram announcement
so we did not prepare for it in advance. We have updated the required plugin "Berry Extension" and the bridge plugin "LoftOcean Instagram" to fix this issue.
If this issue happens on your website, you need to remove the old "Berry Extension" and "LoftOcean Instagram" from
your website, then download and install the updated ones. Please follow the steps below:
On your website dashboard, please navigate to Plugins > Installed Plugins. Find Berry Extension, deactivate it.
Click Delete to delete Berry Extension.
Refresh the page.
At the top of the page, you will find this message: "This theme requires the following plugin: Berry Extension". Click on Begin installing plugin.
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 "Berry Extension".
Then activate "Berry Extension".
On your website dashboard, please navigate to Plugins > Installed Plugins. Find LoftOcean Instagram, deactivate it and then delete it.
Please click the plugin download link, and then install and activate "LoftOcean Instagram" on your website.
2.13 Font Awesome Icons
Berry theme uses the most popular icon font toolkit Font Awesome to display icons. When the first version of Berry was released,
we used Font Awesome v4.7. Later, Font Awesome version 5 was released, and included many new icons. Therefore, we provide a new feature to allow users to
choose to upgrade to Font Awesome v5.x to show new social icons, for example, Google Play, Patreon, etc.
In the customizer, please go to Font Awesome, then tick the box of the Upgrade to Font Awesome 5 for more icons option.
Upgrade Font Awesome library
Please note: some icons may look different after upgrading from v4.7 to v5.x because the icons are redesigned by the toolkit author.
You may like to check the icon list of Font Awesome library:
To manage site menus, we need to locate the WordPress Menus panel.
On your website dashboard, go to Appearance > Menus.
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).
Please follow the strunctions below to create your social menu:
On your website dashboard, go to Appearance > Menus > Edit Menus.
Create a new menu. Give it a name, for example, "Social Menu". Then click on the "Create Menu" button.
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.
Repeat to enter your other social media sites' links.
Find "Menu Settings" option > "Theme locations", check the box before "Social Menu".
The Footer Menu will be displayed in the site footer, below site logo & copyright text.
Enable Footer MenuFooter Menu
4. Pages
4.1 Homepage & Blog Page
To display your latest blog posts on the homepage, you can:
Go to Appearance > Customize > Static Front Page > Front page displays, then choose “Your latest posts”.
Or on your site dashboard, go to Settings > Reading > Front page displays, then choose “Your latest posts”.
Then go to Appearance > Customize > Blog Page, there you can customize the page layout and latest posts layout.
You can also choose a static page as the homepage, then create a new page, name it “News”, “Journal” or any other title, and set it as the posts page. Then you can style your posts page via Appearance > Customize > Blog Page.
4.2 Page Template
Berry provides 3 page templates for different page layout:
Default Template (With Right Sidebar)
Fullwidth
With Left Sidebar
To choose a template for a page, on the site dashboard, go to Pages > All Pages, choose a page to edit it, then on the right hand side, you will find Page Attributes option panel, click to open the Template drop down list,
choose a template for this page.
Since version 1.3, users can choose to hide the page header specifically for each single page.
4.3 Category Archive
Go to Posts > Categories, when adding a new category or edit an existing one, you can upload an image for this category, then on the category archive page, this image will be used as the page header background image.
To change the page layout and archive styles, please go to Customizer > Archive Pages > Category.
Customize Category Archive Page
4.4 Author Archive & Info
The author information will show:
At the top of Author Archive page
After single post content
Author information includes the author profile picture and biographical info.
To edit author biographical info, 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.
Author Biographical Info
To add or edit the author profile picture, please visit https://en.gravatar.com/ for more information.
To change the page layout and archive styles, please go to Customizer > Archive Pages > Author.
To hide the author info box after single post content, please go to Customizer > Post > Author Info Box, then uncheck the box.
Add Author Archive Page to Menu
On your site, please make sure you have enabled to show Author Info Box on single post.
Then open a post, find the author info box, click on the author name.
Click on author name to open author archive page.
The archive page of this author will open. Copy the URL in the address bar.
Copy the URL in the address bar.
On your site admin panel, please go to Appearance > Menu to edit your menu. You will need to add a custom link into your menu.
Paste the URL and enter the link text for it. You can enter any text here, for example, the author's name, or "All of My Articles".
Copy the URL in the address bar.
Click on Save Menu button to save the changes you have made.
To change the page layout and archive styles of your author archive pages, please go to Customizer > Archive Pages > Author.
5. Posts
5.1 Post Template
You can choose a default template for posts, and you are also able to choose different templates for different posts.
Please note: this feature requires WordPress 4.7. Please check your WordPress version and get the version 4.7 to use this feature.
To choose a template for a post, on the site dashboard, go to Posts > All Posts, choose a post to edit it, then on the right hand side,
you will find Post Attributes option panel, click to open the Template drop down list,
choose a template for this post.
There are 4 options:
Default - When choose this, it means the post will use the template you have selected in Customizer > Post > Default Template.
So if you change the default post template in Customizer, this post's template will also change to that one.
Fullwidth
With Left Sidebar
With Right Sidebar
If you choose "Fullwidth" or "Left Sidebar" or "Right Sidebar" for one post, then when you change the default post template in Customizer, the change will not
affect this post.
5.2 Single Post Header Style
Since version 1.1.5, Berry theme has 2 single post header styles for users to choose.
On your site dashboard, go to Appearance > Customize > Post, then you will see an option
Single Post Header Style:
Fullwidth Featured Image on Top - The featured image (or a gallery slider for a Gallery Post) will be shown as fullwidth section on
the top of the post header - post title and other meta.
Normal Featured Image below Post Title - The featured image (or a gallery slider for a Gallery Post) will be shown inside of the post frame,
below the post title and other meta.
Option to choose Single Post Header Style.Fullwidth Featured Image on Top.Normal Featured Image below Post Title.
5.3 Post Formats
Berry supports 4 post formats: Standard, Gallery, Video and Audio.
Standard Post - Just choose “Standard” as post format.
Gallery Post - You can insert a gallery into the post content by clicking on “Add Media” button, then choose “Create Gallery”,
and choose “Gallery” as post format. You can also upload a featured image if you will add this post into the featured posts slider.
Please note: the featured image of a gallery post will not show on its single post page or the posts page.
Video Post - Insert a video embed code into the post content, or upload a video by clicking on "Add Media" button.
And choose “Video” as post format. You can also upload a featured image for displaying
on posts page for “Grid” or “List” layout.
Audio Post - Insert an audio embed code into the post content, or upload an audio by clicking on "Add Media" button.
And choose “Audio” as post format. You can also upload a featured image for displaying
on posts page for “Grid” or “List” layout.
5.4 Featured Post
You can choose some posts and set them as "Featured Post" manually. Then you can insert them into the Featured Slider on blog page. This is a new feature since v1.1.3.
On your dashboard, go to Posts > All Posts, then you will see the column Featured Post, tick the box of some posts to mark
them as the featured posts.
Featured Posts
You can also mark a post as featured post on its edit page.
Berry Option - Featured Post Box
5.5 Post Like/Heart Counts
If you have enabled "Post Like" feature, you will see a small heart icon below each post.
Visitors/readers can click on the heart icon, the number will count up at every click. If your site already has many posts before using Berry theme,
because your previous themes don’t have this feature, so the number is zero for every post. You can add a fake start number of hearts
for each post, please see this link to know how to do it:
How to add a start number for post like count.
5.6 Hide Featured Image
Since version 1.1.5, we have added a checkbox on each single post edit page, so users can choose to hide or show a post's featured image
on its single post page.
Checkbox to hide Featured Image on its single post page.
If checked, then the post's featured image (if uploaded) will show in the featured slider on homepage, and in the post
archive list (like on homepage, category archive page, etc), but will not show on its single post page.
And please note: if a post is a gallery post (post format "Gallery"), and the post has both a featured image and a gallery, the featured image will not show
on its single post page, no matter if enable the option or not.
5.7 Post Excerpt
The WordPress Excerpt is an optional summary or description of a post; in short, a post summary. And there are three different ways
to show the summary to your post content.
Automatic Excerpts
Teasers (more tag)
Manual Excerpts
Automatic Excerpts
By default, excerpt length in Berry theme is set to 25 words. So on the posts archives pages, each post displays 25 words of its content by default,
and with an ellipsis … and a "Read More" button at the end. And HTML formatting and tags will be stripped from the content.
Teasers (more tag)
When adding <!–more–> quicktag into post content, it will display the content before the more tag when displaying your posts list,
also with a "Read More" button at the end.
However, in Berry theme, if the content before the more tag is longer than 25 words (the default excerpt length set in Berry theme), then it
will display content up to 25 words, and will add an ellipsis … at the end. (If the content before the more tag is shorter than 25 words, then
it will not add an ellipsis.)
How to insert the more tag
When writing in the visual post editor, please click the "Insert Read More tag" button to insert a more tag.
Add <!–more–> quicktag into post content - Visual Editor
When using the text editor, you can insert the more tag by clicking the "more" button or typing it manually: <!--more-->.
Add <!–more–> quicktag into post content - Text Editor
Manual Excerpts
A manual excerpt is the hand-crafted summaries of your content.
It will ignore the default excerpt length.
It will not add an ellipsis.
HTML formatting and tags will not be stripped.
A "Read More" button will show at the end.
To add manual excerpt, please write excerpt in the Excerpt field under the post editor.
Writing manual excerpt
The result on website:
If you can't find the Excerpt field, it is most likely hidden by default. Please scroll up to the top of the post edit screen,
and click the Screen Options, then make sure the Excerpt box is checked.
Show the Excerpt field
6. Widgets
6.1 Widgets Basics
Berry provides 1 widgets area: the left/right sidebar when the page template is not “Fullwidth”. To manage widgets, you can:
On your website dashboard, go to Appearance > Widgets.
Or go to Appearance > Customize > Widgets.
You can add widgets into the sidebar, and drag to reorder the items.
6.2 Berry Custom Widgets
There are 8 custom widgets included in Berry.
6.2.1 Berry Profile
Add brief information about you and your site.
6.2.2 Berry Category
Display selected (up to 5) categories with background image in the sidebar.
Each category's background image can be added/edited via Dashboard > Posts > Categories.
Please hold the CTRL key (PC) or COMMAND key (Mac) to select multiple items.
6.2.3 Berry Ads
Upload an image and enter a link to the page you are advertising/promoting about. And you can also choose to open it in the current tab or a new tab.
6.2.4 Berry Latest Posts
The custom latest posts widget will show your latest posts with the featured image, post title and meta info.
6.2.5 Berry Latest Comments
The custom latest comments widget will show the latest comments with comment author photo, post title and comment publish date.
6.2.6 Berry Social
Add this custom widget into your sidebar to show your social menu.
6.2.7 Berry Instagram
Enter the username of an Instagram account to display the latest photos from this account. And you can decide how many pictures to show in the feed.
Important Notice: Since June 2020, because Instagram made changes to API again, the previous method of displaying your Instagram feed
no longer works. We have found a more stable solution for the frequrently changed Instagram API. Please click here to know how to set up your Instagram.
6.2.8 Berry Facebook
Enter your Facebook page URL to display the Facebook like box.
7. 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 1600 px
when it is supposed to be a full-width image.
Images will be scaled and saved into different sizes after you upload them. You can set image sizes via dashboard >
Settings > Media.
Recommended media sizes for Berry theme:
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: Force Regenerate Thumbnails.
We suggest use images in 3:2 aspect ratio for the features images and photos in a gallery (especially a slider gallery).
8. GDPR Compliant
We have included tips and resources related to this topic in this how-to article:
Berry theme is officially compatible with WPML. Which means you can turn Berry multilingual with WPML. Please read guide below to know
how to build a multilingual site with Berry and WPML.
Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management) first,
followed by other WPML plugins that may depend on them.
Set up WPML from WPML > Languages. See WPML Getting Started Guide for complete reference, but the initial
simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages, and a language selector.
9.4.2 Translating pages and posts
1) Creating pages and posts in the site's default language
Before you can start translating, you need to create pages and posts in the site’s default language.
For example, navigate to "Pages" and add a new page (as you would without WPML). You will see there is
a Language panel on the page.
Creating pages and posts in the site's default language
2) Translating pages and posts
After publish a new page or a post, you will see Translate This Document in the Language panel and
a list of languages.
Translating pages and posts
Click on the "+" button of the language you are about to translate the content to. For example, "Serbian".
This creates a new Serbian translation for it. Then enter the content written in Serbian. And publish the page.
Translating content manually
Once you have translated the page, it will display the title and content in the language of your choice.
The page will be displayed in different languages.
3) Updating the translation of a page or post
On your WordPress site dashboard, go to Pages or Posts, in the list you will see a column for each
active language, with a pencil icon (for 'edit translation') or a '+' icon (for 'add translation') next to each page/post.
For example, the page "Our Team" hasn't been trasnlated yet, so the icon is "+". Click on it to create a new Serbian translation for this page.
When you’ve already translated, the "+" icon will change to a pencil icon. Click on the pencil icon if you need to modify your translation.
Navigating to Posts > Categories, as an example we will create a category and name it
"Books", also upload a category image for it, and click on the Add New Category button. (The category image will be
used as the category archive page header background, and the background of Featured Categories widget in sidebar.)
Create a category
Click on the category that we have created.
Edit a category
Click on the "add" link to add the translation of the category.
Add the translation of the category
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.
Translate the category
2) 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.
3) Taxonomy Translation
You can also translate post categories and tags via WPML Taxonomy Translation.
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).
Taxonomy Translation
The Term Translation box will pop up. Enter the translation and click on "Save" button.
Term Translation
9.4.4 Translating Berry's theme text and other strings
To translate the theme strings, you will need to scan it for strings. This will register the strings for translation on the
String Translation screen. (Read more about Theme and Plugin Localization.)
This can be done by following the steps below:
Go to WPML > Theme and plugin localization.
Choose Translate the theme and plugins using WPML's String Translation and load .mo files as backup, and save.
Theme and plugin localization setting
Click on the Scan the theme for strings button. This will register the theme texts for translation on the String Translation screen.
Now you can navigate to WPML > String translation.
Translating via String Translation screen
What you need to translate via String Translation screen:
Site title and tagline
Read More button
Post Share text
Widgets
Search form
Featured Boxes text
Footer text
Back to Top at footer bottom
For example: Translating Berry's custom widget - Berry Profile:
Berry's custom widget - Berry Profile
Navigate to WPML > String translation. Enter some keywords copied from the profile, for example,
"independent photographer", and search. You will see the search result as shown below, then click on translations.
Search for the string
Add your translated text. Then choose the Translation is complete option and click Save.
Translate the string
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.
9.4.6 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.
Go to Appearance > Menus, click on Customize the language switcher button.
Customize the Language Switcher Button
The Edit Menu Language Switcher screen will pop up. There you can customize the language switcher.
Customize the Language Switcher
9.5 Need Help for WPML
If you need help with using WPML with Berry 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.
Please always remember to search and read WPML official documentation for more details
about how to use WPML.
10. 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.
Please kindly note: The terms and conditions are set out by Envato exclusively, and every author must follow the rules.
These rules are the same for every author and every buyer and we cannot change them selectively. Thank you for understanding.
What you should do first before asking your question?
To speed along the support request, please check by following the guide below:
Make sure your site is running the latest version of WordPress.
Make sure that the Berry theme and the required plugin "Berry Extension" have been updated to the latest version. Some known issues may have been fixed in an update.
Update to the latest version of other plugins on your website.
Disable any other plugins and then check if it fix the issue.
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!
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.
