Magento 2 Integration: The below article is for Magento 1. Cadence Labs has developed its own WordPress-Magento 2 integration. For details, please contact us

It’s a situation we run into pretty frequently here at Cadence Labs: you’re running Magento and WordPress on the same web server; all is well, Magento is selling products and WordPress is hosting content. However, anytime you make a change to the Magento theme you have to re-do the change on the WordPress theme (and vice-versa). Overtime, you start to neglect one system over the other, things get out sync, then you’re wishing you’d never setup both systems!

The Problem: Magento & WordPress use separate themes

As you’ve probably already figured out, Magento and WordPress each use completely different theming systems. I won’t go into the details here, but each system is specialized to its needs (Magento’s for flexibility and power, WordPress for simplicity and ease-of-use). Therefore, we have an interesting challenge before us, as we can’t simply “copy and paste” a theme from one system to the other.

You can of course develop 2 identical themes for each platform separately, but this becomes challenging to maintain, and expensive if you’re paying for the development.

The Solution: Use your Magento theme with WordPress

At Cadence labs, we wanted to find a way to develop one theme and use it for both systems. There are 2 routes that can be taken:

1. Develop a Magento theme and use it for WordPress
2. Develop a WordPress theme and use it for Magento

Do you see the difference? We’ll first develop a theme on either Magento or WordPress, and then use it for the other system. In my personal experience, the Magento site is always the more complex of the 2, so it makes sense to develop the Magento theme first.

That being said, we looked into existing solutions for using a Magento theme on WordPress, and detailed our findings below:

FishPig’s Magento-Wordpress Integration

FishPig has developed a free magento-wordpress integration for rendering WordPress pages within Magento.

Features:

• Shared Magento/Wordpress login
• WordPress content is displayed inside the Magento system, meaning only the Magento theme needs to be updated.

This is a great extension for including content in your Magento store, while still having the WordPress admin panel to develop it.

Cons:

• Plugins and short-codes won’t work – the reason being that FishPig provides a Magento module to output WordPress pages and posts. This means the WordPress codebase is never actually loaded. So, all plugins or features built into WordPress will not be available unless explicitly added by FishPig.
  • ** Fishpig has added support for a few plugins on their website
• Currently only supports the default WordPress Theme – it may be confusing that I’m listing this as a con. You might, say “Why does it matter what the wordpress theme is if we’re using magento’s theme?” – good question, the answer is that many wordpress themes comes with extra “features” for quickly developing content (our favorite is the Divi theme by Elegant themes, detailed below).

Ultimately, we decided this plugin didn’t offer enough power for our needs: it was great if you had a few pages of vanilla content that needed to be displayed within Magento from WordPress, but didn’t stand up to the test when you wanted to use plugins and theme features within WordPress.

MWI – Wordpress-Magento Integration

I stumbled across a very cool extension for WordPress called magento-wordpress-integration. This extension works differently than the FishPig one. It allows you to “render” any Magento block inside of your WordPress theme – very cool.

Features:

• Select which Magento blocks get output on your WordPress theme.
• Works with any WordPress theme or plugin.
• Much more versatile than the FishPig extension
• Cool Add-on extensions:
  • MWI Magento-WordPress single sign on
  • MWI – Magento shortcodes for WordPress – allows you to insert products, layout blocks, and static blocks inside posts or pages
  • MWI – Magento category lists for WordPress – allows you to output a paginated category result inside posts or pages

Cons:

• Some assembly required – this extension requires a little development to implement correctly.

We tried out this plugin on a site we built recently, and you can see the results below:

• http://www.thesynergycompany.com/pure-synergy
• http://www.thesynergycompany.com/about/whole-food-vitamins/

You may not have noticed, but the first link is a Magento Page and the second is a WordPress Page. They look nearly identical, with the exception of the page-specific content, which is just what we’re looking for!

When developing this theme, we started with a theme template for both Magento and WordPress. For Magento we used Bootstrap Boilerplate and for WordPress we used Divi by Elegant Themes. I’ll walk you through how we integrated the 2 themes. Keep in mind that we only need to integrate on the WordPress theme – we can develop the Magento theme without any concern for WordPress. I’m also assuming that you’ve followed their instructions and installed the extension.

Theme Integration – Overview

The below diagram is a summary of what we’re trying to accomplish by combining the themes:

WordPress Theme – CSS – header.php

Inside your WordPress theme, at /header.php, find the following line of code:

