How to make a Magento Custom Theme

anil
Table of Contents

Creating Magento Themes Using the Blank Theme

A practical approach to creating custom Magento themes is to modify the pre-installed Blank theme, which provides a minimal set of graphics and CSS. This guide outlines the steps to create a new theme by building on the Blank theme’s foundation.

Step 1: Set Up Theme Folders

Create new theme folders in the app/design/frontend and skin/frontend directories, naming them after your new theme (e.g., our_new_theme). Copy the contents of the Blank theme’s folders into these new directories to serve as the starting point.

Step 2: Create Skeleton Templates

Skeleton templates define the general page structure for your Magento theme. For example, you can create three layout variations:

  • Three-column layout
  • Two-column layout with a sidebar on the right
  • Two-column layout with a sidebar on the left

These layouts can be managed by creating separate skeleton templates and assigning them to specific modules or pages via Magento’s settings. Below is an example of a three-column skeleton template (default.phtml):




    getChildHtml('head') ?>


    

        getChildHtml('header') ?>
        

            

                getChildHtml('content') ?>
                
                
            

            
            

                getChildHtml('left') ?>
            

            
            
            
        

        
        getChildHtml('before_body_end') ?>
    

    
    getAbsoluteFooter() ?>

The before_body_end block, configurable in Magento’s Control Panel under System > Configuration > Design, can include JavaScript for analytics or other functionality. Save this template as app/design/frontend/default/our_new_theme/template/page/default.phtml. If the file exists, it will override the default template.

Step 3: Connect Structural and Content Blocks

Structural blocks define the layout for content blocks on each page. Main structural blocks include:

  • Header
  • Content
  • Footer
  • Left column
  • Right column

Content blocks hold specific content, such as:

  • Store navigation
  • Store access links
  • Page content
  • Footer content
  • Callout
  • Mini cart
  • Newsletters

The getChildHtml method inserts structural blocks. For example:

getChildHtml('footer') ?>

This refers to the footer.phtml template in app/design/frontend/default/our_new_theme/template/page/html.

Step 4: Configure the Layout File

To apply the skeleton template, update the page.xml file in app/design/frontend/default/our_new_theme/layout to reference page/default.phtml:

Step 5: Enable Template Path Hints

To simplify theme development, enable template path hints in Magento’s Control Panel: go to System > Configuration, select your store, navigate to Developer, set Template Path Hints to Yes, and save changes.

Step 6: Customize CSS

The Blank theme includes basic CSS with numerous IDs and classes. To streamline development, separate new or custom styles into a dedicated file and use the CSS @import rule to combine them into a single file, improving maintainability and load efficiency.

Conclusion

By starting with the Blank theme, creating skeleton templates, configuring structural and content blocks, and customizing CSS, you can efficiently develop a custom Magento theme tailored to your store’s needs.

Related posts