Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Magento

Magento Theme Development: Home Page, Part 3

This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page, Part 2
Magento Theme Development: Home Page Styling

Now that we have completely customized the first half of the home page, we need to modify the content of the home page next. If we look at our HTML design, the home-page content section has just one heading and a carousel for the latest products. There is a Magento widget we can use to show the latest products on the home page. Actually, if we look at our current home-page section, it already has the latest products widget enabled on it, but we need to modify it to match our design requirements.

If we look at the content of our home page by going to the Admin Panel > CMS > Pages > Madison Island > Content, we’ll see that there is only one line of PHP code (other than some style tags), i.e.:

So, basically all the home-page content is coming from this template (which is just a template for showing new products). We’ll copy this file from the RWD theme to our new theme, in catalog/product/widget/new/content/new_grid.phtml, and start editing it to make it look like our HTML design. If we look at the current code of this file, it is:

When we look at our HTML code for this section, it looks like this:

So, we’ll start by plugging in the dynamic tags in this HTML. The reason I’ve shown you the current code of this file is so that you can find the required dynamic tags from that code, and put them in the HTML.

We don’t have to make any changes to the div structure, so the first line which needs to change is the h3 tag:

We need to replace the static text of Hot and Products with Magento $this tags, so that Magento can later translate these according to user preferences. So, this line will become something like this: 

The next line which needs to change is the image tag, where we need to change the relevant path of the image source. Currently it looks like this:

We’ll change it to this:

Here this dynamic tag will get the actual small image of the product of 236 x 357 px size. Next, we need to change this Add to Cart link:

We’ll change it to this:

It has a dynamic URL for the product details page, and only shows ‘Add to Cart’ if the product is available. Otherwise it’ll show ‘Out of Stock’. Lastly, we’ll update the product price and name, by replacing this line:

With this one: 

This will have our single product view ready, but to iterate it over all new products, we have to enclose our item div in a loop, so we’ll add this line at the top of it:

And this line at the end of it to terminate the loop:

So the full code for that file will become like this:

Refresh your home page now. It should have a perfectly working and styled new products section, which would look like this:

Latest Product Carousal

Now we need to modify the footer before we are done with the home page. If we look at our HTML design, the footer has four sections. The first one shows ‘Our Brands’, the second one shows a subscribe box and social media links, the third one shows some URLs, and the fourth one just the copyright notice.

Footer Sections

The fourth section is already present in our theme, so we just have to modify the content and styles, but the other three components we have to add in our theme. 

To add a component, we’ll create a new Static Block from the admin panel and put our content in there. So, we’ll go to Admin Panel > Static Blocks > Add New Block, and add a new block for the Our Brands section. We’ll change the Block title to ‘Our Brands’, set the identifier to ‘our_brands’, select the store view of ‘All Store Views’, and put this in the content section:

If you look closely, it is the same code as we have in our HTML for this section—we have just changed the relative paths of the images, while manually uploading the new images from within the WYSIWYG editor. Save the block, and start creating another block for the signup section.

For this second block, we’ll use the block title of ‘Above Footer’. For the identifier we’ll use ‘above_footer’, and for the content we’ll enter this code:

Now we have to create the links block in a similar way. We’ll create a new block with the Block title of ‘Footer Links’, with the identifier as ‘footer_links’, and put this code in there:

All these links are linking nowhere now, but you can later modify them. The image links are again dynamically generated using the upload feature of the WYSIWYG editor. All the rest of the code is just copied and pasted from the HTML.

Save this block too, and check the home page, but still you won’t see these three blocks showing up. This is because you have to tell Magento explicitly where to show these new blocks, and that we can do from the layout section. For this, go to the layout/local.xml file, and add these lines, just before the closing of the default tag.

This XML code is basically telling Magento to add these two new blocks into the Magento footer section. Lastly, we need to call these blocks from the footer phtml file. For that we’ll create a new footer.phtml file at this location: template/page/html/footer.phtml.

Add this code in this footer.phtml file: 

This is again just HTML code taken, where all the section codes are replaced with relevant links to Static Blocks. And the copyright section is replaced with a copyright dynamic tag.

Check the home page now, and it should now show these newly created Static Blocks, and should look like this:

Complete Homepage

Our home page is now complete. The only thing left is some style fixing, and we’ll do that in the next article.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.