<?php wp_head(); ?>

This is where WordPress outputs its stylesheets. We’re going to do some esoteric regular expressions to mix Magento’s CSS and JS with WordPress’s. We’re trying to load assets in the following order:

1. WordPress CSS
2. Magento CSS & JS
3. If Magento is also using jQuery, alias that to a separate variable
4. WordPress Javascript

The above order is necessary to ensure Magento’s css takes priority, and that Magento’s JS doesn’t interfere with WordPress’.

<?php

 ob_start();
 wp_head();
 $wpCssJsHtml = ob_get_contents();
 ob_end_clean();

 $jsRegex = '/<script.*<\/script>/';

 $wpCssHtml = preg_replace($jsRegex, '', $wpCssJsHtml);

 $matches = array();
 preg_match_all($jsRegex, $wpCssJsHtml, $matches);
 $wpJsHtml = isset($matches[0]) ? implode(chr(10), $matches[0]) : '';

 // Display CSS before Magento
 echo $wpCssHtml;

 ?>

 <?php
 echo get_block('head', false)->getCssJsHtml();
 ?>

 <script type="text/javascript">
 magentojQuery = jQuery.noConflict();
 </script>

 <?php

 // Display JS html after Magento
 echo $wpJsHtml;

 ?>

So, this should handle giving us the stylesheet from our Magento theme – you can see our Magento theme also uses Twitter Bootstrap, which I’ve included as well.

WordPress Theme – Page Header – header.php

This part is going to be a little tricky to implement – we’re trying to replace WordPress’s navigation menu with Magento’s. Therefore, this will depend heavily on your theme. For our purposes, the page header for Divi is also located in header.php. We simply removed all the navigation html outputted by WordPress/Divi, and replaced it with:

<?php the_block("header"); ?>

This line is actually loading AND rendering Magento’s header block. Keep in mind the function argument, “header” in this case, is the Magento block name for the header block. This is usually found in the theme’s layout/page.xml file: 

WordPress Theme – Page Body – header.php

We also want to make sure we include the after_body_start block, right after the opening body tag.

<body <?php body_class(array('cadence_wp')); ?>>
<?php the_block('after_body_start'); ?>

** You’ll note we’re also adding a custom body class cadence_wp here. This helps us to make CSS selections specific to the wordpress side of things

WordPress Theme – Page Footer – footer.php

Similar to the last section, this update will be highly dependent on your theme. But, the idea is the same, we’re trying to delete WordPress’s footer html and include Magento’s. For our theme, this was located in /footer.php – we removed almost all the code in this file, replacing it with:

<?php if ( 'on' == et_get_option( 'divi_back_to_top', 'false' ) ) : ?>

    <span class="et_pb_scroll_top et-pb-icon"></span>

<?php endif;

if ( ! is_page_template( 'page-template-blank.php' ) ) : ?>
    </div> <!-- #et-main-area -->
<?php the_block('footer') ?>
<?php endif; // ! is_page_template( 'page-template-blank.php' ) ?>

<?php /** @author Alan Barber - Get Ajax AddToCart config */ ?>
<?php echo get_block('ajaxpro.before_body_end') ?>
<?php wp_footer(); ?>
<script type="text/javascript">
    $j = jQuery = magentojQuery;
</script>
<?php the_block('before_body_end'); ?>
</body>
</html>

That’s it! That should output Magento’s footer block – remember, “footer” needs to be the name of your footer block as defined in layout/page.xml of the active theme.

Make sure not to delete the wordpress line that looks like this:

<?php wp_footer(); ?>

Although this may look like it prints the footer, it actually prints the Google Analytics tracking code and WordPress javascript – your site will be in big trouble if this is missing!

Finally, it’s important to note that above we are outputting the before_body_end block, as well as re-aliasing the jQuery object to the Magento version.

Conclusion

We feel the MWI plugin is the best route for integrating both systems. It requires some massaging from you (or your developer) but in the end, you’ll have a much more seamless and easy to maintain integration.

Alan Barber is the Lead Web Developer at Cadence Labs and a Magento Certified developer.

Need Help using your Magento theme with WordPress?

Here at Cadence Labs, we’ve gotten pretty good at integrating these 2 systems. For help using your Magento theme with WordPress, Contact Us or call (719) 286-0751 to have a real person contact you now.

Related Articles By Cadence Labs:

• Troubleshoot: Magento WordPress (MWI) Session Error (Incomplete Object)