To install Alpaca 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 Alpaca 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
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:
max_execution_time
30
max_input_time
60
memory_limit
256M
post_max_size
64M
upload_max_filesize
64M
Your Website Configuration
About PHP:
PHP Version - The minimum PHP version required for Alpaca 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.
WordPress Version - Although the minimum WordPress version requirement for running Alpaca 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 Alpaca theme.
You need to download the theme zip file from ThemeForest first. Go to Downloads on ThemeForest, and find Alpaca.
Download the files and find alpaca.zip - that's what you need for installation.
If you download the whole package, please unzip it, in the "WordPress Theme" folder, find alpaca.zip.
Or, you can download the Installable WordPress File Only - which is alpaca.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 "alpaca.zip" file in it.
On your website admin panel, go to Appearance > Themes > Add New > Upload Theme.
Choose alpaca.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.
Installing the theme via FTP
If you can't install the theme via WordPress admin panel, you can try to install it via FTP.
Find the file - alpaca.zip, unzip it.
Upload the unzipped folder to your FTP > WordPress site root > wp-content > themes.
Go back to your site admin panel > Appearance > Themes, activate Alpaca theme.
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 check this section.
2.3 Install Required Plugin
As mentioned above, when installing & activating Alpaca theme, you will see the notice "This theme requires the
following plugin: Alpaca Extension". It is the Alpaca 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.
Please follow the steps below:
After Installing Alpaca theme, activate it, then you will see a note box, it says: "This theme requires the following plugin:
Alpaca Extension." Click on Begin installing plugin link.
Install the required 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 "Alpaca Extension".
Install the required plugin.
Then activate "Alpaca Extension".
Return to Required Plugins Installer.Activate the required plugin.
If you need to find "Alpaca 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 "alpaca-extension.zip".
2.4 Recommended Plugins
As mentioned above, when installing & activating Alpaca 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 Alpaca 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.
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.)
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 Alpaca 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 Alpaca 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 Appearance > Alpaca Theme Basic Settings, 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 "Alpaca Extension". 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 Alpaca theme,
and then they will find that some features no longer work.
In order to avoid the above situations, we recommend checking both options.
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
When updating the theme, please follow the following 2 steps:
Step 1 - Update the theme first;
Step 2 - Then, please also update the Required Plugin: "Alpaca Extension". (See details here)
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.
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 an Envato API 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
Generating Envato API Personal Token.
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:
Items purchased from Envato will display on the page.
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.
When updating Alpaca 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: Alpaca Extension."
Please click on Begin updating plugin link to update the Alpaca Extension plugin. Alternatively, you can go to Appearance > Install Plugins.
You can see the status of "Alpaca Extension" is "Active, Requires Update". And it also shows the Installed Version of "Alpaca Extension" on your site,
and you can find there are messages about Minimum required version and Available version. Please click on the Update link below "Alpaca Extension".
After the plugin updated, please click on the "Return to Required Plugins Installer" link.
You may see the plugin's status "Installed But Not Activated". If so, please click on the Activate link to reactivate the required plugin.
You can choose to enable auto-update and auto-activation of the required plugin. Please go to "Appearance" > "Alpaca Theme Basic Settings", and there are 2 options:
Auto update the plugin when updating the theme
Auto activate the plugin when activating the theme
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,
you need to minify CSS again, and then clear the website cache. If you are using "W3 Total Cache", please follow these steps:
On your website dashboard, please navigate to the top admin bar > "Performance" > "Purge Modules" > click "Minify".
Then please click "Purge All Caches".
Click "Purge Modules > Page Cache: All".
Click "Purge Modules > Opcode Cache".
Then, please also clear the browser cache.
Minify CSS again, and then clear the website cache
If you are using another cache plugin, you can also find similar features in the cache plugin.
4. Demo Importing
Importing a demo to your site is optional for using Alpaca theme. It is for easy start - when you have a fresh WordPress installation,
you can import some dummy content and predesigned layouts & styles to your site,
then you can replace with your own content, and tweak some layouts and colors.
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 Alpaca 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.
About the images used on the demo sites:
The images used on our demo site are for demonstration purposes only and are NOT included in the demo data.
Because there are a lot of high-quality images on the demo site and the file size is quite large, on some sites with lower configuration,
it may cause the import demo to fail.
To ensure that demo data can be imported quickly and successfully, we use image placeholders with small file sizes in the demo data.
After importing the demo, you can upload your own images.
If you need some images used on our demo site, please contact us and provide us with relevant screenshots, we can provide download links for those images.
Please note: Don't import multiple demos to the same site, it will create duplicate data.
When importing finished, please follow the steps below:
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, and create a form. Please read more in this section.
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 technical support specialist can check that for you:
Your website URL.
Your website login information. You can use
this plugin to create a Temporary Login Without Password.
Which demo you'd like to import, so that we can help you import the demo.
Your (or a temporary) FTP account, so that we can check the error log on your website.
By default, WordPress shows your most recent posts in reverse chronological order on the front page of your site.
When working with Alpaca theme, your site homepage can be set up as a page with more than one type of content:
not just the most recent posts, but also posts slider, posts from selected categories, call to action, newsletter signup form, and more.
Please follow the steps below to set up your homepage.
Option #1: Front page - displays latest posts
On your site admin panel, go to Settings > Reading panel, find the option Front page displays,
choose Your latest posts.
Front page - displays latest posts
To customize your home page, please go to Appearance > Customize > Home Page panel. For more details, please refer to Customize Homepage.
By default, your most recent posts are displayed on your homepage. You can customize the layout and style via Customizer > Home Page > Latest Posts Area.
To add more content blocks to your homepage, please check Home Widgets to know more details.
Option #2: Front page - A static page
On your site admin panel, go to Pages > Add New. Create a new page, for example, "Front Page". You don't need to add any content to this pages.
Then go to Settings > Reading panel, find the option Front page displays,
choose A static page. In the drop down menu for Front Page select "Front Page".
In the drop down menu for Posts page, leave it blank.
Front page - Static Front Page - No Blog
IMPORTANT! Also in the Settings > Reading panel, scroll down to find the option "Static Homepage Content",
choose "From Customizer > Homepage Section" in the drop down list.
Static Front page content - from customizer
Then go to Appearance > Customize > Home Page panel to customize your homepage. For more details, please refer to
Customize Homepage and Home Widgets.
Basically, setting your homepage this way is no different from the first homepage setting method (Option#1). However, with this setting, you can also set up an additional blog page for your site.
Please continue to read the next section to learn more.
Option #3: Homepage + Blog
If you want to have a front page to display different types of content, and then have a blog page to show all posts:
On your site admin panel, go to Pages > Add New. Create 2 pages, for example, "Front Page" & "Blog". You don't need to add any content to those pages.
Then go to Settings > Reading panel, find the option Front page displays,
choose A static page. In the drop down menu for Front Page select "Front Page".
In the drop down menu for Posts page select "Blog".
Front page - Static Front Page
IMPORTANT! Also in the Settings > Reading panel, scroll down to find the option "Static Homepage Content",
choose "From Customizer > Homepage Section" in the drop down list.
Static Front page content - from customizer
Then go to Appearance > Customize > Home Page panel to customize your homepage. For more details, please refer to
Customize Homepage and Home Widgets.
Also in theme customizer, go to Archive Pages > Blog Page to customize your blog page.
Please note: a static blog page can only display the latest posts.
Option #4: Homepage - using a page builder plugin
If you want to use a third-party page builder plugin to edit the content on your homepage (instead of using the function provided by the theme: customize the homepage through the customizer),
please follow the steps below to set up your homepage:
On your site admin panel, go to Pages > Add New. Create 2 pages, for example, "Front Page" & "Blog".
(If you don't need a separate blog page, you can just create 1 page for "Front Page".)
Then go to Settings > Reading panel, find the option Front page displays,
choose A static page. In the drop down menu for Front Page select "Front Page".
In the drop down menu for Posts page select "Blog" (you can ignore this "Posts page" setting if you don't need a blog page).
Front page - Static Front Page
Also in the Settings > Reading panel, scroll down to find the option "Static Homepage Content",
choose "From page content" in the drop down list.
Static Front page content - from page content
On your site admin panel, go to Pages > All pages, find "Front Page" and edit it. You can use a third-party page builder plugin
to edit this page, or you can use the default editor of WordPress core. Content you entered for this page will show on your site homepage.
If you also set up the Blog page: To manage the blog page, please go to Appearance > Customize > Archive Pages > Blog Page to customize your blog page.
Please note: a static blog page can only display the latest posts.
5.2 Customize Homepage
Please go to Appearance > Customize > Home Page panel, you will find 3 sub sections.
Customizer - Homepage
5.3 Latest Posts Area
Your latest posts will be displayed in this area. And you can change the following settings:
Section Title
Sub title / Description
Sidebar Layout - If you choose "Left/Right Sidebar", then a sidebar will show in the "Latest Posts Area".
Posts Layout - There are 16 layouts:
Standard
Full Overlay
Zigzag
Masonry 2 Columns
Masonry 3 Columns
Grid 2 Columns
Grid 3 Columns
First Side Overlay + Masonry 2 Columns
First Side Overlay + Zigzag
Grid Overlay 2 Columns
Grid Overlay 3 Columns
Grid Overlay 4 Columns
First Full Overlay + Masonry 2 Columns
First Full Overlay + Masonry 3 Columns
First Full Overlay + Grid 2 Columns
First Full Overlay + Grid 3 Columns
Meta Visibility – You can choose which post meta to show in posts archive.
Number of Posts displayed Per Page
Hide the Latest Posts Area - Check the box of this option, the Latest Posts Area will be removed from your homepage.
Since this section is disabled, all the above options will no longer work.
Homepage - Latest Posts Area
5.4 Home Widgets
There are two additional sections before and after "Latest Posts Area" on the homepage:
Home Widgets Area 1
Home Widgets Area 2
In these two areas, you can add different types of content
(only for Multi-content Homepage" - find out more) by adding
Home Widgets.
Please go to Customizer > Home Page > Home Widgets Area 1 / 2, click on the button Add a Widget,
then click on a home widget to add it to your homepage. And you can drag and drop to reorder them, click on each widget to expand its settings panel to tweak content
and style.
Manage Home Widgets
Currently there are 10 different home widgets, each home widget contain many options for content, layout and appearance:
Posts
Featured Category
Ad Banner
Call to Action
Custom Content
Featured Boxes
MailChimp Signup Form - need to install & activate the plugin "MailChimp for WP"
Posts Carousel
Rolling Text - New feature added in v1.3.
Posts Slider - New feature added in v1.4.
Home Widget - Ad Banner
If you want to display an ad on your homepage, you can add this widget to Home Widgets Area 1 or Home Widgets Area 2.
It supports adding a custom ad banner, and ad code (such as Google AdSense).
Home Widget - Ad Banner
The settings for this home widget:
Section Title - Enter a title for this widget/section.
Color - Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Custom Background Color - choose another background color.
Paddings - Select "Custom", then you can change the padding top & padding bottom.
Ad Source - There are 2 options: Custom Banner / Embed Code
When selecting "Custom Banner": You can upload a custom ad banner image and add a link to the promoted page:
URL - This is optional. You can enter URL of the page you are promoting.
Ad Image - Upload a custom banner image.
Image Max Width
Open link in a new tab
Make the container to be fullwidth when homepage has no sidebar
If enabled, a new option will show: "Enable large banner special effect" - When enabling this option, a parallax effect will be applied to this ad banner (Only works when screen width is larger than 1024px).
When selecting "Embed Code": You can add ad code, such as Google AdSense.
Home Widget - Call To Action
You can add a Call To Action section, which contains: an image, promotional text, and a call to action button.
Section Title - Enter a title for this widget/section.
Color - Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Custom Background Color - choose another background color.
Padding Top
Padding Bottom
Layout Option - There are 5 layouts to choose from.
Call To Action Layout Options
Heading - Enter the heading of the promotional text
Text - Enter the promotional content
Button Options
Enter button text
Add button link
Enable "Open link in a new tab" or not
Text Alignment
Home Widget - Custom Content
With Custom Content home widget, you will be able to add your custom content via the TinyMCE editor (the classic editor of WordPress).
Therefore, you can add many different elements in this section, such as text paragraphs, HTML code, embedded maps, embedded videos, etc.
Section Title - Enter a title for this widget/section.
Color - Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Custom Background Color - choose another background color.
Paddings - Select "Custom", then you can change the padding top & padding bottom.
Add Content with a TinyMCE editor
Home Widget - Featured Boxes
With this home widget, you can add 3 featured boxes to promote some content.
Home Widget - Featured Boxes
Section Title - Enter a title for this widget/section.
Color - Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Custom Background Color - choose another background color.
Paddings - Select "Custom", then you can change the padding top & padding bottom.
Block #1 - Add the image, heading and link for the first box.
Block #2 - Add the image, heading and link for the second box.
Block #3 - Add the image, heading and link for the third box.
If you want to add more than 3 boxes, then please add another "Featured Boxes" home widget to the homepage.
Home Widget - Featured Category
With this home widget, you can select some categories and display on the homepage. (You can select as many categories as you like.)
Home Widget - Featured Categories
Section Title - Enter a title for this widget/section.
Color - Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Custom Background Color - choose another background color.
Paddings - Select "Custom", then you can change the padding top & padding bottom.
Choose Categories - All post categories will be listed in the box. Please select some from the list.
To select multiple items in this box:
If you are using Mac, please press and hold the "Command" key on your keyboard and click the categories.
If you are using Windows, please press and hold the "Ctrl" key on your keyboard and click the categories.
Please note: WordPress will not display empty categories by default.
Therefore, please make sure the selected category contains at least one post.
How to show the empty categories: Please uncheck the "Hide Empty Categories" option.
Category Layout - Choose the column layout (2/3/4/5/6/7 columns) for the categories.
To add the Category Image to each category, please read this chapter: Edit a Category.
Home Widget - MailChimp Signup Form
With this home widget, you can display your MailChimp Newsletter Signup Form on the homepage. Please note: this home widget is available after installing
and activating the recommended plugin: MailChimp for WordPress.
Home Widget - Signup Form
Please check this chapter and setup your Newsletter Signup Form. After the form is created, please add this home widget to your homepage.
Settings of this home widget:
Color - Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Custom Background Color - choose another background color.
Then you can choose to add a Background Image
Paddings - Select "Custom", then you can change the padding top & padding bottom.
Choose a Form
Layout - Left Column / Center Column / Right Column.
Home Widget - Posts
With this home widget, you can add multiple sections with posts on the homepage.
Home Widget - Posts
Settings of this home widget:
Section Title - Enter a title for this widget/section.
Sub title / Description
Color - Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Custom Background Color - choose another background color.
Paddings - Select "Custom", then you can change the padding top & padding bottom.
Choose Posts - You can choose to display posts from different sources:
Display selected post meta – You can choose which post meta to show in posts carousel.
Show at most x items
Columns
Custom Height
Auto play the carousel
Home Widget - Rolling Text
This is a feature added in Alpaca v1.3. With this home widget, you can add a line of rolling text on the homepage. You can check this demo to preview the feature.
Settings of this home widget:
Color - Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Custom Background Color - choose another background color.
Background Image - You can set a background image.
Paddings - Select "Custom", then you can change the padding top & padding bottom.
Enter Text - Please enter the text. Please note: If the input text is not long and does not exceed the width of the page
(or does not exceed the width of the page on the wide screen), the animation effect may not be ideal. In this case, please copy and paste the text several times to increase the length of the text.
Custom Font Size - You can set the font size.
Animation Length - Set the duration of the animation, for example, 60 seconds. If you want the text to roll faster, you can change the value smaller.
This home widget is also available as a Gutenberg Block so you can add a line of rolling text on a single post/page. More details can be found in this sub chapter.
Home Widget - Posts Slider
This is a feature added in Alpaca v1.4. With this home widget, you can add a slider of selected posts on the homepage.
Settings of this home widget:
Choose Posts - You can choose to display posts from different sources:
Display selected post meta – You can choose which post meta to show in posts slider.
Slider Style – Currently there are 2 slider styles to choose.
Show at most x posts in the slider - Up to 3 posts.
Auto play the slider
Slider Navigation – You can choose to show or hide the slider navigation. And the post meta in the slider navigation can also be hidden.
If you select "Slider Style 1": Then you can set Custom Colors of the slider. Select "Custom", then you can change:
Color Scheme - switch between "Light" and "Dark".
Slider custom background color - choose another background color.
Slider custom text color - You can change the slider's text color.
Please note that the colors of slider navigation are controlled by the "Color Scheme" option, so you cannot set a custom background color or custom text color for the slider navigation.
5.5 Add CSS Class(es) to a home widget
The last option in each home widget settings panel is "Custom Class". This option is to add custom CSS class(es) to a home widget.
What is this for?
This is an advanced function and is usually used by users with knowledge of writing code. You can add specific CSS classes to the home widget
and then add corresponding CSS code or JavaScript code for these classes to achieve specific results.
In the Alpaca theme, we have provided some preset styles for the following 4 special CSS classes. You can choose to add some of these CSS classes to a home widget according to your needs.
When entering multiple classes, please separate the classes with spaces.
fullwidth -
After adding this class, the content inside of this home widget will be stretched to the full width of the page.
no-alignfull -
This class is just the opposite of the previous one. You may have found that when you add a post group (Home Widget - Posts) to the home page and select some post styles,
the content is stretched to the full page width by default. This is the most appropriate width for that post style, and the visual effect is better.
However, if you need to cancel the full width, you can add this class.
hide-on-mobile -
After adding this class to the home widget, this home widget will be hidden on mobile devices (when the screen width is less than 1120 pixels).
hide-on-desktop -
After adding this class to the home widget, this home widget will be hidden on desktop devices (when the screen width is 1120 pixels or more).
6. Theme Options
On your site admin panel, please go to Appearance > Customize, there you can customise and personalise your theme layout and styles.
Open Customizer
6.1 Site Identity
You will find the following options in this section:
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.
How about the logo image? Please check the details in this sub chapter: Logo Image.
6.2 Site Background
To customize your site layout, please go to theme customizer > General > Site Background.
You can upload a site background image and choose custom background color here.
6.3 Colors
You can change general color settings, and also can override color settings for specific elements, like site header, sidebar, site footer, etc.
General Color Settings
Please go to theme customizer > General > General Colors, there you can:
Choose a basic color scheme for your site: Light or Dark.
You can choose an accent color. The accent color will be applied to links (hover state), buttons, and other highlighted elements.
You can also modify text/background colors for the 2 color schemes.
6.4 Site Header
Site Header Options
Please go to theme customizer > Site Header, there you can:
Navigate to Header Layouts: Choose a site header layout from 6 layouts.
Navigate to Logo Image: Upload a logo image and set its width. More details can be found in this sub chapter: Logo Image.
Navigate to Social Menu: Show or hide Social Menu in site header.
Navigate to Header Colors: Choose the default color scheme of site header, change the background, choose a header image (as site header's background).
Navigate to Misc. (Search/Color Switcher/...): There you can enable some miscellaneous buttons:
Search Button: Click to display a fullscreen search.
Popup Signup Form Button (Requires "MC4WP" plugin)
Color Scheme Switcher: Visitors can click this button to switch color scheme between light and dark.
Navigate to Fullscreen Search: Tweak settings for the fullscreen search feature.
Please Note:
If you choose "Horizontal 4" as "Header Layout", to display a menu in the site header, you need to set the menu to this menu location: "Header Left Menu".
For more information, please read this chapter: Menu for Site Header Horizontal 4.
6.5 Logo Image
Please open the WordPress customizer and navigate to Site Header > Logo Image. You will find the following options:
Logo – Upload your custom brand image then display it as site logo in the site header.
If you have not enabled the Color Switcher button, you can just upload a logo image here, and ignore more options as listed below.
Logo Width – You can set different logo widths for desktop and mobile devices. 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.
Or, you can upload a SVG logo - If you need to upload a SVG logo, please use this plugin: Safe SVG or SVG Support.
The following options are optional, you can upload logo images as needed for these options:
If you want to set different logo images for desktop and mobile devices, and you have not enabled the Color Switcher button,
please also upload a logo image for one of the following 2 options:
Mobile Logo for Light Scheme: If your site header is set to Light Color Scheme.
Mobile Logo for Dark Scheme: If your site header is set to Dark Color Scheme.
If you have enabled the Color Switcher button, please also upload logo images for the following 4 options:
Logo for Light Scheme
Logo for Dark Scheme
Mobile Logo for Light Scheme (If you do not intend to use a different logo image on your mobile device, please select the same logo image as "Logo for Light Scheme" here)
Mobile Logo for Dark Scheme (If you do not intend to use a different logo image on your mobile device, please select the same logo image as "Logo for Dark Scheme" here)
6.6 Fullscreen Menu
Please open the WordPress customizer and navigate to Appearance > Customizer > Fullscreen Menu.
There are 2 sub sections:
Menu Area
Your site primary menu will be displayed in the fullscreen menu. In addition, you can choose to show the following elements:
Search form
Copyright Text (or any custom text)
To know more details about how to set up menus, please read Menu section in this documentation.
You can also change the fullscreen menu background color, background image and text color there.
Widget Area
In the sub section, you can change the background color and text color for the Widget Area in the fullscreen menu.
You can add some widgets in this area. This area will not show if no widgets added.
To add widgets, please navigate to your website dashboard > Appearance > Widgets > add widgets to
Fullscreen Menu Widget Area. (Beginner Tutorial: How to Add and Use Widgets in WordPress)
6.7 Site Footer
Please go to Appearance > Customizer > Site Footer, there are 3 sub sections:
Newsletter Signup Form – Display a newsletter signup form in the site footer. You can change the background color and choose a background image for this section.
Site Footer Bottom - You can show the following content in this area:
Display a footer bottom menu (create a menu and assign it to this menu location: "Footer Bottom Menu")
Display a logo
Add the copyright text, or any text you like.
6.8 Typography
Please go to Appearance > Customizer > Typography to customize font options for text.
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 900+ Google Fonts are included in the drop down lists.
Heading Font Family – This font will be used for all titles (post title, page title, widget title…) and headings (< h1 > to < h6 >).
Text Font Family – It’s the font family for the main text content.
There are 2 options for each type of text:
When selecting Default Font - Then a native system font stack will be used. This font stack provides support for a large number of languages.
If you want to use a Google Font, please select "Google Font" from the list, and then the dropdown list of all Google fonts will show. You can choose a Google font.
Font Options for Each Type of Text
There are more options (font weight, font style, text transform…) for you to customize each type of text:
Post Title
Content Text
Excerpt (for archive)
Page Title
Post Excerpt
Homepage Section Title
How to upload and use custom fonts?
If you don't want to use the Google Fonts, you can use a third-party plugin to upload font files for custom fonts, and then add simple CSS code to use these custom fonts.
Please follow the steps below.
Upload the font files to your website (you can use this plugin). For example, we have uploaded the font files of two custom fonts to our site.
When adding a new font, please enter a name for the font. For example, the names of the custom font files we added to our site are "Chilanka" and "MajorMono".
You can name the font whatever you want without using the same font name as ours.
Upload custom font files to your website.
Add code to use these 2 fonts. Please add the following code to your customizer > "Additional CSS" section:
Then please change the values to the names of your custom fonts. Please refer to the screenshot below. You can see that we changed the value of "--heading-font" to Chilanka and changed the value of "--body-font" to MajorMono.
Use custom fonts
Save the changes. Done. If you don't see the changes, please try to clear the website cache and the browser cache, and then refresh the page to check again.
After adding the code, the website will use the font added for "--heading-font" as the font for all headings, and the font added for "--body-font" will be used as the font for the content text.
6.9 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 AGAIN. 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:
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").
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 General > Instagram >
find "Using Instagram Token" option, tick the box, and save the changes. After that, please click on the "Clear Cache" button.
Enable "Using Instagram Token" option
Select one of the feeds you created.Select one of the feeds you created
Done.
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 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.
Download images from Instagram to my website server
Click to manually download the latest images from your connected Instagram account to your website.
This way the images can be stored on your website and can be optimized by the image optimization plugin to reduce the total page size and load time.
Please note: because downloading pictures requires connecting to Instagram and downloading takes a certain amount of time, this feature requires
manual operation by the webmaster. When you upload new pictures on Instagram, if the Instagram Cache expires, the latest pictures of
Instagram will be displayed on the website, but these pictures do not exist on your website, their source is still the Instagram website.
Only when you log in to your website and manually operate, these new pictures will be downloaded to your website.
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?
Please check by following the steps below:
Please check whether the required plugin "Alpaca Extension" is installed and activated.
If you update the theme, please make sure you also update the required plugin "Alpaca Extension".
Please check if you have enabled the "Instagram" feed in your site footer.
Please make sure your Instagram account is public.
6.10 Image Loading
Optimizing the image loading method can also optimize website performance.
In the customizer, please navigate to General > Image Loading, then you will find these 3 options.
Progressive Image Loading
Lazy Loading
Use original size images throughout the site
1. Progressive Image Loading
What is "Progressive Image Loading": This is a modern web technique that is being used on many popular websites. When the page loads,
before the large image is successfully loaded, a small blurred image is displayed first. After the large image is successfully loaded, then fade in to the large images.
This is for better performance and user experience.
However, using this technique will also increase the total page size: because additional small thumbnails will be loaded.
This feature is enabled by default. You can choose to disable this feature if you don't want to load these additional small thumbnails.
2. Lazy Loading
Many website optimization plugins provide the "lazy loading" feature. Alpaca theme also provides this feature. This feature makes the page load faster.
As mentioned above, when "progressive image loading" is enabled, your total page size will increase. So you can also enable the "Lazy Loading" feature,
and then use a page speed test tool to test the website, you will find that the total page size will be reduced.
This is because when the "progressive image loading" and "Lazy Loading" features are enabled, only small thumbnails are loaded on the page at the beginning, and the large images are loaded
only when the screen scrolls to the image. When you use the page speed test tool to test the website, only the large images of the first screen will be
loaded, and the large images of the rest of the page are not loaded, so in the page speed test results, the total size of the page will be less than
the actual total size of the page.
Please do not use the theme built-in image loading optimization features and third-party plugins' image loading optimization features (such as "lazy loading") at the same time.
For more details, please refer to Speed & Performance - Optimize image loading.
3. Use original size images throughout the site
Please do NOT enable this feature unless it is necessary.
When using Alpaca, like many other premium WordPress themes with optimized features, the images you uploaded to your WordPress site will be saved into different sizes
and will be used for different places. However, if you think some images on your page are not clear enough, you can enable this feature, so that the original images will be used.
Please use this feature with caution. Activating this function can ensure that the picture is clearer but at the same time will increase the page file size and loading time.
Please optimize all images before uploading them to avoid uploading images that are too large (please refer to Optimizing images).
Before Single Post Content -
The ad you add here will be displayed before the content of every single post.
Please open the WordPress Customizer and navigate to "Advertisement" > "Before Single Post Content". There you can upload an ad banner image, or
embed ad code (e.g. Google AdSense).
After Single Post Content -
The ad you add here will be displayed after the content of every single post.
Please open the WordPress Customizer and navigate to "Advertisement" > "After Single Post Content". There you can upload an ad banner image, or
embed ad code (e.g. Google AdSense).
Before Single Page Content -
The ad you add here will be displayed before the content of every single page.
Please open the WordPress Customizer and navigate to "Advertisement" > "Before Single Page Content". There you can upload an ad banner image, or
embed ad code (e.g. Google AdSense).
After Single Page Content -
The ad you add here will be displayed after the content of every single page.
Please open the WordPress Customizer and navigate to "Advertisement" > "After Single Page Content". There you can upload an ad banner image, or
embed ad code (e.g. Google AdSense).
Google AdSense Auto Ads
If you are using Google AdSense Auto Ads, Google will automatically place ads where they are 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.12 Yoast SEO Breadcrumbs
Since v1.4.0, we provide a feature to display the Yoast SEO breadcrumbs on the single posts, single pages and archive pages.
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.
Please install and activate the third party plugin Yoast SEO.
On your website dashboard, please navigate to SEO > Search Appearance > Breadcrumbs,
enable the feature.
Enable Yoast SEO Breadcrumbs.
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).
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,
please open the WordPress customizer and navigate to General > Breadcrumbs > Then you can choose to display/hide
the Yoast SEO breadcrumbs on different pages.
Show Yoast SEO breadcrumbs on Pages
6.13 Animation
Since v1.4.0, we added the options to enable/disable the following animations:
Posts Entrance Animation - The fade in effects of posts archive.
Post & Page Header Image Entrance Animation - The fade in effects of the background image of the post/page header,
including the single post header, single page header, archive (category, tag, author, etc.) page header.
You can find these options in the Customizer > General > Animation section.
7. Menu
7.1 Manage Your Menus
Alpaca theme supports 4 menu locations:
Primary Menu - supports at most level 3 menu (Parent Menu > Sub Menu > Sub Menu)
Social Menu - Level 1 Menu (No sub menu)
Header Left Menu (only for Horizontal Header 4) - supports at most level 3 menu (Parent Menu > Sub Menu > Sub Menu).
Footer Bottom Menu - Level 1 Menu (No sub menu)
To manage site menus, we need to locate the WordPress Menus panel.
On your website admin panel, 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).
When editing a menu item, check the box of "Open link in a new tab".
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.
Enable Link Target Option
7.2 Primary Menu
The Primary Menu will be displayed in the site header when site header layout is Horizontal Header 2/3 & Vertical Wide.
And it will also be displayed in the fullscreen menu (mobile menu).
On your website dashboard, go to Appearance > Menus > Edit Menus.
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.
Find "Menu Settings" option > "Theme locations", check the box before "Primary Menu".
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).
Manage Primary Menu in customizer
7.3 Menu for Site Horizontal Header 4
When selecting Horizontal Header 4, a short menu will be displayed on the left side of the site branding (logo/site title/tagline).
Please see this demo site.
Therefore, please set a menu to this menu location: "Header Left Menu".
The Primary Menu will be shown in the fullscreen menu (mobile menu, too). So please don't forget to assign a menu to this menu location.
7.4 Social Menu
The Social Menu can be used in following places:
In the widget areas (sidebar / site footer / fullscreen menu widgets area) - Alpaca Social widget;
In the widget areas - Alpaca Profile widget (after checking the "Display Social Icons" option);
In the site header.
Please follow the instructions 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".
Click on "Save Menu" button.
Please see the screenshot of editing the social menu as reference:
Manage Social Menu
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).
Manage Social Menu in customizer
Open the social icon link in a new tab when click
When create/edit a menu item, tick the box before “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.
Click on “Save menu” button to save the changes. Done.
Open the social icon link in a new tabOpen the social icon link in a new tab
Display social icons in site header
Go to Appearance > Customize > Site Header > Social Menu, find the option Display Social Menu. Check the box to show your social menu in the site header.
Display social icons in fullscreen menu's widgets area
Go to Appearance > Widgets, find the custom widget Alpaca Social,
drag and drop it to add this widget into "Fullscreen Menu Widget Area".
Add social icons into sidebar
Go to Appearance > Widgets, find the custom widget Alpaca Social,
drag and drop it to add this widget into "the "Main Sidebar". Then you can choose to enter a title for it.
Add social icons into site footer's widgets area
New Feature added in v1.8
Go to Appearance > Widgets, find the custom widget Alpaca Social,
drag and drop it to add this widget into "the "Footer Widget Area 1 " or "Footer Widget Area 2". Then you can choose to enter a title for it.
Add social icons into site footer bottom
New Feature added in v1.8
Go to Appearance > Site Footer > Site Footer Bottom, find Display Social Menu, check the option to show the social menu in the left column of the site footer bottom area.
Please note: If you set up a Footer Bottom Menu, it will be replaced by the Social Menu after activating this option.
7.5 Mega Menu (Posts in Menu)
What is Mega Menu?
"A mega menu is typically defined as a drop down interface that is triggered by the user hovering over a link or defined area.
This dropdown usually shows all options in one main, mega-panel and oftentimes groups related topics into categories."
In short, it is a full-width dropdown menu in a navigation bar.
In Alpaca theme, the Primary Menu supports mega menu.
Display at most 4 recent posts of a category in the dorp down menu
Category mega menu - displaying 4 most recent posts of a category.
Go to Appearance > Menus, make sure you are editing the primary menu.
Click on Screen Options button located on the top right corner.
Tick the box of CSS Classes.
Menu CSS Classes Property
To display posts of a category in the menu, add a category into the menu.
Then click on the category item in the menu,
enter mega-menu into CSS Classes field.
Add class mega-menu
If the category item is a parent category that has several sub categories, then in the mega menu it will display at most 3 recent posts of
each (sub) category, and a list of sub categories.
Display categories with images.
To display the category list with images in the menu, add a few categories as the sub menu items of a parent item. Then
enter mega-menu cat-list into CSS Classes field.
Display categories with images.
For example, to create a mega menu as shown in the screenshot above, please follow the steps below:
Go to Appearance > Menus, make sure you are editing the primary menu.
Click on Screen Options button located on the top right corner.
Tick the box of CSS Classes.
Menu CSS Classes Property
Add a few categories as the sub menu items of a parent item.
Then click on the parent item in the menu,
enter mega-menu cat-list into CSS Classes field.
Display categories with images.
The Category Image of each category can be added when editing a category item, please refer to Category Archive.
If you have added many categories as a mega menu drop down:
By default, the image width of each category = drop-down menu container width / number of categories. For example, if there are 8 categories, the image width of each category will be
one-eighth the width of the drop-down menu container.
Therefore, if you add many categories to a mega menu, such as 30 categories, the image of each category will be very small and may not even be visible. There are 2 options to resolve this problem:
Option #1 - Change the number of columns of category images to 10:
Edit your menu, and add column-10 into CSS Classes field.
Add column-10 to the classes box
Option #2 - Add custom CSS to change the number of columns to another value:
In the line of min-width: calc(100% / 5);, you can change the number
to the number of columns you want. "5" represents category images will be displayed in 5 columns.
Please check this chapter to know how to add custom CSS to your website: Add Additional CSS.
Display simple links in the mega menu in 2/3/4 columns
If you'd like to display a mega menu like the following:
Simple links in the mega menu - in 2/3/4 columns
Please follow the steps below:
Edit the primary menu. When add items into the primary menu, drag and drop to create multi-level menus.
The columns of the mega menu will depend on the number of second-level sub-menus.
For example, if you want to display 4 columns in this mega menu, add 4 second-level submenu items.
Drag and drop to create multi-level menus.
Click on the parent item, enter mega-menu simple into CSS Classes field.
If you don't see the CSS Classes field, please enable it (see this screenshot).
Add class to the parent menu item
Save the changes of the menu.
Done.
8. Archive Pages
8.1 Posts General Options
Please go to Customizer > General > Posts General Options. There you can:
Reading Speed ( Per Minute ) - Use this value to calculate how many minutes it takes to read a post. More details can be found here.
Change the text showing on the "read more" buttons.
Choose a Pagination Style for posts archive - there are 3 options:
Classic Pagination (Prev + page numbers + Next)
Load More Button
Infinite Scroll
Load Post Metas ( like count and view count ) Dynamically with AJAX - Recommend enabling this option if any caching plugins are used on your site.
Change the Post Excerpt Length for each posts layout.
Reading Time Settings
Starting from Alpaca v1.3, we have added an option to calculate the reading speed based on the number of characters. When the website language is an Asian language,
it is not possible to calculate the reading speed by "word count", because Asian languages are written with no spaces between words.
Therefore, if your website is using an Asian language, please change the unit from "words" to "characters".
Reading Time Setting
If your website is bilingual/multilingual and contains Asian languages, you can choose to count by words for the main language of the site (for example, non-Asian languages)
here, and then when editing an article in Asian languages, find "Theme Settings" > "Reading Settings" > choose "Custom" > and change the counting unit to "characters".
Reading Time Setting - for a specific single post
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 > Archive Pages > Blog Page. There you can:
Choose the sidebar layout
Select a Posts Layout
Meta Visibility – You can choose which post meta to show in posts archive.
Number of Posts displayed Per Page.
8.3 Category Archive
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, then on the category archive page, this image will be used as the page header background image.
And this image will also be used for the custom widget: Alpaca Category widget.
Category Image
General Category Page Layout
To change the page layout and archive styles for all category achieve pages, please go to Customizer > Archive Pages > Category.
There you can change the following settings:
Choose the sidebar layout
Select a Posts Layout
Meta Visibility – You can choose which post meta to show in posts archive.
Number of Posts displayed Per Page.
Please note: a category archive only displays the list of posts, so users cannot add a slider or other home widgets to an archive page.
Individual Category Page Layout
Go to Posts > Categories, when adding a new category or edit an existing one, you will find this option: Category Layout Customization.
Tick this option, more settings will show. Then you can change the layout of this category archive page.
8.4 Author Archive & 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.
Find Author Archive
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.
Add author archive page to 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.
Author Biographical Info & Social Media Icons
Edit Author Profile Picture
To add or edit the author profile picture, please visit https://en.gravatar.com/ for more information.
Author Page Layout
To change the page layout and archive styles, please go to Customizer > Archive Pages > Author. There you can customize:
Choose the sidebar layout
Select a Posts Layout
Meta Visibility – You can choose which post meta to show in posts archive.
Number of Posts displayed Per Page.
Hide Author Info Box on Single Post
To hide the author info box after single post content, please go to Customizer > Single Post > After the Post > Display Author Info Box, then uncheck the box.
8.5 Tag Archive
Go to Posts > Tags, when adding a new tag or edit an existing one, you can upload an image for this tag, then on the tag 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 > Tag.
There you can change the following settings:
Choose the sidebar layout
Select a Posts Layout
Meta Visibility – You can choose which post meta to show in posts archive.
Number of Posts displayed Per Page.
8.6 Date-based Archive
You can also customize the layout of date-based archive pages. Please go to Customizer > Archive Pages,
then go to Date based panel. There you can change the following settings:
Choose the sidebar layout
Select a Posts Layout
Meta Visibility – You can choose which post meta to show in posts archive.
Number of Posts displayed Per Page.
9. Posts
9.1 Featured Post
You can choose some posts and set them as "Featured Post" manually. Then you can add these posts into many different places: Homepage Featured Area, Home Widgets and Alpaca Posts widget.
On your dashboard, go to Posts > All Posts, then you will see the column Featured, tick the box of some posts to mark
them as the featured posts.
Featured Posts
Alternatively, you can also change the "Featured" status of a post in the Gutenberg editor:
Change the "Featured" status of a post in the Gutenberg editor
9.2 General Single Post Options
Please go to Customizer > Single Post > Post, there you can set the default post template and sidebar layout for all single posts,
and you can control more general settings for single posts.
Options:
Default Post Template - You can change the post template for each post while editing that post. Please see the next sub-chapter Specific Single Post Options.
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: Categories/Author Photo/Author Name/Publish Date/View Counts.
Footer Meta - Display the selected post meta in the footer of the post, including: Tags/Comment Counts/Like Counts/Social Sharing Icons.
Show Social Media Sharing Buttons after Post Content - Display or hide the Social Media Sharing Button after post content.
Show Sticky Social Media Sharing Bar - Display or hide the sticky Social Media Sharing Buttons.
Show Reading Progress Bar
9.3 Specific Single Post Options
In Gutenberg Editor
Change Post Template: In the Settings sidebar, click the Theme Settings Toggle Button,
and find "Template & Layout":
Alpaca theme provides 10 post templates.
You can choose a default template for posts (this option is in the Customizer), and you are also able to choose different templates for different posts.
If you choose "Default", then this post will use the default template you have selected via Customizer >
Single Post > Default Post Template.
If you choose any other template, then it will ignore the default post template setting. And if you change the default post template in Customizer, the change will not affect this post.
Single Post Options
More options for a single post can also be found here. Please click on each setting title to expand the sub panel.
Featured Post Settings - Mark this post as a featured post.
When editing a post, scroll down the page and you can find the "Alpaca Single Post Options" panel. There you can:
Specific Single Post Options
Featured Post - Check the box to mark this post as a featured post.
Like Counts - Click the "Edit" link first, then you can edit the like counts value.
View Counts - Click the "Edit" link first, then you can edit the view counts value.
Change the Post Template
Alpaca theme provides 10 post templates.
You can choose a default template for posts (this option is in the Customizer), and you are also able to choose different templates for different posts.
If you choose "Default", then this post will use the default template you have selected via Customizer >
Single Post > Default Post Template.
If you choose any other template, then it will ignore the default post template setting. And if you change the default post template in Customizer, the change will not affect this post.
9.4 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. To display them, please follow the steps below:
Please open your WordPress customizer, then go to General > Social Share Buttons >
then find the Social Icons option. Tick the checkboxes to show selected buttons.
Please go to Customizer > Single Post > Post, enable Show Social Media Sharing Buttons after Post Content.
You can also choose to enable Show Sticky Social Media Sharing Bar.
10. Pages Settings
Alpaca provides some features specifically for Pages.
When editing a page, in the Settings sidebar, click the "Theme Settings" toggle button and then you will find the "Page Layout" option.
Choose Page Template.
10.2 Hide Page Header
You can hide the default page header for a page.
In the Gutenberg editor, click the "Theme Settings" toggle button. Then click on "Page Header" to expand the sub panel, and then enable the "Hide Page Header" option.
Hide Page Header.
10.3 Add sub title of a page
In the Gutenberg editor, click the "Theme Settings" toggle button. Then click on "Page Header" to expand the sub panel, and then
you can enter the sub title.
10.4 Advanced Options
You can add custom CSS class(es) to a specific page.
What is this for?
This is an advanced function and is usually used by users with knowledge of writing code. You can add specific CSS classes to the "body" tag
of a specific page, and then add corresponding CSS code or JavaScript code for these classes to achieve specific results.
In the Alpaca theme, we have provided some preset styles for the following 6 special CSS classes. You can choose to add some of these CSS classes to a page according to your needs.
When entering multiple classes, please separate the classes with spaces.
hide-site-header -
After adding this class, the entire site header (including the logo, site title, tagline, menu, top bar) will be hidden for this page.
hide-footer -
After adding this class, the entire site footer will be hidden for this page.
hide-footer-signup -
After adding this class, the newsletter signup form in the site footer will be hidden for this page.
hide-footer-ins -
After adding this class, the Instagram feed in the site footer will be hidden for this page.
no-padding-bottom -
If you want to remove the padding bottom after page content on a page, you can add this class to the page.
no-padding-top -
If you want to remove the padding top before page content on a page, you can add this class to the page.
Please read the following instructions to learn how to add custom CSS classes to the page.
How to add custom classes to a page
In the Gutenberg editor, click on the "Theme Settings" toggle button. Then click on "Advanced" to expand the sub panel,
and then you can add custom classes. The class(es) entered here will be added to the <body> tag of this page.
Advanced Feature - Add custom classes to a page.
11. Newsletter Signup Form
11.1 Setup Newsletter Signup Form
Alpaca 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:
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.
Enter MailChimp API
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.
Get MailChimp API Key
After entering your MailChimp API key, you will find the "Your Mailchimp Account" option, and your Mailchimp lists will be displayed.
Connect to your MailChimp account and get your MailChimp lists
Step 2 - Create the Newsletter Signup Form
Please navigate 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.
Create or modify the Newsletter Signup Form
You can also choose to copy the code below and paste into the form field, and then change some text to suit your website:
<p>
Subscribe to our weekly newsletter. Get the latest news about architecture, design, city, and inspiration.
</p>
<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 have read and 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.
Select at least one list
11.2 Add Newsletter Signup Form in sidebar (or other 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.
MailChimp Sign-Up Form Widget
11.3 Add Newsletter Signup Form to homepage
You can add the newsletter signup form to your homepage (when your home page is customized by using the WordPress customizer - find out more).
Please go to Customizer > Home Page > Home Widgets Area 1(2) > Home Widgets, click on the button "Add a Widget",
then click on "MailChimp Signup Form". And you can tweak the home widget's colors, background, and more styles.
If you have enabled the Popup Signup Form Button in the Site Header Options, when visitors
click the Popup Signup Form Button, a popup Newsletter Signup Form will show.
To customize the look of this popup form, please open the customizer and navigate Popup Signup Form.
Customize the look of Popup Newsletter Signup Form
11.5 Auto-Popup Newsletter Signup Form
And the Newsletter Signup Form can be set to auto-popup.
Auto-Popup Newsletter Signup Form
11.6 Add Newsletter Signup Form after the content of each single post
Please open the customizer and navigate Single Post > After the Post > find Display Newsletter Signup Form,
check the option and more options for the form style will be displayed.
Signup Form after the content of each single post
11.7 Add Newsletter Signup Form to the Site Footer
Please open the customizer and navigate Site Footer > Newsletter Signup Form > find Display Signup Form,
check the option and more options for the form style will be displayed.
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.
Setup your product image size
In this article, you will find the detailed information about how to setup your product image dimensions.
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.
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:
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.
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 Alpaca theme (not just the installable WordPress theme zip file), unzip it and you will find WordPress Child Theme > alpaca-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 alpaca.zip (the parent theme),
so your custom code changes will not be overwritten (because they are all in the child theme).
Please note: Writing custom code for your child theme is related to Item Customization which is not included in the support we could provide.
More details can be found here.
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:
Please make sure you are currently using the Alpaca parent theme. Then install and activate the plugin Customizer Export/Import.
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 Alpaca parent theme.
You will get a file called "alpaca-export.dat".
Export the customizer settings of the Alpaca parent theme
Please close the customizer, and go back to your website dashboard.
Now, please switch to (activate) the child theme, then open the customizer, go to "Export/Import" section, and then import the "alpaca-export.dat" file. Done.
Import the customizer settings
After switching to the child theme, if you find that menus have disappeared, please reassign the menus to the menu locations.
14. Shortcodes
Currently we have provided 15 shortcodes for content:
Author List - Display authors of your site. 5 layouts to choose from. And can show all authors or choose by name/role.
Drop Caps - Style the first letter of a selected paragraph. 5 styles to choose from.
Highlights - Select some words to add marker pen highlight effect. 2 styles to choose from.
Tweet It - Select content and allow readers to tweet the sentence by one click. Selected content can be inline or a whole paragraph.
But please keep it short because Twitter only allows 140 charcaters.
Row - Create column layouts on your pages/posts. You need to wrap the column shortcodes within row shortcodes.
Column - Create column layouts on your pages/posts. This shortcode allows to add a column into an existing row easily.
Button - Add buttons. 4 different sizes. Unlimted colors.
Divider Line - Add divider lines. You can choose line's style, size and color.
Tabs - Create a single content area with multiple panels, each associated with a header in a list.
Tab - Add a single tab into an existing tabs block. You need to wrap the tab shortcodes within tabs shortcodes.
Accordions - Displays collapsible content panels for presenting information in a limited amount of space.
Accordion - Add a single accordion into an existing group of accordions. You need to wrap the accordion shortcodes within accordions shortcodes.
Video Block - Display an image with a video play button on it. Click the play button to pop up the video.
Inline Post - Display a selected post in the content.
Alpaca Blog Posts - Display a group of selected posts in the content.
To add shortcodes into content, when edit a post or a page, click on the Add Shortcode button above the editor.
Add Shortcode Button
Then choose which shortcode you'd like to add in the popup panel, then choose which style of this shortcode you want to use.
Shortcode Panel
For example, if you'd like to insert a shortcode of drop cap, you can select a paragraph, and then click on the "Add Shortcode"
button to open the shortcodes panel, then click on "Drop Caps", there you will see the options you can choose for a
drop cap. Click on "Insert Shortcode" button to wrap the selected content with this shortcode.
Shortcode settings - Drop Caps
The shortcode for drop caps will look similar to this:
An example of the shortcode of drop cap.
Please note: most of the shortcodes have an opening tag and a close tag
and text content needs to be put between them. Please see below:
[lo_drop_caps] Content goes here. [/lo_drop_caps]
Or,
[lo_button size="large" url="#"] Contact Us [/lo_button]
The shortcodes for Author List and Divider Line don't have a close tag because you don't need to add any text content for these 2 shortcodes.
15. Gutenberg Ready
15.1 About Gutenberg
Gutenberg is the new editor of WordPress core.
If you are new to Gutenberg, you may like to read this doc first.
How to get Gutenberg?
Gutenberg is added into WordPress core since WordPress 5.0. You can update your WordPress to the latest version.
If you are not going to update your WordPress, you can download and install Gutenberg Plugin version.
If you also want to keep the Classic Editor, you can download its plugin version.
Theme built-in features + Gutenberg
Because there are many differences from the Classic Editor, some theme built-in operations also change in the new editor.
Please continue reading for more details.
Please note: Gutenberg is still improving (fast and frequently), its code/logic may change in a newer version.
Therefore, sometimes new issues may arise after updates. We will pay close attention to it and we will be grateful for any problem report.
Alpaca theme built-in image galleries - Slider Gallery & Justified Gallery have been converted into Gutenberg Blocks.
Let's take the Justified Gallery Block for example:
Step 1 - When adding a block, find Theme Blocks, click the Justified Grid Gallery to add it to the content area.
Theme built-in Justified Gallery Block in Gutenberg Editor
Step 2 - Then you will see the block has been added. When selecting this block, the settings for this gallery will show in the right sidebar. Click on the "Media Library" button
to open the Media Library where you can create a new gallery.
Justified Gallery Block Settings
Step 3 - In the Media Library panel, you can upload new images, or select some existing images, and then click "Create a new gallery" button.
Select some images to create a gallery
Step 4 - Then you can edit this gallery: reorder images, remove images, add captions, add new images into this gallery. Then click "Insert gallery" button.
Edit a gallery
Step 5 - Now the gallery can be previewed in Gutenberg.
Justified Gallery Block preivew in Gutenberg Editor
It is similar when adding a Slider Gallery:
Slider Gallery Block is added in Gutenberg EditorSlider Gallery Block preivew in Gutenberg Editor
15.3 Alpaca Single Post/Page Options
In the Classic Editor, Alpaca Single Post/Page Options are meta boxes which were displayed below the post editor. We have also redesigned these settings
to fit in the Gutenberg UI - Sidebar. So, if you edit a post/page in Gutenberg, you can find the Single Post/Page Options in the editor sidebar.
For example, when editing a post in Gutenberg editor, please click on the "Theme Settings" toggle button to display the Single Post Options.
(When editing a Page, the "Theme Settings" will show Single Page Options.)
Alpaca theme Single Post/Page Options integrated to Gutenberg Sidebar
The options are organized into groups, click on each group heading to expand the group and show its settings.
Please make sure the "star" icon is enabled to pin Theme Settings toggle button to Gutenberg Toolbar:
Theme Settings toggle button - Pin to Toolbar
If the "Theme Settings" is unpinned from the toolbar and you cannot find it, please click the "Show more tools and options" icon, then
you can find "Theme Settings" in "Plugins".
Theme Settings toggle button - Pin to Toolbar
15.4 Post Format Media
If the post format is Gallery / Video / Audio, the media files can be picked in Theme Settings section. Please
see the screenshot below as reference:
Set media for Post Format
15.5 Theme Shortcodes are converted to Blocks
The theme built-in shortcodes have been converted into Gutenberg Blocks.
The following 11 shortcodes can be founded in "Add Block" > "Theme Blocks".
Author List
Divider Line
Theme Button
Tweet It (paragraph)
Tabs
Accordions
Video
Slider Gallery
Justified Gallery
Inline Post
Alpaca Blog Posts
Theme Shortcodes are converted to Gutenberg Blocks
The following 3 shortcodes are integrated with Gutenberg built-in block: "Paragraph".
Drop Caps
Highlight
Tweet It (inline)
Drop Caps - when editing a paragraph, enable the "Drop Cap" option, then select a style from "Drop Caps Settings" drop down list.
Drop Caps shortcode in Gutenberg editorDrop Caps Settings
Highlight & Tweet It (inline):
Highlight & Tweet It (inline) shortcode in Gutenberg editor
15.6 Theme Blocks - Rolling Text
When editing a post/page in the Gutenberg editor, you can find the Rolling Text block and add it to content.
Then, in the sidebar you can find the settings of this block:
Enter Text - Please enter the text. Please note: If the input text is not long and does not exceed the width of the page
(or does not exceed the width of the page on the wide screen), the animation effect may not be ideal. In this case, please copy and paste the text several times to increase the length of the text.
Custom Font Size - You can set the font size.
Animation Length - Set the duration of the animation, for example, 60 seconds. If you want the text to roll faster, you can change the value smaller.
Stretch the rolling text to full width
Please add a Group block and set its "Alignment" to "Full Width".
In the editor sidebar, navigate to Advanced > Additional CSS class(es), enter fullwidth.
And then add a Rolling Text block inside of the Group block.
You can also change the background color of this Group block.
Add a background image to the rolling text
Please add a Cover block and set the background color/image.
And then add a Rolling Text block inside of the Cover block.
Stretch the Cover block and the rolling text inside to full width: Please select the Cover block and set its "Alignment" to "Full Width". And then, in the editor sidebar,
navigate to Advanced > Additional CSS class(es), enter fullwidth.
16. Translation
When working with Alpaca 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.
In your WordPress dashboard, go to Settings > General > Site Language, choose the target language in the list.
Get started
When using Loco Tranlate, on your website dashboard, please go to "Loco Translate" > "Themes" > find "Alpaca" (or "Alpaca Child", depending on which theme is activated). Click on "Alpaca" then you will be able to add a new language,
or edit the translation of an exisiting 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".
16.3 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 News" (from one English word to another English word), please follow the steps below:
Install and activated the third-party plugin: "Loco Translate". You can read this subchapter of the documentation for the basics about this plugin.
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)".
Check and confirm the site language.
On your website dashboard, please go to "Loco Translate" > "Themes" > find "Alpaca".
Click on "Alpaca" then you will be able to add a new language. So we add "English (United States)", and then start translating.
You can enter a keyword to search. For example, we enter "Load More Posts" and search.
Select the source text at the top, and enter your "translation" in the pane at the bottom: "Load More News".
Save.
You can repeat these steps to change other text.
17. Bilingual / Multilingual - Polylang
If you are going to create a bilingual or multilingual website, we recommend using Polylang or WPML.
The differences between these 2 plugins:
Polylang is a free plugin. WPML is a premium (paid) plugin (and you need Multilingual CMS version).
If using Polylang, you need to translate theme strings (included in the .pot file) by using Poedit or Loco Translate. If using WPML, all the text can be translated by using WPML.
When using Polylang, if you need to make your WooCommerce shop to be multilingual, you need to purchase their Polylang for WooCommerce Extension.
When using WPML, the feature is already included when you purchasing WPML.
And there may be some other differences.
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 Alpaca theme and
the third-party plugin Polylang.
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.
Special – Home Widgets: Please continue reading to know more information in Step 4.
Newsletter Signup Form: Please find the details in Step 5.
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.
Please note: if you have imported demo data, then some strings are entered into the customizer during the demo importing process, then you will need to translate these strings by Polylang.
Please see more details in "Step 3 – 2. Translate User Defined Strings".
Step 3 – Translate Dynamic Content with Polylang
Create Languages:
After installing Polylang, please create languages. For example, if your site will have 2 languages, English and German,
you will need to create 2 languages, and set one of them to be the default language. Please read this article:
https://polylang.pro/doc/create-languages/.
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.
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
Alpaca 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.
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 note: for custom widget Alpaca Category, you have to create one widget per language,
because you have to choose different categories for each language.
If your home page is customized by using the Customizer, and you have added some Home Widgets: When creating a bilingual/multilingual site, you will need to create different home widgets for different languages.
For example, on the homepage, we have a home widget displaying the most viewed posts, this home widget has a title "Most Popular".
Expand this home widget, you can find the option "The widget is displayed for:" at the bottom of its settings panel. Choose "English".
Add a new home widget > "Posts", choose the same options as the home widget "Most Popular". Change the home widget title to "Am beliebtesten" ("Most Popular" in German).
Find the option "The widget is displayed for:" at the bottom of its settings panel. Choose "Deutsch".
Save changes and publish.
Step 5 – Translate Newsletter Signup Form
On your website dashboard, please go to Appearance > Alpaca Basic Settings, 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.
Choose a form for a language
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.
Translate the 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.
Translate the form into another language #2
18. 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 Alpaca theme and
the third-party plugin WPML.
If you would like to know the differences between Polylang and WPML, please check this chapter.
18.1 What you will need
Alpaca theme
A recent version of WPML, including the String Translation, Translation Management and Media translation add-ons.
Install and activate Alpaca theme, the required plugin and recommended plugins (please refer to Alpaca Installation).
Install and activate the main WPML components (Please see WPML Getting Started Guide for complete reference):
WPML Multilingual CMS (the core plugin)
String Translation
Translation Management
Media Translation
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:
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.
List of Pages with translation controlsWPML Language box when editing a 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.
Click on the "Pencil" icon to updating the translation
Step 3 - Translating post categories and tags
Translating Post Categories:
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.)
When editing this category, find the Language box, and 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.
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.
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
Step 4 - Translating texts coming from the theme & WordPress Core
The following texts need to be translated on the String Translation screen. (Read more about Theme and Plugin Localization.)
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 Alpaca 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.
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 "Alpaca" and click the Scan selected themes for strings button.
2 - Translating the texts
Please navigate to WPML → String translation page. Then you can:
Select "Alpaca" 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_alpaca" 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.
Navigate to WPML → String translation. Enter "load more" 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
Alpaca theme contains a built-in homepage drag and drop builder in the customizer to create a "Multi-content Homepage".
Please read our documentation to know more details about it: Multi-content Homepage.
When creating a bilingual/multilingual site, you will need to create different home widgets for different languages.
For example, on the homepage, we have a home widget displaying the most viewed posts, this home widget has a title "Most Popular".
Expand this home widget, you can find the option "Display on language" at the bottom of its settings panel. Choose "English".
Add a new home widget > "Posts", choose the same options as the home widget "Most Popular". Change the home widget title to "Am beliebtesten" ("Most Popular" in German).
Find the option "Display on language" at the bottom of its settings panel. Choose "Deutsch".
Save changes and publish.
Home Widget - Display on language
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.
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.
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
WPML - Language Switcher Options
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.
If you need help with using WPML with Alpaca 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.
19. Speed & Performance
"Themes execute the presentation and styling of content, while plugins handle content creation and functionality."
- WordPress code standards and ThemeForest requirements
All WordPress websites require optimization. As the theme author, we follow the WordPress development best practices when creating our products.
But the performance of the website is not determined by the theme or individual plugins.
The performance of the website is determined by the collaboration of multiple factors. Including but not limited to:
In this subchapter, we will introduce some optimization methods we used on our demo site.
Please note: The following are only our general suggestions for optimizing a WordPress website when using Alpaca.
Depending on the actual situation of your website and your specific needs, you may choose to skip certain steps or use other optimization methods
that we have not mentioned.
There is more than one way to optimize a website.
Please kindly note:
The support service of the theme Does Not include providing optimization for a specific website so that it can get high scores on page speed test tools.
(Because the performance of the website is not determined by the theme alone.)
The webmaster needs to take corresponding optimization measures for the actual environment of the site.
19.1 How to improve performance (General Suggestions)
The suggestions in this sub section (19.1) can help you optimize the user experience of your site: that is, when visitors visit your site,
the sensory response speed of the site will be ideal.
If you want to get high scores on website speed test tools (such as Google PageSpeed Insights, Google Search Console, etc.), you also need to use more advanced optimization methods.
This is a useful tutorial we found.
Using the appropriate image sizes on the page will reduce the total page size and loading time.
In short, the page loads faster.
Therefore, after installing and activating Alpaca, if your site already has some images, please regenerate thumbnails.
You can use this plugin: Regenerate Thumbnails.
Please note: What we optimized in the theme is the featured image of the posts. Therefore, the main impact of this optimization is the list of posts.
We cannot guarantee how much your page size can be reduced after regenerating images. It still depends on the content on your page.
2. Optimize image loading
The theme provided the following 2 optimizations for image loading:
Progressive Image Loading
Lazy Loading
To learn more about these 2 features, please check this subchapter. After enabling these 2 features, the total page size will be reduced.
Please note: Do not use multiple plugins with the same function on the same website at the same time. When the theme and multiple plugins
provide the same function, conflicts may occur.
Therefore, if you are using the image loading optimizations provided by the theme, please disable the image loading optimization features provided by other plugins.
If you are using the image loading optimization features provided by other plugins, please disable the image loading optimizations provided by the theme.
Please see the following details:
We recommend using the theme built-in "Lazy Loading" feature. Therefore, if you are using a third-party cache/performance optimization plugin which contains the
"Lazy Loading" feature, please disable the "Lazy Loading" feature provided by the third-party plugin.
However, if you would like to use the "Lazy Loading" feature provided by a third-party plugin, please follow the steps below:
Disable the third-party cache plugin first.
Please disable the theme built-in "Lazy Loading" feature.
Also disable the "Progressive Image Loading" feature provided by the theme.
Then, reactivate the third-party cache plugin.
Clear your website cache, and clear the browser cache. Then refresh the pages to check the results.
3. Downloading Instagram Images to your website to optimize
By default, when displaying your Instagram images on your website, these images are from the Instagram website and they are not stored on your website.
This leads 2 problems:
It takes more time to load these images because they are on an external website.
These images cannot be optimized by the image optimized plugin installed on your website.
Please open your WordPress customizer, then navigate to General > Instagram > then you will find the
"Download images from Instagram to my website server" button. Click the button to manually download these images to your website.
After that, you can use the image optimization plugin to optimize these image. Please continue reading the next subchapter.
4. 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, the background image of "Overlay Header" single post).
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.
5. Installing a Caching/performance plugin
You can use another cache plugin. The following is just a suggestion. Some users may use different cache plugins and their websites should work well.
But the most important thing is:
Please Do Not activate any cache plugins before you finish building the site.
When you need to make any changes to the appearance and functionality of the site, please disable all cache plugins first.
After editing, please reactivate the cache plugin, and be sure to clear the old cache files.
After that, you need to clear your browser's cache. Or, use a browser that has not cached your site to browse your site to see the results.
Please install and activate this plugin: W3 Total Cache. And then please follow the instructions below:
Please navigation to "Performance" > "General Settings" > Enable "Page Cache".
W3 Total Cache Settings - 1
Then also enable "Minify".
W3 Total Cache Settings - 2
And enable "Browser Cache".
W3 Total Cache Settings - 3
Navigate to "User Experience" > Check "Disable Emoji". (We chose to use the theme built-in image loading optimization features, so we did not enable the "Lazy Loading" provided by this plugin.)
W3 Total Cache Settings - 4
Then, please navigate to "Minify". Find the "HTML & XML" section, and tweak the settings as shown in the following screenshot.
W3 Total Cache Settings - 5
Find the "JS" section, and tweak the settings as shown in the following screenshot.
W3 Total Cache Settings - 6
Find the "CSS" section, and tweak the settings as shown in the following screenshot.
W3 Total Cache Settings - 7
If you are using WooCommerce, please find the "Advanced" section and add the pages related to WooCommerce to the "Never minify the following pages" box.
If WooCommerce is not installed on your site, you can skip this step.
W3 Total Cache Settings - 8
Please navigate to "Browser Cache", and enable the options as shown in the following screenshot.
W3 Total Cache Settings - 9
Please note: Since the "W3 Total Cache" plugin is installed on your website to optimize performance, so after updating the theme,
please minify CSS again, and then clear the website cache. Please refer to this subchapter.
19.2 Improve Scores on Page Speed Test Tools
Actual user experience vs Web speed test tool score
After you optimize your website according to the above steps, your website speed will be ideal for website visitors.
If you want to get high scores on website speed test tools:
(such as Google PageSpeed Insights, Google Search Console, etc.) you also need to use more advanced optimization methods.
This is a useful tutorial we found, please check this tutorial for the detailed
explanations and instructions.
Please note that you can test your website multiple times, each test result will be different due to current network conditions.
If you need more help:
Since the support service of the theme Does Not include providing optimization for a specific website so that it can get high scores on page speed test tools (Why? Please click here for details), therefore,
If you need more help, it is recommended that you hire an expert to optimize your website.
You might like to check on Envato Studio.
There are some experts who provide WordPress Speed Optimization Service (Google PageSpeed, GTmetrix, etc.).
20. 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 Alpaca theme and the required plugin "Alpaca 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!
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.
