Embedding WordPress into OS Commerce

Embedding WordPress into OS Commerce

I’ve created the following tutorial in response to topic 47148: osCommerce and WordPress at WordPress Support.

While I have been programming PHP for a while, I am new to both OS Commerce and WordPress. That being said, for this integration I have tried to follow the coding standards for creating a new OS Commerce page. If you see any refinements I need to make to my code, feel free to comment. I hope this helps all of you who are looking to integrate OS Commerce and WordPress.

10/06/2006 - UPDATE: In response to comments below, I’ve written a Part II to this tutorial showing how to embed WordPress into a default install of OSC MS2.2.

PLEASE NOTE: The code in this tutorial assumes that your OS Commerce install is located in your server’s web root and your WordPress install is located in a subdirectory named wordpress/.

ALSO NOTE: This tutorial is written for OS Commerce installs using the Basic Template Structure (BTS). For OSC installs using the Simple Template Structure (STS), please see comment number 9 below:

1. Create a file for your WordPress blog in the root folder of your OS Commerce install. For our purposes, we’ll name this file blog.php. The contents of this file are as follows:
   1. <?php  
   2. /*
   3. Title: Embedding WordPress into OS Commerce
   4. Author: Michael Wender (www.michaelwender.com)
   5. Disclaimer: This Software is provided "AS IS" and without warranty of any kind. The user assumes all risks associated with its use and installation.
   6. $Id: blog.php,v 1.1.1.1 2004/03/04 23:38:02 ccwjr Exp $
   8. osCommerce, Open Source E-Commerce Solutions
   9. http://www.oscommerce.com
   10. Copyright (c) 2003 osCommerce
   11. Released under the GNU General Public License
   12. */ 
   13.  
   14. // turn off WordPress themes and include the WordPress</b> core:  
   15. define('WP_USE_THEMES', false);  
   16. require('./wordpress/wp-blog-header.php');  
   17.  
   18. require('includes/application_top.php');  
   19. require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_BLOG);  
   20. $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_BLOG));  
   21. $content = CONTENT_BLOG;  
   22. require(DIR_WS_TEMPLATES . TEMPLATE_NAME . '/' . TEMPLATENAME_BLOG_PAGE);  
   23. require(DIR_WS_INCLUDES . 'application_bottom.php');  
   24. ?> 

   <?php/*Title: Embedding WordPress into OS CommerceAuthor: Michael Wender (www.michaelwender.com)Disclaimer: This Software is provided "AS IS" and without warranty of any kind. The user assumes all risks associated with its use and installation.$Id: blog.php,v 1.1.1.1 2004/03/04 23:38:02 ccwjr Exp $osCommerce, Open Source E-Commerce Solutionshttp://www.oscommerce.comCopyright (c) 2003 osCommerceReleased under the GNU General Public License*/// turn off WordPress themes and include the WordPress</b> core:define('WP_USE_THEMES', false);require('./wordpress/wp-blog-header.php');require('includes/application_top.php');require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_BLOG);$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_BLOG));$content = CONTENT_BLOG;require(DIR_WS_TEMPLATES . TEMPLATE_NAME . '/' . TEMPLATENAME_BLOG_PAGE);require(DIR_WS_INCLUDES . 'application_bottom.php');?>

2. Open the file oscommerce_root/includes/filenames.php.
   • Find the section that begins with the comment // define the content used in the project, and add the following code:

     1. define('CONTENT_BLOG', 'blog'); 

     define('CONTENT_BLOG', 'blog');

   • Find the section that begins with // define the filenames used in the project, and add the following:

     1. define('FILENAME_BLOG', CONTENT_BLOG . '.php'); 

     define('FILENAME_BLOG', CONTENT_BLOG . '.php');

   • Find the section that begins with // define the templatenames used in the project, and add the following:

     1. define('TEMPLATENAME_BLOG_PAGE', 'blog_page.tpl.php'); 

     define('TEMPLATENAME_BLOG_PAGE', 'blog_page.tpl.php');

