User Tools

Site Tools


themes:tutorial

This is an old revision of the document!


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/

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

<!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>

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:

<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File:         template.php
* @Package:      GetSimple
* @Action:       Beadysite theme for GetSimple CMS
*
*****************************************************/
?>
 
<!DOCTYPE html>
 
<html lang=en>
 
	<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>
 
	<body id="<?php get_page_slug(); ?>" >
 
		<div id="page">
 
			<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>
 
			<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><?php get_page_title(); ?></h2>
					<?php get_page_content(); ?>
				</div>
				<div id="right">
					<?php get_component('sidebar');?>
				</div>
			</div>
 
			<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>
 
			<div style="clear: both;">&nbsp;</div>
 
			<img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
 
			<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>
 
		</div>
 
	</body>
 
</html> 

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.

themes/tutorial.1380794172.txt.gz · Last modified: 2013/10/03 09:56 by datiswous