CREATING A CUSTOM HOMEPAGE TEMPLATE IN MAGENTO

The majority of e-commerce websites you will come across the homepage is normally a different type of layout to the rest of your pages. Magento by default does cover this quite well. as it gives you a 3 or 4 useful templates.

1 column, 2 columns left, 2 columns right, 3 columns and So on. So depending on your design, you might need to use the 1 column for your homepage and and the 2 columns left for all your inner pages. But what happens if by chance your product page is also a 1 column layout? Also your homepage template needs to have a load of customisations like sliders, featured products etc etc.

When embarking on a Magento build some people like to use a theme  some people like to build from scratch, Im a build from scratch kind of chap but either way this solution is pluggable into anything. As it doesn’t hack into any core files at all and uses a neat ‘local’ module to extend the core template function.

In this tutorial i will be Creating a custom homepage template in Magento, follow this step by step guide to achieve this on your website.

Download “HomePage.zip”HomePage.zip – Downloaded 3069 times – 6 kB

Above is the download with instructions that you can upload via FTP straight into your file structure. (Always backup first).

Below is a breakdown of what we are doing in the files to give you an idea of whats going on and so you can see at a glance if its the right solution for you.

Part 1 – The Home Page Template

As a good starting point I always just use a copy of the code thats in 1column.phtml (or whichever basiclayout you think best fits your design) and copy the code into:

/app/design/frontend/default/YOURTHEME/template/page/homepage.phtml

Once you have done this save it and leave it for a bit, you will be revisiting this file to make you changes soon!

Part 2 – Create your template module config.xml.

<?xml version="1.0"?>
<config>
     <modules>
        <Home_page>
        <version>0.1.0</version>
        </Home_page>
     </modules>
           <global>
               <page>
                 <layouts>
                    <homepage translate="label">
                           <label>Home_page</label>
                             <template>page/homepage.phtml</template>
                           <layout_handle>home_page</layout_handle>
                    </homepage>
                <!-- add more layouts here -->
                 </layouts>
               </page>
          </global>
 </config>

Place this file here: /app/code/local/Home/Page/etc/… (you may need to create a local folder if this is your first module)

Part 3 – Next tell Magento your module exists

create a file called Home_page.xml

Place the file here: /app/etc/modules/…

And fill it with the following code

<?xml version="1.0"?>
<config>
    <modules>
        <Home_page>
           <active>true</active>
              <codePool>local</codePool>
          <depends>
           <Mage_Page />
          </depends>
       </Home_page>
    </modules>
</config>

Part 4 – Add to your CMS Page and edit

Now go to your Magento back end admin. Go to CMS > Pages

Now go to the CMS homepage, you should now have ‘Home_page’ in your ‘layout’ dropdown select it and save your page

Now go back to your homepage.phtml and edit till your hearts content!