Magento WordPress Integration Theme Customisation

« Back to Magento WordPress Integration

  • Magento 1
  • Magento 2
Magento 1

Magento WordPress Integration integrates WordPress into your Magento theme. The WordPress theme is not responsible for the front end display of your blog and all design changes must take place in Magento.

Magento WordPress Integration comes with pre-templates that display all blog data in a standard and clean way. These templates can be found at:

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

Do not edit templates directly in this location. To make changes to any of these files, copy the template that you want to edit to your custom theme and edit it there.

As an example, if your package name is 'mypackage' and your theme name is 'mytheme' and you wanted to the edit following template:

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

You would copy this template to:

/app/design/frontend/mypackage/mytheme/template/wordpress/post/view.phtml

You would then edit the template in this new location. Any changes to the default templates will be lost when updating the module.

Understanding the Templates

There are 2 different types of views in WordPress. The first view is the archive view and the second view is the single post view.

Single Post View

This is when you view a single post on it's own. The following template is used for this:

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

This template is actually the fallback template used for all post types. The module will first look for a template specific to the post type:

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

In the above example POSTTYPE will be replaced with the actual type of the current post. For example, you could create a custom view.phtml that is used for pages by creating the following template file and moving it to your custom theme:

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

Post Archives

Post archives are all pages that list multiple posts such as the homepage or a category page. The view for archive pages is made up of several templates.

The first template is the wrapper template. This wraps around the post list and includes the H1, a description and then the call to the post list. Each wrapper template is in a different location depending on the archive type but here are some examples.

/app/design/frontend/base/default/template/wordpress/homepage/view.phtml
/app/design/frontend/base/default/template/wordpress/term/view.phtml
/app/design/frontend/base/default/template/wordpress/archive/view.phtml
/app/design/frontend/base/default/template/wordpress/author/view.phtml
/app/design/frontend/base/default/template/wordpress/search/view.phtml

The next template down is the list template. This template is responsible for looping through the post collection and outputting each post. This template can be found at:

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

The final template is the post renderer template. This is the template that actually renders the specific post data, including the post title, featured image, post excerpt or content and any thing else that you want to include. This template can be found at:

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

This is the post renderer template for all posts type and is a fallback template. The module first checks for the following template, where POSTTYPE is the actual post type of the post.

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

If your post type was 'article', the template would be:

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

If the custom template doesn't exist in your custom theme then the fallback template is used.

Layout XML

Layout XML plays a big role in modifying the design. For more information on this, please see the Magento WordPress Integration layout XML guide.

CSS

The extension comes with a basic stylesheet that can be found at:

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

To modify this file you must first copy it to your custom theme's skin directory. If you do this, it is recommended that you copy /skin/frontend/base/default/css/wordpress/ to your custom theme rather than just the CSS file so that the images in this folder are still referenced correctly by the CSS file.

Magento 2

Magento WordPress Integration integrates WordPress into your Magento 2 theme. The WordPress theme is not responsible for the front end display of your blog and all design changes must take place in Magento 2.

Magento WordPress Integration comes with pre-templates that display all blog data in a standard and clean way. These templates can be found at:

/app/code/FishPig/WordPress/view/frontend/templates

Do not edit templates directly in this location. To make changes to any of these files, copy the template that you want to edit to your custom theme and edit it there.

As an example, let's consider you have a custom theme at the following location:

/app/design/YourCustom/Theme

Now let's say you want to modify the post view template, which can be found at:

/app/code/FishPig/WordPress/view/frontend/templates/post/view.phtml

You would copy this to your custom theme at:

/app/design/YourCustom/Theme/FishPig_WordPress/templates/post/view.phtml

To break this down, in your custom theme, you create a new folder using the name of the module that the template belongs to, which in this case is FishPig_WordPress. Ensure that you get the correct capitalisation here. Next you just copy the template structure from the original location (templates/post/view.phtml).

Understanding the Templates

There are 2 different types of views in WordPress. The first view is the archive view and the second view is the single post view.

Single Post View

This is when you view a single post on it's own. The following template is used for this:

/app/code/FishPig/WordPress/view/frontend/templates/post/view.phtml

This template is actually the fallback template used for all post types. The module will first look for a template specific to the post type:

/app/code/FishPig/WordPress/view/frontend/templates/POSTTYPE/view.phtml

In the above example POSTTYPE will be replaced with the actual type of the current post. For example, you could create a custom view.phtml that is used for pages by creating the following template file and moving it to your custom theme:

/app/code/FishPig/WordPress/view/frontend/templates/page/view.phtml

Post Archives

Post archives are all pages that list multiple posts such as the homepage or a category page. The view for archive pages is made up of several templates.

The first template is the wrapper template. This wraps around the post list and includes the H1, a description and then the call to the post list. By default the same wrapper template is used for all archive pages, however you can change this using layout XML.

/app/code/FishPig/WordPress/view/frontend/templates/post/list/wrapper.phtml

The next template down is the list template. This template is responsible for looping through the post collection and outputting each post. This template can be found at:

/app/code/FishPig/WordPress/view/frontend/templates/post/list.phtml

The final template is the post renderer template. This is the template that actually renders the specific post data, including the post title, featured image, post excerpt or content and any thing else that you want to include. This template can be found at:

/app/code/FishPig/WordPress/view/frontend/templates/post/list/renderer/default.phtml

This is the post renderer template for all posts type and is a fallback template. The module first checks for the following template, where POSTTYPE is the actual post type of the post.

/app/code/FishPig/WordPress/view/frontend/templates/post/list/POSTTYPE.phtml

If your post type was 'article', the template would be:

/app/code/FishPig/WordPress/view/frontend/templates/post/list/article.phtml

If the custom template doesn't exist in your custom theme then the fallback template is used.

Layout XML

Layout XML plays a big role in modifying the design. For more information on this, please see the Magento WordPress Integration layout XML guide.

CSS

The extension comes with a basic stylesheet that can be found at:

/app/code/FishPig/WordPress/view/frontend/web/css/wordpress.css

To modify this file you must first copy it to your custom theme's skin directory.

Post your comment

FishPig Ltd