Software Development Insights | Daffodil Software

Integrating Magento Header/Footer in Wordpress - Solved

Written by Ankita Agrawal | May 13, 2015 11:31:37 AM

Blogs are of paramount importance to a website and especially to a Magento Developed Online Store. Blogs bring forth traffic and are the prime source of SEO leads. In this tight race of Blogging Platforms, Wordpress has turned out to be the fastest horse in the derby.

Wordpress is the best platform to showcase Blogs and Case Studies. Now if you wish to combine the superiority of Wordpress with a Magento Store then this article is the perfect solution to your problems.

Here we will talk in details how to integrate your Magento Header & Footer in a Wordpress site.
We are considering Wordpress code is within a folder named "blog" inside the Magento project.

[php]$str = dirname(__FILE__);

$basedir = substr($str, 0, strpos($str, 'blog'));
$mage_php_url = $basedir . 'app/Mage.php';

// Include Magento application

if (!empty($mage_php_url) && file_exists($mage_php_url) && !is_dir($mage_php_url)) {
// Include Magento's Mage.php file
require_once ( $mage_php_url );
umask(0);
Mage::app();
[/php]

After this you can use the Magento code in your WordPress code.

[php]$url = Mage::getBaseUrl();
$url = substr($url, 0, strpos($url, 'index.php'));
// skin url of magento
$skinUrl = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN);
//js url
$jsUrl = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);[/php]

This will provide you with the Magento url, Skin url and js url.

Include Magento session so that customer and checkout session will be maintained in it.

[php]Mage::getSingleton('core/session', array('name'=>'frontend'));[/php]

After inserting this line if the user is logged into Magento then it will show him/her as logged into Wordpress as well. Cart header will show updated cart items as well.

Now let’s include time the js and css files. Include all js and css files of Magento to get the style and functionality of Magento.

[php]<link rel="stylesheet" type="text/css" href="<?php echo $skinUrl . 'frontend/default/default/css/styles.css'?>" media="all" />
<script type="text/javascript" src="<?php echo $jsUrl .'prototype/prototype.js'?>"></script>[/php]

In similar ways, you can include other files as well.

The Header

[php]$_layout = Mage::getSingleton('core/layout');
$block_header = $_layout->createBlock('page/html_header')-
>setTemplate('page/html/header.phtml');[/php]

This will include header.phtm files.

Top Menu

[php]$block_Menu = $_layout->createBlock('page/html_topmenu', 'catalog.topnav')-
>setTemplate('page/html/topmenu.phtml');
$block_header->setChild('topMenu', $block_Menu);[/php]

Likewise include the other needed block

Top Links

[php]$block_links = $_layout->createBlock('page/template_links', 'top.links')->setTemplate('page/template/links.phtml');
$block_header->setChild('topLinks', $block_links);
$block_links->addLink('Home', $url . '', 'Home','', '', 10,'', 'class="top-link-home"');
$block_links->addLink('Account', $url . 'customer/account/', 'Account', '', '', 10,'','class="top-link-account"');
$block_links->addLink('Shopping Cart', $url . 'checkout/cart/', 'Shopping Cart', '', '', 10,'','class="top-link-cart"');
$block_links->addLink('Checkout', $url . 'checkout/onepage/', 'Checkout', '', '', 10,'','class="top-link-checkout"');[/php]

      
It will include Home, Account, Cart and Checkout link on the header. Other links can be added similarly.

[php]echo $block_header->toHtml();[/php]

This will show the header html.

Footer

[php] $layout = Mage::getSingleton('core/layout');
$footerBlock = $layout->createBlock('page/html_footer')->setTemplate('page/html/footer.phtml');
$news_subscribe = $layout->createBlock('newsletter/subscribe')->setTemplate('newsletter/subscribe.phtml');
$footerBlock->setChild('newsletter', $news_subscribe);
echo $footerBlock->toHtml();[/php]

This will include footer.phtml file and it will be called ‘Newsletter’ inside the footer.

I can say with a good amount of certainty that this article will help you in including Magento styles in your Wordpress site.

Happy Coding