Magento 1.4 Theming: Working with Existing Themes

Exclusive offer: get 50% off this eBook here
Magento 1.4 Theming Cookbook

Magento 1.4 Theming Cookbook — Save 50%

Over 40 recipes to create a fully functional, feature rich, customized Magento theme

$23.99    $12.00
by Jose Argudo Blanco | August 2011 | Cookbooks Open Source Web Development

Sometimes we can use a preexisting theme, as a good base for our site, and modify it a bit. In this article by Jose Argudo Blanco, author of Magento 1.4 Theming Cookbook, we will see how we can find a theme, install it, and make some tiny modifications to it, a good and easy way of getting a Magento installation up and running.

The topics covered in this article are:

  • Installing a theme through Magento Connect
  • Installing a theme manually
  • Selecting the recently installed theme
  • Enabling template path hints
  • Simple modifications, changing a logo, and header info
  • Simple modifications, linking to CMS pages from our theme

 

Magento 1.4 Theming Cookbook

Magento 1.4 Theming Cookbook

Over 40 recipes to create a fully functional, feature rich, customized Magento theme

        Read more about this book      

(For more resources on this subject, see here.)

Introduction

As we have just noted, this article is going to be more practical. We are going to see some basic things that will help us modify the appearance of our site, from looking for free templates to the process of installing them and making some tiny changes.

I am sure this article helps us establish a good foundation though most of the things we are going to see are quite simple, so this is going to be a good introduction.

Installing a theme through Magento Connect

We are going to see two ways in which we can install a new Magento theme. The first one is through Magento Connect. This involves a number of steps that we are going to follow along this recipe.

Getting ready

First we need to go to Magento Connect: http://www.magentocommerce.com/magentoconnect.

There, search for the theme Magento Classic Theme Free, or, alternatively, load this link:
http://www.magentocommerce.com/magento-connect/TemplatesMaster/extension/928/magento-classic-theme.

How to do it...

This theme, the Magento Classic Theme, is the one we are going to use through this article. Follow these steps to install it:

  1. First we need to log into our www.magentocommerce.com site account. This is a necessary step to get the Extension Key.
  2. The extension key can be found in a box that looks like the following screenshot:

    Magento 1.4 Theming tutorial

  3. We also find some other useful info there, like the compatibility version, and the price, free in this case. There's also a button that says Get Extension Key. Click on that button:

    Magento 1.4 Theming tutorial

  4. After clicking on the Get Extension Key button, the box that we can see in the preceding screenshot appears. On that image we must accept the license agreement, select the Magento version we are using, and again click on Get Extension Key:

    Magento 1.4 Theming tutorial

  5. This is the last screen. We need to obtain the extension key and copy it as we are going to use it very soon.

For the next steps we need to go to our Magento installation Admin area screen. There, carry out the following instructions:

  1. Go to System menu, then Magento Connect and finally Magento Connect Manager.
  2. The Magento Connect Manager screen will appear, just like the following screenshot:

    Magento 1.4 Theming tutorial

  3. Here we need to insert the same login info as we used in our Magento Admin screen. In the next screen we need to insert the key we have just copied:

    Magento 1.4 Theming tutorial

  4. When we click on the install button the installation process starts. It will only take a few seconds and the theme will be installed into our site. Fast and easy!

How it works...

We have just selected a theme from the Magento site, and installed it into our own Magento installation through the Magento Connect Manager. We can do this as many times as we want, and install as many themes as we need to.

Installing a theme manually

In this recipe we are going to see another method of installing themes into our Magento installation. This time we are going to see how to install a theme manually. Why is this important? Just because we may want to use themes that are not available through Magento Connect, as they can be themes purchased in other places, or downloaded from free themes.

Getting ready

In order to follow this method we need a downloaded theme. You can get the Magento Classic theme from this link:

http://blog.templates-master.com/free-magento-classic-theme/

Once done, we will get a file called f002.classic_1.zip; just unzip it. Inside we will find many folders:

  • graphic source: This folder has all the PSD files necessary to help us modify the theme
  • installation: This folder is where we can find installation instructions
  • template source 1.3.2: The theme is for Magento version 1.3.2
  • template source 1.4.0.1: This theme is for Magento 1.4.0.1
  • template source 1.4.1.0: This theme is for Magento 1.4.1.0

Though our Magento version is not 1.4.1.0, we could use the theme without problems. What can we find inside that folder? Another two folders:

  • app
  • skin

