Blog
Easy WordPress and Magento Integration
| Friday, April 16, 2010
WordPress is among the best web software for blogging and Magento is among is among the best web software for eCommerce. So naturally a marriage between WordPress and Magento is one made in the heavens. Learn how to easily import WordPress content into a Magento page.
Once you have Magento and WordPress installed on your sever, it's time to get down to action. We installed the shop in the root directory of the website (yourwebsite.com), and the blog in a sub-directory called blog (yourwebsite.com/blog).
There are a number of approaches out there to integrate Magento and WordPress. Some methods rely on sever rewrite rules. The problem with this method is that it doesn't let you mix content from WordPress and Magento on the same page. Other methods rely on contributed modules. The problem with contributed modules is that they can break and become dysfunctional when either WordPress or Magento are updated. So, in search of the right solution, I wound up creating my own hybrid solution. My solution uses PHP to pull in WordPress content and display it on Magento pages. Then you simply need to match your WordPress theme with your Magento theme.
Part 1 — Matching your WordPress and Magento themes
Let's assume you start with a Magento theme and want to convert it to a WordPress theme. WordPress themes are stored at /wp-content/themes/[your-theme] relative to your blog's root path.
First you need to pick a theme to adapt. I started with the default WordPress theme in order to create my new custom theme that would match my Magento theme. Using the default theme, you only need to edit three files in order to match your WordPress theme to your Magento theme: header.php, footer.php, and you're theme's stylesheet (in my case style.css).
In the header.php file, you'll want to include:
- Your HTML doc info and opening <HTML> tags
- Your document <head> tags and all of the good stuff that goes in between
- Your opening <body> tag
- Your header code — your site's logo, navigation, etc.
- Opening divs for your main content area (but don't close these divs — you'll close these in footer.php)
And then in the footer.php file, you'll want to include:
- Closing div tags corresponding to divs you opened in header.php for your main content area
- Your footer code (copyrights, links, etc.)
- Your closing </body> tag
- Your closing </html> tag
Finally, in your styles.css CSS stylesheet, you'll want to include whatever styles you need to make your blog look like your Magento shop.
Tip: There's no need to duplicate all of the styles in your Magento stylesheet in your blog's stylesheet. Instead, you can import the styles in your Magento theme's stylesheets. To do this, open your WordPress theme's stylesheet styles.css
and place this somewhere in the document:
/* imports Magento theme's styles */ @import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/menu.css); @import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/boxes.css); @import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/reset.css); @import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/clears.css);
By importing the CSS instead of duplicating it, you'll reduce your file size and speed up your page load. Also, when you make changes to your theme, you don't need to make changes in two places.
Because the CSS @import command takes precedence over all other CSS rules, you don't have to worry about it conflicting with the blog's default style code. You might want to add or change a few styles specific to the blog in the blog's stylesheet below the import commands. If you started from a really complex WordPress theme, you'll probably want to remove all of the extraneous style rules to reduce the document size.
Now you've successfully matched your WordPress and Magento themes. Onto part 2...
Part 2 — How to display WordPress content on a Magento page
You have your blog and you have your shop, and they look the same. This is great, but what if you want to display content from WordPress within Magento (like on your store's homepage)?
There are a number of ways to do this. You could create RSS feeds with your content and then display then on another site with MagpieRSS. This method works, but we wanted something a little more elegant and something that didn't rely on RSS. Our method uses very simple theming and PHP to display WordPress content on a Magento page. Here we go...
Step 1 — Create a bare-bones WordPress theme file that skips all of the styles, header, and footer and just displays content.
Create a new file, we'll call it share.php, in your WordPress theme directory:
<?php
/*
Template Name: Share
*/
?>
<?php query_posts('limit=3'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
This template code will display the three most recent posts. You can change the number of posts you want to display by changing the numerical value in line 6 (highlighted above).
Step 2 — Create a page in WordPress that uses your new "Share" template.
Create a new page in WordPress. Under the "Attributes" block visible while editing the page, you'll want to set your page to use the "Share" template you created. You can title it whatever you want, but you'll want to change the permalink to something rememberable: http://www.your-site.com/blog/share/
After you've done all those, navigate to the permalink of the page in your browser to test it out and make sure it's using the bare-bones template you created. You should see the text of the most recent posts on an otherwise blank and boring page. If you see this, you're done working with WordPress... now for Magento's bit.
Step 3 — Create a template file in Magento to embed your newly created WordPress page into a Magento page.
This step is necessary because Magento does not allow embedded PHP code to be executed from CMS pages. In order to trick Magento into loading the PHP, you need to create a template file that will execute the PHP and deliver it to a CMS page via a block.
So here's how you create a new block template:
- Navigate to /[path-to-mageneto]/app/design/frontend/[your-theme]/default/template/
- Create a new directory within the template directory called blog
- Within your new directory blog, create a file called blog.phtml
- In your blog.phtml file, place the following code:
<?php $source = file_get_contents("http://www.your-website.com/blog/share"); print $source; ?>
Step 4 — Place the block based on your new template on the Magento CMS page you want the blog content to display on
{{block type="core/template" template="blog/blog.phtml"}}
You're done! You've now embedded your most recent WordPress posts in a Magento page. The links to the posts and comments will route visitors to your blog (which now looks identical to your Magento shop). You may also want to put Magento store items on your WordPress blog. Check out this method for displaying your Magento store items as a block in WordPress using Magento's product RSS feeds.
SU!Subscribe
Search
Search our Blog:
Addoa on Twitter
Addoa Excellence
We know your vision is important to you. That's why our vision is to help you share yours. When you use Addoa for your creative needs, you'll see the difference excellence makes on your project. Our superior quality, strong communication, attitude and unbeatable value make Addoa the right choice for any project.
Free project estimates anytime
Comments
Thanks for the article!
I'm a bit confused about the Theming of the Header and Footer. Could you provide examples of each?
Are we suppose to duplicate the default header and footer and try to swap parts out with Magento's header and footer? I can't seem to get past this step.
Thank you!
In the article, I'm just showing which files need to be edited to affect header and footer output. By editing the header file, you can add the first half of your site's structure and design. You need to leave some divs open (which will be closed by the footer.php file) that will hold the main content on your website.
If you want your Wordpress headers and footers to match your Magento headers and footers, you just need to recreate your Magento page layout through the header.php and footer.php files.
We’ve created a new, free Magento extension that allows you to easily integrate Magento and WordPress without modifying any core files. The module will let WordPress use your Magento theme and easily associate blog posts with products (and much more!).
We’re currently offering free support while the module launches so feel free to send us any questions.
http://fishpig.co.uk/wordpress-magento-integration/
Post new comment