Integrating WordPress into Zen Cart

Before you start, keep in mind that we also offer a service to integrate WordPress with Zen Cart.  This tutorial and service has been tested with Zen Cart versions: 1.3.8a to 1.5.5f.

When we first launched the Numinix Blog, we tried to use a module called WordPress on Zen Cart to display our WordPress blog as a page inside Zen Cart. Unfortunately, that module hasn’t been updated in years (the word “years” is almost never a good thing when referring to software) and actually causes conflicts with a lot of other modules for Zen Cart. Fast forward to a week ago when one of our loyal customers insisted we find a way to integrate the blog into Zen Cart so that such things as shopping cart quantity and login status can be maintained even when in the blog. After doing a little research, I found that integration had been achieved for osCommerce and that it must also be possible for Zen Cart. So, after a few successful integrations across multiple customer’s websites, including our own, I decided to write this tutorial on how to integrate WordPress with Zen Cart. Due to the large number of steps, I thought it wouldn’t be a good idea to release this as a module.

So firstly, this tutorial assumes you have one the following setups:

Situation 1

  • Zen Cart installed to the root
  • WordPress installed to a sub-folder such as /blog/

We’ve also achieved the following situation:

Situation 2

  • Zen Cart installed to a sub-folder such as /shop/
  • WordPress installed to a sub-folder such as /blog/

It is recommended that your site either not use SEO URLs, or use a SEO URLs module such as SIMPLE SEO URLs (Magic SEO URLs works as well) which can disable/exclude rewriting the “blog” page. If you are using a module that cannot disable rewriting, issues could arise if the module tries to rewrite PHP URLs created by WordPress. For example, when “previewing” a blog post, WordPress creates a PHP URL that could be mistakenly rewritten.

The second situation requires additional steps unless you are fine with your blog appearing in /shop/blog/ rather than /blog/.

Preparing WordPress

WARNING: IF YOU DO NOT HAVE EXPERIENCE WITH DEVELOPING A WEBSITE YOURSELF, DO NOT ATTEMPT TO PERFORM THESE STEPS. CONTACT A PROFESSIONAL!

Step 1:

Create a WordPress Child Theme.

Step 2:

First, you will need to disable access to your current blog by uploading a blank file named index.html to your WordPress root directory. You may also want to rename your index.php file in case your server settings automatically load this file before any html files (this will differ from server to server).

Step 3:

Next, save a copy of your theme’s style.css file and any images that are referenced in the style sheet to a place on your desktop to later be uploaded to your Zen Cart installation.

Rename style.css on your desktop to blog.css and open the file and change all image URL paths to match the URLs found in your Zen Cart style sheets.

Step 4:

Open http://www.domain.com/path_to_wordpress/wp-admin/ and go to SETTINGS

Change WordPress address (URL) to http://www.domain.com/folder_name_of_your_choice (WordPress will be physically installed here)

Change Blog address (URL) http://www.domain.com/blog

Note: these two paths must not match.  If WordPress is located in “/wordpress/”, then the blog will be publicly accessible through an alternate URL (i.e. /blog/).  You can name either whatever you like, but the blog must physically exist at the WordPress Address.  The Blog address will be used as a rewrite for the Zen Cart page we will be building later on.  If you’d like to use a different name other than /blog/ in the URL, you’ll need to modify the htaccess rewrite provided in the Zen Cart installation instructions below.

Step 5:

Rename your WordPress folder to the folder name you chose for the WordPress Address in step 4 above.

** END OF WORDPRESS PREPARATION **

Zen Cart Installation

Step 1:

Upload blog.css to includes/templates/YOUR_TEMPLATE/css/

Upload your wordpress images to includes/templates/YOUR_TEMPLATE/images/

Step 2:

Download the WordPress/Zen Cart integration package.

Unzip the package and upload the full package to your Zen Cart folder.

Step 3:

Open includes/wordpress_page.php and change

require('../wordpress/wp-blog-header.php');

