Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Magento Theme Development: Bootstrapping
  • like 3 17

    Magento Theme Development: Bootstrapping

    1. November 2015
    2. Daily
    3. read 855
    4. response 1

    In this second article of our Magento theme development series, we’ll set up the basis of our new theme. We’ll set up the basic directory structure of our new theme, inherit it from Magento's default Responsive theme, place the CSS, JS, and images in the appropriate locations, and create a new local.xml file for our new theme to include these CSS and JS files into our website’s header. So, let’s get started.

    Creating a New Theme Folder Structure

    The first step in creating our new Magento theme is setting up the folder structure, where we can place our new theme files. We need to place our theme files in two locations:

    1. in the app/design/frontend folder, where we’ll add our phtml and xml files
    2. in the skin/frontend folder, where we’ll add our CSS, JS and theme related image files

    Before we start creating new directories inside the directories mentioned above, it is best to decide two names we are going to use continuously. The first will be the name of our package—it could be your company name, theme author's name or anything—and the second will be the name of the theme. For this tutorial, we’ll use ‘tutsplus’ as the package name, and ‘vstyle’ as the theme name. Once these two names are decided, let’s start creating the folders.

    First, let’s create these paths in our app and skin folder:
    [Magento Directory]/app/design/frontend/{package_name}/{theme_name}/
    [Magento Directory]/skin/frontend/{package_name}/{theme_name}/

    Magneto Paths

    Which in our case will become: 
    [Magento Directory]/app/design/frontend/tutsplus/vstyle/
    [Magento Directory]/skin/frontend/tutsplus/vstyle/

    Once these folders are created, let’s add these four folders in the app/design/frontend/tutsplus/vstyle directory:

    1. layout
    2. template
    3. locale
    4. etc

    And these four folders in the skin/frontend/tutsplus/vstyle folder:

    1. css
    2. images
    3. js
    4. fonts

    Activating the Theme

    Let’s activate the theme now, to see how things look. For that, go to System > Settings > Design, enter ‘tutsplus’ in the Current Package Name field and ‘vstyle’ in the Template field, and save. Now, refresh the front page of our store, and you’ll see that the whole page is messed up. That’s okay; we’ll make it work by inheriting it from Magento's default responsive theme in the next step.

    Packages and Themes

    Inheritance

    Prior to Magento 1.9, Magento didn’t have a child theme feature in it. We used to rely on Magento's fallback model to use Magento's default theme to take care of many features. But thankfully, now in Magento version 1.9, we can make a child theme of any theme, and extend its looks and functionality without a problem. 

    In this tutorial, we are going to make our new theme a child theme of Magento's RWD theme. For that we simply have to create a new theme.xml file in this folder location: app/design/frontend/tutsplus/vstyle/etc.

    Put this code in this XML file:

    <?xml version="1.0"?>
<theme>
    <parent>rwd/default</parent>
</theme>

    Now, refresh the front page of your Magento store, and you’ll see a fully working site.

    Front page of Magento store

    The reason the site is now working perfectly fine is that we have now inherited our new theme from the RWD theme. That means that while rendering our new theme, if Magento doesn’t find any file in this new theme, it’ll go and look in the Magento RWD theme, and if found there, Magento will then use it. 

    As our new theme doesn’t have any files yet, all files are retrieved from Magento's RWD theme, so the current look of our site is identical to the RWD theme. But now we have the flexibility to edit these looks by creating our own theme files wherever needed, and all the rest of the files will be inherited from the RWD theme.

    Another advantage of using this approach is that with the update of Magento versions, the Magento RWD theme is also often updated. That way our theme will always have a fallback on the latest Magento theme to provide support for the latest features and bug fixes.

    Placing CSS, JavaScript, and Image Files

    Now, we’ll start modifying this new child theme we have just created. For that, let’s start by copying the CSS, JS, and image files from our HTML site to this location in our Magento store:

    skin/frontend/tutsplus/vstyle/

    As mentioned above, we have created three folders in this location, namely js, images, fonts, and css. Place the CSS, JS and images files in their respective folders.

    Creating a New local.xml File

    Just placing these CSS and JS files there will not include them in your Magento site. For that we have to manually add them to the header block of our Magento HTML. 

    For the purpose of this tutorial, we’ll only create one XML file, and will place all our changes into that one file. We’ll name that XML file local.xml, as this file is rendered at the end of all other XML files, and it also overrides the functionality of other XML files. We’ll create this file in this folder location:

    app/design/frontend/tutsplus/vstyle/layout

    localxml

    Once this file is created, we’ll add the following code in this file, to include the CSS and JS files into our website’s header.

    <layout version="0.1.0">
    <default>

        <reference name="head">
            <!--Adding JS Files Styles-->
            <action method="addItem"><type>skin_js</type><name>js/bootstrap.min.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.carouFredSel-6.2.1-packed.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.easing.1.3.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.elevatezoom.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.flexslider.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/owl.carousel.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.sequence-min.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/script.min.js</name><params/></action>

            <!--Adding CSS Files Styles-->
            <action method="addCss"><stylesheet>css/bootstrap.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/bootstrapTheme.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/font-awesome.min.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/flexslider.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/owl.carousel.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/owl.theme.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/sequence-looptheme.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/style.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/style8.css</stylesheet><params/></action>
        </reference>

    </default>
</layout>

    Let me explain the above code step by step. Under layout (implying this handle is related to layout) and default handle (as this will be used for all default cases), we created a new block and referenced it to ‘head’—that means that these changes will take effect only in the ‘head’ block. Next we have used two action methods to add CSS and JS files separately. For adding JS files, we have used this XML code:
    <action method="addItem"><type>skin_js</type><name>js/{javascript_file_name}.js</name><params/></action>

    And to include CSS files, we have used this XML code:
    <action method="addCss"><stylesheet>css/{css_file_name}.css</stylesheet><params/></action>

    To ensure that these CSS and JS files are actually included in our new theme, refresh the store’s front page, and press Control-U to check the page’s source code. Here in the head section, where you should see your newly added CSS and JS files. Click on each of those links, to make sure that they are linking to proper files, and there are no broken links.

    Added Assets

    By now, hopefully, you’ll already start seeing some changes in your website’s appearance. We have just got started in editing this theme. In the next article of this course, we’ll start editing the phtml files of the header, footer and some other template pages.  This is how our theme looks at this stage.

    Homepage

    In the comments section below, let us know if you are able to follow the instructions so far. Also, let me know if you liked the article. We’d love to hear your opinions.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    3
    Add a comment...
    4elements
    Comments
  • 1
    silhouette
    sherman rosenberg
    September 22, 2016 at

    Excellent way of telling, and fastidious article to get information about my presentation topic, which i am going to convey in academy.

    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News