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!

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 WPBakery Visual Composer Plugin

The "Nutrition Facts Label Creator" plugin is an addon for WPBakery Visual Composer plugin. It will be required to install "Visual Composer" plugin for proper functioning of NFLC. The Visual Composer plugin can be purchased and downloaded from CodeCanyon. After purchasing the plugin, please go through the installation instructions and activate the plugin.

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 main archive, unzip/extract this archive and look for the folder named nutrition-facts-label-creator.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 PluginUpload Plugin

4. Click on the "Choose file" button and browse the plugin ZIP file:

Browse PluginBrowse Plugin Archive

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 PluginActivate 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/. After uploading the folder, log in to WordPress and activate the plugin inside Plugins > Installed Plugins.

Enable Visual Composer for posts

The "Nutrition Facts Label Creator" plugin can be used on pages, posts and custom post types. In several cases, the Nutrition Label may be used in a post or a Custom Post Type like a WooCommerce Product. For that, we need to enable Visual Composer on these post types.

1. Navigate to WordPress admin's Visual Composer > Role Manager.

2. Expand the "Administrator" panel, and choose Post types as "Custom".

Enable for postEnable VC for posts

3. Enable "post" and "page" checkboxes. Optionally, you can enable other post types too if available on your site.

4. Similarly, expand "Editor" panel and enable posts for the Editor.

Enable for postEnable VC for posts

5. Following the same procedure, enable Visual Composer for other role types like "Author", "Contributor", etc. as available on your site.

Create Nutrition Facts Label

In order to create a Nutrition Facts Label, follow these steps:

1. Navigate to Posts > Add new, or Pages > Add new (depending on your requirement)

2. Enter a title for post. Say, "Nutrition Facts Example".

3. Click on "Backend Editor" link for enabling page builder in backend mode.

Enable backend editorEnable backend editor for VC

4. Click on the "Add Element" button.

Add elementAdd Element

5. A library panel will open which contains all available Visual Composer elements. Inside search box, type "Nutrition Facts Label Creator", or look for the same inside "All" category.

Add nutrition facts label creatorAdd Nutrition Facts Label Creator

6. Click on the "Nutrition Facts Label Creator" icon. It will load inside the page/post editor. Next, hover your mouse on the element and click on "edit" icon.

Add recipe templateAdd recipe template

7. An element options panel will open. The "General" tab contains settings for Nutrition Label heading, display style, footer notes, etc. You can configure these as required.

nflc general optionsGeneral Options

8. Next, click on the "Nutrition" tab for adding all Nutrition Fact values for different food components.

nflc nutrition optionsNutrition Options

9. In order to hide any nutrition entry, simply leave the field blank. After adding necessary values, click on "Save changes" button. Then update or publish your page/post. It shall now display the Nutrition Label.

10. In order add custom Nutrients, click on the "Add Nutrients" tab. Next, click on the plus icon [+] to add a new set of Nutrients.

custom nutrientsAdd custom nutrients

Expand the panel and add your custom nutrient entries. These will be appended after default Nutrients as selected. You can add any number of Nutrients as required.

Translating the Plugin

The Nutrition Facts Label Creator plugin is translation ready with language files included in plugin. You can translate the plugin with any translation plugin like WPML, qTranslateX or Loco Translate. But if you wish to translate it manually using PO files, kindly follow these steps.

1. Download poEdit Software from https://poedit.net/ and install on your computer.

2. Open poEdit software and click on File > New from POT/PO file.

3. Browse the nutrition-facts-label-creator.pot file. A language popup will appear. Choose your language and click on "OK".

Choose languageChoose translation language

4. For example, choose "Arabic" language. Next, click on any message string and write it's translation inside the "Translation" field.

Edit translationEdit Translation

5. After making necessary translations, go to File > Save as. Here, provide the file name as nflc-language_country. Please note that the "nflc-" textdomain name is required here. So if it is Arabic, the filename would become nflc-ar_SA.po

6. Once the file is saved, a nflc-language_country.mo file will be compiled and generated.

7. Now you need to define the language inside WordPress settings. For that, log in to WordPress admin and navigate to Settings > General. From the "Site Language", choose the language in which you have created the PO file. Then save changes.

The plugin shall now display translated strings successfully.

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.zip". Use this zip folder for uploading the plugin via WordPress.

2. How to update the plugin

Plugin can be updated in two ways:

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.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/ folder. Delete this folder and update the latest extracted folder from your computer. This method is safer than the previous one.

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_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 nflc_templates/default.php file.

Sources and Credits

The plugin uses following files and resources, as listed:

WordPress for providing a platform on which we can create plugins.

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

Back to Table of Contents ↑

Top