GetSimple CMS Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
======How to Convert a Static Page to a GetSimple Site======

It might be a site you have previously made, it might be a page or template you want to turn into a GS Theme – the procedure is the same. In this case I am going to use the free page template Beadysite from:
http://www.html5-templates.co.uk/beadysite/

No knowledge of PHP is needed, you can just copy and paste the php tags which have mostly self-explanatory names. Best to copy them from the template in the sample theme in case there are errors in this wiki text.
====Getting Set Up====

I install a copy of GetSimple in a new folder under Wampserver and I download and unzip the the Beady files. It's a page and a css and an images folder already arranged correctly for a GS theme so I put the whole Beadysite folder in the theme folder of my new local GS site alongside Cardinal and Innovation. Inside the folder I copy the file **index.html** and rename it **template.php**. Now I can activate the the beadysite as a theme in my new GS site and test the changes I make to the file as I go along. All the links to images and to the css are broken but we will soon fix that. I open the file **template.php** from the beadysite folder in my text editor and open the **template.php** from the Cardinal theme alongside it so I can copy and paste the tags from one to the other.

This is the static index.htm <file>

<!DOCTYPE html>
<html lang=en>

	<head>
		<meta charset=UTF-8>
		<title>Beadysite - Free HTML5 Template</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
	</head>

	<body>
		<div id="page">
		
			<header>
				<img src="images/logo.png" width="303" height="82" alt="logo" />  
				<br />
				<img src="images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
			</header>
			
			<div id="content">
				<div class="post">
					<h2>About Beady Site</h2>
					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense. </p>
					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
					<hr />
				</div>
				<div id="left">
					<h2>Welcome to Beady Site</h2>
					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
					<img src="images/cock.jpg" title="cock" alt="cock" />
					<br />
					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
				</div>
				<div id="right">
					<h2>Latest news</h2>
					<p>This is a free html5 web template, It`s very easy to edit and redesign in anyway you want. The PSD for the logo image is in the &quot;images/psd&quot; directory of this template.</p>
					<p>If you're having problems editing the template you can find help on my website via the  <a href="http://www.html5-templates.co.uk/forum/index.php">forums</a>.</p>
				</div>
			</div>
			
			<div id="sidebar">
				<ul>
					<li>
						<h2>Menu </h2>
						<ul>
							<li><a href="index.html">home</a></li>
							<li><a href="#">about us</a></li>
							<li><a href="#">blogs</a></li>
							<li><a href="#">arcade</a></li>
							<li><a href="#">gallery</a></li>
							<li><a href="#">links</a></li>
							<li><a href="#">contact us</a></li>
							<li><a href="#">forums</a></li>
						</ul>
					</li>
				</ul>
				<br />
				<p>
					<a href="http://validator.w3.org/check?uri=referer"><img src="images/HTML5_Logo.png" alt="Valid HTML5" /></a>
				</p>
				<br />
				<p>
					<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"/></a>
				</p>
				<br />
				<p>
					<a href="http://creativecommons.org/licenses/by/3.0/"><img style="border:0;width:88px;height:31px" src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Creative Commons Attribution 3.0 Unported License!" /></a>
				</p>
			</div>
			
			<div style="clear: both;">&nbsp;</div>
			
			<img src="images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
			
			<footer>
				Your Site Name © 2011 | Design by <a href="http://www.html5-templates.co.uk" target="_blank">HTML5 Templates</a>
			</footer>
			
		</div>
	</body>
	
</html>
</file>
====Editing====

From the top, these are the changes I make:

**1**       The file needs to start with:
''<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>''
Optionally, I put in the commented notes, but make sure the php tag is closed with ''?>''

**2**       Between the title tags I copy and paste the php tags
''<?php get_page_clean_title(); ?> &lt; <?php get_site_name(); ?>''

I don't much like the ”less than” symbol so I am going to replace it with a long dash:
''<?php get_page_clean_title(); ?> &mdash; <?php get_site_name(); ?>''

**3**	''<?php get_header(); ?>'' is required in the head section by some plugins

**4**	The relative link to the css is broken already so I make it an absolute link by replacing ''href="style.css"'' with ''href="<?php get_theme_url(); ?>/style.css"''

That's the head section done and now that the link to the css is mended I can look at my new GS page in my browser with a little more pleasure.

**5**	It's optional but handy to id the page body with ''<body id="<?php get_page_slug(); ?>" >'' It makes it easy to restyle a single page.

**6**	In the header I fix the links to images by adding ''<?php get_theme_url(); ?>/'' and check that they now display on my page.

**7** That first image is the site logo. I want the logo on each page of my site to be a link back to the homepage, and I want it to have the site name as alt text so the whole line is written like this:
''<a href="<?php get_site_url(); ?>"><img src="<?php get_theme_url(); ?>/images/logo.png" width="303" height="82" alt="<?php get_site_name(); ?>" /></a>''

Better still would be to replace the image with the text of the site name by using the tag ''<?php get_site_name(); ?>'' and styling with font and colour but we will do that another day.

**8**	The first block of content headed 'About Beady Site' isn't the main content so I am going to leave it how it is and come back to it.

**9**	The second block of content (<div id="left">) is to be my main one so I replace the title (Welcome to Beady Site) with ''<?php get_page_title(); ?>''

**10**	All the remaining content to the end of the div I replace with ''<?php get_page_content(); ?>''

**11**	If we want we can put in the 'published on' date statement but I am going to leave it out

**12**	The next div (id="right") is the right hand sidebar so all the content is replaced with
''<?php get_component('sidebar');?>''

**13**	The next div is the left hand side bar, confusingly called “sidebar” . All we have to do is replace the list items of the nav menu with ''<?php get_navigation(return_page_slug()); ?>''

**14**	Another link to an image needs mending with ''<?php get_theme_url(); ?>/''

**15**	In the footer now 'Your Site Name ' is replaced with ''<?php get_site_name(); ?>'' and the copyright year can be ''<?php echo date('Y'); ?>'' so that it will always show the current year.

**16**	We ought to Link to GS with ''<?php get_site_credits(); ?>''

**17**	Some plugins require ''<?php get_footer(); ?>''

That's it for a basic page. This is my new file template.php:<code php>
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File:         template.php
* @Package:      GetSimple
* @Action:       Beadysite theme for GetSimple CMS
*
*****************************************************/
?></code>

<code php><!DOCTYPE html>

<html lang=en>
</code>

<code php><head>
   <meta charset=UTF-8>
   <title><?php get_page_clean_title(); ?> &mdash;  <?php get_site_name(); ?></title>
   <?php get_header(); ?>
   <link href="<?php get_theme_url(); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
</head></code>

<code php><body id="<?php get_page_slug(); ?>" ></code>
	
<code><div id="page"></code>
		
<code php><header>
<a href="<?php get_site_url(); ?>"><img src="<?php get_theme_url(); ?>/images/logo.png" width="303" height="82" alt="<?php get_site_name(); ?>" /></a>
				<br />
 <img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
			</header></code>
			
<code php><div id="content"></code>
<code php><div class="post">
   <h2>About Beady Site</h2>
	<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
	<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
					<hr />
				</div></code>
<code php><div id="left">
					<h2><?php get_page_title(); ?></h2>
					<?php get_page_content(); ?>
				</div></code>
<code php><div id="right">
					<?php get_component('sidebar');?>
				</div></code>
<code php></div> <!-- end-of-"content" --></code>
			
<code php><div id="sidebar">
<ul>
	<li>
	    <h2>Menu </h2>
	    <ul><?php get_navigation(return_page_slug()); ?></ul>
	</li>
</ul>
	<br />
	<p>
   <a href="http://validator.w3.org/check?uri=referer"><img src="images/HTML5_Logo.png" alt="Valid HTML5" />  </a>
	</p>
	<br />
	<p>
   <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a>
	</p>
	<br />
	<p>
   <a href="http://creativecommons.org/licenses/by/3.0/"> <img style="border:0;width:88px;height:31px"src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Creative Commons Attribution 3.0 Unported License!" /> </a>
	</p>
</div></code>
			
<code php><div style="clear: both;">&nbsp;</div>
			
	<img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" /></code>
			
<code php><footer>
   <?php get_site_name(); ?>
   © <?php echo date('Y'); ?> | Design by <a href="http://www.html5-templates.co.uk" target="_blank">HTML5 Templates</a> <?php get_site_credits(); ?>
   <?php get_footer(); ?>
</footer></code>
			
<code></div> <!-- end-of-"page" --></code>
		
<code></body>
	
</html> 
</code>
====Content====

Now when I log in to admin I can enter the site name and base url once only and put the main page content and page titles back in through the GS back end.

There was a secondary content block on the page, headed 'About Beady Site' which I also want to make editable. To do this I go to Theme and Edit Components in the back end. Here I can create a component and write in (in html) whatever content I want to include and in my template.php file I paste in the get_component tag.

If I don't want to enter the content with html tags I can create a page under the Pages tab and insert the page contents into my template with <?php getPageContent('slug'); ?> where 'slug' is the filename for the page data displayed in Pages - Edit Page - Page Options.

====Finishing Touches====

All the theme files go in a folder and the folder name determines the theme name as shown in the GS backend. ''template.php'' and any other page templates should be in the theme folder and not in a sub folder. There should be a sub folder called //images// and in that folder a file named ''screenshot.png'' which will be the screenshot displayed in the backend when themes are selected. It shouldn't be too big; 240px wide is plenty.

GetSimple's wysiwyg editor will display page contents much more accurately if you put in the theme folder a file named ''editor.css'' which includes the basic styles for the theme.
GetSimple CMS Wiki

User Tools

Site Tools

Page Tools
