Converting WordPress Themes
From B2evolution
This page gives an overlook as to how to convert WordPress themes into b2evolution 2.2.1+ skins.
While WordPress themes used to be very different, since WP 1.5, WP themes are now very similar to evoSkins. This makes porting relatively easy. Converting from the one to the other will mainly be a matter of renaming files and tags...
Contents |
[edit] Getting Started
Note that the best way to get started would probably be to compare the default WordPress ("kubrik") theme with the "evopress" b2evolution skin. Those are the same design implemented for each platform.
Now, if you want to start with a theme of your own, let's assume the theme/skin is named mydesign...
Copy the folder /wordpress/wp-content/themes/mydesign/ to /b2evolution/skins/mydesign/
[edit] Renaming the files
Reference pages: WordPress vs. b2evolution
Inside of /b2evolution/skins/mydesign/ , rename the following files:
| WordPress | b2evolution |
|---|---|
| index.php | index.main.php |
| header.php | _body_header.inc.php |
| footer.php | _body_footer.inc.php |
| *.css | style.css |
[edit] Replacing the skin tags
Reference pageq: WordPress vs. b2evolution
Let's start by editing the basic files...
[edit] style.css
Add these lines at the beginning of the CSS file:
@import url(../../rsc/css/basic.css); /* Import basic styles */ @import url(../../rsc/css/img.css); /* Import standard image styles */ @import url(../../rsc/css/blog_elements.css); /* Import standard blog elements styles */ @import url(../../rsc/css/forms.css); /* Import default form styles */ @import url(../../rsc/css/comments.css); /* Import default comment styles */
[edit] index.main.php
The WP file should start with:
<?php get_header(); ?>
Replace this with:
<?php // Emulate WordPress!! (Use this for development only!) // Make sure you replace this with proper b2evolution markup before redistributing. // Using this will NOT provide you with full b2evolution functionality! skin_include( '_wp_compatibility.inc.php' ); // This is the main template; it may be used to display very different things. // Do inits depending on current $disp: skin_init( $disp ); // -------------------------- HTML HEADER INCLUDED HERE -------------------------- skin_include( '_html_header.inc.php' ); // Note: You can customize the default HTML header by copying the generic // /skins/_html_header.inc.php file into the current skin folder. // -------------------------------- END OF HEADER -------------------------------- // ------------------------- BODY HEADER INCLUDED HERE -------------------------- skin_include( '_body_header.inc.php' ); // Note: You can customize the default BODY header by copying the generic // /skins/_body_footer.inc.php file into the current skin folder. // ------------------------------- END OF FOOTER -------------------------------- ?>
The WP file should end with:
<?php get_footer(); ?>
Replace this with:
<?php // ------------------------- BODY FOOTER INCLUDED HERE -------------------------- skin_include( '_body_footer.inc.php' ); // Note: You can customize the default BODY footer by copying the // _body_footer.inc.php file into the current skin folder. // ------------------------------- END OF FOOTER -------------------------------- ?> <?php // ------------------------- HTML FOOTER INCLUDED HERE -------------------------- skin_include( '_html_footer.inc.php' ); // Note: You can customize the default HTML footer by copying the // _html_footer.inc.php file into the current skin folder. // ------------------------------- END OF FOOTER -------------------------------- ?>
There is a main loop starting with:
foreach ($posts as $post) {
Replace that with:
// Display message if no post: display_if_empty(); while( $Item = & mainlist_get_item() ) { // For each blog post, do everything below up to the closing curly brace "}"
[edit] _body_header.inc.php
Remove everything up to and including:
<body>
(in b2evolution, this is all taken care of by _html_header.inc.php)
[edit] _body_footer.inc.php
Remove the end of the file, especially:
<?php wp_footer(); ?> </body>
</html>(in b2evolution, this is all taken care of by _html_footer.inc.php)
[edit] Installing the skin
Go to the admin panel, Global Settings > Skins install > Install new and install the mydesign skin.
Then go to your test blog, Blog Settings > Skin and select the mydesign skin.
The top of the skin should display. Of course, there will be errors because you still need to replace quite a few skin tags, but by now you should have an idea about how to go about it.
[edit] Caveats
[edit] $siteurl
WordPress themes tend to reference the $siteurl variable. While the WP compatibility layer will set this variable, using global variables to construct urls in skins is considered dirty practice. Try to use the appropriate template tags instead.
Note: if it looks like $siteurl not defined, try adding this on top of your template:
global $siteurl;
[edit] Advanced features
Some advanced features like email subscription, profile editing, messaging forms require the skin to be able to include at least the standard sub templates. You may find that you need to include something like this:
<?php // -------------- MAIN CONTENT TEMPLATE INCLUDED HERE (Based on $disp) -------------- skin_include( '$disp$', array( 'disp_posts' => '', // We already handled this case above 'disp_single' => '', // We already handled this case above 'disp_page' => '', // We already handled this case above ) ); // Note: you can customize any of the sub templates included here by // copying the matching php file into your skin directory. // ------------------------- END OF MAIN CONTENT TEMPLATE --------------------------- ?>