Styles & Scripts


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.

global_styles_scripts_settings

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).

ind_scripts_styles_main

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.

post_page_metabox1

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:
global_page_styles_output

Individual custom styles will appear as follows:
ind_page_styles_output

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:
global_scripts_output

Individual custom scripts will appear as follows:
ind_scripts_output

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.


Josh Lobe has written 53 articles

Josh Lobe is the sole developer of WP Edit and WP Edit Pro. A father of two; a husband to a beautiful wife; and a small home in the suburbs... he primarily enjoys coding in WordPress and designing websites.

One thought on “Styles & Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *

ENTER CAPTCHA MATH *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>