Magento Header into WordPress

How to pull the Magento header and footer into WordPress

Update: Notice this post is 5+ years old which means this post is ancient in the online world. Some or all of the solution in this post may or may not work currently for your project.

Recently I had a client that was running a Magento eCommerce store and wanted to use WordPress as their blog CMS. That is all fine and dandy as we just installed WordPress in a subdirectory and had it up and running in no time. The next tasks was to make the WordPress blog look like it is integrated into the Magento store by pulling the Magento header and footer into the WordPress theme.

To do this, I ended up using cURL to fetch the HTML of the Magento header between two comment tags.. For example, here is the header.php of the WordPress theme.

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<?php  
//URL of targeted site  
$url = "http://magentourl.com/empty";  
$ch = curl_init();  
  
// set URL and other appropriate options  
curl_setopt($ch, CURLOPT_URL, $url);  
curl_setopt($ch, CURLOPT_HEADER, 0);  
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);  
  
// grab URL and pass it to the browser  
$output = curl_exec($ch);  

//Regular expression to excerpt the targeted portion  
preg_match('/<!-- STARTHeaderContainer -->(.*?)<!-- ENDHeaderContainer -->/s', $output, $matches);  

echo $matches[0];  
  
// close curl resource, and free up system resources  
curl_close($ch);  
?> 


<body <?php body_class(); ?>>
<div class="blog-title">
	<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="Outdoor Journal" rel="home">Outdoor Journal</a></h1>
		</hgroup>
	</div>

<div id="page" class="hfeed site">
		
	

	<div id="main" class="wrapper">

You can see around line 36 that I set the URL to fetch to a blank Magento page that was created in Magento. Then around line 48 a regular expression was setup to look for and grab everything between two comment tags.

To setup these comment tags, you will want to edit the .phtml file that the page you are fetching in line 36 is using. To do this, navigate to app/design/frontend/default/themename/template/page/1column.phtml(or whatever page template your page is using in line 36)

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
/**
 * Template for Mage_Page_Block_Html
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<?php $bgColor = Mage::helper('gdtheme')->getThemeColor(); ?>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().' '.$bgColor.'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="page">
        <!-- STARTHeaderContainer --><?php echo $this->getChildHtml('header') ?><!-- ENDHeaderContainer -->
        <div class="main-container col1-layout">
            <div class="main">
                <div class="section group">
                    <?php echo $this->getChildHtml('breadcrumbs') ?>
                    <div class="col-main">
    					<div class="col-main-top section group"></div>
    						<?php echo $this->getChildHtml('global_messages') ?>
    						<?php echo $this->getChildHtml('content') ?>
    					<div class="col-main-end section group"></div>
                    </div>
                </div>
            </div>
        </div>
            
        <!-- STARTFooterContainer --><?php echo $this->getChildHtml('footer') ?><!-- ENDFooterContainer -->

        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

You can see around line 43, I inserted the two comment tags that cURL is looking for. Now when your WordPress header loads, it will pull the Magento header. Duplicate the above steps to do the same if you need to pull in the Magento footer as well.

Hope this helps anyone out there looking for a quick and easy solution.

  • Pete

    Hi Brad, this is an excellent tutorial and a really easy fix to an otherwise complicated scenario. The question I have for you is if there’s an equaly elegant way to share the CSS or JQuery elements of the original menu as my new menu looks nothing like the original! Thanks.

    • If you are including the header, it should pull in all the CSS and jQuery calls. If not, you make need to use import within your WordPress theme to get the Magento CSS files.

      • Pete

        Thanks very much for getting back to me – I’ll try WP import. Great to know it’s all possible!

  • Kevin

    I’m having issues with this not pulling the correct information when the user is logged in. It pulls the same header as someone who is logged out. Any suggestions?

    • jackyon

      +1, same issue happen to me.
      Hi Brad, can u advise how to solve this issue plz? thx!

      • Whatever is wrapped in STARTHeaderContainer – ENDHeaderContainer is going to be pulled in, so you may need to change up what is being pulled in.

  • Yogi

    Brad, Can we override the magento CSS if original magento theme is not responsive but he WP theme we are using is responsive?

    • I’m sure you could. I don’t know you current setup, but just add CSS styles to the last CSS file that is being loaded.

  • tomsmethurst88

    Hello Brad, This is a great solution, are only issue is are “top cart” not updating in our magento header when a product is added, I believe its a sessions issue, how did you overcome this issue?

    • David

      Same issue here. If I put an item in my cart, the number reads as 0 when I’m in a WordPress page that pulls in the header. Though when I return to the main site, the number reads correctly again. Any idea how to pass that item count to the cURLed header?

  • Mahdi Ghalila

    Hi Brad, This solution is very helpful 🙂
    I tried it with a http magento website and it works perfectly but when I try it with https one it doesn’t work :/
    Do you have a solution for that ?

  • Phil

    Lmao why did you delete my comment? You are only hurting people by recommending this terrible solution

    • What comment are you talking about? I don’t delete any comments.

  • Phil

    You should at the very least explain that dynamic content and session information will not work correctly otherwise you are seriously wasting peoples time

    • This post is ~5 years old. Tons of things have changed in both CMS and I am not even sure this works anymore. At the time it was a workaround that worked. I will put an update at the top of the post that say to proceed with caution.

  • Phil

    Well thank you for dong that, I am screen shotting this comment because for somereason some of my comments are missing, maybe this will help you troubleshoot