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:
- Develop a Magento theme and use it for WordPress
- 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.
- 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.
- 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.
- 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
- 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:
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:
- WordPress CSS
- Magento CSS & JS
- If Magento is also using jQuery, alias that to a separate variable
The above order is necessary to ensure Magento’s css takes priority, and that Magento’s JS doesn’t interfere with WordPress’.
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:
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(); ?>
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.
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.
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.
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.
Try this plugin for WordPress which is also by James Kemp: https://wordpress.org/plugins/magento-wordpress-integration/
It allows you to use shortcodes to insert category listings, products, layout blocks, and static blocks in your WordPress editor.
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?
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:
2) Call jQuery.noConflict after Magento’s jQuery is loaded
4) Include all your wordpress files (including jQuery)
Does that help at all?
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.
Hmm, the site is up for me: http://www.mwi-plugin.com
I haven’t yet done this on Magento 2, and the mwi plugin doesn’t support it yet. My understanding is they’re actively working on an integration: https://wordpress.org/support/topic/magento-2-compatibility
Once the plugin is built, the process should essentially be the same. Magento 2 still supports blocks to encapsulate view logic / rendering.
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
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.
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.
The WMI extension site links are foobared thanks to that ‘GeNErAL’ idiot.
However, with some persistence I was able to find the content.
Hope this is helpful for others:
The referenced functions.php can be found here:
Still works well with latest Magento 1.9.x version and WP 4.7.5 with Divi version 3.0.47.
it seems the ‘GeNErAL’ was banished, and the original mwi-plugin.com website pages work just fine now 🙂