← All posts

Add Custom CSS, JS or PHP to a Single Page with Scripts Organizer

scripts organizer

Adding custom code to a single WordPress page usually means creating a global code block and then setting conditions so it only loads on that one page. Later you have to remember which block belongs to which page. In this video we show how Scripts Organizer lets you add CSS, JS or PHP to a single page or post, right inside that page's editor. All the code for a page stays with that page, and you don't need conditions to target it.

Add code to a single page or post

With global code blocks you have to write conditions and keep track of which page each block targets. Keeping the code on the page itself means there is one place to look and nothing extra to set up.

  1. Go to Scripts Organizer → Features.
  2. Under Enable SCORG on Single Post Types, check the post types where you want per-page code. In the video we check Page. Post and Contact Form are also listed.
  3. Click Save Changes.
  4. Open a page in the editor (we use the Contact us page). A Script Settings panel now shows up below the content.
  5. Switch on Enable Code Block, pick a Script Location, and write your code in the editor on the right.

The panel has the same options you know from regular code blocks: the language dropdown (CSS), a Create file checkbox, the CSS Variables button, Script Location (Header, Footer, PHP), Schedule and Script Duration.

Live CSS reload while restyling a form

Styling a form from the page editor would be slow if you had to save and refresh after every change. The CSS in this panel reloads live, so you can split the screen with the editor on one side and the front end on the other, and see each change right away.

In the video we restyle a Contact Form 7 form on the Contact us page:

  1. Put the editor and the front-end preview side by side.
  2. Add a CSS mesh gradient background to body. This CSS only loads on this page, so the Sample Page keeps its own background while Contact us gets the gradient.
  3. Use browser DevTools to inspect the form markup (label, span, input, textarea).
  4. Target all input elements and add padding (padding: 0.5rem;) and width: 100%;. The editor suggests completions as you type.
  5. Give the textarea a width of 100% as well.
  6. Target the form and give it a dark background, some padding, and some opacity.
  7. Set the label color to white so the labels are readable on the dark form.

The form went from a plain default to a styled dark card with just a few lines of CSS, and we never left the page editor.

Save with Ctrl/Cmd+S. Use the keyboard shortcut to save the code instead of the editor's Save button. The video shows a SAVING… notice in the code panel, and we find it saves much faster than the builders' own save.

JS in the footer or PHP hooks

Not every page tweak is CSS. Sometimes a page needs a small script or a PHP hook that only matters there. Under Script Location you can also enable Footer for JavaScript and PHP for hooks. Each location gets its own tab next to Header in the code editor, so a page's CSS, JS and PHP all stay in one panel.

Schedule page-specific code

Some page code should only run at certain times, like a notice or a style that should only show during business hours. The per-page panel has the same scheduling as regular code blocks:

  • Schedule: Daily, Days, Date or Date Range
  • Script Duration: All Day or Time

The panel shows the current server time ("Please set the Days and Specific Time here accordingly"), so set your times based on the server clock, not your local one. One example from the video: load a style only during your opening hours.

Exclude code from page builders

If you edit the page in Oxygen Builder or Bricks Builder, your front-end CSS and JS also load inside the builder. That can get in the way. For example, a style that hides an element also hides it while you're trying to edit it. Switch on Exclude page builders in the Script Settings panel, and the code will only apply on the front end, not in the builder.

Who is this for

  • Site builders who style one-off pages (contact, landing, or campaign pages) and want the CSS right there on the page instead of in a global code block with conditions.
  • Developers who add page-specific JS or PHP hooks and want everything for that page kept in one place.
  • Oxygen Builder and Bricks Builder users who want front-end styles and scripts that don't interfere with editing in the builder.
  • Anyone who needs time-based page changes, such as styles that only apply during business hours.

FAQ

How do I add custom CSS to only one page in WordPress with Scripts Organizer? Go to Scripts Organizer → Features, check the post type under Enable SCORG on Single Post Types, and save. Then open the page, switch on Enable Code Block in the Script Settings panel, and write your CSS in the Header location. It only loads on that page.

Do I still need conditions to target the page? No. The code is attached to the page itself, so you don't need to set conditions or keep track of which code block belongs to which page.

Can I preview CSS changes without reloading? Yes. CSS written in the page's code panel reloads live, so with the editor and front end side by side you see each change as you type.

Can I add JavaScript or PHP per page too? Yes. Enable Footer for JavaScript or PHP for hooks under Script Location. Each gets its own tab in the code editor.

Will the code affect the Oxygen Builder or Bricks Builder editor? Only if you want it to. Switch on Exclude page builders, and the code only applies on the front end, not inside the builder.

Get Scripts Organizer → dplugins.com

Related posts