WP theme conversion

[sonichouse]

I was looking at porting a theme from wordpress to s9y.

It looks like the WP theme is split across several php pages and a style.css.

My initial thought was to try and build the .tpl files from scratch - after a bit of investigation I am thinking of giving up.

Is there a barebones example of all the template files I need ?, I tried copying the default theme, but this is built using tables .

Should I just copy bulletproof and hack the new based on that ?

[yellowled]

It looks like the WP theme is split across several php pages and a style.css.

Usually, that's the way it is. You may find WP theme which also include javascript, but that's about it as far as I have investigated WP themes.

Is there a barebones example of all the template files I need ?, I tried copying the default theme, but this is built using tables

So? You can usually strip most of the HTML (except for the head, of course) from the .tpl files in /templates/default/. All you really need are the smarty command which emit the "content" used in that code.

Let's get you started with the index.tpl. This is the HTML code in there:

Code: Select all

<div id="serendipity_banner">
    <h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
    <h2><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></h2>
</div>

<table id="mainpane">
    <tr>
{if $leftSidebarElements > 0}
        <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
        <td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
        <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
{/if}
    </tr>
</table>

I usually strip this down to:

Code: Select all

<a href="{$serendipityBaseURL}">{$blogTitle}</a>
{$blogDescription}
{$CONTENT}
{if $leftSidebarElements > 0}{serendipity_printSidebar side="left"}{/if}
{if $leftSidebarElements > 0}{serendipity_printSidebar side="right"}{/if}

Now all that's left to do is extract the HTML structure from the WP theme (you'll usually find it spread across header.php, index.php, and footer.php) and wrap it around this.

You then copy the images/ folder from the WP theme to YOURFOLDER/img/, copy the style.css, and change the paths for the images (usually from images/ to {TEMPLATE_PATH}img/). Then, the template should already resemble the WP theme. Time to start the fine tuning (which is usually the painful part of it).

YL

[sonichouse]

Thanks for that, I was kind of going that way.

I suppose the shortcut would be post a link to the theme and hope that the template fairies made one overnight

[yellowled]

I suppose the shortcut would be post a link to the theme and hope that the template fairies made one overnight

I assure you, the template fairies would really appreciate some help (Plus, they already might be busy with some other port.)

Don't get me wrong, porting WP themes for s9y is a pain in the ass. Depending on the theme it can be close to impossible to port a theme 1:1, and even if it is actually possible, it's most likely going to require sophisticated smarty stuff. It is most definitely not the best way to get started in doing s9y templates in my humble opinion.

But every once in a while, you'll be cursing your way through one of these ports, coming to the conclusion that WP actually is the pain in the ass here, not it's templates. And maybe you'll even get to the point where you find that your port is actually better in terms of usability than the original. That's when the fun part kicks in. (I had that experience with Mimbo.)

So keep going, and feel free to ask questions in here.

YL

[yellowled]

I forgot: One thing is really important when doing WP ports.

Always make sure you check the original's license first! If you can't find a license, try contacting the original's author via email about it, asking his permission to port it to s9y.

Some of these themes have license restrictions, some are even premium templates, so you might save yourself a lot of work by checking this out first.

In some rare cases, you might even find an original's author who's actually willing to support you doing the port. Again, that's the fun part of it all.

YL

[sonichouse]

I forgot: One thing is really important when doing WP ports.

Always make sure you check the original's license first! If you can't find a license, try contacting the original's author via email about it, asking his permission to port it to s9y.

Some of these themes have license restrictions, some are even premium templates, so you might save yourself a lot of work by checking this out first.
YL

Good thinking, I will check with him. The readme says :

Code: Select all

D I S C L A I M E R

This WordPress Theme is provided as is. The Theme Author, Joe Fischler, offers no warranty, explicit or implied, redarding all files contained, accuracy of information, or any rights or licenses under this agreement. The Author does not represent or warrant that this theme will meet your requirements or that its use will be uninterrupted or error free. The Author shall not be liable to any person or entity for any damages of any kind, lost profits or other damages, costs or losses resulting out of the use of this theme.

Please keep the credit and the backlink to the theme page in the footer. 

LICENSE:

    Aerodrome is a WordPress theme
    Copyright (C) 2008  TheBuckmaker.com

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.

so I reckon it is fair game.

In some rare cases, you might even find an original's author who's actually willing to support you doing the port. Again, that's the fun part of it all.

Well I shall see how much fun I do have

BTW the theme is Aerodrome from TheBuckmaker.com

[judebert]

I didn't feel like completely redesigning a template, so I made a BulletProof colorset instead. BP supports many different layouts, including the same blog-sidebar-sidebar configuration you're attempting.

