Converting WordPress theme to CMSms theme

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Converting WordPress theme to CMSms theme

Post by KO »

You see plenty of WordPress themes out there and I have been wondering what would it take to convert one of the typical 2-col layouts to CMSMS. If you wondered the same here is what came out.

First of all I do not know much from WordPress itself. I installed it once couple of years ago and if I remember right things went smooth. This time I did not bother installing it. I usually do html layouts from scratch with Notepad++ so I never really used any of the ready-made themes.

So I looked few themes at WP and decided to go on http://wordpress.org/extend/themes/azul
Looks like typical WP layout, pretty cool and like said "Free, easy to edit and completely standards compliant". Time to press Download button.

After unzippin files it looks like this theme (probably all WB themes) uses one single index.php file which does the work by including header.php, footer.php etc. So it looks like easily do-able.

So here we go...

1. I created empty template in CMSms "Templates" to be my base template.

2. index.php had the main WP theme layout so I open that and looked what other files are included by PHP in it. I copied "header.php, sidebar.php and footer.php" code and replaced php includes in index.php to have an idea of complete page code. This is not necessary but it makes it easier to understand what and where the layout parts are. This can be seen on file index-combined.php which is an attachment.

Now you can start with CMSms theme. I took my CMSms base template and started copying bits from that combined WP theme file I just made into it.

3. looked good in my CMSms base template already so I left it untouched.

4. on WP theme started with so I copied that to base template.

5. Next thing was header and it looked:

Code: Select all

<!-- Header starts -->
<div id="header">
	<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
	<a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a>
	<div id="search">
		<?php include(TEMPLATEPATH . '/searchform.php'); ?>
	</div>
</div>
<div id="navbar">
	<?php wp_page_menu('show_home=1'); ?>
</div>
<!-- Header ends -->
So copied that to template, replaced php include things with CMSms Smarty tags and it became:

Code: Select all

<!-- start header -->
<div id="header">
<h1><a href="#">{sitename}</a></h1>
	<a href="#">Description</a>
	<div id="search">
		{Search}
	</div>
</div>
<!-- end header -->

<!-- start menu -->
<div id="navbar">
  {menu number_of_levels="1" template="minimal_menu.tpl"}
</div>
<!-- end menu -->

Notice here that on menu call I added number_of_levels="1" as I believe layout could only handle one level of navigation. I also included "minimal_menu.tpl" as menu template since it will work out of the box in this case. I feel it should be the default menu template in CMSms if no menu template is specified but it's not.

6. Next I moved to actuall content area.

Code: Select all

<div id="posts">
	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
	
			<div class="date">
				<?php the_time('F j, Y'); ?>
				<?php edit_post_link('Edit', ' | ', ''); ?>
			</div>
			
			<div class="tags">
				<?php the_tags('Tags: ', ', ', ''); ?>
			</div>
			
			<div class="entry">
				<?php the_content(); ?>
		
				<div class="commentbubble">
					<?php comments_popup_link('0','1','%') ?>
				</div>
				
				<p class="postmetadata">
				<?php _e('Filed under:'); ?><br />
				<?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?>
				</p>
			</div>
		</div>
	<?php endwhile; ?>
	<div class="navigation">
			<?php posts_nav_link('|','Previous Page','Next Page'); ?>
		</div>
	<?php else : ?>
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><?php_e('Not Found'); ?></h2>
		</div>
	<?php endif; ?>
</div>
I simplified this a lot as I only wanted to make basic funtionality so now I got:

Code: Select all

<!-- start content -->
<div id="posts">
  <h2>{title}</h2>
  {content}
</div>
<!-- end content -->
7. Then to Sidebar

Code: Select all

<!-- Start sidebar -->
<div class="sidebar">

	<ul>

		<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

		<li id="calendar">
			<h2><?php _e('Calendar'); ?></h2>
			<?php get_calendar(); ?>
		</li>

		<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>

		<li>
			<h2><?php _e('Categories'); ?></h2>
				<ul>
					<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
				</ul>
		</li>

		<li>
			<h2><?php _e('Archives'); ?></h2>
				<ul>
					<?php wp_get_archives('type=monthly'); ?>
				</ul>
		</li>

		<?php get_links_list(); ?>

		<li>
			<h2><?php _e('Meta'); ?></h2>
				<ul>
					<?php wp_register(); ?>
					<li><?php wp_loginout(); ?></li>
					<?php wp_meta(); ?>
				</ul>
		</li>

		<?php endif; ?>

	</ul>

</div>
<!-- End Sidebar -->
I again removed a lot of WP functionately (I could easily add later if I feel that I need them) and now code looks like -->

Code: Select all

<!-- Start sidebar -->
<div class="sidebar">
{content block="Sidebar"}
</div>
<!-- End Sidebar -->
8. Footer

Code: Select all

<div id="footer">

	<p>Powered by <a href="http://www.wordpress.org">Wordpress</a> | Designed by <a href="http://www.switchroyale.com">Switchroyale</a> 2009</p>

</div>
<!-- End Footer -->

		<?php wp_footer(); ?>

This is simple. Only thing I do not know is wp_footer so I just removed it. -->

Code: Select all

<!-- Start Footer -->
<div id="footer">
	<p>Powered by <a href="http://www.smsms.org">CMS Made Simple</a> | Original Design by <a href="http://www.switchroyale.com">Switchroyale</a> 2009. Converted to CMS Made Simple</p>
</div>
<!-- End Footer -->
9. Then close that Container just before tag with . Now save you new template.

10. Next thing to do is to copy stylesheet so I found that on style.css file which I copied to a new stylesheet in CMSms "stylesheets" and I attached it to my new template. One last thing and we are to see how things look.

11. stylesheet needs images so I copied them from /images directory to CMSms installations /images directory.

Time to see how things look. I had new CMSms installed with default page content so I went back to templates and pressed "Set All pages" right next to my new template. I looked the pages and things looked very similar than in original design and in WP themes. Very very nice. Ofcourse I cut down lot's WP functionality but I got that template transferred to CMSms with very little work and I would be able to use it normally.

This is just an example of transferring theme from WB system. To move basic layout is very very simple because of CMSms smart(y) templating system. And took me less than 1 hour with this cut down functionality (including downloading and installing XAMPP and CMSms to my home computer. Theme is included as attachment. Use Theme Manager to try it out.

I hope someone finds this inspiring. I could consider adding part of that removed functionality on another post if someone wants. Anyhow it proves that WP themes can be transferred with very little work to CMSms and that brings a lot's of more choise to choose for people who does not have time or experience creating their own templates.

Happy CMSms'ing!
Attachments

[The extension xml has been deactivated and can no longer be displayed.]

[The extension txt has been deactivated and can no longer be displayed.]

mw
Forum Members
Forum Members
Posts: 159
Joined: Mon Aug 25, 2008 8:38 pm

Re: Converting WordPress theme to CMSms theme

Post by mw »

That's cool.
I just finished doing the same thing, here is what I came up with:
http://www.uidds.com/index.php

It's based on:
http://www.31f.info/?wptheme=WP-Medical

It took me a while to get the dropdown menu working, let me know if you need the menu template and I will post it.



Oh and I did one a few days ago based on this one:
http://demo.codescheme.net/
it's the "Alpen"
http://www.codescheme.net/2008/09/22/free-wordpress-theme-alpen-3column/#more-285
Last edited by mw on Mon Jan 12, 2009 3:07 am, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Converting WordPress theme to CMSms theme

Post by Dr.CSS »

Locked

Return to “Layout and Design (CSS & HTML)”