Integrating Wordpress into Zen Cart 1.3.8a

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 be a good idea to NOT 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 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:

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

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

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

Change Wordpress address (URL) to http://www.domain.com/folder_name_of_your_choice

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

Step 4:

Rename your Wordpress folder to the folder name you chose in step 3 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 rename all instances of YOUR_TEMPLATE to your custom template name 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.

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.

** 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 contact sales@numinix.com and we will provide you with a quote after seeing your Zen Cart and Blog sites.

Happy blogging!

1. Comments:
2. Tags:blog, combine, integration, shopping cart, wordpress, woz, Zen Cart
3. Find more like this: Zen Cart Modules