Tag Archives: Magento Themes

Theming for Magento — Part 04 – How it all works

Posted on with 6 Comments

Wow, part 4 already? This is where the real fun comes in, folks. Today we’ll be opening up some *.phtml and *.xml files, looking at what’s going on under the hood and finding out how the theme files all tie together. Lets get started, shall we?

Before we get to those files…

Folks, before we dive into the files, lets get some concepts down that are crucial to understanding how the Magento theme files play together.

Magento themes consist of, aside from styling assets (CSS, images, Javascript, etc) a collection of *.phtml (essentially, XHTML files that can execute PHP) and *.xml (Extensible Markup Language) files that make the theme work.

The *.xml files define blocks and regions, which template files get used for which blocks & regions as well as various attributes and parameters for each if these definitions, where applicable.

While the *.xml files tell everything where to be and what to look like, the *.phtml files contain the actual XHTML code required for each block and region.

  • At the time of writing this tutorial, I have upgraded my Magento installation to Community Edition 1.4. All further tutorials, as well as this one, will be  referencing Magento Community Edition 1.4 unless otherwise stated. Please be sure you have the latest version.

Continue reading →

Theming for Magento — Part 03 – Theming Basics

Posted on with 8 Comments

Right. We’re in part 03 of our “Theming for Magento” tutorial collection. Time to get down to some theming.

A quick word on conventions

Magento, like many other content management systems, likes to follow conventions. Adopting these conventions when designing your theme, as well as during the theming process, can greatly minimize the amount of code required by your theme. As mentioned on Part 02, Magento has a “fall back” feature where it looks for required files, when not in your theme, within all other themes in the current interface until it finds the file it requires. This essentially allows users to keep a copy of the default theme in the interface in which they are coding their theme (either the “default” or a custom interface) and to only modify the files that require customisation. Continue reading →

Theming for Magento – Part 02 – Theme Architecture

Posted on with No Comments

OK folks, we’re not going to rush things. Lets take this theming for Magento one step at a time. :)

In today’s tutorial, I’ll be discussing the architecture of Magento themes, the reason for this architecture and a brief introduction into a general idea of what goes where and why.

The installation… lets get it out of the way

The Magento installation is, essentially, a click-through process. You need to have a MySQL database created on a server, as well as the login details for this database. Other than that, the various options are fairly clear and straight forward.

For further information on installing Magento, visit the Magento Installation Guide and Knowledge Base. Continue reading →

Theming for Magento – Part 01

Posted on with No Comments

Magento, the popular e-commerce website platform, has, over the past few years, become a prominant player in the content management market. Utilising its robust array of features as well as its stock and sales management fascilities, Magento is a great choice for a system to manage your online store.

When setting up your Magento store, the system comes packaged with a default theme. In the majority of situations, this is not ideal. Enter theming… the process of designing and building a custom theme for your Magento store. This post is an introduction to a collection of blog posts discussing theming for Magento, general concepts and a few tips and tricks. These posts are intended as guidelines to theming and not as a verbatim point-for-point on how to create Magento themes. :)

Before we start, there are a few things you’ll need:
Continue reading →