{"id":253,"date":"2015-10-03T14:34:29","date_gmt":"2015-10-03T14:34:29","guid":{"rendered":"http:\/\/www.effectualmedia.com\/blog\/?p=253"},"modified":"2017-08-21T10:08:39","modified_gmt":"2017-08-21T10:08:39","slug":"creating-custom-homepage-template-and-magento","status":"publish","type":"post","link":"https:\/\/www.effectualmedia.com\/blog\/creating-custom-homepage-template-and-magento\/","title":{"rendered":"Creating Custom Homepage Template and Magento"},"content":{"rendered":"<p><img src=\"http:\/\/www.effectualmedia.com\/blog\/wp-content\/uploads\/2017\/08\/Banner-Blog-new.jpg\" alt=\"Banner Blog\" \/><\/p>\n<p>We have requested to create custom homepage template for Magento site. It is also really useful to give different look and feel of static pages of Magento site.<\/p>\n<p>The most of Magento 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 by different templates like 1 column, 2 columns left 2 columns right, 3 columns etc&#8230;<\/p>\n<p>So most of the designer chooses to have 1 column for homepage and the 2 columns left for all your inner pages depending on design. But in our case product page is also a 1 column layout. Also Homepage template has a load of customisations like sliders, featured products etc.<\/p>\n<p><strong>In this article, <\/strong>we will learn how to create custom homepage template and other CMS pages templates in Magento and we&#8217;ll look at the rendering of layout files.<\/p>\n<p><!--more--><\/p>\n<h3>What Is the Template File?<\/h3>\n<p>As the name suggests, these template files hold the markup for each Magento blocks that are being displayed in the frontend reside in in <em><strong>app &gt; design &gt; frontend &gt; interface &gt; theme &gt; template.<\/strong><\/em><\/p>\n<h3>Create NEW Custom Template File<\/h3>\n<p>To create a new template, first we need to create .phtml file.<\/p>\n<p>Go to <em><strong>app &gt; design &gt; frontend &gt; <em><strong>interface <\/strong><\/em>&gt; theme &gt; template &gt; page<\/strong><\/em> folder and create .phtml file (i.e homepage.phtml)<\/p>\n<p>Copy content from 1column.phtml (as it holds the most essential parts of the theme (i.e., HTML Head, header, footer, main menu, etc.) and paste on homepage.phtml<\/p>\n<p>Now you can do all customization which you want to show on Home Page only on homepage.phtml<\/p>\n<h3>Create local.xml File<\/h3>\n<p>Create the local.xml inside your theme\u2019s layout folder (<em><strong>app &gt; design &gt; frontend &gt; <em><strong>interface <\/strong><\/em>&gt; theme &gt; layout<\/strong><\/em>) and add following code.<\/p>\n<p><code lang=\"xml\"><!--?xml version=\"1.0\"?--><\/code><\/p>\n<p><label>Home Page Template<\/label><br \/>\npage\/homecolumn.phtml<\/p>\n<h3>Assign New Template to CMS Pages<\/h3>\n<p>Go to<em><strong> Magento Admin &gt; CMS &gt; Pages<\/strong><\/em> and Select Home Page. In Design Tab, Your template file will be visible there, select <strong>\u201cHome Page Template\u201d<\/strong> from dropdown and save.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.effectualmedia.com\/blog\/wp-content\/uploads\/2015\/10\/magento-cms-template.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-266\" title=\"Magento Custom Home Page Template\" src=\"http:\/\/www.effectualmedia.com\/blog\/wp-content\/uploads\/2015\/10\/magento-cms-template-1024x187.png\" alt=\"Magento Custom Home Page Template\" width=\"1024\" height=\"187\" srcset=\"https:\/\/www.effectualmedia.com\/blog\/wp-content\/uploads\/2015\/10\/magento-cms-template-1024x187.png 1024w, https:\/\/www.effectualmedia.com\/blog\/wp-content\/uploads\/2015\/10\/magento-cms-template-300x54.png 300w, https:\/\/www.effectualmedia.com\/blog\/wp-content\/uploads\/2015\/10\/magento-cms-template-500x91.png 500w, https:\/\/www.effectualmedia.com\/blog\/wp-content\/uploads\/2015\/10\/magento-cms-template.png 1384w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>You can also assign same template to any other CMS page.<\/p>\n<p>Clear cache, and check your homepage.<\/p>\n<p>In this post, I have attached the local.xml code that we have created.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have requested to create custom homepage template for Magento site. It is also really useful to give different look and feel of static pages of Magento site. The most of Magento Websites you will come across the homepage is &hellip; <\/p>\n<p><strong><a href=\"https:\/\/www.effectualmedia.com\/blog\/creating-custom-homepage-template-and-magento\/\">Read More<\/a><\/strong><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,9,13],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/posts\/253"}],"collection":[{"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/comments?post=253"}],"version-history":[{"count":28,"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/posts\/253\/revisions"}],"predecessor-version":[{"id":1135,"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/posts\/253\/revisions\/1135"}],"wp:attachment":[{"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/media?parent=253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/categories?post=253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.effectualmedia.com\/blog\/wp-json\/wp\/v2\/tags?post=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}