Documentation will be updated after Scripts Organizer version 3 is released.

Export-Import

Scripts Organizer

We are using native WordPress post logic and with this, you can use WordPress post or pages "Export-Import" plugins. Having an extra plugin is a hassle so we made it available in Scripts Organizer as well.

Code Blocks Export

There are several export options:

Export All with the button "Export All" located on the top

screenshot 2021 09 15 at 16.49.27

Export All, Multiple, or Single by selecting the checkbox in front of the Code Block, or use the select all checkbox. Change "Bulk actions" to "Export Selected" and click the Apply button

screenshot 2021 09 15 at 16.51.09

Export single by hovering code block and clicking export under Code Block name.

screenshot 2021 09 15 at 16.55.10

Once you press export, a browsers popup will be presented to give you an option to chose a location where to save .json file.

Code Blocks Import

Importing is pretty straightforward.

Navigate to Scripts Organizer > Import.

Drag file to blue box or press Choose File and navigate to your .json file location. After the file is selected press the Import JSON button

screenshot 2021 09 15 at 16.58.49

SCSS Partials

Exporting and Importing SCSS Partials is the same as exporting Code Blocks. Please check the steps above on how to do it.

Note: If you need to keep partials assigned to the Code Block you need to export and import SCSS Partials first and then Code Blocks.

Import CodeSnippets

Exporting Snippets is the same as Code Block. You select them all, or multiple, and change Bulk action to Export, and then you need to press Apply to get .JSON file.

Once you have .JSON file navigate to

  1. Scripts Organizer
  2. Import
  3. Code Snippets Import - Card

Choose file and press the Import JSON button.

Data that will be imported: Title, Code Block, Conditions, Description

Data that will not be imported: Tags, Code is enabled ( will be disabled ), Tags

Import Advanced Scripts

Exporting Code from Adv. Scr. is a little more different. Go to Tools > Adv. Scr.

Once you are in the app, select what code you want to export and click Export.

screenshot 2021 09 15 at 17.42.00

Once you have .JSON file navigate to

  1. Scripts Organizer
  2. Import
  3. Code Snippets Import - Card

Choose file and press the Import JSON button.

Data that will be imported: Title, Code Block, Locations, Type, Description

Data that will not be imported: Conditions, Priority, Code is enabled ( will be disabled )

Include Oxygen's colors with only 1 click. No need to recreate or remember hex values anymore.

Color will be included as Oxygen Builder native variable same as you would write it in the code block and partials.
Example: oxycolor(ID).

In the image below, we see that maroon color has ID: 15, and after color is inserted variable is oxycolor(15).

With this logic, if you update colors under Oxygen > Settings it will be reflected in colors used in Scripts Organizer as well.

oxygen colors
Example of opened color picker

This feature is "Oxygen Builder specific" and will be displayed automatically if the Oxygen Builder is installed and activated.

Color pallets are separated into groups same as the Oxygen Builder Color Sets.

We took extra step that Oxygen Builder don't have in preview. If color has transparency applied you will see stripes in the background.

Navigate fast between code blocks with sidebar list without leaving code editor.

Code Navigator is available for Code Blocks and SCSS Partials.

screenshot 2021 07 08 at 15.22.09
Code Block Navigator preview
screenshot 2021 07 08 at 15.19.06
Code Block Navigator preview

To save space and reduce clutter's excluding from the list:

Reason behind hiding drafts is if you set them like that you probably still don't need them.

Hide Code Navigator

Code Navigator is enabled by default and you can disable it by opening Screen Options:

screenshot 2021 07 08 at 15.22.34

If you want to write external CSS or SCSS the easiest way to sync the media queries between the oxygen and an external CSS is through the variables.

You will need to get all variables into the header under the root. The output should look like this:

<style type='text/css'> :root { --desktop: 1680; --tablet: 1280; --phone-landscape: 900; --phone-portrait: 600; } </style>
Code language: HTML, XML (xml)

