With the latest release of Magento 1.3, there really is no escaping the fact that Magento is the number one software for your eCommerce site. With it’s flexibility and scalability there is very little you can’t get Magento to do in an eCommerce environment. Granted, the CMS options could be and perhaps should be a bit more flexible compared to the rest, but they do the trick. There only one thing Magento can’t do and that is blog.

Where Magento is becoming the dominant software for eCommerce websites, is WordPress already the most popular blogging software out there, and with good reason. WordPress can be used in a number of different ways but using WordPress as CMS plus blog engine is what is does best.

So if you’re serious about the online presence of your web shop you should want to take a look at combining Magento and WordPress.

Advantages of integrating Magento with WordPress

There are a couple of advantages of integrating Magento with WordPress:

- With WordPress added to your store you give your customers and regular visitors the ability to interact with you more than when you would just offer products.
- Instead of just offering products you have the possibility to offer extra value by providing interesting links of interest in your field, which in effect establishes you or your web shop as an authority on your subject.
- An added WordPress blog gives you the opportunity to work on your search engine optimization (SEO). Linking to your products in right way will not only make sure your visitors know what’s going on and what you find important but the Search Engines will know this just as well! To learn more about SEO visit this article onMagento SEO by Yoast.

Thing to consider when looking at integrating Magento with WordPress

Let’s say you’re still working on releasing your Magento website, or better yet when you have yet to install Magento. You will have to figure out what to do with your url and your installations of Magento and WordPress. Here are a couple of things to consider:

