Fresh Custom Code - Documentation

by FRESHFACE

Introduction

Add custom CSS, LESS and JS code to your WordPress site

NOTE: All our "Fresh" plugins are dependent on the "Fresh Framework" plugin that is always bundled with all our "Fresh" plugins for FREE. "Fresh Framework" should auto-install and auto-activate upon Activation of one of the "Fresh" plugins.

NOTE: Please do not make any changes directly in the source code of Fresh Plugins - you or your customers won't be able to Update the item later on via WP-Admin. If you need to modify our Plugins, we kindly ask you to do it via a different theme/plugin or simply tell us what you want and we will try to implement it directly and for everyone.

Installation

Unzip the package you have downloaded from the Marketplaces and inside you should find another ZIP file with the product itself. This ZIP file can be upload either via "WordPress Admin -> Plugins -> Add New -> Upload" or FTP to /wp-content/plugins/

Please make sure that you also activate the installed plugin(s) in "WordPress Admin -> Plugins".

Usage

You can access the interface of this plugin at "WordPress Admin -> Appearance -> Custom Code".

Add New Custom Code

Add New Custom Code
Fig.1 - Navigate to "WordPress Admin -> Appearance -> Custom Code" and click on the "Add New" button

Edit Custom Code

Edit Custom Code
Fig.2 - This is the Edit Custom Code screen, we will go through all of it's options below

Editor

This is where you write your custom code. The editor is also using the Emmet toolkit which lets you write your CSS code faster by expanding abbreviated CSS properties into their full form. More info can be found in their own cheatsheet (scroll down to CSS section). To quickly try Emmet type bgc into the editor and hit TAB key. It should expand to background-color

Publish

In this section you can make the Custom Code public or vice versa. When you are done, click the Publish button. You can also set here when you would like to make it public (an hour or date), etc.

Custom Code Type

This is where you switch the Custom Code type/syntax. A little hint of the currently active syntax is also displayed on top and bottom of the Editor.
NOTE: In case of Tracking Code there is no such hint because the wrapping <script> tag is already included in the default Google Analytics Tracking Code - i.e., you are adding it on your own so if it is not there, you need to add it.

Custom Code Placement

If you select Header, your code will be loaded before the content and if you select Footer it will be loaded after the content.

For CSS you want your site look apply styling even before the content loads so the design does not flash between old and new.

But for JavaScript you usually need the content to load first because you will be doing some manipulation/calculation with it. Plus it slows down the loading of the content because the JS scripts tend to be heavy and if they are placed in the Header the browser will have to download and process them before the content of your website resulting in slow performance.

You can also set Priority where the default value is 5, highest is 1 and lowest is 10. A code with a higher priority will be printed after the code with a lower priority.
This way you can control which Custom Code will be printed sooner or later. This is especially useful for CSS code where a code can overwrite declarations from a similar code that was printed before it.

Custom Code Logic

If you want your Custom Code to be used everywhere on your website then you can simply ignore this section. On the other hand, if you want to limit where will your Custom Code be used then this is where it can be specified. If you check "Apply only if" and add some conditions below, then the code will be used only on pages that meet those conditions.

For example if you select "Modules -> Theme Active -> is equal to -> Twenty Fourteen" then the code will be used only if the Twenty Fourteen theme is active - once you activate a different theme the code will no longer be used.

LESS

You can just write LESS syntax and it will be compiled/cached automatically on the fly thanks to the Fresh Framework plugin.

Mixins

Every Custom LESS Code you add already includes an import of our internal LESS mixins that you can use right now.

Here is a quick example using the already existing border-radius mixin:

.button {
    .border-radius(8px);
}

which will compile into this:

.button {
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}

All available mixins can be found in /wp-content/plugins/fresh-framework/adminScreens/assets/css/ff-mixins.less
This is also the file that is being imported on top of all of your Custom LESS Codes. To have the most up-to-date information on mixins, please review that file.

Data migration (Import/Export)

Export

Edit Custom Code
Fig.3 - The Export screen

To export the Custom Code data navigate to "WordPress Admin -> Tools -> Export". Choose here what do you want to save into a so-call XML Export File. This XML file can later be imported from "WordPress Admin -> Tools -> Import".

Import

Edit Custom Code
Fig.4 - The Import screen

To import your data, navigate to "WordPress Admin -> Tools -> Import". Select the WordPress option as shown on Fig.4. You will then most likely be instructed to install the WordPress Importer plugin. Install it, follow the instructions provided there and as the last step you should be able to upload the XML file that you have generated from the Export step above.

Updates

You can simply update this product from "WordPress Admin -> Dashboard -> Updates". You do not need any purchase code to update our products this way.

Bug reports and feature requests

Please let us know your concern via our support channel.

Support

We offer free support to our paying customers for general installation/usage/bugs, etc. The most up-to-date information on where to get support are provided right where you have purchased this product.


Thank you for reading this far, that will be all :)