SCSS Example when this can be handy

// Breakpoints $desktop: var(--desktop); $tablet: var(--tablet); $mobile_p: var(--phone-portrait); $mobile: var(--phone-landscape); // Breakpoints Mixin @mixin mobile { @media (max-width: $mobile) { @content; } } // Typography h1{ font-family: 'Title'; line-height: 1.2; font-size: 80px; @include mobile{ font-size: 40px; } }
Code language: SCSS (scss)

Code bellow will inject variables into root of your page.

This content is visible only for owners of

Scripts Organizer.

Please login to see the content.

If you want to write external CSS the easiest way to sync the global colors between the oxygen and an external CSS is through the variables.

You will need to get all variables into the header under the root. The output should look like this:

<style type='text/css'> :root { --blue: #2245f8; --yellow: #ffeb57; --black: #1d1d1b; --white: #ffffff; --grey: #89a0b5; --light-grey: #e4e6e8; --ultra-light-grey: #f8f9fb; --new-feature: #64fcc2; } </style>
Code language: HTML, XML (xml)

This content is visible only for owners of

Scripts Organizer.

Please login to see the content.

From time to time you need to set up a bunch of conditions with Oxygen Builder that requires Page or Posts ID numbers. To get them you need to open every page or post and find it under URL. Much easier is to get numbers directly inside Admin Columns so you don't need to open them at all.

post and page id in admin columns

This content is visible only for owners of

Scripts Organizer.

Please login to see the content.

Accessing Oxygens Builder templates list always needs several clicks. WordPress Admin top bar is always there and easily accessible.

If you don't have too many things in the top bar this code will be perfect for you.

With this code, you will get an entire list of your Oxygen templates. No styling is required as you will get WordPress native admin bar styling by default.

This content is visible only for owners of

Scripts Organizer.

Please login to see the content.

Scripts Organizer Settings

Trigger Location: Everywhere
Script Location: PHP

screenshot 2021 04 15 at 21.29.12 1

By default when you create Code Block and you choose JS, CSS, or SCSS code will be generated as inline Script or Style. And that is great if you are inserting critical and small code.

If you want to create an entire website theme or have entire JavaScript in 1 file that you will be using across the entire website ( all the pages ) you will benefit if you create it as a file and cache it.

We made that easy for you. When ever choose JS, CSS, or SCSS from dropdown in header or footer on the right side you will get option with checkbox to generate file instead of creating as inline script or style.

If checkbox is enabled file will be created. If checkbox is disabled code will be injected as inline.

group 4

Long CSS files can be long and important parts can not be reused. The solution to this is it split your CSS into parts and merge it with Scripts Organizer. If you know the power of SCSS with variables and mixins even better. You can write variables and mixins into separate partials and include them in the code block when you need them.

SCSS Partials are separated from Code Blocks for a reason. To make UI less cluttered and to be logically easier accessible.

Create SCSS Partial

On the left side, you can find the SCSS Partials menu. When you open it hit "+ Add new" button and create it as any other Custom Post Type. 

screenshot 2021 05 21 at 17.23.23

Include / Merge SCSS Partials

When partials are created you need to merge them. 

Open Code Block and add a new one that will be used for the merger.

Scroll down to SCSS PARTIALS MANAGER and enable it by clicking "Show " button.

screenshot 2021 05 21 at 17.37.06

Click into the Select partials field and a dropdown with autocomplete will come up with all created partials to choose from.

SCSS Partials order

Order of SCSS files is important same as in PHP. We made that easy. When you import all needed SCSS Partials you can just drag and drop them in order you need.

screenshot 2021 05 21 at 17.40.58

SCSS Safe mode AKA Error handling

Same as PHP, SCSS can fail as well. To be sure that everything works ok we are checking for errors and notifying you when and why that has happened.

screenshot 2021 05 21 at 17.51.45