WordPress theme to Joomla template

In this tutorial you will learn how to transform a theme builded for WordPress in a Joomla! 1.5 template. Structured in 4 parts: 1. Setting the basics of the Joomla template, 2. Compile the WordPress template files, 3. Integrate the Jdoc statements and 4. Joomla skinning, this tutorial can be used also like reference for a casual Joomla! template integration from a css/xhtml ready made template.

reADactor

Try to be a mixer of inspiration, source of tutorials, tips and a reactor of your future design ideas, a place from where you can download freebies, vectors and web templates. Follow us on Twitter and Facebook

I am using for this tutorial a free WordPress theme found here from Premium Themes.

Download and unzip the file in your computer. I assume that you have already the Joomla! 1.5 installed on your local machine or on server. Now, browse in your Joomla installation after “template” folder.

joomla-structure1

PART 1: Setting the basics of the Joomla template

Here is what you need to create in this template folder:

- a new folder: bizfresh.

Inside to the new created bizfresh folder create:

- a new folder: css;
- a new folder: images;
- an index.php file;
- a templateDetails.xml file (if the WordPress pull the template info from the css file, Joomla use a special xml file for that);
- a png screenshot of bizfresh template (140px x 142px) named “template_thumbnail” what will be used by Joomla template manager;

Like you can guess, all this WordPress theme structure will get into a single index.php file.

bizfresh-template-wp-structure

The structure of the index.php will for the moment like any ordinary html file, with head and body tags. Open the index.php from Joomla template folder and place the following code before the <head> tag:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

In the <head> tag add this code

<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>

Now, open your xml file and paste this:

<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="1">
<name>BizFresh</name>
<creationDate>24/10/09</creationDate>
<author>Your Company Name</author>
<copyright>Copyright © 2009 yourwebsite.com. All Rights Reserved.</copyright>
<authorEmail>office@yourwebsite.com</authorEmail>
<authorUrl>http://www.yourwebsite.com</authorUrl>
<version>1.0</version>
<description>Joomla Template</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<css>
<filename>css/style.css</filename>
</css>
</mosinstall>

With this files done, you can go to your Joomla administration panel on templates extension: meniu / extensions / template manager / site

Select the BizFresh template like “default”. Click on “preview” to see “the big white”. I really cannot write those words without to put in playlist “Getting Away With It” . You just set the basics of the Joomla Template.

PART 2: Compile the WordPress template files

Instead to open each file of bizfresh WordPress template (in case you are not an old chinese man with writing on grain of rice skills), install the template on your WordPress installation and open the website. In your browser click on “view” tab menu and click on “source”. From there, select all the code between the body tags. Paste the code inside of your index.php body tags. Now, is time for cleaning. Delete all the headings and paragraphs tags along with any form code found. You should remain just with the div structure of the html page.

<div id="page">
<div id="headerbg">
<div id="header">
<div class="logo-text"> </div>
<div id="navi" class="clear">
</div>
<div id="search">
</div>
</div>
</div>
<div id="postbg" class="clear">
<div id="post-width">
<div id="aboutus">
</div>
<div id="mostpop-Post">
</div>
<div id="subscribe">
</div>
</div>
</div>
<div id="content-bg">
<div id="content-width">
<div id="ctop"> </div>
<div id="cCenter">
<div id="content">
<div class="xboxcontent">
</div>
</div>
<!--/content -->
<div id="sidebar1">
<div class="xboxcontent">
</div>
</div>
<!--/sidebar -->
<div id="sidebar2">
<div class="xboxcontent">
</div>
</div>
</div>
<!--/content-width -->
<div id="cbottom"> </div>
</div>
<!--/content-bg -->
</div>
</div>
<!--/page -->
<div id="footer-bg" class="clear">
<div id="footer">
<p class="alignleft">
<br />
</p>
<ul id="links">
</ul>
</div>
</div>

PART 3: Integrate the Jdoc statements

