Magento WordPress Integration Magento WordPress Integration

Customising the Design & Theme

When WordPress is integrated into Magento with Magento WordPress Integration, the WordPress blog is displayed using your Magento theme and not your WordPress theme. This means that any changes to your WordPress theme (either installing a new theme or modifying your existing WordPress theme) will have no affect on the frontend of your blog. To make changes to the blog, you need to make the changes in your Magento templates.

The extension comes with pre-built templates that will show all blog information in a standard and clean way. You can modify these templates and make CSS changes to display your blog in anyway that you want. The template files can be found at the following location:

/app/design/frontend/base/default/template/wordpress

These templates are used by the extension to display your WordPress blog information in Magento. To make changes to these templates you need to copy the template that you want to change to your custom theme and make the change there. If you change the templates in their original location, these changes will be lost when the extension is updated.

As an example, let's say that you're using the package 'fishpig' and the theme 'shop'. In this example you would need to move the template that you want to change to the following location:

/app/design/frontend/fishpig/shop/template/wordpress

To give you a concrete example, let's say you wanted to edit the post view template. To do this, you would copy the following template:

/app/design/frontend/base/default/template/wordpress/post/view.phtml

You would copy this template to the following location and then edit this new file:

/app/design/frontend/fishpig/shop/template/wordpress/post/view.phtml

Understanding the Templates

There are 2 types of view in WordPress: post archives and single post view (this includes pages, which are just a post type). Let's take a look at how each works.

Post Archives

Post Archives are pages that list a collection of posts. This includes category pages, tag pages, date and author archives and even the homepage (this lists all posts). Each different post archive page has it's own template. As an example, you can find the template for the category page at:

/app/design/frontend/fishpig/shop/template/wordpress/category/view.phtml

You can find the homepage template at:

/app/design/frontend/fishpig/shop/template/wordpress/homepage.phtml

These templates don't actually display the list of posts as this is handled by another set of templates. The following templates are responsible for this:

/app/design/frontend/base/default/template/wordpress/post/list/wrapper.phtml
/app/design/frontend/base/default/template/wordpress/post/list/renderer/default.phtml

The wrapper.phtml template loops through your posts while the renderer/default.phtml template actually displays the post information. If you want edit the way that your posts display in a list/archive format, these are the two templates that you need to change.

Single Post View

When viewing a post on it's own, the following template is used:

/app/design/frontend/base/default/template/wordpress/post/view.phtml

This template is responsible for displaying the post data, as well as comments.

CSS Changes

The extension comes with a basic stylesheet that contains CSS rules to allow the blog to display in a clean way. This CSS file is only included on blog pages so will not load on pages where it is not required. This file can be found at:

/skin/frontend/base/default/css/wordpress/styles.css

You can modify this CSS file and add any rules that you need to get your blog looking however you want it.

Supported Themes

There are no official themes that support the extension however any theme that has been written following Magento's templating standards should allow the blog to display and look good. That being said, the following 2 theme's do claim to support the extension specifically:

These themes are not affiliated with FishPig, however do claim to support the extension. That being said, every theme out there will work with the extension but some will look better than others.

Layout XML

The extension's layout XML file can be found at the following location:

/app/design/frontend/base/default/layout/wordpress.xml

It's probably not a good idea to edit this file as it may cause issues in the future when upgrading. A better way to make layout changes is to add changes to your your local.xml file inside your custom theme. For more information on the extension's layout xml, check the Magento WordPress Integration Layout XML Guide.

Summary

The extension uses standard Magento templates to display your WordPress data. These templates follow Magento template standards so should be easy for any Magento developer to modify. By making simple CSS and template changes, it's possible - and easy - to get your blog looking however you want it to look.

Post your comment

FishPig Ltd