Tuesday , July 25 2017
Home >> All tutorial >> Magento theme tutorial 1.8: Adding extra files to your theme

Magento theme tutorial 1.8: Adding extra files to your theme

In the previous recipe of Magento theme tutorial 1.8, we set up our theme with one CSS file. Mostly, you want to add some more files to it (when you are using a JavaScript plugin or something).

Getting ready

We will add an extra CSS and JavaScript file to our theme. To do this, we have to work in the following two directories:

  • app/design/frontend/packt/default/layout
  • skin/frontend/packt/default

How to do it…

In the following steps, we will see how we can add extra files to a theme:

1. Copy the xml file. The declarations of all the CSS and JavaScript files that need to be included are stored in the file app/design/frontend/base/default/ layout/page.xml.

It is possible that there are other CSS and JavaScript declarations in other layout XML files. The page.xml file is used to set up the default layout structure.

2. We need to add something. So we need to copy this file with the same folder structure to our theme folder. Copy the file to app/design/frontend/packt/default/layout/page.xml.

3. Add the CSS declaration

4. If you open the page.xmlfile and look in the <default>tag, you will see a lot of lines with “addCss”. We need to add the following line in that section:<action method=”addCss”><stylesheet>css/packt.css</stylesheet></action>

The path we specify here is the path starting from our theme root folder, so it is css/packt.css. Magento will use the theme fallback to find the file in the theme, package, or basefolder.

5. Don’t forget to create the CSS file. Create the packt.cssfile in the skin/frontend/packt/default/css/folder.

6.  Clear the Magento cache.

When you change something in the XML files, you will always have to clear the cache to see the effect of your changes. It is also possible to disable the cache. The purpose is that you don’t have to clear the cache many times as the page loads are slower.

7. Reload the frontend and look at the HTML source. Your file should be added.

How it works…

The addCssfunctionis one of the functions in the head block of Magento. This block will generate the HTML head section of a page.

The following functions are useful when working with extra CSS and JS files:

addJs: This function will add a JS file from the jsfolder (folder in the root directory) to the head of the page.
addItem: This is a function that will add a JS or CSS file to the head of the page. The function has two required parameters: the type and the file name.

  • The type can have the following values:
  • skin_js: This is a JavaScript file in the skinfolder
  • js_css: This is a CSS file in the jsfolder
  • js: This is a JavaScript file in the jsfolder
  • css: This is a CSS file in the skinfolder
  • rss: This creates a <link>HTML tag with an attribute type=”application/rss+xml”

The addItemfunction hasthree other optional parametersto customize the output of the tag in the headtag.

There’s more…

When you use the right functions to include images, JavaScript, and CSS, you have the following advantages over adding HTML code in a .phtmlfile:

  • You can merge the CSS and JavaScript files to one file when you configure it
  • It always contains the right absolute URL to the file (it contains the right domain
    and protocol)
  •  It uses the theme fallback system

Thank you for reading our posts, you can read all the series at: Magento theme tutorial channel


Ready to foster your knowledge with MAGENTO 2 BASIC GUIDE

The new Order Success combo with Magento 2 Inventory Management, Magento 2 Order Fulfillment, Magento 2 Dropship, Magento 2 Barcode Management and Magento 2 Purchase Management

Is your site still a mess and Magento extensions are not enough to save your site? Save your site with Magento Web Development Services now

magento services


About admin admin