This is the folder structure we should expect from a Magento theme.

How to do it...

Installing a theme is as easy as copying those two folders into our Magento installation, with all their sub folders and files. In our Magento installation you will see another app and skin folder, so the contents in the folder of the downloaded theme will combine with the already existing ones. No overwriting should occur. And that's all; we don't need to do anything else.

Selecting the recently installed theme

Good, now we have installed one theme, one way or the other. So, how do we enable this theme? In fact it's quite easy; we can achieve just that from our site admin panel.

Getting ready

If you haven't logged into your Magento installation, do it now.

How to do it...

Well, once we are inside the admin panel of our site, we need to carry out the following steps to select our new theme:

  1. Go to System menu, and then click on Configuration.
  2. Look at the General block and select Design.
  3. There you will see the following screenshot:

    Magento 1.4 Theming tutorial

  4. There, in Current Package Name, we can leave it as default. In the Themes section, in the Default column, we can enter the name of the theme, f002 for this example.
  5. We are done. Click on the Save config button and refresh the frontend. You will be able to see the changes.

How it works...

We are done. We have just selected the new theme. As promised it was quite easy, wasn't it? Try it yourself!

Magento 1.4 Theming Cookbook Over 40 recipes to create a fully functional, feature rich, customized Magento theme
Published: August 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Enabling template path hints

Sometimes it is a bit hard to follow which block element we want to edit. For example, if we want to modify a banner, or just remove one of these blocks. Happily, Magento offers us a very useful tool we can use.

Getting ready

Before we start, remember to log into your Magento installation admin area.

How to do it...

Enabling these block tips is quite easy, just follow these steps:

  1. Go to menu System and then to Configuration.
  2. Here, we need to select the scope of the configuration. We are going to select the English store.

    Magento 1.4 Theming tutorial

  3. With this done go to the Advanced tab, which would be at the bottom of the page.
  4. Select Developer and then select Debug.
  5. Configure the options as shown in the following screenshot:

Magento 1.4 Theming tutorial

And then save the changes; that's all.

How it works...

Now, if we reload the frontend of our site we will see red boxes giving us some information about the blocks that generated them. For example, take a look at the following screenshot:

Magento 1.4 Theming tutorial

The red box is informing us that the template file that generated this box is located at frontend/default/f002/template/tag/popular.phtml. We could open that file and modify it as needed.

Simple modifications, changing a logo and header info

Once we have our site ready with its theme and so on, one of the most common tasks, or needs, is to change the logo and header info. In this recipe we are going to learn how to do that.

How to do it...

Once in our admin screen, follow these steps:

  1. Go to the System menu and then to Configuration.
  2. Select Default config in Current Configuration Scope
  3. Next go to the General tab.
  4. Select the Design link.
  5. Now, in order to change header info, go to the HTML head tab. It will look like the following screenshot:

    Magento 1.4 Theming tutorial

  6. There are some more options that don't appear on the image, like default robots, miscellaneous scripts, and display demo store notice. Feel free to fill these values as you need.
  7. The next thing we can do from this screen is to change our site logo. In order to do this, we only need to select the Header tab, as can be seen in the following screenshot:

    Magento 1.4 Theming tutorial

  8. Here we can indicate which image to use for the logo, as well as its Alt value and welcome message. Remember, the image must be placed inside our theme, that's skin/frontend/default/f002/images.

How it works...

We have just learned how to modify the theme logo and header info, all done from the admin panel of our site. Those are very common changes that need to be done in almost every project.

Simple modifications, link to CMS pages from our theme

Sometimes it's necessary to add a CMS page to our site, for example an About Us page, or a FAQs page. Those things can be quite useful in an e-commerce site. In this recipe we are going to see how to link these pages from our theme.

Getting ready

In order to follow this recipe it would be useful to enable the template path hints, and refer to Enabling template path hints recipe in this same article to learn how. For this example, we are going to add a link to the About Us page in our footer.

Take a look to the following screenshot, just to know where are we going to add the link:

Magento 1.4 Theming tutorial

How to do it...

