Including Scripts and Styles

In HTML documents <script>, <style> and <link> tags are used to include scripts and styles, either inline or from linked url resources.

In WordPress themes, scripts and styles are not included directly from the theme template files. Instead, the theme listens to relevant WordPress hooks and then adds styles and scripts from there. The process is called enqueueing scripts and styles.

Sounds a bit complicated?

The good news is that for most situations, we don’t really have to understand more about enqueueing. Pinegrow WordPress builder does the heavy lifting for us.

Automatic enqueueing

Whenever we export the theme, Pinegrow goes through HTML documents, finds all scripts and styles, and automatically enqueues them in generated sections of functions.php. We don’t have to do anything.

Manual enqueueing

That said, in certain situations we need a precise control over the way how scripts and styles are included to the theme.

For example, we might want:

• Not include a stylesheet linked to the HTML document into the WordPress theme.
• Include an additional script, that is not used in the HTML version of the template.
• Override default enqueueing parameters, for example use a script included in WordPress.

We can do that with Enqueue Script, Enqueue Style and Do Not Enqueue actions located in the Site section.

Don’t include a specific style or script

Add Do Not Enqueue action on <style>, <link> or <script> elements on the page to not include them into the exported theme.

Include an additional style or script

Sometimes we need to include a resource to the WordPress theme that for some reason can’t be included in the HTML source project.

The best approach is to add an empty <script> element to the page (<style> or <link> element for styles) and then add Enqueue Script or Style action on that element.

The parameters of these two actions map directly to corresponding WordPress functions: wp_enqueue_script and wp_enqueue_style. Consult these two links for details.

Note that the element with Enqueue action will not be exported to the theme.

Override default enqueuing parameters

Add Enqueue Script or Style actions to a <script>, <style> or <link> elements to fine-tune how they are enqueued into the theme.

Again, the parameters of these two actions map directly to corresponding WordPress functions: wp_enqueue_script and wp_enqueue_style.

Inline styles and scripts

Everything described in this document applies to inline scripts and styles as well, including conditional enqueuing.

The order of enqueued resources

Note: The best way to ensure the correct order of how resources are included to the page is using dependencies. Scroll down to Using dependencies to learn how to do that.

The resources are enqueued in the following order:

• First, styles and scripts enqueued with manual Enqueue actions are included in the order of how they appear in documents.
• In the second stage, all remaining resources are enqueued automatically.

This can lead to resources being included in different order as they appear in the document. For example, in this situation script2.js will come before script1.js because it has a manual Enqueue action:

script1.js
script2.js  <-- Enqueue script

If the order is important and we want to preserve it, we need to add Enqueue script action on both elements:

script1.js  <-- Enqueue script
script2.js  <-- Enqueue script

Conditional enqueueing Requires PG 5.92 or TC 1.3

Add conditional actions from the Conditionals section to enqueue scripts and styles only on certain templates.

For example, we can include Javascript and CSS resources for the slider only on the front page where the slider is actually used. To do that, simply add the IF Is_front_page action to relevant <script>, <style> and <link> elements.

This will enqueue the file conditionally in functions.php, so that it will only be included if the condition is met:

if( is_front_page() ) {
    wp_enqueue_style( 'slider', get_template_directory_uri() . '/slider/slider.css', false, null, 'all');    
}

Conditions can be combined with Enqueue Script and Enqueue Style actions, as well as placed on <script>, <style> and <link> elements that are automatically enqueued.

Conditions on these elements will behave as normal conditions (the element itself will be wrapped by the conditional code) if Do not enqueue action is present on the element.

Note: if you include a conditional resource in multiple master pages you need to set conditions for the resource in each of these master pages. Otherwise you will end up with one conditional include and one un-conditional include in generated functions.php.

Handling complex projects with multiple master pages with their own stylesheets

The best approach is to enqueue all styles and scripts on a special page (for example settings.html), that is defined as a master page but is not exported to the project:

Include all stylesheets in the head of this page (make sure stylesheets are included in the correct order) and use Enqueue Style action to include them in the exported theme. Assign an easy to remember, unique handle to each one.

Using dependencies

Use dependencies field to list handles of stylesheets that are required for the stylesheets:

This will ensure that normalize and fonts are loaded before the style.

To use dependencies you have to add Enqueue actions on the resource and set a handle. Then list that handle in the dependencies field of the resource that requires the first resource to be loaded before the second resource.

Conditions

Use IF actions to specify on which conditions should a stylesheet be included. For example, is_single:

Or, for a specific post template:

Or, for a 404 page.

In all other master pages in the project add Do Not Enqueue action to all these stylesheets:

This makes settings.html the central place for managing stylesheets and scripts.

Conditional enqueueing – manual approach

This approach works on all versions of Pinegrow.

Certain scripts and styles should only be included in certain templates, not in the whole theme. For example, if we have a slider only on the front page, we might want to only include its Javascript and CSS files on that page.

You can add the necessary code directly to functions.php file.

For example:

add_action('wp_enqueue_scripts', 'slider_enqueue');

function slider_enqueue() {
    if (is_home()) {
        // Enqueue the slider script, listing jQuery as dependency
        wp_enqueue_script( 
            'slider-script', 
            get_stylesheet_directory_uri() . '/js/slider_script.js',
            array( 'jquery' )
        );
    }
}

Don’t add the code inside any of Pinegrow Generated sections in functions.php, as the code would be overwritten on theme export.

Edit functions.php in the source project (where HTML files are located), not in the exported theme folder.

Change log

Up to Pinegrow Web Editor 5.91 and Theme Converter 1.2, Enqueue Script, Enqueue Style and Do Not Enqueue actions could be added to any element on the page. The fact that such elements are not exported to the theme, potentially led to unexpected situations.

Starting from Pinegrow Web Editor 5.92 and Theme Converter 1.3, these actions can only be added to <script>, <style> and <link> elements. This change does not affect existing projects with actions already added to their target elements.