3. Create the following file: oscommerce_root/templates/your_template_dir/blog_page.tpl.php (Note: This file’s filename matches the variable you defined as TEMPLATENAME_BLOG_PAGE in filenames.php).

   The contents of this file will vary according to which template you are using (to start, I suggest making a copy of your main_page.tpl.php); however, the body content on this page will be your WordPress blog. You will display your blog using The WordPress Loop. The following file is only meant to show you how to get started. Your blog_page.tpl.php will vary according to the template you are using in OS Commerce:

   1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
   2. <html <?php echo HTML_PARAMS; ?>>  
   3. <head>  
   4. <meta http-equiv="Content-Type" content="text/html;  
   5. charset=<?php echo CHARSET; ?>">  
   6. <?php  
   7. if ( file_exists(DIR_WS_INCLUDES . 'header_tags.php') ) {  
   8.   require(DIR_WS_INCLUDES . 'header_tags.php');  
   9. } else {  
   10. ?>  
   11.   <title><?php echo TITLE ?></title>  
   12. <?php  
   13. }  
   14. ?>  
   15. <base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">  
   16. <link rel="stylesheet" type="text/css" href="<? echo TEMPLATE_STYLE;?>">  
   17. </head>  
   18. <body onload="preloadImages();" style="background-color: #8E8B8B;">  
   19. <!-- warnings //-->  
   20. <?php require(DIR_WS_INCLUDES . 'warnings.php'); ?>  
   21. <!-- warning_eof //-->  
   22.  
   23. <!-- header //-->  
   24. <?php require(DIR_WS_TEMPLATES . TEMPLATE_NAME .'/header.php'); ?>  
   25. <!-- header_eof //-->  
   26. <?php  
   27.     // INSERT YOUR WordPress Loop Code HERE:  
   28.     if (have_posts()) :  
   29.        while (have_posts()) :  
   30.           the_post();  
   31.           the_content();  
   32.        endwhile;  
   33.     endif;  
   34.     // END WordPress Loop Code  
   35. ?>  
   36. <!-- footer //-->  
   37. <?php require(DIR_WS_TEMPLATES . TEMPLATE_NAME .'/footer.php'); ?>  
   38. <!-- footer_eof //-->  
   39. </body>  
   40. </html> 

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html <?php echo HTML_PARAMS; ?>><head><meta http-equiv="Content-Type" content="text/html;charset=<?php echo CHARSET; ?>"><?phpif ( file_exists(DIR_WS_INCLUDES . 'header_tags.php') ) {  require(DIR_WS_INCLUDES . 'header_tags.php');} else {?>  <title><?php echo TITLE ?></title><?php}?><base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>"><link rel="stylesheet" type="text/css" href="<? echo TEMPLATE_STYLE;?>"></head><body onload="preloadImages();" style="background-color: #8E8B8B;"><!-- warnings //--><?php require(DIR_WS_INCLUDES . 'warnings.php'); ?><!-- warning_eof //--><!-- header //--><?php require(DIR_WS_TEMPLATES . TEMPLATE_NAME .'/header.php'); ?><!-- header_eof //--><?php// INSERT YOUR WordPress Loop Code HERE:if (have_posts()) :   while (have_posts()) :  the_post();  the_content();   endwhile;endif;// END WordPress Loop Code?><!-- footer //--><?php require(DIR_WS_TEMPLATES . TEMPLATE_NAME .'/footer.php'); ?><!-- footer_eof //--></body></html>

   A discussion of The WordPress Loop is beyond the scope of this tutorial; however, here are some excellent resources:

   • The WordPress Loop
   • The WordPressLoop in Action
