Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Magento Theme Development Tutorial: Finishing Touches

November 9, 2015

6 Min Read
Reading Time: 6 minutes

In the first part, I overviewed the basics of Magento theme development. I looked at how general things behind Magento themes work. I also explained the functioning of Magento folder structure work for themes. In the second part, I talked in detail about how to develop a Magento product page. Now, this is the last part of the series and in this part, I am going to depict how to make the theme pages and give shape to the entire theme with styling.

Magento Theme Development

Start building your Magento Theme

Firstly, before starting your code, I suggest you to create folders in your theme directory. It’ll be helpful for you to understand which file to save in which folder.

In first part, I mentioned about package and theme folder. Now over here, Cloudways is my package name and w-c is my theme name.

Alright, this is my app’s directory structure so far.

Magento Directory Folders

In this image, you see all folders in app/cloudways directory which you can make while you develop your theme in Magento.

Your skin directory should look like this.

Magento Directory Folders

To learn more about Magento directory structure, you can click here.

Creating CSS

CSS file is located under the Skin directory. You can save your css file in/skin/frontend/cloudways/w-c/css
For this theme, I am going to use a basic CSS, that I have attached for you to download and use in your theme development.

Click here to download CSS files.

Creating local.xml

local.xml file is placed in our theme layout folder that will cover large portion of updates to XML references for that theme which we use. It’s viewed as a good practice and Magento recommends it. There is a long debate on this topic and when I did a bit of research, I found that everyone has their own opinion when it comes to using local.xml.

Create local.xml file inside your theme layout folder. I create local.xml file in my theme folder app/design/frontend/cloudways/w-c/layout with some basic XML markup structure.

<?xml version="1.0"?>
<!--
/*
* Store Name
* Store URL
*
* @description Layout modifications
* @author Author Name
* @package packagename_default
*
*/
-->
<layout version="0.1.0">
<!-- our modifications will go here -->
</layout>

You can create your local.xml file with this code.

Creating page.xml

Magento uses XML files to handle a page’s layout and define which element are available to using. Each view/screen/module gets its own XML file with a master file to define the layout of the website. page.xml is the master file. I am going to show you how you can create this file and where to store it.

After creating your local.xml in app/design/frontend/cloudways/w-c/layout you can now create your page.xml in the same directory.

<?xml version="1.0"?>

<layout version="0.1.0">

<!--

Default layout, loads most of the pages

-->

   <default translate="label" module="page">

       <label>All Pages</label>

       <block type="page/html" name="root" output="toHtml" template="page/2columns-right.phtml">

           <block type="page/html_head" name="head" as="head">

               <action method="addJs"><script>prototype/prototype.js</script></action>

               <action method="addJs"><script>lib/ccard.js</script></action>

               <action method="addJs"><script>prototype/validation.js</script></action>

               <action method="addJs"><script>scriptaculous/builder.js</script></action>

               <action method="addJs"><script>scriptaculous/effects.js</script></action>

               <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>

               <action method="addJs"><script>scriptaculous/controls.js</script></action>

               <action method="addJs"><script>scriptaculous/slider.js</script></action>

               <action method="addJs"><script>varien/js.js</script></action>

               <action method="addJs"><script>varien/form.js</script></action>

               <action method="addJs"><script>varien/menu.js</script></action>

               <action method="addJs"><script>mage/translate.js</script></action>

               <action method="addJs"><script>mage/cookies.js</script></action>

<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

               <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

               <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/>

<if>lt IE 8</if></action>

               <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>

<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

           </block>

        <block type="core/text_list" name="after_body_start" as="after_body_start" translate="label">

               <label>Page Top</label>

           </block>

           <block type="page/html_notices" name="global_notices" as="global_notices" template="page/html/notices.phtml" />

           <block type="page/html_header" name="header" as="header">

               <block type="page/template_links" name="top.links" as="topLinks"/>

           <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>

               <block type="core/text_list" name="top.menu" as="topMenu" translate="label">

                   <label>Navigation Bar</label>

           <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>

               </block>

          <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">

                   <label>Page Header</label>

                   <action method="setElementClass"><value>top-container</value></action>

               </block>

           </block>

           <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

           <block type="core/text_list" name="left" as="left" translate="label">

               <label>Left Column</label>

           </block>

           <block type="core/messages" name="global_messages" as="global_messages"/>

           <block type="core/messages" name="messages" as="messages"/>

           <block type="core/text_list" name="content" as="content" translate="label">

               <label>Main Content Area</label>

           </block>

           <block type="core/text_list" name="right" as="right" translate="label">

               <label>Right Column</label>

           </block>

       <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">

    <block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">

                   <label>Page Footer</label>

                   <action method="setElementClass"><value>bottom-container</value></action>

               </block>

           <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml"/>

               <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>

           </block>

        <block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

               <label>Page Bottom</label>

           </block>

       </block>

       <block type="core/profiler" output="toHtml" name="core_profiler"/>

   </default>

   <print translate="label" module="page">

       <label>All Pages (Print Version)</label>

       <!-- Mage_Page -->

       <block type="page/html" name="root" output="toHtml" template="page/print.phtml">

           <block type="page/html_head" name="head" as="head">

               <action method="addJs"><script>prototype/prototype.js</script></action>

               <action method="addJs"><script>mage/translate.js</script></action>

               <action method="addJs"><script>lib/ccard.js</script></action>

               <action method="addJs"><script>prototype/validation.js</script></action>

               <action method="addJs"><script>varien/js.js</script></action>

               <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>

               <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>

