integrating magento and word press

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Integrating WordPress and Magento

By Eric Landmann Sr. Project Manager / Lead Developer

Earthling Interactive   Madison, WI USA

©2014 Eric Landmann, Earthling Interactive, Madison, WI

About Earthling

Total Staff: 25+ Avg Experience: 7.5 years # Staff > 8 years Experience: 10+ # Staff > 5 years with Earthling: 8 Well-Rounded

Developers/Computer Scientists, DBAs, UI Designers, Business Analysts, Statistics

Current Clients From Small to Enterprise, local to international Have built over 30 Magento sites (EE & CE)

©2014 Eric Landmann, Earthling Interactive, Madison, WI

How to build an integrated site?

©2014 Eric Landmann, Earthling Interactive, Madison, WI

– Is there an existing Magento instance? – Is there an existing WordPress instance? – What are the design requirements and desired templates? – How to handle forms and search? – How are menus built? – How upgradeable will it be? – How maintainable? – How are Magento’s CMS pages handled? – How many blog/content pages/posts are there? – What is the frequency of content modification? – Is there any SEO value to existing structure?

Architecture Considerations

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Architecture Considerations

– How should the URL be structured (subdomain/filepath/none)? Subdomain blog.mysite.com / store.mysite.com Filepath www.mysite.com / www.mysite.com/store Or remove “blog” or “wp” from the URL www.mysite.com

– What are the available modules to integrate    Magento and WordPress?

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Architecture Considerations

What is the site focus? Need to determine if the site is

Wordpress-centric or Magento-centric

  Wordpress-Centric    A complex marketing site that happens to have products

  Magento-Centric      An ecommerce site that has some supporting content

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Architecture Considerations

WordPress-Centric   Complex, blog-like or marketing copy page designs   Multiple WordPress plugins with unique functionality   Some product integration   Uses WordPress theme(s)

Approach: Emphasis is on using WordPress templates with plugins that pull in Magento product data

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Architecture Considerations

Magento-Centric   Ecommerce style page design   Few WordPress plugins, but common ones (contact form,

Facebook, gallery)   Lots of Magento extensions and functionality   Relatively less blog/marketing pages to handle   Use Magento themes

Approach: Use Magento themes with extensions that integrate WordPress content

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Architecture Considerations

And now for something completely different…

  Homebrew Use some other exotic method (custom)

  Or just do the blog inside of Magento AheadWorks Blog Professional MagePleasure Blog Pro

©2014 Eric Landmann, Earthling Interactive, Madison, WI

WordPress-Centric Approach

Most pages are WordPress pages with Magento product information pulled into WordPress WordPress Plugins to Pull in Magento Data

  Kemp Magento WordPress Integration   Wordgento (no longer maintained)   Feraro Mage Enabler (no longer maintained)

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Magento-Centric Approach

WordPress Integration Extensions

Fishpig – WordPress Integration

  Sonassi – Wordpress Integration

plus a few others … see the references

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Feature Matrix Feature Sonassi Fishpig Uses your Magento theme for your WP blog X X 1-Click login to your WordPress Admin from your Magento Admin X X

Associate WordPress posts with Magento products

manual using shortcode

automatic through Magento admin

Use WordPress plug-ins Some Some Magento search also searches WordPress content X 1

Display Magento's blocks in WordPress posts X Use WordPress menus in Magento X Supports custom templates for posts/pages X WordPress shortcodes can be used in Magento X X Multi-language blog supported X Both Magento admin and WordPress admin function independently X X

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Feature Matrix Feature Sonassi Fishpig Magento customers have their profiles directly linked to WordPress X X

Magento layout block calls can be used within WordPress posts and pages (e.g. {{block type=""}}

X

WordPress Upgradeability Manual upgrade, some core

files modified

No core mods, automatic WordPress

upgrade works WordPress plugins supported "almost any" Some free,

some paid Cost

£150 Free + puchased

modules 1 With additional module

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Features Matrix Fishpig Add-Ons and Compatibility

Root (£49.99) Custom Post Types (£49.99) Advanced Custom Fields (£49.99) Customer Synchronization (£49.99) Integrated Search (£49.99) Facebook (£49.99) Contact Form 7 (£49.99) WordPress SEO AddThis YARPP Google XML Sitemaps Lightbox Gallery

Our Example Site

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Design Requirements

  Use one template for both Magento and WordPress   Template can be simple (not complicated content)   Responsive design   Few WordPress plugins   Not much content to be managed   Menu structure to be hand-modified   Use Magento template’s home page   Need complicated forms integrated with Magento   Wordpress posts should show on category page   Associated products should show on content pages   URL structure should not display “blog” or “store”   Wanted commercial support (if needed)

Conclusion: Use Magento-Centric Approach with Fishpig Extension

Typical Category Page

Typical Product Page

Magento category page showing associated WordPress posts

WordPress post page showing products in an associated Magento category

Example forms page created with MageMe Webforms for Magento

Sonassi’s method of calling a Magento category listing

Sonassi configurations

WordPress post showing categories that will be used to relate to Magento content

FighPig-provided “Associated Blog Posts” tab is where you can connect WordPress posts to a Magento category

FighPig-provided “Associated Blog Categories” tab is where you can relate a Magento category to a WordPress category

Defining a top nav in WordPress (stock functionality). Requirements are that the top nav be fully controllable by the admin so we are building it in WordPress

Fishpig configuration settings

Fishpig configuration settings

Fishpig configuration settings

This is where we append the WordPress menu to Magento’s top nav. If Magento’s category navigation display is set to no, then no categories will display and this menu takes its place

©2014 Eric Landmann, Earthling Interactive, Madison, WI

References

Example Client Site – http://www.clgenetics.com/

Fishpig Extension – http://fishpig.co.uk/magento/wordpress-integration/

Sonassi Wordpress Integration – https://www.sonassi.com/knowledge-base/magento-kb/magento-wordpress-deluxe-extension/

Mage WordPress Integrated Search – https://www.smackcoders.com/store/magento-wordpress-integrated-search-extension.html

Kemp Magento WordPress Integration – https://bitbucket.org/jamesckemp/mwi-magento-wordpress-integration/src

Wordgento – https://wordpress.org/plugins/tristar-wordgento/

MageMe Web Forms Pro – http://mageme.com/

Gravity Forms – http://www.gravityforms.com/

AheadWorks Blog Professional – http://ecommerce.aheadworks.com/magento-extensions/blog-professional-and-enterprise-editions.html

StackExchange Discussion – http://bit.ly/1ALAShD

©2014 Eric Landmann, Earthling Interactive, Madison, WI

Questions?

Eric Landmann landmann@earthlinginteractive.com

Twitter: iteratews    LinkedIn: http://www.linkedin.com/in/elandmann