Jdoc statements are included in every Joomla template and indicate where the output from other parts of Joomla or its extensions should be positioned in the overall web page. The statement is a Joomla! template’s method of displaying content specific to the page being viewed. There are various statements, each returning a different part of a Joomla! page. The type attribute specifies the type of content to be rendered in place of the element. For example, the statement uses the type attribute head (type=”head”). (Note: Jdoc expressions require double quotes around attributes, and won’t work with single quotes). To read more about jdoc statements, click here.

We will use in this tutorial just 2 attributes: “component” and “modules“. But, before to make any changes to the index.php file, is important to know what module or component is need to be placed and where. In our case, the position of modules look something like that:

After placing the Jdoc expressions in right places, your index.php file will look like:

<div id="page">
<div id="headerbg">
<div id="header">
<div class="logo-text"><?php echo $this->title; ?> </div>
<div id="navi" class="clear">
<jdoc:include type="modules" name="menu" />
</div>
<div id="search">
<jdoc:include type="modules" name="top" />
</div>
</div>
</div>
<div id="postbg" class="clear">
<div id="post-width">
<div id="aboutus">
<jdoc:include type="modules" name="user1" style="xhtml"/>
</div>
<div id="mostpop-Post">
<jdoc:include type="modules" name="user2"  style="xhtml"/>
</div>
<div id="subscribe">
<jdoc:include type="modules" name="user3" style="xhtml"/>
</div>
</div>
</div>
<div id="content-bg">
<div id="content-width">
<div id="ctop"> </div>
<div id="cCenter">
<div id="content">
<div class="xboxcontent">
<jdoc:include type="component" />
</div>
</div>
<!--/content -->
<div id="sidebar1">
<div class="xboxcontent">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<!--/sidebar -->
<div id="sidebar2">
<div class="xboxcontent">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
</div>
<!--/content-width -->
<div id="cbottom"> </div>
</div>
<!--/content-bg -->
</div>
</div>
<!--/page -->
<div id="footer-bg" class="clear">
<div id="footer">
<p class="alignleft">
<jdoc:include type="modules" name="footer" />
<br />
</p>
<ul id="links">
<jdoc:include type="modules" name="bottom"  />
</ul>
</div>
</div>

Magic, isn’t it? Just few lines make the Joomla template to work like a WordPress one. Now, on preview you can see at this moment just a mess. That is because no style sheet is applied to the index.php file. To fix that, copy the style.css file from folder of BizFresh WordPress theme in the css folder of the Joomla BizFresh template, and insert this line before the end of head tag of Joomla index.php template file:

<link href="<?php echo $this->baseurl ?>/templates/bizfresh/css/style.css" rel="stylesheet" type="text/css"/>

Test your Joomla website. Probably you are wondering now why the css style isn’t working 100%, except the colors and positions of divs. You need to make a correction to the relative paths of the images used in css style file. Open the css in your editor and place “../” in front of each “image/” path. Test your website. You should see now all the graphics used for backgrounds, div etc.

PART 4: Joomla skinning

At this step you need to go again in your Joomla administrator panel and create the modules for “user 1,2, 3″, “copyright” (custom html modules), and set the position for mainmenu on “menu”, after that copy the module and set the position to “bottom”. Don’t forget the search module. Create it and place it in “top” position. Test the website. You are not quite happy right? The tab menu still not show instead you have a list type menu and the search form is away from how suppose to look.

In Joomla each menu have a default list setting. What menu list style use the WordPress template? Browse the page with FireFox and use an add-on to see the css code of tabs (Firebug). Seem that the ID for div and li is “nav”. Keep that in mind and go in Joomla administration panel to the menu module and set it like in following images:

Test the website. You have now tab image on menu but labels goes wrong. In the style.css file on line 301 to the “#nav” add this lines:

padding:12px 12px 6px 12px;
font:bold 14px Arial, Helvetica, sans-serif;
color: #fff!important;
text-transform:uppercase;

Test the website. Now the labels on menu are ok positioned but have wrong colors and text decoration. Look after line with number 314 in same style.css file, on “#nav .page_item a” and add “!important” to the “text-decoration”. You have now “text-decoration: none!important;”. Fix the span style with the following code:

