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.
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".
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
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.
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.
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.
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.
You can just write LESS syntax and it will be compiled/cached automatically on the fly thanks to the Fresh Framework plugin.
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.
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".
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.
You can simply update this product from "WordPress Admin -> Dashboard -> Updates". You do not need any purchase code to update our products this way.
Please let us know your concern via our support channel.
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.