719-286-0751 info@cadence-labs.com

How to use your Magento theme with WordPress

How to use your Magento theme with WordPress

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.
  • 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-integrationThis extension works differently than the FishPig one. It allows you to “render” any Magento block inside of your WordPress theme – very cool.

Features:

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:

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:
Magento-WordPress-Diagram

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: layout_page

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:

11 Comments

  1. itsik

    Thanks a lot ,
    how we can show on magento content from WordPress? Posts on homepage …. with fishpig we can and with James Kemp’s plugin we can’t.

    Reply
  2. Martyn

    Hi Alan,

    Nice post. I Googled this to death and this one of the complete posts.

    Can I ask how you handled the issue with script conflicts. Notably when brining the Magento head into WordPress, you end up with multiple jQuery’s being loaded and most likely different versions?

    Thanks!
    Martyn

    Reply
    • Alan Barber

      So ideally you don’t end up with different version of jQuery – if at all possible, try to use just one library on the wordpress pages (if you’re including Magento’s js via a block, you can remove jquery via a layout handle, otherwise just ignore the jquery line). Also, any jquery that’s being used on the Magento side of things ought to have called jQuery.noConflict() (because $ conflicts with prototype).

      However, I understand sometimes that doesn’t work. A strategy I’ve used in the past is to do something like this:

      1) Place all the Magento javascript files before WordPress
      2) Call jQuery.noConflict after Magento’s jQuery is loaded
      3) Alter Magento javascript to use the new noConflict variable (e.g., $jm = jQuery.noConflict)
      4) Include all your wordpress files (including jQuery)

      Does that help at all?

      Reply
  3. Martin Bradley

    Are you integrating any Magento 2.0 sites? I assume the above article is integrating Magento 1.9ish. And it appears that the wmi site has been crashed or unavailable for a while.

    Reply
  4. Eric

    So a goofy question. Are the Wp and Magento installed in different directories? And also were you able to continue to use the Divi builder parts of the theme ? Basically is this a WP site using Divi and MAgento as the cart and catalog? Thanks

    Reply
    • Gillian Owen

      Hi Eric,

      Yes Magento and WordPress have to be installed in different directories for this solution to work. We have been able to do this in either order, so either Magento can be the root or WordPress can be the root.

      Divi’s builder continues to work inside of the Magento based header and footer. So while the settings for the header and footer in Divi have no effect all of the other features can still be used.

      Diagram

      Reply
  5. eric

    Gillian that is awesome. Thank you for the diagram also. That was very helpful. Seems like a little finesse to get it worked out but worth the troubles.

    Reply
  6. Dan
    • Dan

      it seems the ‘GeNErAL’ was banished, and the original mwi-plugin.com website pages work just fine now 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Install our webapp on your iPhone! Tap and then Add to homescreen.
Share This