Add Styles and JavaScript to Your Theme

Now that we've got our asset build pipeline working, we can modify our theme to include the newly built CSS and JS files. Let's hard-code these into, putting the stylesheet into the header and the JavaScript into the footer.


In header.php, right before the closing </head> tag, add the following:

<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/main.css">

This adds the main.css style file to your theme.


In footer.php, right before the closing </body> tag, add the following:

<script type="text/javascript" src="<?=$view->getThemePath()?>/js/main.js"></script>

This adds the main.js JavaScript file to your theme.

Test the CSS

Now, let's make sure that the files we're working with are being properly loaded. Go back to the assets/main.scss file you created before, and add some simple style to it, like this:

body {color: red !important}

Then, rebuild the CSS with

npm run production

Once the build is complete, reload your site (clear your browser's cache if necessary) and you should see the results of your change:


It worked! Now we know that changes we make in main.scss and main.js will, when built, work properly in the theme. Now it's time for us to include Bedrock in our main.scss and main.js files.