Blog

Easy WordPress and Magento Integration

Easy WordPress and Magento Integration

WordPress is among the best web software for blogging and Magento is among is among the best web software for eCommerce. So naturally a marriage between WordPress and Magento is one made in the heavens. Learn how to easily import WordPress content into a Magento page.

Once you have Magento and WordPress installed on your sever, it's time to get down to action. We installed the shop in the root directory of the website (yourwebsite.com), and the blog in a sub-directory called blog (yourwebsite.com/blog).

There are a number of approaches out there to integrate Magento and WordPress. Some methods rely on sever rewrite rules. The problem with this method is that it doesn't let you mix content from WordPress and Magento on the same page. Other methods rely on contributed modules. The problem with contributed modules is that they can break and become dysfunctional when either WordPress or Magento are updated. So, in search of the right solution, I wound up creating my own hybrid solution. My solution uses PHP to pull in WordPress content and display it on Magento pages. Then you simply need to match your WordPress theme with your Magento theme.

Part 1 — Matching your WordPress and Magento themes

Let's assume you start with a Magento theme and want to convert it to a WordPress theme. WordPress themes are stored at /wp-content/themes/[your-theme] relative to your blog's root path.

First you need to pick a theme to adapt. I started with the default WordPress theme in order to create my new custom theme that would match my Magento theme. Using the default theme, you only need to edit three files in order to match your WordPress theme to your Magento theme: header.php, footer.php, and you're theme's stylesheet (in my case style.css).

In the header.php file, you'll want to include:

  • Your HTML doc info and opening <HTML> tags
  • Your document <head> tags and all of the good stuff that goes in between
  • Your opening <body> tag
  • Your header code — your site's logo, navigation, etc.
  • Opening divs for your main content area (but don't close these divs — you'll close these in footer.php)

And then in the footer.php file, you'll want to include:

  • Closing div tags corresponding to divs you opened in header.php for your main content area
  • Your footer code (copyrights, links, etc.)
  • Your closing </body> tag
  • Your closing </html> tag

Finally, in your styles.css CSS stylesheet, you'll want to include whatever styles you need to make your blog look like your Magento shop.

Tip: There's no need to duplicate all of the styles in your Magento stylesheet in your blog's stylesheet. Instead, you can import the styles in your Magento theme's stylesheets. To do this, open your WordPress theme's stylesheet styles.css
and place this somewhere in the document:

/* imports Magento theme's styles */
@import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/menu.css);
@import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/boxes.css);
@import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/reset.css);
@import url(/[path-to-magento]/skin/frontend/[your-theme]/default/css/clears.css);

By importing the CSS instead of duplicating it, you'll reduce your file size and speed up your page load. Also, when you make changes to your theme, you don't need to make changes in two places.

Because the CSS @import command takes precedence over all other CSS rules, you don't have to worry about it conflicting with the blog's default style code. You might want to add or change a few styles specific to the blog in the blog's stylesheet below the import commands. If you started from a really complex WordPress theme, you'll probably want to remove all of the extraneous style rules to reduce the document size.

Now you've successfully matched your WordPress and Magento themes. Onto part 2...

Part 2 — How to display WordPress content on a Magento page