To use your wordpress folder name that you chose previously. If your Zen Cart folder is in the root, remove “../”.

Step 4:

Open includes/template/YOUR_TEMPLATE/common/tpl_main_page.php and find

require($body_code);

Replace it with:

$zc_template = $template;
require($body_code);
$template = $zc_template;

Step 5:

Open includes/application_top.php and find:

require('includes/autoload_func.php');

Add after:

// WordPress integration
require('includes/wordpress_page.php');

Step 6 (skip this step if using a SEO module that cannot be disabled):

In your domain root, open .htaccess and add the following:

Options +FollowSymLinks
RewriteEngine on
RewriteBase /
RewriteRule ^blog(.*)$ /catalog/index.php?main_page=blog&$1 [E=VAR1:$1,QSA,L]

This will rewrite your blog page url to domain.com/blog/. If this causes a server error, try changing the last line above to:

RewriteRule ^blog(.*)$ /catalog/index.php?main_page=blog$1 [L]

Note: if your store is in the root of your domain, remove “/catalog” from the rule.  If you want wordpress to load as a different URL, change the first instance of “blog” in the RewriteRule to whatever you set as the Blog Address in step 3 of the Preparing WordPress section above.

Step 7:

To display your blog titles as the page title:
Open includes/modules/YOUR_TEMPLATE/meta_tags.php
Find:
// EZ-Pages:
case 'page':

And add before:
case 'blog':
define('META_TAG_TITLE', (defined('NAVBAR_TITLE') ? NAVBAR_TITLE . PRIMARY_SECTION : '') . wp_title(PRIMARY_SECTION, false, 'right') . TITLE . TAGLINE);
define('META_TAG_DESCRIPTION', TITLE . PRIMARY_SECTION . (defined('NAVBAR_TITLE') ? NAVBAR_TITLE : '' ) . SECONDARY_SECTION . KEYWORDS);
define('META_TAG_KEYWORDS', KEYWORDS . METATAGS_DIVIDER . (defined('NAVBAR_TITLE') ? NAVBAR_TITLE : '' ) );
break;

You can manipulate this code if you have experience with PHP to create the title format that you’d like. Also opening the meta_tags.php file and creating a custom format for “blog” would be a good idea.

Step 8

Add the following AROUND any meta tags in includes/templates/YOUR_TEMPLATE/common/html_header.php that you do not want to load on the blog page (i.e. description and keywords) so that wordpress tags will be used instead:

<?php if ($_GET['main_page'] != 'blog') { ?>

and

<?php } ?>

** END OF INSTALLATION **

Well, the EASY part is over. Now is the part where you will need some experience with CSS and HTML as you have just imported your entire blog into the main page area of your Zen Cart template… chances are it isn’t going to fit and all of the CSS is ruined by the global style sheet of your Zen Cart. Or, global styles within the blog.css file will have an effect on the look of your store.

Some tips:

  • Remove the header and footer code that you no longer need from header.php and footer.php in your WordPress theme folder.
  • Change all selectors in your css file to be specific to only the main area of the blog page.

Well, that is the end of the tutorial on how to integrate WordPress into Zen Cart. If I’ve missed any steps, please let me know and I will double check everything and update this posting as needed. If you would like to get Numinix to complete these steps for you, please visit our WordPress/Zen Cart Integration service page.

Happy blogging!

350 thoughts on “Integrating WordPress into Zen Cart

  1. We still can not quite think that I could become one of those studying the important guidelines found on your blog.
    My family and I are seriously thankful for your generosity and for offering me the possibility to pursue the chosen profession path.
    Many thanks for the important information I acquired from your web site.


  2. This is a really good tip particularly to those new to the blogosphere.

    Short but very precise information… Thank you for sharing this one.
    A must read article!


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Chat with us Contact Account Cart Search Cart Open Menu Arrow Link Arrow Chat Close Close Popup Facebook Twitter Google Plus LinkedIn