4. Create the following file: oscommerce_root/includes/languages/your_language/blog.php (Note: This file must be named the same as the file you created in step 1). The contents of this file are as follows:
   1. <?php  
   2. /*
   3. Title: Embedding WordPress into OS Commerce
   4. Author: Michael Wender (www.michaelwender.com)
   5. Disclaimer: This Software is provided "AS IS" and without warranty of any kind. The user assumes all risks associated with its use and installation.
   7. $Id: blog.php,v 1.2 2004/03/05 00:36:42 ccwjr Exp $
   9. osCommerce, Open Source E-Commerce Solutions
   10. http://www.oscommerce.com
   11. Copyright (c) 2003 osCommerce
   13. Released under the GNU General Public License
   14. */ 
   15.  
   16. define('NAVBAR_TITLE', STORE_NAME. ' Blog');  
   17. define('HEADING_TITLE', 'Blog');  
   18. ?> 

   <?php/*Title: Embedding WordPress into OS CommerceAuthor: Michael Wender (www.michaelwender.com)Disclaimer: This Software is provided "AS IS" and without warranty of any kind. The user assumes all risks associated with its use and installation.$Id: blog.php,v 1.2 2004/03/05 00:36:42 ccwjr Exp $osCommerce, Open Source E-Commerce Solutionshttp://www.oscommerce.comCopyright (c) 2003 osCommerceReleased under the GNU General Public License*/define('NAVBAR_TITLE', STORE_NAME. ' Blog');define('HEADING_TITLE', 'Blog');?>

5. Okay, your WordPress blog should now be embedded into your OS Commerce install. Keep in mind that you will need to adjust your menus and links to point to this new page you have created. If your OS Commerce install is located in your site’s web root, and you have used the same filenames suggested in this tutorial, then the link to your blog will be: http://your-domain.com/blog.php.

Embedding WordPress into OS Commerce

It has been almost twelve months since I published my first tutorial on embedding WordPress into OS Commerce. At the time, I was relatively new to working with OSC, so I was unaware of the many different template modules available for the software. Through the comments on my post, I learned that the OSC install that I was working with used the Basic Template Structure (BTS). However, people inquired about adjusting my tutorial for use with the Simple Template System (STS). Still more persons asked questions pertaining to default installs of OSC MS2.2.

Keeping all of these comments in mind, this month I put together a default install of OSC MS2.2 with an integrated WordPress blog. What follows is a step-by-step tutorial (with the novice in mind) showing you how to do this. For the many people who are looking for an effective way to integrate OS Commerce and WordPress, I hope this tutorial proves to be a valuable and effective contribution to the OSC Community.

1. First, you will need to install OSC MS2.2 on your web server. This tutorial will assume that your OSC install is located in the default location for a typical OSC install: http://yourdomain.com/catalog/.
2. Next, install WordPress in the /catalog/ directory (i.e. http://yourdomain.com/catalog/wordpress/). Once you’ve installed WordPress, login to your WordPress admin and set Options > General > Blog address (URI) to “http://yourdomain.com/catalog/blog.php” (Note: If you would prefer to have your blog file named something other than blog.php, be sure to set this value accordingly and rename the file that you upload in step 4).
3. Now, just after the opening comments of the /catalog/includes/application_top.php file, add the following PHP code:

   // turn off WordPress themes and include the WordPress core:define('WP_USE_THEMES', false);require('./wordpress/wp-blog-header.php');

4. Next, download these two files (blog.php and stylesheet.blog.css) and place them in the root of your OSC install.

Additional Refinement: Displaying Blog Headlines on your Catalog HomepageFor added functionality, here are instructions for including a WordPress static page and blog headlines on the homepage of your OSC store:

1. Before making this edit, you’ll want to make a backup of your default OSC homepage by renaming the file /catalog/index.php to index.ORIGINAL.php
2. Now, download this new index.php file and upload it to your /catalog/ directory. This new index file will display your last 4 blog headlines in a column on the right of the page body. Plus, the value for TEXT_MAIN found in /catalog/includes/languages/english/index.php will display in the left column of the page body.
3. In addition, starting on line 292 of this new index file, I have a switch inserted that will check for the presence of Vito Tardia's Improved Include Page WordPress Plugin. If you install Vito’s plugin in WordPress, you can edit the iinclude_page() function call on line 294 to include the contents of any WordPress static page by simply editing the page ID in the function’s arguements.

END