আগামী ৩০ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

Magento Theme Development From Scratch Part-1

Magento Header

Introduction

Hello Guys. Today I’ll be taking a look into the basics of Magento Theme Development. If you do not have the base Magento running on your local server, Please look at post ” MAGENTO INSTALLATION PART 1 or PART 2 or PART 3 ” Let’s now we describe the Magento  Folder Structure and will see how they influence in its Theme Development.

In this Article, I’ll be covering the following topics:

  • Magento Theme hierarchy
  • Magento Theme Folder Structure

The end of this article you will understand of Magento theme principles and be able to create and modify your magento themes like a professional!

Now, we’re ready to get started.

Understanding Magento Hierarchy
First, we need to understand the Magento Theme folder Hierarchy and where our theme falls. There are many folders and files in magento, I will describe only on the ones that we need to work with.

app/design/frontend/base/default/
app/design/frontend/default/default/
app/design/frontend/<package_name>/<theme_name>/

skin/frontend/base/default/
skin/frontend/default/default/
skin/frontend/<package_name>/<theme_name>/

Magento, has two folders app and skin which correspond with each other.

Understanding Magento App directory

“app” directory play very important role in the magento. This directory contains allapplication development related files. app is on the root in the magento directory structure. Word app comes from word application. This directory contains following type of file:

  1. Different configuration files related to magento application like database configuration file, module configuration files etc.
  2. All module of the magento.
  3. Design and theme related files
  4. Language related files

app directory has following 4 sub directories.

  1. code
  2. design
  3. etc
  4. locale

/app/code directory: code directory is the directory for the developer. All magento code is placed in the /app/code directory. code directory has following 3 sub directories.

  1. core
  2. local
  3. community

/app/code/core directory: This directory contains all magento core modules. All magento modules clubbed in Mage namespace.
/app/code/local directory: This directory contains all locally developed module. Locally developed module means if you are customizing any core magento feature by creating any module then you can create your module in /app/code/local module.
/app/code/community directory: This directory contain module installed by magento connect.
/app/design directory: This is directory for the designer. /app/design magento directory contains all design related files of the admin and frontend interface. /app/design directory has following 3 sub directories.

  1. frontend : Contains design file related to fronted of your magento
  2. adminhtml : Contains design file related to admin interface of your magento
  3. install : Contains design file related to magento installer.

 /app/etc directory: This directory primarily contains xml files. These xml files contains all configuration related information of your store. Following are some example of the configuration files of your magento store:

  1. /app/etc/local.xml file contains database server information and router information
  2. /app/etc/config.xml file contains all directory related information
  3. /app/etc/modules folder contains all module loading configuration files.

/app/locale directory: This directory contains the language string file. For example if you are running your magento store in 2 language then you need to create locale folder for every language.
So in magento directory structure app folder play very important role. If you want to learn customization of magento then you should be completely aware about the app directory structure of the magento.
So, before we go any further it’s important we understand what packages and themes are. If we get this right everything else will fall into place nicely.

Understanding Magento skin directory

skin folder is again a folder in magento directory structure in which we store media files. But in skin folder only contains media related to the design of your fronted and admin area. Skin folder contains image, css and JavaScript of all of your theme of the magento. Skin folder has further 3 main sub directory:

  1. skin/frontend: This directory contain css, js and image files of fronted magento themes
  2. skin/adminhtml: This directory contains css,js and images of admin theme of magento.
  3. skin/install: This directory contains media related to magento installer.

Understanding Magento Packages and Themes:

Package: In magento, package is a collection of related themes. Magento comes with a special package called base. It’s for making Magento core files available to the front end.
Theme: In magento, a theme is a direct sub-folder of a package which contains the files that make up your store. A theme can only belong to one package and by convention each package must contain a theme named "default" which is the main theme for that package.

Magento Package and ThemeMagento Package and Theme in Skin Folder

Understanding the Base Package

The base package only contains one theme named default. The role of the base package is to provide hooks to all of Magento’s core functionality, so that custom themes can include in them just the changes to that core functionality that are specific to the design or business they’re intended to support. This provides a cleaner codebase and a better upgrade path for your themes.

In the directory structure, the base package is located at:

  • app/design/frontend/base/default/ – contains all of the layout and template files necessary to support core Magento functionality.
  • skin/frontend/base/default/ – contains some CSS and Javascript files, which support core functionality. It does not, however, contain all of the CSS and image files necessary to style a site, because those are specific to a design and not to the core.

 Understanding the Base Package Understanding the Base Package

Base isn’t really a full theme per se, since it lacks most of the skin files like CSS, images, etc. It’s a repository for making core Magento functionality available to the frontend. So don’t make any of your customizations there—files in the base package should not be edited.
Custom themes should be made inside of their own design package directories. Files that need to be changed can be copied from base to your custom design package and edited there or you can create a set local files to hold your mods.

  • Rule 1: Do NOT edit the files in the base package
  • Rule 2: Do not create a custom theme inside of the base package

 

Understanding the Default Package

The default package again comes bundled with every Magento install but this time has multiple themes assigned to it. As of community edition 1.9.1.0 it has four different themes of which are:

  • default
  • blank
  • iphone
  • modern

 

The problem with default/default is that it gets overwritten during any Magento upgrade. So designers and developers who would customize default/default directly would have their work overwritten every time. (base/default also gets overwritten during upgrades, which is why you should not customize those files directly either.)

Default/default is also not available across multiple packages, so changes there would still have to be replicated to (and maintained in) all other packages in order to be available to each.

  • Rule 5: Do not create your custom theme inside of the default/default directories, even though there are old instructions that may tell you to do so. This approach was never recommended.

 

  • Rule 6: Do not copy all the files from default/default into your custom package as a starting point, even though there are old instructions that may tell you to do so. This approach has been deprecated.
  • Exception to Rule 6: Because base/default does not contain full CSS files, you may want to copy the CSS from one of the demo themes into your new custom themes as a starting point. Many designers and developers prefer to start with nothing and build their CSS from scratch though, so you can do this too. In general, if you do copy over CSS and image files to your new custom package, the blank theme (default/blank) provides the leanest CSS.

 

  • 2nd Exception to Rule 6: Enterprise customers for now DO need to copy the files from enterprise/default into their custom package as a starting point. In a future release, the Enterprise files will be folded into the base/default directories but they are not in EEv1.8.

magento theme development from scratch Part-1

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor's degree in Engineering from State University Of Bangladesh, I'm also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i'm a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I'm also a Course Instructor of ZCPE PHP 7 Certification and professional web development course at w3programmers Training Institute - a leading Training Institute in the country.
10 comments on “Magento Theme Development From Scratch Part-1
  1. Pingback: Magento Custom Theme Development

Leave a Reply

Your email address will not be published. Required fields are marked *