It might be easier to make this a colorset. Or to pull the B-S-S pieces out of BulletProof and use it as a framework for your port.

[sonichouse]

I didn't feel like completely redesigning a template, so I made a BulletProof colorset instead. BP supports many different layouts, including the same blog-sidebar-sidebar configuration you're attempting.

It might be easier to make this a colorset. Or to pull the B-S-S pieces out of BulletProof and use it as a framework for your port.

I did think about that route, but couldn't decide whether it was easier to create a new port rather than a colorset.

The only thing stopping me going down the BP route is that the sidebars seem broken on 1.4 ATM.

Plus, I wanted to use this as a learning exercise, and I reckoned a bit of pain might help it sink in.

[yellowled]

The only thing stopping me going down the BP route is that the sidebars seem broken on 1.4 ATM.

The sidebars in BP? I don't think so, but please elaborate!

YL

[sonichouse]

The sidebars in BP? I don't think so, but please elaborate!

Sorry for the fire drill, I thought I had selected 3 columns, and they were not showing - turns out I had selected a different layout .

[sonichouse]

Hi YL,

remember when you said

So keep going, and feel free to ask questions in here.

I have started on this for fun really, and have my first two questions ...

1.) I need to return the number of comments, instead I get "3 comments". Can I parse this in smarty ?

2.) I am enumerating some pagenavs into a UL that is floated right. Entries are in reverse order . I have tried |@reverse but my php errors saying not supported. I currently have

Code: Select all

	<div id="headmenu">
		<ul id="miniMenu">
            {foreach from=$navlinks item="navlink" name=navbar}
                <li class="page_item"><a href="{$navlink.href}" title="{$navlink.title}">{$navlink.title}</a></li>
            {/foreach}
		</ul>
    </div><!-- end #headmenu -->

Update
Solved 1.) by removing {$entry.label_comments}

[yellowled]

2.) I am enumerating some pagenavs into a UL that is floated right. Entries are in reverse order . I have tried |@reverse but my php errors saying not supported. I currently have

Code: Select all

	<div id="headmenu">
		<ul id="miniMenu">
            {foreach from=$navlinks item="navlink" name=navbar}
                <li class="page_item"><a href="{$navlink.href}" title="{$navlink.title}">{$navlink.title}</a></li>
            {/foreach}
		</ul>
    </div><!-- end #headmenu -->

Hm, I ran into that in a template the other day, too. Let's see how I solved it, maybe you can adopt the code. Hint: There are cases where you ... well, not have to edit the original's css, but where it is easier or less painful to do so. I also prefer it when I can simply take the originals css and add some extra style for s9y-specific stuff (which I usually add to an extra stylesheet called s9y.css), but sometimes ...

Okay, here's how I did that in another template:

Code: Select all

#headmenu {
    float: left;
    text-align: right;
    width: 100%;
}

#headmenu ul {
    float: right;
    list-style: none;
    width: auto;
}

#headmenu li {
    float: left;
    width: auto;
}

I think that's what you're looking for. Don't forget to clear those floats!

HTH,
YL

[sonichouse]

I forgot: One thing is really important when doing WP ports.

Always make sure you check the original's license first! If you can't find a license, try contacting the original's author via email about it, asking his permission to port it to s9y.

Good news, the author (Joe) says

@ Steve: of course

so it looks as if I will have to do it now

[abdussamad]

I find its usually easier to port the xhtml code to s9y rather than wade through .php files. Just view a wordpress blog that uses the theme you want to port in your browser and then view the source code. Adapting the xhtml source to s9y is easy. You just replace the s9y specific divs and styles in the .tpl files to the WP theme's and link the WP theme's stylesheet.

As far as the stylesheet is concerned you just have to prepend any url's with {TEMPLATE_PATH}. So if you have

Code: Select all

background-image:url("img/back.gif");

you would change that to

Code: Select all

background-image:url("{TEMPLATE_PATH}img/back.gif");

[sonichouse]

Okay, here's how I did that in another template:

Code: Select all

#headmenu {
    float: left;
    text-align: right;
    width: 100%;
}

#headmenu ul {
    float: right;
    list-style: none;
    width: auto;
}

#headmenu li {
    float: left;
    width: auto;
}

I think that's what you're looking for. Don't forget to clear those floats!

HTH,
YL

Cheers, the following works for me ...

Code: Select all

#headmenu ul {
    margin: 0pt;
    float: right;
}
#headmenu ul li {
    display: inline;
    list-style-type:none;
}
ul.headmenu li {
    float:right;
    list-style-type:none;
}