Table of Contents
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. The files are offline now but you can look at the CSS and HTML through the Wayback Machine. You don't need the original files to understand this tutorial and no knowledge of PHP is needed. 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 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 "images/psd" 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;"> </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:
start
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 ?>
<?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
2 Between the title tags I copy and paste the php tags
<?php get_page_clean_title(); ?> < <?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(); ?> — <?php get_site_name(); ?>
3 <?php get_header(); ?> is required in the head section by some plugins. It won't have any visible effect.
4 The relative link to the css is broken 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.
<head> <meta charset=UTF-8> <title><?php get_page_clean_title(); ?> — <?php get_site_name(); ?></title> <?php get_header(); ?> <link href="<?php get_theme_url(); ?>/style.css" rel="stylesheet" type="text/css" media="screen" /> </head>
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. The term slug is explained here.
<body id="<?php get_page_slug(); ?>" >
<div id="page">
header
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.
<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>
content
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
<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.</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>
<div id="left"> <h2><?php get_page_title(); ?></h2> <?php get_page_content(); ?> </div>
12 The next div (id=“right”) is the right hand sidebar so all the content is replaced with
<?php get_component('sidebar');?>
<div id="right"> <?php get_component('sidebar');?> </div>
</div> <!-- end-of-"content" -->
nav menu
13 The next div is the left hand side bar, confusingly called “sidebar” which has the nav menu in it. All we have to do is replace the list items of the nav menu with <?php get_navigation(return_page_slug()); ?>. The author of Beadysite has nested the nav links as a <ul> within a <ul> for selection purposes but that need not confuse us.
14 Another link to an image needs mending with <?php get_theme_url(); ?>/
<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="<?php get_theme_url(); ?>/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;"> </div> <img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
footer
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(); ?>. It is for scripts, nothing to do with the page footer and it won't have any visible effect. We will put it just before the closing tag </body>.
That's it for a basic page
<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(); ?> </footer>
</div> <!-- end-of-"page" -->
<?php get_footer(); ?> </body> </html>
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(); ?> — <?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.</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> <div id="left"> <h2><?php get_page_title(); ?></h2> <?php get_page_content(); ?> </div> <div id="right"> <?php get_component('sidebar');?> </div> </div> <!-- end-of-"content" --> <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="<?php get_theme_url(); ?>/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;"> </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(); ?> </footer> </div> <!-- end-of-"page" --> <?php get_footer(); ?> </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; 648px wide is the maximum width.
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.
