Including Scripts and Styles | Pinegrow Web Editor
Home/ Documentation/ Creating WordPress themes/ Including Scripts and Styles

Including Scripts and Styles

Controlling how script and style resources are included into exported WordPress theme.

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.

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.

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.

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.

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.



Last updated on January 21, 2020 at 8:29 am


Print this article