Magento 1.9 Template Update – Minor Changes Guide

layoutparent-child-themerwd-theme

I've got a question about making an extremely minor change within a .phtml file on 1.9. I've gone through the RWD guide here: http://www.magentocommerce.com/knowledge-base/entry/ee114-ce19-rwd-dev-guide#theme, and something isn't quite clicking in my head. I get the basic process for making a small change in a .phtml file: Create a module, define a new layout file, copy a default layout file into the new one, update the line that points at the .phtml file with a new .phtml file, copy the phtml file to a new location and make your updates there. That general process makes sense to me.

Here's the part I'm not getting: I've done all that, and it seems to have broken all the css. Mind you, I'm a backend dev, and try to stay out of CSS and JS as much as possible. I really have no need to update anything but php and phtml files. All I want to do is make one minuscule update to product pages. However, I'm still finding answers online that tell me I need to be copying EVERYTHING from the RWD theme into my new theme, all the styles, the JS, images, etc, and the fact that my CSS all broke when I didn't copy it all over from RWD seems to back that theory up. I'd really like to avoid having to make a whole huge production out of a minor change. Am I wrong? Do I not have to copy anything but what I'm planning on updating?

Second, the part about 'setting your theme' in the backend. I understand that if I so choose, I can create a whole custom theme with my own styles and JS and all that jazz, and then set it as the site theme in the backend. What I don't get is all that work is required if all I need to do this to make a small text update on product pages. It feels like a TON of labor to update the text on, say, the add to cart button on product pages. It feels like there should be a simpler way (though I know Magento hates being simple!)

I also don't quite understand how multiple modules can make template updates if a 'theme' has to be set in the backend. What if I have 10 different modules that each make a tiny template update somewhere on the site? Surely I can't set 10 different modules as my theme. So there has to be a simpler way of doing this than creating a whole custom theme. Recall that I'm a backend developer, so the word 'theme' in general sounds like an overwhelming amount of convolution to people of my persuasion.

Hopefully my rambling makes sense and my questions aren't too dumb, but as we all know Magento isn't a beast that's well documented, so best practices are often difficult to figure out.

Best Answer

OK where to start.... I'll start from the beginning and pretend you haven't made any changes to magento's configuration or core files....

Lets say you want to continue to use the RWD package, and extend it by creating your own theme "carbide" which extends the default RWD package.

Step 1:

  1. Navigate in the admin to System -> Configuration -> Design -> Themes.
  2. Input "carbide" into the "Default" field, and save your changes.

Step 2: Create the following directories/files:

  1. app/design/frontend/rwd/carbide
  2. app/design/frontend/rwd/carbide/template
  3. app/design/frontend/rwd/carbide/layout
  4. app/design/frontend/rwd/carbide/layout/local.xml
  5. skin/frontend/rwd/carbide
  6. skin/frontend/rwd/carbide/js
  7. skin/frontend/rwd/carbide/css
  8. skin/frontend/rwd/carbide/images

You have now created your own theme. Magento will look in your theme's "template" folder above for view scripts, PRIOR to looking in the default theme. finally if a view script is not in the default theme, it'll look in the base package's default theme.

Step 3 Find the view script (.phtml file) you want to edit, and copy it to your local theme following the same folder structure after "template".

For example, if you're looking to edit app/design/frontend/rwd/default/template/catalog/product/view.phtml you'll want to COPY it to app/design/frontend/rwd/carbide/template/catalog/product/view.phtml

If a view script is not found in the app/design/frontend/rwd/default/template directory, then the next place to look for is app/design/frontend/base/default/template

You should ONLY need to copy over files which need to be EDITED. Do NOT copy entire directories of .phtml files, as this is overkill and may cause problems if you want your site to be upgrade-friendly.

Layout updates should ALL go in "local.xml". Do NOT copy XML layout files from RWD or Base, into your local theme. It may be tempting/easier but this is not how to make an upgrade-compatible site.

Related Topic