WordPress and Magento integration – One way to go

Lot of us in Magento related development have an issue of connecting their Magento with other CMS solutions out there. Lot of our clients like and want WordPress alongside Magento. WordPress is a great platform when it comes to publishing and managing articles. Not to mention the SEO stuff. One of the biggest issue with integrating two systems in PHP is the lack of the namespaces. This leads to function name redeclaration issues and so on. Integrating something into something is such a loosely term, depending on level of integrations… If you ask me 🙂

In this article, I’ll give you one way of how you can integrate your WordPress (or any other CMS) with Magento. If you read the article written at http://www.magentocommerce.com/blog/comments/tutorial-integrating-3rd-party-cms-content-within-magento, then you will on clear with my article. The approach is somewhat similar. There is one issue I see with the integration in the link I provided. You see, integration is done in such way that you fool no_route controller in Magento to ignore 404 template for no route and send a request to some other url then load that url content into the block that was previously used by 404 template.

Now, either I’m missing something or… The biggest issue I see with the above approach are the URL links of the content returned to us. Let’s suppose our shop is located on http://example-shop.domain/ and our WordPress at http://example-shop.domain/articles/. When we implement solution above we get some stuff under http://example-shop.domain/my-wordpress-article-no1, which is generally found under http://example-shop.domain/articles/my-wordpress-article-no1.

Now, if we had some auto generated links inside that post, my-wordpress-article-no1, pointing to other articles in my WordPress then those links would have url’s like http://example-shop.domain/articles/my-wordpress-article-no2, http://example-shop.domain/articles/my-wordpress-article-no3 and so on. Notice the /articles part in them? Clicking on such links would drove us away from Magento part of the site. We could theoretically access those articles by simply using direct link to http://example-shop.domain/my-wordpress-article-no2 since above method would interpret that as /auto and fetch it for us. How do we deal with this? Have no idea… Url rewrite? What about all of those WordPress plugins out there… Do we know what effect would above method have on that kind of integration. I don’t. That’s why I wrote another kind of integration.

Important: This is merely MY WAY of resolving this issue, and as such is more of a temporary approach. Since I’m not quite satisfied with this one as well 🙂

First let me define what I mean by integration of WordPress and Magento:

• They are both installed each in it’s own directory
• WordPress uses Magento’s .css files
• WordPress uses (includes, trough class I wrote below) Magento’s header and footer
• WordPress utilities jQuery for a little help in patching up some holes by use of COOKIES

Final result:
All of the header and footer stuff in WordPress is used from Magento so you do not need to restyle it in WordPress. All you need to do is to style and work on the content area of the WordPress template output.

Steps:
1) Do the full styling of Magento part. After that, 1column.phtml file and surround the header output stuff with comments like:

<!-- STARTHeaderContainer -->
<div class="header-container"><?php echo $this->getChildHtml('header') ?></div>
<!-- ENDHeaderContainer -->
[/sourcecode ]
2) Do the same for footer output stuff in same file: 
[sourcecode language="php"]
<!-- STARTFooterContainer -->
<div class="footer"><?php echo $this->getChildHtml('footer') ?></div>
<!-- ENDFooterContainer -->

3) Go to Magento Admin > CMS > Manage pages > Add new… call it “empty” or whatever, set it active, assign this page to use 1column layout. You should now be able to access this page using url like http://example-shop.domain/empty. It should show minimal page with only header and footer stuff. If you see some additional block then go back to edit page and under layout updates place
4) Go to WordPress theme folder, open functions.php file, copy paste the class ActiveCodeline_ConnectWM into it.
5) Inside WordPress theme folder, open header.php and instantiate a class like:

<?php
$parts = new ActiveCodeline_ConnectWM('http://example-shop.domain/empty');
echo $parts->renderHeader();
?>

And here is the class content:

