View the original post on Addoa Creative
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 stylesheetstyles.css
and place this somewhere in the document:
1 |
<br> |
2 |
/* imports Magento theme's styles */<br> |
3 |
@import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/menu.css);<br> |
4 |
@import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/boxes.css);<br> |
5 |
@import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/reset.css);<br> |
6 |
@import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/clears.css);<br> |
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:
1 |
<br> |
2 |
<?php<br> |
3 |
/*<br> |
4 |
Template Name: Share<br> |
5 |
*/<br> |
6 |
?><br> |
7 |
<?php query_posts('limit=3'); ?><br> |
8 |
<?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>
<?php the_content(‘Read the rest of this entry »’); ?>
</div>
<p><?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>
<div><?php next_posts_link(‘« Older Entries’) ?></div>
<div><?php previous_posts_link(‘Newer Entries »’) ?></div>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>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:
1 |
<br> |
2 |
<?php $source = file_get_contents("http://www.your-website.com/blog/share"); print$source; ?><br> |
Step 4 — Place the block based on your new template on the Magento CMS page you want the blog content to display on
1 |
<br> |
2 |
{{block type="core/template" template="blog/blog.phtml"}}<br> |
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.