WP Edit Pro now provides an interface for users to enter custom styles and scripts. There are two options for setting up styles and scripts:
- Globally – from the WP Edit Pro settings page (Posts/Pages tab). These styles and scripts will be executed on ALL posts and pages.
- Individually – from the post/page editor screen. These styles will ONLY be executed on the page where they are entered.
Global WP Edit Pro Styles & Scripts
Setting styles and scripts on the global level will execute the code on all posts and pages. This is best used when a style or script will be used on multiple (if not all) posts and/or pages. Instead of having to enter it multiple times on each post or page; simply enter it in the global section.
Remember; these styles and scripts will be loaded on all posts and pages.
Individual WP Edit Pro Styles & Scripts
Another option; is setting the styles and scripts on a per post/page basis. This allows custom CSS to be entered for each post or page. This option is best used when separate custom styles or scripts are needed for each post or page.
Enable Individual Post/Page Styles & Scripts
The setting to enable individual style and scripts can be found on the WP Edit Pro settings page (Posts/Pages tab).
Individual Post/Page WP Edit Pro Metabox
Once the setting has been enabled; the WP Edit Pro Scripts and Styles metabox will appear on each post/page; beneath the content editor.
Individual Styles
The styles entered here will ONLY appear on the same post/page where they are entered.
Individual Scripts
The scripts entered here will ONLY appear on the same post/page where they are entered.
Body Classes
This option will allow the user to specify additional classes that will be added to the body HTML tag.
Post Classes
This option will allow the user to specify additional classes that will be added to the post HTML tag.
Styles & Scripts Page Output
When adding custom styles and scripts; it’s important to understand where they will appear in the final page output. The current coding “best practices” is to place custom styles in the head of the document; and custom scripts in the body of the document.
Custom Styles Output
Custom styles will be output in the header of the document; just before the closing head HTML tag.
Global custom styles will appear as follows:
Individual custom styles will appear as follows:
Custom Scripts Output
Custom scripts will be output in the body of the document; just before the closing body HTML tag.
Global custom scripts will appear as follows:
Individual custom scripts will appear as follows:
Notes to Remember
A few important notes to remember when using styles and scripts.
Order of Priority
Because some people may want only global styles or scripts; and some people may only want individual styles or scripts; and some people may want both…. there is an order of priority.
- Global styles and scripts will appear first in the final code output.
- Individual styles and scripts will appear next; after global styles and scripts (if they exist).
- If no global styles and scripts exist; and no individual styles and scripts exist; then no code will be output.
Individual Styles & Scripts Functionality
The individual styles and scripts; and their associated functions; will ONLY execute if the option is set on the WP Edit Pro settings page (Posts/Pages tab).
If the option is not set; then none of the individual styles and scripts will be executed; even if they are already saved in the post/page settings.
Admin Only Individual Scripts
Because of the sometimes sensitive nature of WordPress; running scripts should most often only be performed by trusted users. For this reason; only administrators (or more specifically; those with the “manage options” capability) will be able to edit/insert scripts on individual posts and pages.
Data is Embedded… Not Linked
The styles and scripts are embedded into the final page output; they are not linked to externally.
No Input Validation
There is no input validation. The code is applied exactly as it is entered in the options areas.
One thought on “Styles & Scripts”