Designrfix
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.
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.
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:
[code='php']
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
[/code]
In the <head> tag add this code
[code='php']
[/code]
Now, open your xml file and paste this:
[code='xml']
[/code]
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.
[code='plain']
[/code]
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:
[code='php']
[/code]
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:
[code='php']
[/code]
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:
[code='css']
padding:12px 12px 6px 12px;
font:bold 14px Arial, Helvetica, sans-serif;
color: #fff!important;
text-transform:uppercase;
[/code]
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:
[code='css']
#nav span {color:#fff;}
[/code]
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:
[code='css']
#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;
}
[/code]
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:
[download id="4"]
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.
Tweets that mention WordPress theme to Joomla template | reADactor -- Topsy.com
Awesome!
It’s great for learning and comparison.
very nice! thanks readactor..
WordPress theme to Joomla template | reADactor
uberVU - social comments
ajf7688 Blog - WordPress theme to Joomla template | reADactor
WordPress theme to Joomla template | reADactor | www.kotihost.com
CSS Brigit | WordPress theme to Joomla template
Convertir un tema de Wordpress en una plantilla para Joomla | VisualXtudio
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,
thanks.
in fact, this tutorial can be used and for rolling back. from joomla to html to wordpress
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,
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
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!
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.
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
hhh Thank you very much Great post…thanks for share this.
This is a great tutorial! It will definitely come in useful.
Thank you very much Great post…thanks for share this.
thank you for the information,
This was helped,
spirit! ! ! ! !
I will try to follow the instructions.
Hello!I am checking your posts for some days now. I have to say that it is very interesting . It is already added in my favourite list and i will make sure that i will follow it when possible . Thanks for the interesting inputs . Furthermore, i really like your template and the way you have structured the contents of your site . Can i ask the name of your template ? Thanks
very interesting and educative. best regards
Thanks for this tutorial. It’s a really good start for me moving a website across to Joomla and as soon as I’ve got everything organised, I’ll be doing just that.
I have been doing quite a bit of research on this topic and you’re site has provided the best step by step guidance so far.
thanks for taking the time to put this together in this level of detail that makes it actionable for others.
thanks for share..i will try to follow the instructions..
I have failed.. The template i use requires OptionTree WP Plugin in order to work propery.. It is hard to convert it for joomla, so im offering a good paymen to the person who want to convert it for me.. Contact me at: furyyyyyyyy@mail.bg
It guide me so much. I will follow your instruction as soon as possible. Thank you for sharing.