Welcome to the first of many tutorials in templating Joomla & Wordpress. It was our intention to start offering tutorials on how to build custom templates in Joomla and Wordpress for a while now and we will be adding more and more tutorials over time. In this first tutorial we will be covering a common question, which is, how do you seamlessly integrate the navigation from Joomla in to Wordpress? There are many different methods to do this and one great solution is
CorePHPs Joomla extension to fully integrate Wordpress in to your website. If you have $69.99 to spare, this is probably the best option to use as there are no other extensions that come close to this integration.
Our method is free and just takes little time and patience. In this tutorial, our setup is as follows:
- Joomla is installed in the root of our website /public_html/ ( Joomla 1.5.25 )
- Wordpress is installed in a folder /blog/ ( Wordpress 3.3.1 )
- Each use their own database independent of the other ( You can install them on the same database with different prefixes )
The menu component we're using is
swMenuFree for Joomla 1.5 which will be used to build and style the navigation for the main website. Once you have downloaded the component, proceed to your admin area on your Joomla website and install it. After you have successfully installed swMenuFree, you will now have to configure and style your menu.
SETTING UP JOOMLA NAVIGATION
Go to
Components >
swMenuFree to configure.
Now you may configure the menu to your liking. We're using the following settings, yours may be slightly different depending on how you want the menu to act but one setting you should make sure is correct, is the Stylesheet. Make sure your stylesheet is set to load externally ( highlighted in red ). This setting will make the component write the style sheet to a directory and place a link in your template to it. It's a handy feature as otherwise, the component writes the CSS directly into your template which can get pretty messy.

External stylesheet location is written to:
/public_html/modules/mod_swmenufree/styles/menu.css You should go through each of the tabs and style the menu to match your Joomla template. When you're satisfied with your menu and everything is working in the front end how you'd like, it's time to add the menu in to your Wordpress template.
INTEGRATING JOOMLA MENUS WITH WORDPRESS
Depending on how your Wordpress template is setup, you will need to open up either header.php or index.php to place the swMenuFree HTML. Some people prefer to split their Wordpress templates up into many different PHP files and others prefer to have it all load in the index.php file.
First, you will need to copy the HTML code from the Joomla template. The easiest way to do this is to go to your website front end and view the page source. It's slightly different depending what browser you're using but in Firefox, you simply right click on the background somewhere and select "
View Page Source".
Scroll down the code until you find the comment that starts with:
<!--swMenuFree6.0 superfishmenu by http://www.swmenupro.com--> Copy everything starting with the above line and finish with the below line.
<!--End swMenuFree menu module--> > Click here to see what it should look like. Now that you have copied the swMenuFree HTML code, you need to go to your Wordpress template file ( index.php or header.php ) and paste in the code where your navigation is to appear. This takes care of the menu structure but now you need to include the CSS, Javascript and jQuery in your Wordpress template to make it work.
To do this, you will need to use the same method as before and view the page source on your Joomla website. Copy the following lines.
<link rel="stylesheet" href="http://www.YOURWEBSITE.co.uk/modules/mod_swmenufree/styles/menu.css" type="text/css" /> <script type="text/javascript" src="http://www.YOURWEBSITE.co.uk/modules/mod_swmenufree/jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="http://www.YOURWEBSITE.co.uk/modules/mod_swmenufree/hoverIntent.js"></script> <script type="text/javascript" src="http://www.YOURWEBSITE.co.uk/modules/mod_swmenufree/superfish.js"></script> <script type="text/javascript" src="http://www.YOURWEBSITE.co.uk/modules/mod_swmenufree/supersubs.js"></script> Paste this code in to your Wordpress template before the closing
</head> tag. Make sure you leave the absolute URLs in there and don't use relative links or they will not work.
Note the menu stylesheet, menu.css that you configured in the swMenuFree component to write to an external stylesheet earlier.
SUMMARY
That's all there is to it, you have successfully implemented your Joomla navigation menu in to your Wordpress template. If you update your Joomla menu with more pages you will need to update the HTML in your Wordpress template by copying the code again by viewing the page source. The CSS will update autoamtically because of the absolute link to the swMenuFree external stylesheet.