- Depending on the size of your shop you could install your Magento installation in a subfolder (http://www.yourdomain.com/shop) or sub domain even(http://shop.yourdomain.com) and let WordPress handle the root of your domain with it’s static pages and have the blog functionality work as your news section.
- When you have a larger shop you might want to install Magento in the root of your domain and use WordPress as a subfolder called /blog, /news or something of your choosing.
- Try and go for matching themes on your Magento and WordPress installation as much as possible. A great example of near perfect integration can achieved by using the Magento Open Air here on Silverthemes for your Magento installation combined with the WordPress Open Air version by WooThemes for your WordPress installation.
- When you really want to create a large community combined with your web shop, do consider a variation of WordPress called BuddyPress. BuddyPress enables you to have your own social network combined with a large site. Although this may seem like a step too far in most cases this is definitely worth checking out when you are building a large online store.

How to integrate WordPress into your Magento store

Straight out of the box Magento can not communicate with WordPress and vice versa. So it’s up to you to make them share information. Right now there are two ways of going about that.

The first is immediately the easiest one. Lazymonk wrote a Magento extension for WordPress integration. This extension allows you to integrate WordPress into your Magento installation if, and only if both your installations are installed in the same database. For installation details check out the plugins page.

The second way of going about this involves you tweaking a bit of code in your Magento Theme. We’ll use the RSS import function of Magento to import the latest articles via your WordPress feed output.

What we need to do is create a file which will contain the code used to import the RSS. Let’s give that file a name something like import_blog.phtml and the following code into that:

< ?php $channel = new Zend_Feed_Rss('http://www.yourdomain/feed'); ?>
<div class="block block-latest-news">
<div class="block-title">
<h2>< ?php echo $this->__('Latest Articles form the Blog') ?></h2>
</div>
<div class="block-content">
<ol id="graybox-latest-news">
< ?php foreach ($channel as $item): ?>
<li><a href="<?php echo $item->link; ?>">< ?php echo $item->title; ?></a></li>
< ?php endforeach; ?>
</ol>
</div>
</div>

Place this file in your themes folder so it will look like so:app/design/frontend/default/name_of_your_theme/template/callouts/blog_import.phtml

All you would have to do is call for this newly created file in your Magento theme. Most themes have a column on the right so let’s assume that’s where you want to import your latest blog posts. You would need a code similar to this one:

<reference name="right">
<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>
<block type="core/template" name="right.latest.news" template="callouts/blog_import.phtml"/>
</reference>

Be sure to add this code to your catalog.xml located inapp/design/frontend/default/name_of_your_theme/layout/catalog.xml

Please note that in the code you can change things like Latest Articles from the Blog to anything you like. Also, for better handling and tracking of your feed you can use Feedburner to deliver your feed. You would then use the feed url specified by Feedburner in the first code.

Extra Magento plug-ins or documentation to further integrate WordPress within Magento

- If you have rich SEO content related to your shop catalog/products, this module can show the related articles on your product pages. Magento Product Related Articles from WordPress extension can be found here.
- When you want to integrate WordPress into Magento and you are not using the same database this articlemight be helpful to you to retrieve some products by reading id’s from custom field of some post inside your WordPress installation via a piece of code added to your preferred WordPress page and a Magento extension.

About the author: Remkus de Vries is a Dutch WordPress specialist and a blogger. You can also find him on Twitter.

Love Highslide? So do we. We’ve even written a manual on how to install and use Highslide in Magento. We’ve used it on the Product-pages to display product-images but it can easily be extended to display images in your CMS-pages, frontpage, etc. Ok, lock the door and watch closely.

Step 1: Download the latest version of Highslide
Click here to go to the Highslide.com-site and download the latest (stable) version to your local computer.

Step 2: Transfer Highslide to your Magento-installation
Unzip the Highslide and transfer the files to your Magento skin-folder, for example:

/skin/frontend/default//highslide

You should now have a bunch of .js-files, a few .css-files and a ‘graphics’-folder in this ‘highslide’-folder.

Step 3: Add code to the head-area to get the Highslide loaded up

Open your /app/design/frontend/default/

/template/page/html/head.phtml-file and add the following code at the end (this code will appear in the head-area, above the body):

<!-- Initiate Highslide -->
<script src="&lt;?php echo $this-" type="text/javascript"><!--mce:0--></script>
 
<script type="text/javascript"><!--mce:1--></script>

Step 4: Replace the default product-image magnifier with Highslide

Ok so, this is the most advanced step so pay close attention. Navigate to your frontend template-folder (normally /app/design/frontend/default//template). Now browse further in the directory-tree to the catalog-folder, then the product-folder and finally – the view-folder. You should be somewhere around here:

/app/design/frontend/default//template/catalog/product/view

The files in this folder are very critical to have Magento working so watch your steps closely. The first thing we’ll do is to make a backup of the media.phtml-file which we are going to modify by transferring a copy of it to a secret place your local computer. If you want to revert back to the original product-image magnifier its good to have a backup somewhere. You can even replace it with the very popular MagicZoom Plus-extension which can be bought as an optional addon with all our Magento themes.

Next, open up the media.phtml-file on your server and.. well, we’ve done everything for you in this step, so just replace everything in the file with the following code:

<!-- Fetch product-image information -->
getProduct();
    $_helper = $this-&gt;helper('catalog/output');
?&gt;
 
<!-- Check if Base image is defined, and if so, display it with Highslide effect -->
getImage() != 'no_selection' &amp;&amp; $_product-&gt;getImage()): ?&gt;
<div class="highslide-gallery">
    <a class="highslide" onclick="return hs.expand(this)" href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image') ?&gt;">
        <img title="Click to enlarge" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image')-&gt;resize(265) ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($this-&gt;getImageLabel()) ?&gt;" />
    </a>
    <!-- Add caption below the image -->
<div class="highslide-caption">
        htmlEscape($this-&gt;getImageLabel()) ?&gt;</div>
</div>
<!-- No Base image available. Will show default image from Magento -->
 
<!-- Hey, this product has more images so we'll display the gallery and Highslide them as well -->
getGalleryImages()) &gt; 0): ?&gt;
<div class="more-views">
<div class="highslide-gallery">
<h4>__('More Views') ?&gt;</h4>
<ul>
    getGalleryImages() as $_image): ?&gt;
	<li>
            <a class="highslide" onclick="return hs.expand(this)" href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'image', $_image-&gt;getFile()); ?&gt;">
            <img title="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile())-&gt;resize(56); ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" /></a>
<div class="highslide-caption">
            htmlEscape($_image-&gt;getLabel()) ?&gt;</div></li>
</ul>
</div>
</div>
<!-- End of media.phtml with Highslide-effect -->

Step 5: Finish

You’re done. Thats right. Good job!
Or what do you say? You dont want to do it yourself? Then just purchase one of our popular Magento-themes and add Highslide as a bundled addon upon purchase, and we’ll help you all the way through.

Wanna see a demo of it?

Check out our products at Silverthemes.com, as they’re all set up with the Highslide:
http://www.silverthemes.com/premium-magento-themes/superclean.html