We discontinue development of the required+ Foundation theme – here is why.×

We were recently asked on GitHub how you can overwrite the styles and scripts loaded in required+ Foundation. While the last post about template structure explained how to overwrite template files in your child theme, here we focus on overwriting and changing the load behavior of assets like stylesheets and scripts.

What should you know before reading this?

Before you start with the rest of the tutorial, please be sure to read the docs on Stylesheets and JavaScripts in required+ Foundation. You should also be familiar with the API WordPress has to load and enqueue scripts wp_enqueue_script and it’s related functions.

Remove all stylesheets and scripts

Not something you usually do, but let’s say you came up with your own function to register scripts and styles in your child theme, here is an easy way to disable all the styles and scripts loaded by required+ Foundation:

// Add the following line to your required_starter_themesetup in your child theme functions.php
remove_action( 'wp_enqueue_scripts', 'required_load_scripts' );

Add this line to your functions.php within the required_starter_themesetup() function to remove all stylesheets and javascript files loaded in the required-foundation/includes/req-scripts.php file.

Load all the scripts with your own function

With the line above in place, you are on your own and have to register the scripts and styles yourself. Let’s have a look on how you could do this in your child theme:

/**
 * Custom function to load styles and scripts
 *
 * Handling the scripts and stylesheets all by yourself?
 * See here on how to register and load theme in your
 * child theme.
 *
 * @link http://themes.required.ch/?p=798
 */
function my_child_theme_load_scripts() {

	// register required-foundation.min.js
	wp_register_script(
		'foundation-js', //handle
		get_template_directory_uri() . '/javascripts/required-foundation.min.js', //source
		array('jquery'), //dependencies
		FOUNDATION_VERSION, //version
		true //run in footer
	);

	//app.js – depending on foundation.js
	wp_register_script(
		'app-js',
		get_template_directory_uri() . '/javascripts/app.js',
		array( 'foundation-js' ),
		FOUNDATION_VERSION,
		true
	);

	// The stylesheets
	wp_register_style(
		'foundation-css', //handle
		get_template_directory_uri() . '/stylesheets/foundation.min.css',
		null,   // no dependencies
		FOUNDATION_VERSION //version
	);

	// Load scripts
	wp_enqueue_script( 'app-js' );

	// Load our Stylesheets
	wp_enqueue_style( 'foundation-css' );

}
add_action( 'wp_enqueue_scripts', 'my_child_theme_load_scripts' );

As you can see we load a bare minimum of scripts and stylesheets in the code above. The following stylesheets and script files are called only:

  • jQuery the version within WordPress
  • required-foundation.min.js Foundation JavaScripts without jQuery
  • app.js execute and register the Foundation JS stuff
  • foundation.min.css Foundation Stylesheets

We don’t even load the style.css neither from the parent theme nor the child theme, of course this is a little silly, but you might need this one day. You could instead register the scripts within the required_starter_scripts() function in your child themes functions.php, but that would have been to much here.

Only remove certain scripts and styles

Let’s have a look on how to only remove some scripts and stylesheets in your child-theme, in case you wish replace a file with your own for example:

/**
 * Remove certain styles and scripts
 *
 * In case you only want to remove certain
 * scripts and styles, this is how:
 *
 * @link http://themes.required.ch/?p=798
 */
function my_child_theme_remove_scripts() {

    // Remove theme-js
    wp_dequeue_script( 'theme-js' );
    wp_deregister_script( 'theme-js' );

    // Let's keep the app.js and required-foundation.min.js
    wp_enqueue_script( 'app-js' );

    // Remove theme css style.css calls, 
    // but keeps the app.css and foundation.min.css
    // because we of the dependencies
    wp_deregister_style( 'required-foundation-css' );

}
add_action( 'wp_enqueue_scripts', 'my_child_theme_remove_scripts', 11 );

It probably takes a while of experimenting on your side to get the idea of dependencies in WordPress style and script helper functions. In the last line we use $priority = 11 to call this function after the parent theme already registered the scripts with the default priority of 10, otherwise we couldn’t remove them safely.

Download the code


Getting started with required+ Foundation

The required+ Foundation parent theme is a powerful responsive WordPress theme that gets you started in no time. Read the docs, download the theme and create something awesome.

Download required+ Foundation »


8 thoughts on “How scripts and styles are loaded

  1. hi guys,

    i don’t know where else to post this query. i’m trying to upload the theme on wordpress but it get the error: The package could not be installed. The theme is missing the style.css stylesheet. What am i doing wrong and how can i resolve this?

    Thanks

    • So I guess you downloaded the All-In-One package. As this package contains both the parent and the child theme and the plugins, you can’t simply install through uploading the zip file. The stylesheet isn’t missing, rather not in the place WordPress is looking for. Please open the zip file locally and upload the items individually via FTP or download the single zip files for the themes and upload them (they can be unzipped by WordPress). The final folder structure should look as described in the installation guide.

      • Hi.

        I have this issue too. I uploaded the files form teh ZIP folder and changed the CSS file, but I get “Broken Themes > The following themes are installed but incomplete. Themes must have a stylesheet and a template. > required+ Foundation > Template is missing”

        The folder “page-templates” is on the server. What is wrong please?

        Cheers
        G

  2. Hey guys, love these little posts that show how awesome required + is. Just curious, shouldn’t your provided code use get_stylesheet_directory_uri instead of get_template_directory_uri due to this script being used in the child themes functions? Isn’t it safe to assume the user will be loading additional js / css in their child theme instead of the parent theme.

    Keep up the great work!

    • Hey Corbin, thanks for your comment and the compliment. In the code provided above, we assume that you want to load some of the assets provided in the parent theme, but you are absolutely right, if you want to use scripts and other assets from your child theme folder, for example you brew a custom required-foundation.min.js and put that in your child theme, then you should use get_stylesheet_directory_uri() instead.

      Working on your child theme:

Leave a Reply

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