How to add Magento blocks, CSS and Javascript to an external site

You might have a Magento based website running online and wanted to extend parts of it (also known as blocks, which may include some css and js in the code) to an external site which may either be a blog, another CMS or any other PHP based web application. If you have been following my previous posts, you will know that by adding the Mage.php file of your Magento instance to your application, you can actually pull the needed HTML blocks at any time. The only problem is that most of the examples available online asks you to use the getChildHtml(‘your-block-here’) in which most the time frustrates you because of its complexity and limited resources of how you can actually use it.

There are other ways of doing it. Oddly enough, some are pretty simple and straight forward.
We will use a single HTML file which will serve as our ‘external’ site. The source code of our index.php is shown below:

Proceed with adding the if(class_exists('Mage')){...} which encloses our Magento scripts to prevent the site from breaking if in case the Mage object failed to be instantiated. Check the inline comments for more details.

That’s it. The codes above will generate the Magento session, the 3 blocks for CSS/JS (which uses the default skin of Magento and adds the Prototype JS file) and the HTML tags for the header and footer.

To use the blocks, insert the CSS/JS block right before the end tag of </HEAD>:

Thanks so much for this addition to your series. It definitely simplifies things for what I’m trying to do and I ALMOST have it working now.

When I plug in this code, it pulls in everything, except the CSS. Because it’s trying to pull in the default/default/css/styles.css, which doesn’t exist. Is there a way to point this to the current skin, instead of the default skin?

When I create a styles.css and try to pull in all my themed CSS files using @import in the default/css/styles.css, it doesn’t import them for some reason.

Hi Brady, yes it pulls the theme’s file currently configured for the store found in the admin. See theme creation details here.

When I plug in this code, it pulls in everything, except the CSS. Because it?s trying to pull in the default/default/css/styles.css, which doesn?t exist. Is there a way to point this to the current skin, instead of the default skin?

Either you just copied the whole theme files from the default provided or you haven’t set the store to use the custom theme you made in the admin page.

When I create a styles.css and try to pull in all my themed CSS files using @import in the default/css/styles.css, it doesn?t import them for some reason.

It is configured in your custom theme’s local.xml and/or page.xml file to call the action method “addCss”. Check this link and also this one.

Don’t forget to clear or disable Magento’s cache in the administration panel right after you make any changes to your files.

Hey – so thanks to your help I’ve got the basic working. Now most of my header is made up of echo $this->getChildHtml calls from w/ in the header. They’re not printing anything at the moment – what I can do to pull in these getChildHtml calls as well as the main header?

I’m following your tutorial above using it on a fresh local install of the latest Magento and WordPress. So far everything looks pretty smooth, except I can’t get the JavaScript to import in the Head. I use your

$head->addJs('prototype/prototype.js');

, similar to how the CSS is brought in. The CSS imports fine, but the JavaScript doesn’t show up anywhere.

// Is this file existing in your magento-root/js folder?
$head->addJs('lib/ccard.js');
// I'm sure this is a typo. It should be $head->addJs('prototype/validation.js');
$head->addJs('protype/validatio.js');

This was totally something I overlooked. When I look the source code of my dev site, I only saw one line of JS. But when I look at that JS it contains all the “addJs” files. I wasn’t aware that Magento combines the JS files.

Okay, I’m getting the hang od the getChildHtml replacement, but how do I nest blocks?

In your example above, it pulls in the header just fine, but leaves out the top links, navigation and search box. I’m able to pull in all those items separately, but how do I tell them to go into the header? I read on the forums about using ‘setParentBlock’ but that’s undefined when I try to access it from WordPress.

@Brady How did you pull the items separately? What code are you using?

@Richard I understand you are busy but I think it would be a good idea to add a skeleton theme to the plugin that has all the header info and footer in it. Or a stand alone theme, eighter way the user would have the option to activate the theme, right? This might not work for everyone because not every magento theme is the same. Or maybe it will, not sure.

@Richard I understand you are busy but I think it would be a good idea to add a skeleton theme to the plugin that has all the header info and footer in it. Or a stand alone theme, eighter way the user would have the option to activate the theme, right?

You already answered that. I’ll just quote what you said, “This might not work for everyone because not every magento theme is the same.”

If you have read every Magento-related post I have here, you will see that I’m not really discussing any theme-related modification here. What I post here is how to use Magento’s session to an external site. That external site could be a forum, a blogging tool or any PHP based web application that’s why there’s no need to create any “skeleton theme” like you mentioned. Magento session, in its simplest definition is actually a PHP object and its up to the reader how he will use and manipulate that object to achieve his task (Magento Documentation).

Please consider also that I’m in Manila, Philippines and we have somewhere between 8 to 12 hour time difference. I may not be able to reply immediately, but I always reply back to every comment/inquiry here.

I have a full content site that has been around 12 years. I have added a magento store in the last 9 months. I am trying to get products from Magento to add to my pages on the content site. For instance: on the page about decorating a boys bedroom I want to pull the bunk beds or boy’s room lighting. Will this do this for me or do you know something that will do this for me?

I would hope it would have the photo, name, price and perhaps a little bit of the description. Then a link to the product. If I could select up to 3 products based on keywords that would rock. Anyone out there?????