class ActiveCodeline_ConnectWM
{
private $_content;
private $_header;
private $_footer;
 
/**
* Assign a url to some lightweight Magento page, posible 1 column, empty CMS page
*/
public function __construct($url, $markerStartHeader = null, $markerEndHeader = null, $markerStartFooter = null, $markerEndFooter = null)
{
$this->_content = file_get_contents($url);
$this->_renderHeader($markerStartHeader, $markerEndHeader);
$this->_renderFooter($markerStartFooter, $markerEndFooter);
}
 
public function renderHeader($markerStart = null, $markerEnd = null)
{
return $this->_header;
}
 
private function _renderHeader($markerStart = null, $markerEnd = null)
{
$markerStart = (is_null($markerStart)) ? '<!-- STARTHeaderContainer -->' : (string)$markerStart;
$markerEnd = (is_null($markerEnd)) ? '<!-- ENDHeaderContainer -->' : (string)$markerEnd;
 
$headerStart = stripos($this->_content, $markerStart);
$headerEnd = stripos($this->_content, $markerEnd);
 
$this->_header = substr($this->_content, $headerStart, $headerEnd-$headerStart);
}
 
public function renderFooter()
{
return $this->_footer;
}
 
private function _renderFooter($markerStart = null, $markerEnd = null)
{
$markerStart = (is_null($markerStart)) ? '<!-- STARTFooterContainer -->' : (string)$markerStart;
$markerEnd = (is_null($markerEnd)) ? '<!-- ENDFooterContainer -->' : (string)$markerEnd;
 
$footerStart = stripos($this->_content, $markerStart);
$footerEnd = stripos($this->_content, $markerEnd);
 
$this->_footer = substr($this->_content, $footerStart, $footerEnd-$footerStart);
}
 
}

Upon refresh of WordPress home page you should now see the Mageno header loaded. Now, for the sweet part, transfering customer related info, like cart item status and so on.

Inside WordPress header file you can use stuff like:

...
<?php wp_head(); >;
 
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#totalItemsCount").html("<?php echo $_COOKIE['my_cart_items'] ?>");
jQuery("#totalItemsPrice").html("<?php echo $_COOKIE['my_cart_total'] ?>");
});
...
</script>

Notice the $_COOKIE[‘my_cart_items’] ?>. Let’s say we wish to see total number of items in cart and total price of added items. Nice little feature inside our header that lots of clients look for. Here is how, open your header.phtml from Magento folder, and copy paste the code:

$totalNumOfCartItem = Mage::helper('checkout/cart')->getCart()->getItemsCount();
 
$totalPrices = Mage::helper('checkout/cart')->getCart()->getQuote()->getTotals();
 
$subtotalPrice = $totalPrices['subtotal'];
$subtotalPrice = $subtotalPrice->getData('value');
 
$grandTotal = $totalPrices['grand_total'];
$grandTotal = $grandTotal->getData('value');
 
setcookie('my_cart_items', $totalNumOfCartItem);
setcookie('my_cart_total', Mage::helper('core')->currency($grandTotal, true, false));

Combined with something like (inside header.php)

<div id="mini_mycart">
<ul>
<li id="tnpart_mycart">
<p>items: <span id="totalItemsCount"><?php if(isset ($totalNumOfCartItem)) { echo $totalNumOfCartItem; } else { echo '0'; } ?></span><br />
total: <span id="totalItemsPrice"><?php if(isset($grandTotal)) { echo Mage::helper('core')->currency($grandTotal, true, false); } else { echo Mage::helper('core')->currency('0', true, false); } ?></span></p>
</li>
<li id="tnpart_view_mycart"><a href="<?php echo $this->getUrl().'checkout/cart/'; ?>" title="View my cart"><span class="b1">View my cart</span></a></li>
<li id="tnpart_wishlist"><a href="<?php echo $this->getUrl().'wishlist/'; ?>" title="My wishlist"><span class="b1">My wishlist</span></a></li>
<li id="tnpart_checkout"><a href="<?php echo $this->getUrl().'checkout/onepage/'; ?>" title="Checkout"><span class="b1">Checkout</span></a></li>
</ul>
 
<p id="submini_account_action">
<a href="#" title="My account">my account</a>
<span class="delimiter1">|</span>
<a href="#" title="Login">login</a>
</p>
</div><!-- /mini_mycart -->

And you get cart info on both Magento and WordPress side (hence the jQuery stuff). This walk-trough is not for newbies. I did not go in such details so some stuff might be unclear. However, all of the code you need to make it work is here.