We can achieve this modification following these steps:

  1. As the helper is telling us, we can find the PHTML file in frontend/base/default/template/page/template/links.phtml but note that's inside the base folder.
  2. We shouldn't modify that file. It would be better to copy it and paste in frontend/default/f002/template/page/template/links.phtml. It may be necessary to create some folders, you can do so without facing any problem.
  3. Once this is done, if we refresh our site, the tip will change, and it will indicate the path to the newly created file.
  4. Also open the links.phtml file in your favorite editor. Now we have the piece of code we need to modify, but we need the CMS page to link to.
  5. Good, let's go to our admin page, there follow these steps:
    1. Select the CMS menu.
    2. Click on the Pages option.
    3. There we can see a table, showing us the CMS pages that are already available in our site; we could create a new one. But we are going to use the About Us page.
    4. Look for the column URL Key, and copy the one for the About Us page. For me it's about-magento-demo-store, copy that. The page should look like the following screenshot:

      Magento 1.4 Theming tutorial

  6. Once we have the CMS page created, and the URL Key, we can return to our editor, where we have the links.phtml file loaded. There we can see this code:

    <?php $_links = $this->getLinks(); ?>
    <?php if(count($_links)>0): ?>
    <ul class="links"<?php if($this->getName()): ?> id="<?php echo
    $this->getName() ?>"<?php endif;?>>
    <?php foreach($_links as $_link): ?>
    <li<?php if($_link->getIsFirst()||$_link->getIsLast()):
    ?> class="<?php if($_link->getIsFirst()): ?>first<?php endif;
    ?><?php if($_link->getIsLast()): ?> last<?php endif; ?>"<?php
    endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link-
    >getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>"
    title="<?php echo $_link->getTitle() ?>" <?php echo $_link-
    >getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo
    $_link->getAfterText() ?></li>
    <?php endforeach; ?>
    </ul>
    <?php endif; ?>

  7. Just modify the preceding code to add the following highlighted one:

    <?php $_links = $this->getLinks(); ?>
    <?php if(count($_links)>0): ?>
    <ul class="links"<?php if($this->getName()): ?> id="<?php echo
    $this->getName() ?>"<?php endif;?>>
    <?php foreach($_links as $_link): ?>
    <li<?php if($_link->getIsFirst()||$_link->getIsLast()):
    ?> class="<?php if($_link->getIsFirst()): ?>first<?php endif;
    ?><?php if($_link->getIsLast()): ?> last<?php endif; ?>"<?php
    endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link-
    >getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>"
    title="<?php echo $_link->getTitle() ?>" <?php echo $_link-
    >getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo
    $_link->getAfterText() ?></li>
    <?php endforeach; ?>
    <li>| <a href="<?php echo $this->getUrl('aboutmagento-
    demo-store')?>">About Us</a></li>
    </ul>
    <?php endif; ?>

  8. And that's all, when we refresh our page the new link will appear. Much like the following screenshot:

    Magento 1.4 Theming tutorial

How it works...

We are using the getUrl method, with the key we copied in order to create the link to the CMS page. Check it out! We can click on the link and the About Us page will appear.

There's more...

CMS pages are very useful in Magento, if you haven't noticed yet; most of the content on the Home of our site comes from a CMS page. We can find it on the CMS | Pages menu. It appears as Home Page, the one which is enabled.

We can modify all its contents from here, so try this too!

Summary

In this article we saw how to work with already existing themes in Magento 1.4.


Further resources on this subject:


Magento 1.4 Theming Cookbook Over 40 recipes to create a fully functional, feature rich, customized Magento theme
Published: August 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Jose Argudo Blanco

Jose Argudo Blanco is a web developer from Valencia, Spain. After finishing his studies he started working for a web design company. After working for six years for that company and some others, he decided to work as a freelance.

Now, after some years have passed, he thinks it's the best decision he has ever takena decision that let him work with the tools he likes, such as CodeIgniter, Joomla!, CakePHP, JQuery, and other well-known open source technologies.

For the past few months he has also reviewed some books for Packt Publishing, such as Magento 1.3 Theme Design, Magento: Beginner's Guide, Joomla! 1.5 SEO, Symfony 1.3 Web Application Development, and Joomla! with Flash. The one yet to be published is Magento Development with PHP.

Books From Packt


Magento 1.4 Themes Design
Magento 1.4 Themes Design

Magento 1.4 Development Cookbook
Magento 1.4 Development Cookbook

Magento 1.3 Sales Tactics Cookbook
Magento 1.3 Sales Tactics Cookbook

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

Magento: Beginner's Guide
Magento: Beginner's Guide

Magento 1.3 Theme Design
Magento 1.3 Theme Design

PHP 5 E-commerce Development
PHP 5 E-commerce Development

ADempiere 3.6 Cookbook
ADempiere 3.6 Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software