<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

      <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>

<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

           </block>

           <block type="core/text_list" name="content" as="content" translate="label">

               <label>Main Content Area</label>

           </block>

       </block>

   </print>

    <!-- Custom page layout handles -->

   <page_two_columns_right translate="label">

       <label>All Two-Column Layout Pages (Right Column)</label>

       <reference name="root">

           <action method="setTemplate"><template>page/2columns-right.phtml</template></action>

           <!-- Mark root page block that template is applied -->

           <action method="setIsHandle"><applied>1</applied></action>

       </reference>

   </page_two_columns_right>

</layout>

Here are the code for page.xml file, you can use this code for developing the theme.

Note: I have not created the2columns-right.phtml file yet i’ll create this file in next step.

Creating 2columns-right.phtml

Now I will be creating my 2columns-right.phtml file that I specified in the page.xml file.

The directory of 2columns-right.phtml is app/design/frontend/cloudways/w-c/template/page andyou can create and save this file under template/page(folder).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">

<head>

<?php echo $this->getChildHtml('head') ?>

</head>

<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>

<?php echo $this->getChildHtml('after_body_start') ?>

<div class="wrapper">

<?php echo $this->getChildHtml('global_notices') ?>

<div class="page">

<?php echo $this->getChildHtml('header') ?>

<div class="main-container col2-right-layout">

<div class="main">

<?php echo $this->getChildHtml('breadcrumbs') ?>

<div class="col-main">

<?php echo $this->getChildHtml('global_messages') ?>

<?php echo $this->getChildHtml('content') ?>

</div>

<div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>

</div>

</div>

<?php echo $this->getChildHtml('footer') ?>

<?php echo $this->getChildHtml('before_body_end') ?>

</div>

</div>

<?php echo $this->getAbsoluteFooter() ?>

</body>

</html>

The layout should be pretty page skeptic as it’s the master page from which every page is rendered.

Creating Templates Blocks

We start by making the required template files for every functionality and afterward combine those files in blocks.

Page Header

I created header.phtml for page header section and this file is located/saved inapp/design/frontend/cloudways/w-c/template/page/html directory.

Here is the head.phtml file.

<div class="header-container">

<div class="header clearfix">

 <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>

<div class="quick-access">

<p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>

<?php echo $this->getChildHtml('store_language') ?>

<div class="search_toplinks clearfix">

<?php echo $this->getChildHtml('topLinks') ?>

<?php echo $this->getChildHtml('topSearch') ?>

</div>

</div>

<?php echo $this->getChildHtml('topContainer'); ?>

</div>

</div>

<?php echo $this->getChildHtml('topMenu') ?>

Page Footer

I created header.phtml for page footer section and this file is located/saved in app/design/frontend/cloudways/w-c/template/page/html directory Here is the footer.phtml file.

<div class="footer_block_container">

<?php

echo $this->getLayout()->createBlock("cms/block")->setBlockId('cms_cloudways_footer')->toHtml();

?>

</div>

<div class="footer-container">

<div class="footer">

<?php echo $this->getChildHtml() ?>

<address><?php echo $this->getCopyright() ?></address>

</div>

</div>

With the footer section you will be allowed to include any information you deem fit.

Top Menus

I created topmenu.phtml for top menus and placed/saved this file in app/design/frontend/cloudways/w-c/template/page/html directory.

Here is the topmenu.phtml file.

<?php $_menu = $this->getHtml('level-top') ?>

<?php if($_menu): ?>

<div class="nav-container">

   <ul id="nav">

<li class="home <?php if (Mage::helper('core/url')->getCurrentUrl() === Mage::helper('core/url')->getHomeUrl()):?> active<?php endif;?>"><a class="home" href="<?php echo $this->getUrl('')?>" title="">&nbsp;</a></li>

<?php echo $_menu ?>

</ul>

</div>

<?php endif ?>

Breadcrumbs

I created breadcrumbs.phtml for top menus and this file is located/saved in app/design/frontend/cloudways/w-c/template/page/html directory.

Here is the breadcrumbs.phtml file.

<?php if($crumbs && is_array($crumbs)): ?>

<div class="breadcrumbs">

<ul>

<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>

<li class="<?php echo $_crumbName ?>">

<?php if($_crumbInfo['link']): ?>

<a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>

<?php elseif($_crumbInfo['last']): ?>

<strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong>

<?php else: ?>

<?php echo $this->htmlEscape($_crumbInfo['label']) ?>

<?php endif; ?>

<?php if(!$_crumbInfo['last']): ?>

<span><img style="vertical-align:top; margin-top:6px;" src="<?php echo $this>getSkinUrl('images/new/bread_arrow.gif');?>" alt="" /> </span>

<?php endif; ?>

</li>

<?php endforeach; ?>

</ul>

</div>

<?php endif; ?>

If you have followed the steps correctly and did everything as it is, then you should now have a magento theme that looks like this:

Magento theme

And as promised in the previous tutorial of Product page development, I am giving away the .zip file for you to keep and play with. You can use this zip file to make your own theme by doing customization. You can add products, links, blogs and start your Magento store with Cloudways for as low as $15 with a FREE TRIAL. Click here to download the zip file of cloudways-theme-demo for the skin and app directory here.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Boost Your Magento Store Performance by 5x Times & Maximize Your Sales

Our fastest Magento hosting can help you in growing your business revenue by 500%

Cloudways

Cloudways is a European MSP that provides custom cloud design, deployment and management solutions on leading cloud providers.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!