Quick start to Magento front-end development
Magento front-end customization can be a difficult task for beginners. The level of difficulty can be measured by design complexity or the need for customizing and moving the pre-built objects within or between the templates. In this series, we will be delve into 5 lessons that will cover all of the sections that involving Magento front-end development.
This post is part of a series on mastering Magento templates:
- Mastering Magento’s templates in five easy steps [part 1] (current)
- Mastering Magento’s templates in five easy steps [part 2]
Index of lessons:
- Magento Installation
- Setting up package and theme
- Theme Customization
- Layout Customization (part 2)
- Styles Customization (part 2)
Please note that the course requires you to have basic understanding of web technologies like HTML, CSS, PHP, templates, and XML.
Lesson 1: Magento installation
Description: Setting up Magento
- Go to http://www.magentocommerce.com/download and download the latest release of the Community edition of Magento.
- Once you have downloaded Magento Community, open up the zip or tar file and extract it in your web server, assuming you have an Apache web server installed.
- Go to your phpMyAdmin and create a new database, assuming you have MySQL installed.
- Now open up the directory URL that you just created in your web browser and extract your Magento files in it, and it should run installation process.
- Go through the installation process, except when it asks for the Database type, choose database, not file system.
- You’ve just successfully installed Magento!
Lesson 2: Setting up package and theme
Description: Creating our custom Package and Theme to avoid overriding our customization by the Magento update.
- Go to your Magento folder and app/design/frontend/ . Create a new folder there by any name, which will be your package name.
For example: app/design/frontend/your-package
- Go inside the folder you just created and make a new folder. Name your folder, which will be your theme folder. All the templates we customize will reside here. For example: app/design/frontend/your-package/your-theme
- Now go back to the root of your Magento folder and then go inside the skin/frontend and create the same folder structure as above.
For example: skin/frontend/your-package/your-theme
- Once the folder structure is created, log in to your admin section, which should be your local URL /admin or simply add /admin to the end of your Magento URL in the browser.
- Once you are logged in, look for “System” in the top menu, mouse over and click on “Configuration” located on the bottom of the menu. Now click “Design” from the left menu and it should open the page below.
Type your package and theme name into the appropriate fields and click “Save Config” on the top right.
Our package and theme structure is now setup and we are ready to start customizing the themes!
Lesson 3: Theme customization
Description: Editing the template files
- Go to your root folder of Magento and then go to the app/design/frontend/base/default/template and copy the page folder and paste it into your theme folder. In my case, it’s app/design/frontend/your-package/your-theme . Now you should see multiple .phtml files which are basically template files that open up the 2-columns-right.phtml.Refresh the home page and you should see your changes. Remember, page folder contains layout templates which mean any change you make will apply to all pages to which this template is assigned.In case you want to make changes in the header, open up the page/html/header.phtml or if you want to customize product page or checkout, follow the same way you copied the folder and files from default/template : paste it into your-theme/template and customize it as per your needs.
- Now you know how to customize templates!
Check out part 2 of Mastering Magento’s templates in five easy steps!
If you have any questions or comments, please feel free to post them below or tweet us @Pixafy!