You have your blog and you have your shop, and they look the same. This is great, but what if you want to display content from WordPress within Magento (like on your store's homepage)?

There are a number of ways to do this. You could create RSS feeds with your content and then display then on another site with MagpieRSS. This method works, but we wanted something a little more elegant and something that didn't rely on RSS. Our method uses very simple theming and PHP to display WordPress content on a Magento page. Here we go...

Step 1 — Create a bare-bones WordPress theme file that skips all of the styles, header, and footer and just displays content.

Create a new file, we'll call it share.php, in your WordPress theme directory:

<?php
/*
Template Name: Share
*/
?>
<?php query_posts('limit=3'); ?>
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>

			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

				<div class="entry">
					<?php the_content('Read the rest of this entry »'); ?>
				</div>

				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
			</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?>

	<?php endif; ?>

This template code will display the three most recent posts. You can change the number of posts you want to display by changing the numerical value in line 6 (highlighted above).

Step 2 — Create a page in WordPress that uses your new "Share" template.

Create a new page in WordPress. Under the "Attributes" block visible while editing the page, you'll want to set your page to use the "Share" template you created. You can title it whatever you want, but you'll want to change the permalink to something rememberable: http://www.your-site.com/blog/share/

After you've done all those, navigate to the permalink of the page in your browser to test it out and make sure it's using the bare-bones template you created. You should see the text of the most recent posts on an otherwise blank and boring page. If you see this, you're done working with WordPress... now for Magento's bit.

Step 3 — Create a template file in Magento to embed your newly created WordPress page into a Magento page.

This step is necessary because Magento does not allow embedded PHP code to be executed from CMS pages. In order to trick Magento into loading the PHP, you need to create a template file that will execute the PHP and deliver it to a CMS page via a block.

So here's how you create a new block template:

  1. Navigate to /[path-to-mageneto]/app/design/frontend/[your-theme]/default/template/
  2. Create a new directory within the template directory called blog
  3. Within your new directory blog, create a file called blog.phtml
  4. In your blog.phtml file, place the following code:
<?php $source = file_get_contents("http://www.your-website.com/blog/share"); print $source; ?>

Step 4 — Place the block based on your new template on the Magento CMS page you want the blog content to display on

{{block type="core/template" template="blog/blog.phtml"}}

You're done! You've now embedded your most recent WordPress posts in a Magento page. The links to the posts and comments will route visitors to your blog (which now looks identical to your Magento shop). You may also want to put Magento store items on your WordPress blog. Check out this method for displaying your Magento store items as a block in WordPress using Magento's product RSS feeds.

DiggThis

Comments

Brady's picture

Thanks for the article!

I'm a bit confused about the Theming of the Header and Footer. Could you provide examples of each?

Are we suppose to duplicate the default header and footer and try to swap parts out with Magento's header and footer? I can't seem to get past this step.

Thank you!

Isaac's picture

In the article, I'm just showing which files need to be edited to affect header and footer output. By editing the header file, you can add the first half of your site's structure and design. You need to leave some divs open (which will be closed by the footer.php file) that will hold the main content on your website.

If you want your Wordpress headers and footers to match your Magento headers and footers, you just need to recreate your Magento page layout through the header.php and footer.php files.

Fishpig's picture

We’ve created a new, free Magento extension that allows you to easily integrate Magento and WordPress without modifying any core files. The module will let WordPress use your Magento theme and easily associate blog posts with products (and much more!).

We’re currently offering free support while the module launches so feel free to send us any questions.

http://fishpig.co.uk/wordpress-magento-integration/

Anonymous's picture

Magento is becoming one of the best and popular open source e-commerce software and these templates indicates that Magento will be the first choice of developers.
Thanks for sharing such a nice article.

audunms's picture

Fantastic!

Insanity's picture

Isaac - thanks so much for this article. This was EXACTLY the solution I was looking for - pulling WP into a CMS page via PHP. Keep up the good work.

melbourne's picture

I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.

Yelmzfrida's picture

You have a great blog here! I love the content!

Jeremy's picture

I've used your share.php, however then i access that url all posts are displayed even though line 6 limit=3 is set? Any thoughts?

Jeremy's picture

ooops, nevermind figured it out. line six should have showposts=3 not limit=3

Isaac's picture

Hey Jeremy, sorry for the slow response. Limit = 3 works for the version of WordPress I developed this code for. I think this method may have changed since the release of WordPress 3 or 3.1, causing the change. Thanks for pointing this out.

Mark (Fur Industries)'s picture

AWESOME!! I have been searching for this exact same thing for a year and now I have stumbled across it by accident while I was searching for something else. I haven't implemented it yet, but I am sure that it will work. Thanks!!

Dan's picture

Hello, great post ! Actually what would be the recommended approach to have Magento adopt a Wordpress theme? In other words integrating the two but starting from a wordpress theme instead of a magento theme?

Thanks!

Isaac's picture

Hey Dan,

Unfortunately Magento themes are quite a bit more complex than WordPress themes. That being said, it shouldn't be too hard to get your Magento theme to match your wordpress theme.

First you're going to want to make sure the structure of your page HTML templates in Magento match. You can find all of the HTML templates here:
/app/design/frontend/[your-theme]/default/template/page

You'll want to make sure your 1column.phtml, 2columns-left.phtml, etc. have the same structural elements as your WordPress template. You'll also want to be sure to change the files in: /app/design/frontend/[your-theme]/default/template/page/html as they include components of the page layout like the header, footer, etc.

Then you can either import the CSS from your WordPress theme into your Magento theme and then add Magento-specific code in a separate CSS file, or you can copy the CSS files and build upon them. The advantage to the first method is that you only have to make changes to the theme on one place to change it for both sites. The disadvantage is that your theme relies on files from another area of your site.

Sterling's picture

Thanks for the helpful instructions. I often hear from people with wordpress sites that would like to add magento shopping cart to their existing site. Would be much easier to have magento fit into their existing wordpress theme for these cases.

Was thinking of maybe just including header/footer from Wordpress so cart is wrapped in WP theme, but the body would be magento. But I do like your suggestion of having matching templates in magento for each template in WP.

Isaac's picture

Magento is a beast of an application compared to WordPress and has far more complex templates. It's not to hard to make both your WordPress site and your Magento site look similar, but you basically have to take an existing Magento theme and retrofit it to match your WordPress theme visually.

Anne's picture

I've installed Wordpress in /blog (magento is in root), but I can't seem to access the WP admin
When going to http://vrouwtje-theelepel.nl/blog I get the Wordpress page (without css) and when going to Login, this is redirected to http://vrouwtje-theelepel.nl/wp-login.php which results in a 404 error.

How to fix this?

James's picture

I imagine you'll need to visit - http://vrouwtje-theelepel.nl/blog/wp-admin to get to the Wordpress admin area?

James's picture

Hi Isaac, I just wanted to let you know of a plugin I ahve just released - Wordgento (http://www.tristarwebdesign.co.uk/wordpress-plugins/wordgento/).

Wordgento allows you to seamlessly integrate Magento Blocks into your Wordpress theme. This includes side cart, top nav, top links, wishlist, etc.

Give it a go and let me know your thoughts! Thanks.

Isaac's picture

Hey James,

In response to your first post -- yes, the WordPress and Magento admin are still totally separate using my method.

Thanks for posting the the module -- I'll definitely check it out.

Matt's picture

Excellent write up, thank you for information. Just getting into the wordpress gig myself and this looks even better!

Binaya Aryal's picture

One of the better tutorials on wordpress magento integration. I was willing to add shopping cart option with magento in my wordpress blog, will try this tutorial and hope it helps.

Wall Mounted Desk's picture

Great post Isaac! I am really an avid user of WordPress for most of the sites I created. I am now planning for an Ecommerce site which will be implemented through WordPress, I supposed, and I really don't have an idea what software I could use that would be surely a best fit for WordPress and good for an Ecommerce site. As I've read, you used Magento. Is it an open source software or for free? And what are the other benefits I could get from using it? Let me know about your thoughts.

Cody Felton
Webmaster of Wall Mounted Desk

Isaac's picture

Hi Cody,

Yes, the community edition of Magento is open-source and available for free. Varien, the company that distributes Magento, has in the last year or two introduced Pro and Enterprise editions that have additional features, warranties, etc. I would highly recommend Magento. The only downside is that because Magento has so many features, it is very complex, and therefore a little difficult to learn as a developer at first. Best of luck!

Amanda's picture

Great post!

Wasn't sure if you were aware, but this was stolen and put on another guy's website word for word.

http://timpletcher.com/easy-wordpress-magento-integration

Isaac's picture

Imitation is the most sincere form of flattery, isn't it? Thanks for the heads up.

magepress's picture

Firstly thanks for the post.

I am trying to place my wordpress main menu in magento. The tricky bit is that the website (and magento) have 2 languages so when the user is on the shop on a certain language and clicks on the menu, they should be sent to the respective language in wordpress.

Do you think your post might help somehow after a trick or two?

Isaac's picture

Hi, Sorry for the slow response. You may have figured some solution out by now, but here's one possible solution:

Set a cookie in the visitors browser based on their language selection and/or geolocation that stores the language preference. You can then refer back to this cookie and use PHP to pull the appropriate locale from Magento or WordPress.

jj's picture

Great post, thanks for adding it! I was able to replace some custom classes I wrote with this ingenious solution to implement the menu system from WP to Magento. Only one language, so mine was simple.

Thanks!

Coen's picture

Dear Isaac,

Nice post. I have the posts in my Magento shop. I only want them to be displayed on the homepage. This also works, but now I want to cut the text of after 50 words, so people can only see the first part of the post. Do you know if there is a code to do so?

So let say and than ..... (to read more)

Thanks already,

Kind regards,

Coen

Isaac's picture

Hey Coen,

This is relatively easy to do in PHP. Here are two simple functions posted on StacksOverflow that accomplish what you want to do:

http://stackoverflow.com/questions/965235/how-can-i-truncate-a-string-in...

http://stackoverflow.com/questions/1270644/php-truncate-text-at-word-bou...

You'll want to edit the WordPress template that's included on the Magento page to utilize the truncate code.

Good luck!

-Isaac

Fulvio's picture

Hi there!

I'm a Wordpress developer. I have been asked to develop a ecommerce website. I'm new to Magento and compared to Wordpress I can see theme development for Magento is far more complicated. We would like to use Wordpress as CMS but let Mangento handle the store. Basically I'm trying to understand whether is possible to embed Magento into Wordpress, not the way around. I would love if it were possible to load the shop in a Wordpress template page for example, and do the same for login panels, user panels, etc. So use Wordpress backend for CMS management and frontend for user experience, while using Magento backend for managing the store, just doing some minor CSS to adapt the shop to fit the Wordpress theme layout. Do you think this is achievable or structurally advisable?

Thanks for the advices!

ps - I found this: http://mysillypointofview.richardferaro.com/2010/05/11/mage-enabler/

Isaac's picture

Hi Fulvio,

Sorry for the slow response, this last month has been very busy. The most feasible way to do this is to include Magento's product listing output (i.e. grid or list) in your WordPress template. This output would then link to individual product pages on the Magento store section of the site. This could probably be accomplished fairly easily with some include php installments calling the appropriate Magento php/phtml code.

Best of luck with this.

-Isaac

Fulvio's picture

Hi Isaac,

no worries, I've been fairly busy as well :)
unfortunately did not make any progress on the Magento/wordpress integration myself because that has been postponed a bit, although I have to analyze possibilities now

after some research I think what you suggest if possible - but I still haven't figured out how to handle user registrations and logins

the problem is that there are parts of wordpress that would require a login (ticket system, forum...) and magento requires a login itself

thanks!

Isaac's picture

Ah, integrating logins would be a big pain. I haven't evaluated this at all, but you may check out this plugin for Magento:

http://www.magentocommerce.com/magento-connect/fishpig/extension/3958/fi...

Magento Development's picture

This is something worth to read. thanks for sharing the information. it is very useful and helpful. thanks

James's picture

Hi Fulvio, Isaac,

I have recently released a Magento extension that allows you to share logins and users between Magento and WordPress, Single Sign-On for Magento and Wordpress.

This can go hand in hand with my Magento WordPress Integration plugin for Wordpress, for seamless integration between the two platforms!

Feel free to get in touch for any assistance.

Alli Reviews's picture

I will be sharing this info on my facebook page with my friend and relatives. Thanks.

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
The following question helps us prevent spam submissions.