Magento Theme Development: Home Page, Part 1

Magento Theme Development: Home Page, Part 1

As we set the stage in the previous bootstrapping article, now is the time to actually dive deep into the code, and start making changes. As an obvious choice, we'll start the editing process from the home page. 

In this first article we'll be partially editing the header section. We'll edit the default wrapper files and the header.phtml file, and then we'll start editing the different components of header like currency, language selector, etc. So, without further ado, we'll start the editing process. 

First of all, we’ll enable the Template hints from the admin panel, by going to System > Developer > Debug, and while doing so we'll make sure that Current Configuration Scope is set to Main Website. By enabling template hints, we’ll know
which template is responsible for the header styles. This is how the home page
will look when the template hints are on.

Homepage with template hints

Here, as you can see, the outermost wrapper in which all
other files are included is coming from frontend/rwd/default/template/page/1column.phtml, which
is from the RWD theme, as we have inherited our theme from this default theme.
Instead of editing this file directly in the RWD theme, we’ll create a similar
folder in our vstyle theme at this location: frontend/tutsplus/vstyle/template/page. Then we'll copy these files into this folder, and edit them there. So, we’ll go to the frontend/rwd/default/template/page
directory and copy 1column.phtml, 2column-left.phtml, 2column-right.phtml, and
3column.phtml into this newly created folder.

If we look at the code of 1-column.phtml, it is like
this:

Now we have to modify it to match our index.html file, so we’ll use our body and container classes, and add some extra divs, and the edited code will
look like this:

Similarly we are also going to edit the 2column-left.phtml,
2column-right.phtml, and 3column.phtml files. This is how the modified code will look for 2-column-left.phtml:

Next, 2columns-right.phtml will look like this after the editing: 

Lastly, we are going to edit 3columns.phtml like this:

Look carefully at the changes we have made in these template
files. When you compare it to the index.html file of our HTML website, it’ll
make sense to you.

This is how the website should look after editing these
files. You won’t see much difference, but we are heading in the right
direction.

Homepage with wrapper files modified

Next we are going to edit the header.phtml file, as we can
see that this is the file which has the wrapper content of the header section.
So, we’ll copy the frontend/rwd/default/template/page/html/header.phtml file, move it to the frontend/tutsplus/vstyle/template/page/html folder, and start
editing it. Currently its code will look like this:

We’ll compare it to the header section of our HTML, and start
making these changes in it:

We’ll insert this HTML into the header.phtml file, and
replace difference sections with the relevant dynamic template tags like
currency switcher, store language, logo, menu, search bar, etc. This is how the
code will look after these edits:

This is how the header section will look after editing
the header.phtml file:

Afer editing headerphtml file

Now as you can see, we need to modify the code of
different sections we are using, like language and currency selector, slider,
menu, search bar, etc. To start with, we’ll edit the currency and language
selectors. If we again enable the template hints, we can see that language
selector section is coming from base/default/template/page/switch/languages.phtml, so we’ll copy this file into our theme at the same location, and start editing it
to match our HTML code. The original languages.phtml file looks like this:

The original HTML code for language and currency selector
looks like this:

After we modify languages.phtml to match the HTML, it’ll
look like this:

As you can see, the currency selector is not showing up
on our website for now. We have to enable the currency selector from the admin
panel first. From System > Configuration > General > Currency Setup, you
have to first enable some languages, and then from System > Manage
Currency > Rates
set currency rates. Then you’ll see that the currency selector
is enabled on your website. By enabling the template hints on again, we can see
that its template is rwd/default/template/directory/currency.phtml, and its
current code will look like this:

We’ll edit it to match our HTML, so the modified code will look
like this:

Next, we’ll edit our welcome message to match our HTML
design. For that we’ll have to go to System > Configuration/General/Design/Header/Welcome
Text
. After editing this, the header will look like this:

Header at the end

If you have followed all the steps correctly, I hope you can see much progress in your home page's looks. Now as we have partially edited the header section, we'll continue editing the header section in the next article, and we'll also edit the main slider in that article. 

Please do explain your experiences in the comments section!

Source: Tuts Plus

About the Author

Comments

  1. anami sikin says:

    … [Trackback]

    […] Read More: designncode.in/magento-theme-development-home-page-part-1/ […]

  2. anami sikin says:

    … [Trackback]

    […] Read More Infos here: designncode.in/magento-theme-development-home-page-part-1/ […]

  3. … [Trackback]

    […] Read More: designncode.in/magento-theme-development-home-page-part-1/ […]

  4. … [Trackback]

    […] Read More here: designncode.in/magento-theme-development-home-page-part-1/ […]

  5. … [Trackback]

    […] Read More: designncode.in/magento-theme-development-home-page-part-1/ […]

  6. … [Trackback]

    […] Find More Informations here: designncode.in/magento-theme-development-home-page-part-1/ […]

  7. … [Trackback]

    […] Read More: designncode.in/magento-theme-development-home-page-part-1/ […]

  8. … [Trackback]

    […] Read More here: designncode.in/magento-theme-development-home-page-part-1/ […]

  9. … [Trackback]

    […] Informations on that Topic: designncode.in/magento-theme-development-home-page-part-1/ […]

  10. … [Trackback]

    […] Read More: designncode.in/magento-theme-development-home-page-part-1/ […]

  11. … [Trackback]

    […] There you will find 41802 more Infos: designncode.in/magento-theme-development-home-page-part-1/ […]

  12. … [Trackback]

    […] Read More here: designncode.in/magento-theme-development-home-page-part-1/ […]

  13. my website says:

    … [Trackback]

    […] Read More here: designncode.in/magento-theme-development-home-page-part-1/ […]

  14. … [Trackback]

    […] Read More: designncode.in/magento-theme-development-home-page-part-1/ […]

  15. … [Trackback]

    […] There you will find 43337 more Infos: designncode.in/magento-theme-development-home-page-part-1/ […]

  16. … [Trackback]

    […] Read More here: designncode.in/magento-theme-development-home-page-part-1/ […]