Forum: 

How To Build Theme In Magento

wajid hussain's picture
provides the options to customize the store as per the business need. Theme development in Magento is not much difficult part.
 
When you start a new project on Magento you will either need to create a Magento theme (if you have the expertise) or you would have to buy a theme for your Magento project. You would want a theme which you can customize and make according to your needs. It is a bit technical to make a Magento theme, but it is not difficult. You just need to follow Magento recommendations and rules, to help you make your project.
 
With This Tutorial you can learn the basic things of Magento Theme Development.
Chris Harren's picture

Hey,

Great for some useful tutorials and its very good to learn from you about Magento Theme Development

wajid hussain's picture

Great to hear this Chris :) 

PatricDiran's picture

First up, we need to understand the Magento Hierarchy and where your theme falls into place. This is the most important step)

Professional web application development company - Iflexion

wajid hussain's picture

Yes exactly, First you need to understand the Magento Hierarchy and I mentioned this in my First part of Them Development: http://www.cloudways.com/blog/introduction-magento-theme-development/

richardsonkane's picture

The template files contain what you’d expect a template system to handle, such as the HTML, JavaScript, and some PHP.

The block classes allow us to move the reusable functionality from the PHP template files into PHP classes, which can be used again on different template files in the future.  As a rule, all template files will have an associated block class.  Block classes are just normal PHP classes, and can be accessed in the template through the $this variable.

Various helper methods, such as getSkinUrl($path) or getUrl($path), are contained in all block classes. These methods are then used in a template file, by calling: $this->getSkinurl('images/logo.png'), for example.

 

app/
  code/
    {core,local,community}/
      Company/
        Module/
          Block/
  design/
    frontend/
      base/
        default/
          layout/
          template/
      mytheme/
        default/
          layout/
          template/
        christmas/
          layout/
          template/
  skin/
    frontend/
      base/
        default/
          css/
          images/
        mytheme/
          default/
            css/
            images/
          christmas/
            css/
            images/

 

 

All template files will be in the .phtml files found in various folders under the app/design/frontend/{$interface}/{$theme}/template folder.  All layout XML files will be found in the app/design/frontend/{$interface}/{$theme}/layout folder.  All blocks will be in the app/code/{core,local,community}/{$company}/{$module}/Block folder.

 

jamesmith's picture

To build Magento Themes, All should learn template system first. Magento Development may seem a little complex at first but once you understand the flow it seems very easy. 

There are three components to the template system:

  • PHP template files
  • PHP block classes
  • XML layout configuration

Hope this will helps you to start build your own magento theme.

 

 

cuaninh92's picture

In magento, when the need to create a theme based on what items to create the theme is to create a suitable theme.

Create a new default theme: To create a new default theme, we first need to copy the default themes available to create a new theme. Create a path app / design / frontend / default / default / name_interface / name_new_theme. And do the same for skin / frontend / default / default.
Create a non-default theme: non-default theme When creating new we just change the path some specific files and therefore have to copy these files as a starting point of a new theme. When editing the information, we must ensure compliance with the structure and rules of Magento. like all the default themes are included template files 'home.phtml' from the module catalog in the directory app / design / frontend / name_your_interface / name_your_non_default_theme need to create more 'template / catalog' to save the file to open the road template.Khi result of a default theme you'll learn about the structure of the path of how, and by which to ensure that the new theme will restart successfully. The directory structure of the system when creating themes:
"App / design": Save the file templates, layout, locale ...
"Skin": Save the theme file-format CSS, images ... First we create thme following directory structure.

Default
app
  design
    frontend
      tên package mới
      Tên của theme mới muốn tao
    layout
    template
    locale

skin

Default
frontend
  tên package mới (package)
  Tên của theme mới muốn tao
    css
    images
    js

Create a new file:

Default
/app/design/frontend/new_package_name/new_theme_name/layout/local.xml
/skin/frontend/new_package_name/new_theme_name/css/custom.css
/skin/frontend/new_package_name/new_theme_name/js/custom_js.js

Edit the information in the file local.xml, include css and js files

Default
<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <default>
  <!-- thêm các file stylesheet vào theme -->
    <reference name="head">
      <action method="addCss"><stylesheet>css/custom.css</stylesheet></action>
      <action method="addItem"><type>skin_js</type><name>js/custom_js.js</name></action>
    </reference>
  </default>
</layout>

JavaScript files can also be added to the theme by declaring in local.xml: A theme is created should have the following characteristics:
There is a single file layout management, naming local.xml, where all the layout can be updated.
Without any layout that has the same name as in the base layout.
does not have any css files css file with the same name in the default skin.
No .phtml template files except those assisting new theme file.
New theme on the website update After creating the framework for a new theme, next we need to set it up on the website to check the theme has run well or not. Visit store magento admin administrator access in order www.mydomain.com/admin System -> Configuration -> Design in the management package, enter the name of the package that contains the newly created theme. in the management theme, enter the name of the theme we just created. Screenshot-from-2014-03-31-092203 Finally, press save config and restart the page.

 

Smart Choice for Online Business System : best product designers | online hotel booking system 

Sanjay Kumar Negi's picture

That is a nice resource to build a theme on Magento. You can also take help of a Magento development company for doing this effectively like https://www.loginworks.com/magento/ Hope it helps.
trice001's picture

Magento is one of the mainstream open source stage for web improvement in introduce time and adaptable device in building effective site. Magento Templates have most magnificent plans to develop an online shop. Magento is likewise be utilized as a part of updating existing on the web store. It has effectively satisfied the prerequisites of internet business group and as yet adding parcel more to it. It gives add up to control over the site and usefulness according to the client accommodation. The best piece of moving from a standard style site to an eye getting and viable site is the possibility of getting assortment of outlines as indicated by client needs. There is an extensive variety of layouts accessible to browse. Every one of the layouts from magento are produced by proficient engineers and are additionally adjustable if necessary. Limited time and advertising apparatuses would be the considerable highlights to expand business incomes. It enables globalization to your business. The magento online store can be made for getting business around the globe. It has a dazzling office to have more than one online store in various dialects. This implies you can make you business limits without having stresses. These stores can be open from only one URL effortlessly sensible. Subjects are the mix of design formats and skin records, Magento gives you a chance to have various topics while having one store. Working diverse store utilizing single site URL can have distinctive topics. You can redo it as indicated by the client requests. Most premium magento topics suppliers give wellspring of the subjects that incorporates PSDs, textual styles and so forth. Magento additionally offers to have non default subject for regular changes. These topics are made for brief timeframe to get regular business on the web. You can have a scope of subjects by hues and formats. The topics are SEO-accommodating and can be made in numerous dialects.

Thanks& regards,

Angel anave

Toronto Web Development| Web Development Toronto

Post new comment