Nutrition Facts Label Creator
Created: May 21, 2023. Last updated: May 21, 2023. Version: 0.1.0. Author: SaurabhSharma. email: xconsau@gmail.com
Introduction
Dear buyer, thank you for purchasing "Nutrition Facts Label Creator" plugin. I have handcrafted this document to lessen your efforts in configuring and using this plugin seamlessly. If you find any bug or issue which is beyond the scope of this documentation file, feel free to contact me through my CodeCanyon profile page here. Thanks so much!
Table of Contents
Install WordPress
If you have not set up your WordPress installation yet, you can download a copy of latest WordPress archive from WordPress.org. Next, go through the installation instructions inside readme.html file and set up your WordPress installation. A detailed installation guide can be found on official WordPress Site.
Install Nutrition Facts Label Creator Plugin
In order to install the plugin, follow these steps:
1. Download plugin archive from your codecanyon.net account's downloads section. You can download main archive or installable plugin zip archive.
2. If you have downloaded the main archive, unzip/extract this archive and look for the folder named nutrition-facts-label-creator-gt.zip. This zip archive shall be used for installation in WordPress admin.
3. Log in to WordPress and navigate to Plugins > Add New. Click on the "Upload Plugin" button.
Upload Plugin
4. Click on the "Choose file" button and browse the nutrition-facts-label-creator-gt.zip plugin file.
Browse Plugin
5. Next, click on the "Install now" button. The plugin will be installed.
6. After installation, navigate to Plugins > Installed Plugins, and activate the "Nutrition Facts Label Creator" plugin.
Activate Plugin
Manual installation using FTP or File Manager
You can also install the plugin manually using FTP or File Manager. For that, log in to your site's Control Panel > File Manager, or log in to FTP and upload the extracted plugin folder to /wp-content/plugins/ directory. So your installed plugin address will be /wp-content/plugins/nutrition-facts-label-creator-gt/. After uploading the folder, log in to WordPress and activate the plugin inside Plugins > Installed Plugins.
Create Nutrition Facts Label
Once the plugin is installed and activated, it shall be available inside the blocks library of WordPress editor. Search for the "Nutrition Facts Label Creator" block and insert in the page, as shown below in the video.
Styling the plugin
It is recommended to use the standard Nutrition Facts Label format. But if you wish to express the label in your own style, you can do so by choosing a different display style, or editing the colors and fonts, as shown below:
Using the typography and color settings, you can style the table to match your current website theme.
Adding Custom Nutrients
Nutrition Facts Label Creator has an option for specifying custom nutritients with their respective standard daily values, unit and nutrition amount. You can add a custom nutrient as shown in the video below:
Important: When you add a new custom nutrient, it's data is not visible in the Nutrition table in content area. In order to refresh the table, or update the data, you can either click on the "Add Nutrient" button and delete it again, or click on the "Toggle Preview" button. That will update the table with newly added nutrient.
Translating the Plugin
The Nutrition Facts Label Creator is translation ready with language files included in the plugin. Though the POT and the PO/MO files are included in the plugin, the actual translation is applied using the JSON file. In order to translate the plugin, kindly follow these steps:
1. The first step is to determine the language code of your current site. Whether you are using English, French, or German, the language code will be visible inside the source code of the website, as shown below:
<!DOCTYPE html> <html lang="fr-BE">
The lang="fr-BE" shows the language code used in the site. In the above example, the language code is for French (Belgium). This language code will be used in next steps.
2. Navigate to the nutrition-facts-label-creator-gt/languages/ and locate the file named nflc-gt-[language_code]-nflc-gt-index.json. Rename this file so that the [language_code] is replaced by the actual language code. In our example, this name will become nflc-gt-fr-BE-nflc-gt-index.json
3. After renaming the file, open this file in any text/code editor like NotePad++, Sublime Text or VS Code. At the beginning of the file, you shall see the following entries:
"locale_data": {
"messages": {
"": {
"domain": "messages",
"lang": "language_code",
"plural-forms": "nplurals=2; plural=(n > 1);"
},
Change the language_code value to your actual language code. E.g. fr-BE.
"lang": "fr-BE",
4. In rest of the file, you shall see all available strings which can be translated. The translation shall go in front of each string within the quotaton marks. For example:
"Amount per serving (cal)": [ "Quantité par portion (cal)" ],
5. After making all necessary translations, save the file. These changes shall automatically reflect in the backend block UI
Frequently Asked Questions
Below are some Frequently Asked Questions that may help you in finding a solution to your specific issue.
1. I have just uploaded the download zip file to WordPress, but it is showing an error. Why?
Your download zip file is not the plugin itself. It is a collection of plugin and documentation. It will be required to unzip this folder first. Next look for the folder named "nutrition-facts-label-creator-gt.zip". Use this zip folder for uploading the plugin via WordPress.
2. How to update the plugin
Plugin can be updated in several ways, as shown below:
2.1) From the WordPress admin: Navigate to Plugins > Installed Plugins. Deactivate the "Nutrition Facts Label Creator" plugin and delete it. Next, install the latest copy of plugin by browsing the nutrition-facts-label-creator-gt.zip file from your computer.
2.2) From the FTP or Control Panel: Log in to your FTP or Control Panel of hosting account and locate the /wp-content/plugins/nutrition-facts-label-creator-gt/ folder. Delete this folder and update the latest extracted folder from your computer.
2.3 Automatic updates: For automatic updates, download and install the Envato Market plugin. After configuring the plugin with your purchase code and Envato market account, it shall automatically update themes and plugins purchased from the Envato market. More details on using the plugin can be found on the plugin page itself.
3. How is the "Calories from Fat" calculated?
The calories from fat is 9 times the total fat amount in grams. So the value of "Total Fat" will be multiplied by 9 and shown as "Calories from Fat". E.g. If total fat is 10g, then calories from fat will be 10*9 = 90 cal.
4. How are standard values for Nutrition Facts determined?
The reference for standard daily values (DVs) are taken from Wikipedia and FDA Guidance Document. The standard values for various nutrients are set inside nflc-gt-templates/default.php file.
5. How to change standard daily value of a nutrient?
Standard daily values can be changed using action filter hooks. A filter can be used by adding the following code inside theme's functions.php file:
// Modify Total Fat standard value
add_filter( 'total_fat_sv', function() { return 75 } );
For complete list of filter names, see nutrition-facts-label-creator-gt.php file. The filters are located inside the following function:
function nflc_gt_render( $attributes ) {}
Once again, thanks so much for purchasing this plugin. I'd be glad to help you if you have any questions relating to this plugin. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Saurabh Sharma