Recently we had the privilege of working on a website that was very content heavy but also had quite a few products already in place in Magento. We know from experience that Magento is not fun to use as a content management system so our first thought was to use WordPress and migrate products to Woocommerce.  Though Woocommerce has greatly improved over the years, our clients needed some of the core Magento modules to continue business as usual.  With this in mind we started our search for integration plug-ins for both platforms (WordPress, Magento).

Of course we found FishPig’s plug-in, which seemed to be perfect, and in many ways it is. It is absolutely perfect if WordPress is being used as a blog only. The downside is the cost to use normal WordPress functions or interact with your favorite plugins is a few hundred dollars. Even when you do buy all the plugins you are limited to a few of the most popular plugins and limited shortcodes.  There are also a few alternatives to FishPig that give you a little more freedom with core functions, but even these options do not consider the millions of possible plugins available for WordPress.  We also found some great options for including Magento elements into WordPress but not WordPress elements into Magento. We ended up using Magento WordPress Integration from James Kemp. This is available for free in WordPress Plugin Directory (https://wordpress.org/plugins/magento-wordpress-integration/). I will eventually remove this plugin from the process as it does add unnecessary admin menus and pages.

WordPress and Magento a la carte Features

Both open source platforms offer really great features and we knew we wanted to get the best of both of them working the same on every page. From WordPress we wanted the Menu System, Page and Blog CMS, Media Galley, easy-coding experience and access to millions of plugins; basically we wanted everything available to WordPress.

From Magento we wanted the top menu (Account, Cart, Login, etc) to be available on every page located in the header.  We also knew wanted the Magento sessions to stay active throughout the site, allowing the My Cart(0) to update when the page loads, corresponding the number of item in the cart.

We also wanted to combine the search features of WordPress and Magento into a single search form.  We assumed this was going to be a relatively hard part of the project as both systems have well build search engines that work well for their own purposes but nowhere could I find documentation that teaches you how to expand either system’s core search beyond their intended use.  Again there are plugins out there for indexing your site for search purposes but they all have their own interfaces that were not worth trying to manipulate into our needs.

Using WordPress’ Header and Footer in Magento

Using the WordPress header within systems and files that are not WordPress is very common and is an easy piece of code to find on Google.  In my examples I will be assuming your WordPress installation is in the root, and that your Magento is in the subfolder “/products/.” I’m also going to use RWD’s default files. You should always start your own branch/child theme.

Editing Header.phtml

Locate the header.phtml that associates with the currently active theme and package.

products > app > design > frontend > rwd > default > template > page > html > header.phtml

Once you have located and opened header.phtml you have to go to around line 30, just under the large comment area that explains the theme disclaimer. Place this code after the comment, but before anything else in the file:

<?php  include('../wp-content/themes/twentythirteen/header.php'); ?>

This will add the WordPress header to every Magento page.  Be sure to replace “your-theme” with your theme’s directory name.  There is a lot of Magento features called within header.phtml.  You can comment them out if you want to use them in the WordPress header.  If you leave anything in header.phtml keep in mind that they will only be on Magento pages.   We removed/commented out everything except the last line which calls a code Magento module called ‘topContainer.’  We also added in two opening div tags that contain our wrap class and our content class; these are common WordPress css classes.  Our final header.phtml only contains four active lines of code:

<?php include('../wp-content/themes/twentythirteen/header.php'); ?>
<div id="content" class="magento-layout">
<div id="inner-content" class="wrap clearfix">
<?php echo $this->getChildHtml('topContainer'); ?>

Editing Footer.phtml

Now that the header is incorporated into the Magento theme, we want to add the WordPress footer as well. Locate the footer.phtml associated within the active Magento theme and package.

products > app > design > frontend > rwd > default > template > page > html > footer.phtml

Once you locate footer.phtml we want to edit it. Delete everything after the theme disclaimer comments, usually copyright related code exists. Delete this or comment it out. All that should be left is the large comment area at the top ending around line 27-30.  Place this code after the comment:

<?php include('../wp-content/themes/twentythirteen/footer.php');  ?>

If you are following our example exactly, you will also need to close the wrappers with two closing div tags.

</div>
</div>
<?php include('../wp-content/themes/twentythirteen/footer.php');  ?>

Editing Magento’s Index.php

Finally locate Magento’s default index.php, located in the Magento root. We are going to add the core WordPress functions to Magento but calling it from the index.php.

products > index.php

Find the line about the ‘maintenance.flag’ usually around line 48-50.  Below this line add the following line of code:

if ( strpos($_SERVER['REQUEST_URI'], 'index.php/admin') === FALSE ){ define('WP_USE_THEMES', false);
require_once('../wp-blog-header.php'); }

Save, and then visit your Magento installation.  You should see your WordPress header and footer on your Magento pages. Obviously some of your style elements won’t be perfect yet.

Allowing WordPress to use Magento Features

Now that Magento is including your WordPress Header and Footer, you are going to want to get back your Magento Top Links and Top Search.  These are features build into most Magento themes and will be missed if not added back in.

In order for WordPress to use these core features from Magento, you’ll need to keep your customer’s Sessions consistent throughout both platforms. There are a few ways to do it but what seems to be the most user-friendly at the moment is Magento WordPress Integration. This plugin will ask you for the location of your Mage.php file (please note the capital “M”). You will need the full location, starting at your hosting root.  In our example you will find Mage.php located here:

home > webdrafter > public_html > wpmagedemo > products > app > Mage.php

You will also need to know your Magento Package and Theme Names. For our example we can use:

• Package Name: rwd
• Theme Name: default
• Magento Website Code: base

Once this is complete, and the plugin will tell you if it has worked, you can now use any Magento Block in your WordPress templates. Similar to how Advanced Custom Fields uses its own function codes (the_field(), get_field()), Magento WordPress Integration has a function called the_block().  With that in mind you can now start to construct your WordPress header and footer, including most Magento elements. Just place the functions into the WordPress template:

the_block('top.search');
the_block('top.links');

Move your CSS to WordPress

The final step to have a uniform look throughout all pages is moving the css to WordPress.  If you followed all the steps above, Magento is pulling all of css of WordPress, but WordPress is getting the bare minimum from Magento. To have Magento CSS work on WordPress page you should move your CSS from Magento to WordPress.  This can be as easy or complex as you make it.

Project Conclusion

We now have the bare bones of WordPress and Magento working together.  WordPress is now now used for Menus, CMS, Blog, Contact Forms, Comments and much more.  And Magento is used for Shopping cart, Product listings, Reviews and a Transaction Gateway.  You can take this a lot further by adding WordPress Queries into Magento search, but that is another detailed project.