#nav span {color:#fff;}

All look now ok, except there is a green underline for labels. Go to the begining of your css style sheet and looking after “a {”, on line 14. Change the text-decoration to “none”. Test the website. All are ok. Navigate. Now you see that the active tab from menu doesn’t have a blue image like in WordPress. To correct that, go to line number 336 from style.css file on “#nav li.current_page_item {”. Change this line with “#nav li#current {”. For a menu with more tabs, change the width of #navi to 620px. You are done now with the menu.

To have the “user” module looking like in WordPress version you need to add H3 css style to each one:

#aboutus h3 {
-x-system-font:none;
border: none;
color:#A8F179;
font-family:Arial,Helvetica,sans-serif;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0 0 18px;
padding:0;
}

#subscribe h3 {
-x-system-font:none;
border: none;
color:#A8F179;
font-family:Arial,Helvetica,sans-serif;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0 0 18px;
padding:0;
}

#mostpop-Post h3 {
-x-system-font:none;
border: none;
color:#A8F179;
font-family:Arial,Helvetica,sans-serif;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0 0 18px;
padding:0;
}

What about the search field? The skinning of this part involve some light alteration of the mod_search module. You’ll find in the tutorial source template the mod_search folder skinned like in the WordPress template version. You need to replace the old mod_search module from your Joomla folders with this provided.

Download this free Joomla template:

Credits for BizFresh remain to the Premium Wordpress Themes. Downloading this Joomla template you are agreed with Premium Wordpress Themes license terms found in the original WordPress theme pack.

Published on: October 25th in Joomla, Tutorials .
Post tags: code, css, download, free, html, integration, Joomla, php, skin, template, theme, tutorial, Wordpress

9 Comments

Marco barbosa
October 25, 2009

Awesome!

It’s great for learning and comparison.
Reply
Gerard
October 25, 2009

very nice! thanks readactor..
Reply
Bark
January 15, 2010

Tutorials like this is rare and great.

That would be great when you have some times to write : from joomla template to wordpress also.

Looking forward to it.

Cheers,
Reply
- reADactor
  January 15, 2010
  
  thanks.
  
  in fact, this tutorial can be used and for rolling back. from joomla to html to wordpress
  Reply
sguimaraes
February 15, 2010

hi, thanks for such a nice tutorial! I am trying to follow your step by step, however, I’ve decided to use another WP Template (Atahualpa) and I keep on getting the message “XML Parsing Error at 8:39. Error 4: not well-formed (invalid token)” from Joomla Template Manager.
I’ve runned trhough Forums, but could not find a solution for this problem, any ideas?
best,
Reply
- reADactor
  February 15, 2010
  
  Hi.
  
  1. Probably you have a character in the xml file that is not allowed by the XML parser. Try to remove that line from error, to see if is indeed the problem.
  
  2. if not, try to add a params.ini file in the template folder. (copy it from rhuk_milkyway template folder for instance) and add this line in yr xml file into <files> tag:
  
  <filename>params.ini</filename>
  
  regards
  Reply
  - sguimaraes
    February 17, 2010
    
    thanks reADactor! I did the params.ini and now the it becames writtable. I will try all over again, cause I would like to convert “Atahualpa” template to Joomla (so far, this is the design that pleases me most and I cannot find anything similar that is Joomla native). best!
    Reply
  - sguimaraes
    February 17, 2010
    
    Hi again,
    I’ve found the problem that originates this ‘parsing error’ message and perhaps you would like to correct it on your tutorial: in the end of PART I, line 8 of the instructions for xml file, there is a extra character “;” just before the last slash: “http://www.yourwebsite.com”.
    This was the origin of my problem. Also, your tip about including a params.ini file was great, it made possible to the template to become “writtable”. best, S.
    Reply
    - reADactor
      February 17, 2010
      
      Hi Sguimaraes,
      
      you have rite. i though first is a typo mistake, but is a weird thing of the wp plugin for code. there should be no “;”. thanks for note and reading.
      
      regards
      Reply