Add custom CSS/JS to CMS page layout

imagendemi8edd

Hi. I’m following this guide on how to create a custom layout that can be applied to multiple cms pages. I want to create a new layout that will apply to a group of pages instead of creating multiple cms_page_view_selectable_…xml files for each page, and I want to use a custom css and js on these pages.

The example from the guide shows how to add a new block to the new layout, but it doesn’t mention how to add custom css or js file.

I’m adding these two files:

app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/page_layout/1-column-custom-footer.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <head>
        <css src="css/pages/custom-footer.css" />
    </head>
</layout>

app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="1-column-custom-footer">
        <label translate="true">1 Column with Custom Footer</label>
    </layout>
</page_layouts>

Unfortunately this doesn’t add new css file to the page, which makes me think that I can’t add css to <layout …/>, only to <page …/>.

How can I add custom js and css to a new layout?

Thanks.

johnwebdes40a5

Hello @imagendemi8edd

Create the Custom Layout XML

In view/frontend/layout/your_custom_layout.xml, define the layout and specify the JS and CSS files:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Custom_Module::css/custom.css"/>
        <js src="Custom_Module::js/custom.js"/>
    </head>
    <body>
        <!-- Add your layout content here -->
    </body>
</page>

Create the Custom JS and CSS Files

Add your custom CSS in view/frontend/web/css/custom.css and your custom JS in view/frontend/web/js/custom.js.

php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento cache:flush

Hope it helps !

If you find our reply helpful, please give us kudos.

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

Thank You,

WebDesk Solution Support Team
Get a Free Quote | Email | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

Location: 150 King St. W. Toronto, ON M5H 1J9

imagendemi8edd

Hello @johnwebdes40a5,

Thanks for your reply. Here’s what I’m trying to achieve:

I want to create a layout that can be selected from admin and applied to multiple pages, and that layout should have custom css and js files.

Creating custom layout like you’re suggesting won’t add it to admin.

Add custom CSS/JS to CMS page layout

Add custom CSS/JS to CMS page layout

Re: How to add custom css and js to a custom page layout?

Re: How to add custom css and js to a custom page layout?