When a client wants to redevelop their website, a large component of that process is selecting the right platform to build the new site on. There are many to choose from. Magento is one of those options, and it has gained serious traction as a powerful eCommerce platform. It does however lack when it comes to its flexibility as a content management system and publishing tool.

So what do you do, for example, if your company is starting inbound marketing initiatives to drive eCommerce revenue? You might not want to stray from your established Magento store, but you also need to add some serious content publishing functionality. Enter stage left: WordPress.

This article is going to explain how you can use WordPress and Magento together with one website.

Different Approaches

There are two different methods by which to slap WordPress and Magento together. More than likely, one will fit your business needs better than the other. One might also be a lesser level of effort than the other, you will have to decide.

The first method is to integrate Magento into WordPress. With this approach, WordPress is our primary website platform and Magento is our secondary, holding product catalogs and data.

The second approach is to integrate WordPress into Magento. Here, we are using Magento as our primary platform and implementing WordPress page publishing capabilities into it.

If you need help figuring out which approach is best for you, start with this logic:

Are you building a brand new website from scratch? If yes, use approach 1.

Are you adding eCommerce to your established website? If yes, use approach 1.

Do you already have a Magento website? Yes? Approach 2 is for you.

Approach 1: WordPress Parent, Magento Child

Requirements:

  1. Existing Magento Store
  2. New WordPress Website
  3. Magento Store + WordPress website hosted on same server
  4. Magento WordPress Integration (plugin)
  5. Category Listing (plugin extension)
  6. SSO Single Sign On (plugin extension)

First things first, go back and read requirement #3 in case you skipped that wonderful list. Your Magento site and your WordPress website must be hosted on the same server. If they are not, this will not work.

Magento WordPress Integration Plugin

The heavy lifting of this integration will be done with the Magento WordPress Integration plugin, which is free, on the WordPress repository. Installing this plugin adds a pre-built connector to your WordPress site that can pull data from the Magento platform by leveraging the mage.php file in the Magento installation.

For those who are WordPress junkies, and have never dabbled with Magento, the mage.php file is important. It is a file that enables the execution of Magento code from an external PHP file.

When you install the Magento WordPress Integration plugin and navigate to the plugin settings where the integration is configured, you’ll see it is pretty straightforward. All that really needs to be done to create the connection is mapping your WordPress website to the mage.php file of your Magento website:

Magento WordPress Integration

 

Category Listing Extension

Now that the connection between the two websites is in place, we need a way to display product blocks and categories on the content pages of our WordPress website. You know, the part where we actually display information from one system on the other system. The Category Listing extension adds a drop down menu into the WordPress WYSIWG editor that enables the adding of shortcodes into content. The shortcodes then render paginated category listings of your Magento store products into whatever page you are editing.

As an added benefit, the category listing extension comes packed with other features for manipulating the styling of shortcodes. This will allow you to modify column dimensions, products-per-page, and button colors.

Single Sign On Extension

You may have found yourself wondering how all of this will effect the user experience when it comes to check out? If someone is viewing products on a WordPress generated page and then checking out through a gateway inside Magento, won’t that require the user to log in twice?

The Single Sign On extension solves this problem by creating a log-in bridge between the two systems. When a user logs into one, they are logged into both, and can freely browse and checkout within one user session.

Approach 2: Magento Parent, WordPress Child

Requirements

  1. Existing Magento Store
  2. New WordPress Website
  3. Magento WordPress Integration (Magento plugin)
  4. Root (plugin extension)
  5. Post Types & Taxonomies (plugin extension)
  6. Visual Composer (WordPress Plugin)
  7. Visual Composer (Magento Extension)

This approach is going to use a similar high-level methodology as approach one. Except this time we are really focusing on Magento as the primary platform, and adding functionality to pull content from WordPress into our Magento site.

Magento WordPress Integration

Same name as before, but this is a Magento plugin that is available for free from a company call FishPig. Similar to the WordPress plugin, it simply creates a pre-built bridge between the two systems so they can exchange data. A number of plugin extensions are then bolted onto this plugin to extend the functionality and allow you to customize content pages using WordPress, inside of Magento.

Root Extension

Installing the Root extension on top of Magento WordPress Integration cleans up the permalink structure of the website. On a basic level, Root removes the /blog/ section of your website URLs. This enables you to create a WordPress page and place it into the root of your Magento site. So instead of navigating to yoursite.com/blog/new-products, you can instead have the page be accessed directly at yoursite.com/new-products.

Post Types & Taxonomies

This extension adds another level of customization to Magento so that you can organize the content structure of your site however you want. Using this extension, you can create any number of custom post types in WordPress and publish content under them. Magento will then pull those pages, within their respective “types,” into the root of the Magento permalink structure.

For example, suppose you create a custom post type in WordPress and call it Product Reviews. You then create a product review called Product 1 within WordPress and publish it. Your Magento site will then pull this content and make it accessible at yoursite.com/product-reviews/product-1.

Visual Composer

This is a fantastic visual editing tool for WordPress that will allow you to build a page to look any way you want using drag-and-drop editing. The Visual Composer add-on extension in Magento enables any edits on your WordPress pages to be compatible with Magento.