In the 1st part, we had an overview at the basics of Magento theme development. We also learned the general idea behind Magento themes, the various terminologies behind it and the basic structure of a Magento theme. Today, let’s begin with one of the most important step: Building core of Magento theme
Goals for our Theme
Our goal for building this theme is straightforward: to understand how to build a Magento theme. With that in mind, I’m going to keep the theme as simple as possible.
Everything but the bare essential features stripped out
No images other than the product images and the logo
Single column to keep it visually simple
What are We Building Today?
Since the Magento coding process is quite complicated for those that are used to WordPress or Joomla, we’re going to take it extremely slow. Today, we’ll build just the core our theme, the skeleton that gets used in each view of the site. I’ll also explain the general principle behind the process so we can move on to each individual view in future parts.
The source files, both the front end and back end, are included but try to not use it just yet. We’ll be defining just the core parts without defining what content is to be displayed, how it should be displayed and where the content is to be pulled from. So, if you try to use this right now, you’re going to see a bunch of gibberish since Magento pulls in all absent files from its default theme thus completely ruining our look. So my advice is, wait for a bit.
The Basic Theme
The basic template looks like so. We have a generic logo up top along with a simple menu which lets the user access his account, wish list and cart along with letting him checkout or logout.
Below that, we have a utility bar that contains a breadcrumb style navigation to let the user know the contextual hierarchy of the site. We also let the user search through our store through the search input on the right.
The content area is currently empty since its contents will vary depending on which view Magento is loading. So we’ll keep is empty for now and handle it later when we’re building each individual page.
The footer is fairly generic with a link to report bugs and copyright information.
Step 1 - The HTML
We’ll first look at the HTML for the theme’s skeleton. I’m assuming you’re fairly fluent in HTML and CSS so I’ll skip to the more important parts.
First up, note that I’ve wrapped everything under a wrapper div to make it easier to manage things. Also note that the header, content and footer section get their individual blocks.
The search input is fairly useless at this point. We’ll hook it up properly during when we’re integrating with Magento. Same with the various links. Currently, I’ve put them there as placeholders. Once we dig into Magento, we’ll get them working.
Step 2 - The CSS
Nothing fancy here. Very basic CSS to place the elements in position and style it just a tiny bit. Let’s move on.
Step 3 - Creating our page.xml File
This part is a little tricky so stay with me here. Magento uses XML files to handle a page’s layout and also to define which elements are available to be rendered. The aim is that instead of mucking around with arcane code, you can just edit the XML file and be done with it without worrying about dependencies.
Each view/screen/module gets its own XML file along with a master file to define the general layout of the site. That master file is the page.xml file we’re going to create now.
The complete file for today looks like so. I’ll explain each bit part by part below.
Disregard the initial XML and layout version declarations. They’re of no significance to us now.
First, we create a master block for all the data. Consider this the equivalent of the wrapper DIV element we used in our HTML. Next, we instruct it to usepage/1column.phtml as the template for our page. Don’t worry, we haven’t created the file yet. We’ll do so later in this tutorial.
Next, we define the elements to be included in the head section of the page. Magento, by default, includes a load of CSS and JS files but we won’t be requiring any of their functionality today. So, we’ll just include our CSS file.
We’re defining what goes into the header of our site. We want the menu/links at the top as well as the breadcrumbs and the search.
And finally, we’ve included our footer. We also tell Magento where to load its template from.
You’re probably wondering why we specify a template path for some blocks whilst omitting it for others. It’s a rather higher level topic but did you note that each block has a type attribute? When it’s type matches one of those predefined by Magento, you need not specify a template. It’s auto loaded. Nifty, no?
And with this, our base page.xml file is complete.
Step 4 - Creating our Skeleton Template
Ok, now that we’ve specified our layout we can move on to creating the 1column.phtmlfile that we specified in the XML earlier.
This file is nothing but a skeleton template which calls in the header, content area and footer as needed. Our file looks like so:
This is pretty much our original HTML file except that we use the getChildHtml method to acquire each block’s content. The template needs to be pretty page agnostic as it’s the master page from which each page is rendered.
Step 5 - Creating the Templates for our Blocks
Now comes the slightly hard part: cutting up our core HTML blocks by functionality, creating the required templates files for each functionality and then populating those files.
We’ll tackle each in order of appearance
Head section
getChildHtml(‘head’) maps directly to page/html/head.phtml. Our file looks like so:
You’ll see that we let Magento dynamically create the titles. Other than that, do notice thegetCssJsHtml method being called. This method imports all the CSS and JS files that we specified in the page.xml file.
Page Header
getChildHtml(‘header’) maps directly to page/html/header.phtml. Our file looks like so:
We use Magento’s API to acquire the logo first. Then to further modularize things, we get the HTML for the breadcrumbs, links and the search function.
Note that the name is purely semantic. As you can see, you’re not limited to the header in it’s purest, strict technical sense. You can also tack on other elements as needed.
Page Footer
getChildHtml(‘footer’) maps directly to page/html/footer.phtml as specified in the XML file. Our file looks like so:
With the footer, you’re free to include any info you deem fit. I just included the default content since I couldn’t think of anything clever to say there.
With the core elements finished, we can move on to the smaller functional blocks specified in the header section now i.e. the breadcrumbs, links and the search feature.
Top Links
getChildHtml(‘topLinks’) maps directly to page/html/template/links.phtml. Our file looks like so:
I know it looks a little complicated, but all it does is loop through an array of links and then spit it out, whilst adding a special class if it’s the first or last item in the list. If you’d prefer, you can scrap all this, and just hard code your top menu.
Breadcrumbs
getChildHtml(‘breadcrumbs’) maps directly to page/html/breadcrumbs.phtml. Our file looks like so:
As with before, it merely loops through the crumbs to render the text. The naughty bits in there checks whether the crumb is a link, to format it as such, and check whether it’s the final element so it doesn’t have to render a separator. There’s nothing else to this block.
Search
getChildHtml(‘topSearch’) maps directly to catalogsearch/form.mini.phtml. Our file looks like so:
Magento does all the weight lifting here. All you need to do is call the proper API method for the URLs and such.
If you’ve noticed that the string passed on to the getChildHtml method maps directly to the as attribute used in the page.xml file, then congrats, you’re an astute reader and you get a delicious cookie!
What We’ll be Building in the Next Part
Now that we’ve built a very strong core, we can now move on to building the individual views of the store. In the next part, we’re going to build one of the core views of any store, the product view. Stay tuned!
The Last Word
Well, today we took the first step in building our custom Magento template. Hopefully this has been helpful to you and you found it interesting. As this is a rather new topic for a lot of readers, I’ll be closely watching the comments section so drop a line in there if you have any doubts.
Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!
The post Magento theme development tutorial for designer part 2 – Building core of a theme appeared first on Tutorial Magento.