Unfortunately I get exactly the same behaviour in the TwentyTen template. I am guessing that wordpress must do something to the cookies, HTTP Request or Response Headers that stops magento from being able to match the users session up with their session in magento.

Thank you for the feedback. I’m actually creating a demo site accessible via github or other version control system so the readers will be able to see how to incorporate Magento using Mage Enabler in the Twenty Ten WordPress template.

Will the demo site have example tags in it so we can see how to integrate Magento into wordpress instead of just seeing a wordpress site with magento?

For example, it’s all installed and working but I have no idea how the registration system is suppose to work besides the cookie being present and adding categories/products to pages in wordpress is a mystery to me.

How deep are your future plans with this? Is it just a hobby/side-project or would you be interested in actually supplying this as a product? There is no shortage of ecommerce sites that would find this extremely valuable.

For anyone else with similar issues – I was connecting to my magento session from within my header.php file of my wordpress theme. It needs to happen in each of the template files e.g. index.php – above the call to get_header.

Hello Richard,
Thanks for the handy plugin…
I am trying to get it working in WP, I’m running a multi-website setup of Magento and the problem I’m having is specifying which website’s templates to pull from. The plugin is working, but it’s pulling template files from my default website (not the “default” template). Now I could make this particular site the default I guess, but if everything works as I hope it will I’d like to set up the plugin for a few of the sites. Is there a way to specify the website?

In the mage-enabler settings I did see this “Default store (auto-detect) Store configuration to be used whenever a store is not defined in your script.” and it did list my default website/store/store view, so I’m assuming by that message there is a way to specify, but clearly I’m missing something.

You may edit the file mage-enabler.php to indicate the specific store you want to use. Just locate the mage_enabler() function and within it, modify the code Mage::app(); by adding your store code in it like the script below:

That did the trick Richard, Thanks for your help, I really appreciate it.

One more question: My sites are currently running individual instances of WP, but eventually I want to merge them into the new version 3 utilizing it’s multisite capabilities. I’m not clear how the multisite works yet, but if plugins are shared by all sites I imagine I’ll run into problems as I won’t be able to specify multiple magento stores to it’s associated WP site. But if each site can have it’s own version of your plugin, then everything should be fine. Do you have any experience / insight with this?

Regarding your question, a simple if...else clause will do the trick by detecting the domain where the WP site is being accessed and applying the store code in Mage::app('<your-store-code-here>'); using the same procedure I posted earlier. Nevertheless, I’ll try to create a much cleaner approach with GUI on this one in the next revision of Mage Enabler.

trying to follow your examples, but my lack of understanding of Magento is for the moment only bringing headaches.
i love the idea of using Magento as a backend behind wordpress but so far you seem to be the only one going this direction instead of the other way around.

wondering if its possible to only pull a product block (if thats what its called) into a wordpress post or page like:

I’m wanting to do the same thing in which Randall described and have found no answers in the rest of the comments area. We would like to request some kind of direction to provide exactly what Randall has described but have no answers.

I visit this site very frequently, daily, weekly, and monthly for the sole purpose of one day having some kind of example of how to put catalogs/products/links inside wordpress.

Hi, I’m trying to make the footer shared between wordpress and Magento but I’m getting the following error

PHP Fatal error: Call to a member function toHTML() on a non-object in /srv/www/wooftown.demacmedia.com/public_html/wp-content/themes/twentyten/footer.php on line 19, referer: http://wooftown.demacmedia.com/?page_id=2

I am trying to include just the toplinks (login, wishlist, cart) at the top of every WordPress page and can’t seem to make them appear. As far as I can see they are called from header.phtml

getChildHtml(‘topLinks’) ?>

but they simply will not show up. I am seeing a search bar, contents of top.phtml, part of header.phtml (excluding topLinks), and the footer, which contains newsletter signup, but the links won’t show. Attempts to copy the contents of top.links.phtml into one of the 3 files that are rendering — header, top, and footer — doesn’t do the trick.

Using createBlock() and addLink() are giving me non-object Fatal Errors in public_html/wp-content/themes/traction/footer.php

I have this on line 1 of footer.php: ‘frontend’)); ?>

At the very end of footer I placed the code exactly what you have provided above. Adminhtml cookie is present.

Have any idea what it could possibly be?

Also, when I go to shop.domain.com/admin I can’t log in because when I click login I get this in my bar: index/key/9e62290021e5959c39983fd2adaf20f7/, so my question would be, how do I access the backend to add things as right now it’s fresh.

Hi Richard
Thx for nice post, but I am kinda hanged up actually if I try the code given you it doesn’t load the theme I am using on magento while it just loads default theme, actually I am looking to show magento’s header and footer in joomla template but for the time I am just trying to get it done in custom php file the code of the file is:

Yes, that brings in the base template(including the html header stuff that I dont want), without any of the bits and pieces. I supposed you have to go through and load each piece, and put it in the proper spot, but I was hoping there was an easier way.

hii richard..i made a theme including html, js and css file.but now to custmise my theme with magento…i dont know how to and where to add my html my file and how to call my js and css from my html page in magento………
please help me….i am stuck here..
🙁