Before we start on the subject of documentation, you should know that the demonstration that you are going to import is easily self-explanatory which allows you to easily know how to create everything we see in this documentation.
Get Started.
Server requirements
In order to take full advantage of the WordPress Modafolio theme, it is imperative that your environment meets the following specifications. Be sure to follow these requirements carefully to ensure Modafolio runs smoothly:
Operating system: Modafolio is compatible with Mac, Windows and Linux operating systems. Make sure your operating system is one of these for a flawless experience.
WordPress version: To take advantage of all the features of Modafolio, make sure you are using WordPress 5 or higher. We strongly recommend that you use the latest version of WordPress to benefit from the latest improvements and bug fixes.
PHP version: Modafolio requires PHP 7.3 or later. For optimal compatibility, we suggest using PHP 7.4, as per official WordPress recommendations. Your host must support this version of PHP for Modafolio to work properly.
MySQL Version: Make sure your host is using MySQL 5 or newer. This database is essential for the proper functioning of WordPress and, by extension, Modafolio.
Before installing Modafolio, please perform the following steps:
Confirm with your host that your environment meets the above requirements.
Make sure you are using the latest version of WordPress by downloading it from the official WordPress site.
We hope these instructions will help you get the most out of the Modafolio theme experience. In case of questions or problems, do not hesitate to consult the official Modafolio documentation or contact our technical support.
PHP Configuration limits
When utilizing the Modafolio WordPress theme, you may encounter certain challenges, such as demo content import failures and similar issues. These complications often arise from exceedingly low PHP configuration limit settings. Resolving these matters can be achieved by adjusting these limits yourself or by reaching out to your hosting provider to request the following minimum limit adjustments:
Memory Limit: Set memory_limit to 256M.
Input Variables Limit: Increase max_input_vars to 3000.
Execution Time Limit: Extend max_execution_time to 300 seconds.
Maximum Post Size: Adjust post_max_size to 12M.
Maximum Upload File Size: Set upload_max_filesize to 12M.
Allowing URL Opening: Ensure allow_url_fopen is ON.
ASP Tags: Confirm asp_tags are turned OFF.
Increasing limits
Should your web hosting service grant access to modifying PHP settings via the cPanel, you can conveniently log in to your panel and make the necessary adjustments from there.
If this option is not available to you, consider the subsequent methods. Please note that this section requires a certain level of technical proficiency.
- Elevating Max Input Variables Limit
The max_input_vars directive can be configured through the .htaccess, php.ini, or wp-config.php files. It is advisable to elevate the default value to 3000. If your website encompasses numerous menu items, you might consider using 5000 or higher.
In .htaccess:
php_value max_input_vars 3000
In php.ini:
max_input_vars = 3000
In wp-config.php:
@ini_set( 'max_input_vars' , 3000 );
- Extending Maximum Execution Time
Should you encounter messages like "Maximum execution time of 30 seconds exceeded" or "Maximum execution time of 60 seconds exceeded," it indicates that certain processes are taking too long to complete and are timing out. Addressing this error can be approached in various ways.
In .htaccess:
php_value max_execution_time 300
In php.ini:
max_execution_time = 300
In wp-config.php:
set_time_limit(300);
- Amplifying Memory Limit
In .htaccess:
php_value memory_limit 256M
In php.ini:
memory_limit = 256M
In wp-config.php:
define('WP_MEMORY_LIMIT', '256M');
If you encounter challenges or prefer not to attempt the aforementioned techniques, or if they do not yield the desired outcomes, we recommend reaching out to your hosting support team to explore the possibility of increasing your PHP values.
Your satisfaction with your website's performance and functionality is of utmost importance. Please feel free to seek further assistance from our support specialists if required.
Verify your PHP limits
To assess these configurations, you can employ the WP Server Stats plugin, accessible through the installation process. Once installed, navigate to the "Settings" section within the plugin. Here, you'll encounter two columns: the initial column pertains to your installation's settings, while the subsequent column displays the limits set by your hosting provider. Notably, these latter values might be restricted if you've chosen a more economical hosting package.
Should you wish to acquire a comprehensive understanding of your current settings, you have the option to directly communicate with your hosting provider. If deemed necessary, adjustments to these settings can be implemented. It's worth noting that certain hosts might maintain lower PHP limits in an effort to conserve resources. Given that you're investing in these resources, it's entirely reasonable to anticipate optimal value for your expenditure.
Never hesitate to engage with your hosting provider to ensure that your website's performance aligns with your expectations and requirements. Your satisfaction is integral to our commitment to delivering a fulfilling user experience. Feel free to explore further enhancements or seek guidance from our support personnel as needed.
PHP modules
Smooth execution of the demo import process hinges upon the presence and activation of crucial modules such as php-xml, php-dom, and php-xmlreader. Regrettably, the absence or non-activation of these modules can lead to import failures.
To remedy this situation, it is advisable to liaise with your hosting service provider. Kindly request their assistance in the installation of these essential modules. It's worth noting that php-xml, php-dom, and php-xmlreader are widely employed modules, typically included as part of the default setup.
For those adept at managing their own servers, the option to personally install these modules is available. Below is an illustrative example applicable to Ubuntu/Debian systems; however, the specific command varies based on your server and PHP version:
sudo apt-get install php7.4-dom php7.4-simplexml php7.4-xml php7.4-xmlreader
Subsequent to this installation, it is imperative to reboot your server to ensure the new configurations take effect. Execute the following command:
sudo service apache2 restart
By addressing these essential module requirements, you pave the way for a seamless demo import process, maximizing your experience with the theme's features. Should you require further guidance or encounter obstacles, our dedicated support team remains at your disposal. Your satisfaction remains paramount in our pursuit of providing a robust user experience.
Import Demo
The initial setup process includes an option within the Installation Wizard to import sample data. If needed, you can also rerun the wizard at a later time to import the content.
1. Prior to beginning, it's advisable to review the Server Requirements
2. If you intend to try out various demos on a single site, it's recommended to reset your site before importing a different demo. You can achieve this using a plugin like WP Reset, which restores your site to its original installation state.
3. Access the Settings → Permalinks section and modify your permalinks to a format other than the default "Plain" mode. The demo site utilizes the "Post name" setting for permalinks.
4. If you are using a VPN, please be aware that the installation wizard might not process remote XML. It's suggested to use a direct connection instead. Alternatively, you can manually import the XML files using the default WordPress importer. These XML files are included in the comprehensive theme package.
Once you've reviewed the IMPORTANT recommendations, you're ready to move forward. Navigate to Modafolio → Modafolio and simply select Demo Import
This action initiates the execution of the Import Content step within the installation wizard.
Please ensure you click the Import button only once. The download process for ALL images may require 5-15 minutes, depending on the performance of your hosting.
Importing the demo onto your local computer might require additional time.
No apparent errors, yet the content is absent?
If you're experiencing problems with the demo import or find yourself unable to import demo content, please refer to this section.
Installation & Setup
Please confirm that your server is running PHP 7.3 or a more recent version.
Prior to beginning, you might consider reviewing the Server Requirements.
Your settings should align with these specifications:
- memory_limit = 256M
- max_input_vars = 3000
- max_execution_time = 300
- post_max_size = 12M
- upload_max_filesize = 12M
- allow_url_fopen ON
- asp_tags OFF
Upload and Activate the theme
Wordpress Method
With the theme's files now stored on your computer, proceed to log in to the WordPress administration dashboard for the purpose of uploading and installing it.
Go to Appearance → Themes and select Add New.
Download the file and click Install Now
The Setup Wizard
Experience a hassle-free installation process with the theme's built-in setup wizard. This wizard facilitates the installation of accompanying plugins and the importation of demo content in just two straightforward steps. Once you activate the theme, the setup wizard will initiate automatically.
Should you encounter the subsequent screen, select Theme Setup.
If the Wizard doesn't commence automatically, navigate to Appearance → Theme Setup.
Initial Screen
Create a Child Themes
Keeping the Child Theme active is a highly advisable practice. This ensures that theme updates won't overwrite any of your personal modifications, allowing you to update the theme worry-free.
Install Recommended Plugins
In the upcoming stage, you'll have the chance to install all the suggested plugins, enabling you to effortlessly import the demo content in the following step.
Import Demo Content
Should you be applying the theme to a site that's already established, the option to forego importing the demo content might be preferable. In such instances, you can simply move past this step. Conversely, if you wish, you can choose to import any of the predefined layouts available in the demo, along with accompanying content like product pages, blog posts, and widgets.
In the event that you're interested in experimenting with various demos within the confines of a single site, it's advisable to reset your site before introducing another demo. To accomplish this, you can employ a tool such as WP Reset, which will effectively revert your site to its original default configuration.
Encountering a situation where there are no errors, yet the content is absent?
If you're experiencing challenges with the demo import and are unable to bring in the demo content, kindly refer to this section.
Your site is ready!
The theme installation has been completed successfully. You're now ready to begin working with your preferred customization choices.
Your site is ready
The installation of the theme is complete. You're now ready to begin working with your preferred settings.
Plugins
A WordPress plugin is a piece of software that can be added to a WordPress website to extend its functionality or add specific features. Plugins are designed to be easily installable and customizable, allowing website owners and administrators to enhance their site without having to modify the core code of WordPress itself.
Required Plugin:
Kirki Toolkit: Kirki allows you to build themes quicker & more easily. With over 30 custom controls ranging from simple sliders to complex typography controls with Google Fonts integration and features like automatic CSS & postMessage script generation, Kirki makes theme development a breeze.
Modafolio Core:
Recommanded Plugin:
MailChimp for Wordpress: This plugins helps you grow your email list in Mailchimp. You can use it to create good looking and accessible sign-up forms or integrate with any other existing form on your WordPress site, like your contact, comment or checkout form.
Meta Box: Meta Box helps you add custom fields and details on your website such as pages, posts, custom post types, forms and anywhere you want using over 40 different field types such as text, images, file upload, checkboxes, and more.
Ninja Forms: Use Ninja Forms to create beautiful, user friendly WordPress forms that will make you feel like a professional web developer!
WC Ajax Product Filters: WCAPF – WooCommerce Ajax Product Filter is a powerful plugin that enhances the filtering functionality of your WooCommerce store. It allows your customers to easily find and narrow down their product search using a dynamic and interactive filter system. With Ajax-based filtering, the plugin provides instant results without page reloading, ensuring a smooth and seamless user experience.
Woocommerce:
Woocommerce Variation Swatches: WooCommerce Variation Swatch plugin offers global swatches. It has the feature to insert a new image by replacing your globally added image. That means, you can replace your globally added images for variation swatches in each product. The Variation Swatches plugin also allows you to change your globally added color.
YITH Woocommerce Wishlist:
Pages building
WPbakery page builder Tutorial for beginer
Activate/Deactivate Transparent Header
Creating a Transparent Header:
Open your page and scroll to the Page Settings metabox.
Choose the Transparent option under Header Style.
Header Text Color: Indicate your preference for displaying the header text/logo by selecting either the dark or light version.
Customization
Modafolio enhances WordPress's inherent capabilities by offering an array of customization options, all conveniently organized into distinct categories accessible via Appearance → Customizer.
General
General Settings
Social Media
Popup
Keys & APIs
Theme Styles
Global Colors
Header Colors
Mobile Colors
Shop Colors
Form Styles
Typography
Header
Header Layout
Logo
Header/Logo Size
Header Icons
Top Bar
Campaign Bar
Main Menu Options
Off Canvas Desktop
Vertical Icons Bar
Mobile Header
Mobile Menu
Footer
Footer Main
Footer Extra
Footer Bottom
Mobile
Shop
Shop General
Shop Header
Products Catalog
Sidebar Filters
Variations / Swatches
Mini Cart
Quick View
Cart / Checkout
Progress Bar
Mobile
Single Product
Product Layout
Product Gallery
Product Page Elements
Size Guide
Related Products
Mobile
Blog
Blog Main
Categories Menu
Single Post
Related Posts
Portfolio
Portfolio Main
Single Portfolio
Site Identity
Site Identity
Colors
Colors
Background Image
Background Image
Menus
Menus
Widgets
Home Page Settings
Menus
Woocommerce
Store Notice
Product Catalog
Product Images
Checkout
Additional CSS
Checkout
Woocommerce
Woocommerce Error – Sorry, this product is unavailable. Please choose a different combination
When you encounter the message “Sorry, this product is unavailable. Please choose a different combination”, it means that you are dealing with a WooCommerce variable product problem. In most cases, the problem has to do with how attributes were previously set up in WooCommerce.
How to Fix the Error?
Now we’ll show you some possible ways that can help you fix the issue.
Method 1: Add a code
In most cases, the problem was in ajax_variation_threshold. Therefore, you need to raise the number of requests allowed. Add the following code to wp-content/themes/modafolio-child/functions.php
function
woo_custom_ajax_variation_threshold
( $qty, $product ) {
return 50;
}
add_filter( 'woocommerce_ajax_variation_threshold', 'woo_custom_ajax_variation_threshold', 10, 2 );
Method 2: reallocate each variation
If that doesn't work, you can try deleting all attributes and reallocating each variant.
Now, we will provide you with an example so that you can better understand how this method works.
In this example, the values of the 'Size' attribute for a variable product have been set to: S. | M | L | XL | 8 | 10 | 12 | 14 | 16 typed with separators in the product attributes. |
Here is how to remedy this.
Step 1: Edit a variable product
First, you need to log in to your WooCommerce account and access Products.
Next, you need to access the product you are experiencing issues with and click on the Edit button right next to the product.
Step 2: Delete the existing values
Then, go to the Product Data section. Choose the Variable product option from the dropdown menu.
After that, go to the Attributes setting and click on the Remove button to remove all existing values related to size.
Step 3: Add the attribute again
Now, you need to add the attribute again by clicking on Add. Once the addition is complete, click on Select all, and then click Save attributes.
Step 4: Reassign each variation
Here, you need to access the Variations setting. After that, set the default size and reassign each variation as shown in the image below.
Blog
Add a Sidebar To Blog
Blog Sidebar
You can display a sidebar on the homepage/blog archives and single posts. These are 2 independent sidebars
In Appearance → Customize → Blog → Blog Main, enable the option Blog Sidebar. This will add the sidebar area for the homepage and blog archives only. The sidebar for single articles is activated in Appearance → Customize → Blog → Single Blog
After that add your widgets in Appearance → Widgets → Blog Sidebar
Single Post Sidebar
Activate the Single Post Sidebar option and choose the position of the sidebar
After that, add your widgets in Appearance → Widgets → Article Sidebar.
Blog Setup
WordPress by default displays your posts on the homepage, but you can configure a specific page for your posts.
The Blog Page
To configure the blog page, in your WordPress admin panel, go to Settings → Reading.
For example, if you already have a page named Blog, for your homepage displays, select A static page and choose your Blog as the posts page.
Blog Options In Customier
Go to Appearance → Customize → Blog → Blog Main
Main Blog Layout
Select your default posts listing in Blog Layout option.
Hero Title
Instead of the plain title you can activate the Hero Title mode to show a larger font with background.
In Appearance → Customize → Blog → Blog Main activate Hero Title and select your favorite background color.
Translate Content to multiple languages
Multilanguage plugins
You need a plugin to manage content in multiple languages. Some of the most popular plugins are:
- Polylang https://wordpress.org/plugins/polylang/
- WPML WPML https://wpml.org/
- Weglot Weglot https://weglot.com/
- Traduirepress https://translatepress.com/
Add Featured Images/Video
Each post can have a featured image, and it is always recommended to add one.
Single Featured Image
This is a core feature of WordPress. Use the Featured Image panel on the right to upload your image.
Depending on your post settings, it may appear in parallax mode or just below the post title.
Featured Gallery Slider
On single posts, you can use a single featured image with the default WordPress option, However, you can also have a featured gallery slideshow.
To create a featured gallery, scroll down to Gallery Settings to upload your images or choose from the media library.
In the right panel, under Document Settings, select Post Format: Gallery.
Featured Video
In some cases, you might want to display a selected video instead of a featured image.
To add your video, scroll down to Video Settings and paste the video URL.
And on the Document panel on the right select Post Format: Video
Single Post Options
Post Formats
You can choose a post format for each post. This will add the correct icon to the blog post list and also show you additional options.
In the right panel, under Document Settings, select Post Format: Gallery.
Header Layout
Appearance → Customize → Blog → Single Post with the option Featured Media Position
Portfolio
Portfolio - Single Post
Portfolios work like regular posts. You can use free-form content (text, images) using the Gutenberg editor. Or create a more complex layout using the WPBakery Page Builder.
Customizer Settings
Go to Appearance → Customize → Portfolio → Single Portfolio.
The first option allows you to choose your default portfolio header layout.
Also, choose the default color mode and decide if you want the header to be transparent or not.
You can override the default settings for each portfolio item, as you can see in the sections below.
Portfolio Details
If you are using WPBakery Page Builder to add your content, ignore this section.
Simply add your content in the usual way using Gutenberg. And pay attention to the Portfolio Details section.
- Featured Image. Replace the featured image for the single post view only.
- Date, Autor. These are optional values.
- Site web. If you are adding a website, include the Text and URL fields.
Page Settings
In this section, you can override the default options set in the customizer for this specific post.
Header Style
Choose whether you want the regular header or transparent.
Title Layout
Select your preferred style for the header area on this portfolio item.
Page Background Color
You can apply a background to the whole page.
Archive Settings
If you use the Masonry layout you have additional options for the archive page.
- Hover Color. Only used for the Hover Card style.
- Masonry Item Size. If you use a masonry layout or portfolio archive.
Portfolio Setup
Go to Appearance → Customize → Portfolio → Portfolio Main