2013-02-02, 03:30:07
Several people have been asking how to convert an existing site to GS or how to get started with making a custom theme. I was doing it today so I jotted down what I did. Here goes:
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
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(); ?> < <?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
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:
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.
Hope this helps. Comments and suggestions are welcome.
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
Code:
<!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:
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(); ?> < <?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
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 Code:
<?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.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;"> </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.
Hope this helps. Comments and suggestions are welcome.