GetSimple Support Forum
Static html to GS site, Step by Step Instructions - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Installation & Setup (http://get-simple.info/forums/forumdisplay.php?fid=5)
+--- Thread: Static html to GS site, Step by Step Instructions (/showthread.php?tid=4246)

Static html to GS site, Step by Step Instructions - Timbow - 2013-02-02

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:

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 &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 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(); ?> &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.

Hope this helps. Comments and suggestions are welcome.

RE: Static html to GS site, Step by Step Instructions - shawn_a - 2013-02-02

brilliant

RE: Static html to GS site, Step by Step Instructions - Carlos - 2013-02-02

Great work Timbow!

RE: Static html to GS site, Step by Step Instructions - n00dles101 - 2013-02-02

Great work Timbow.

Great job on all those template conversions too....

RE: Static html to GS site, Step by Step Instructions - shovenose - 2013-02-02

Thank you for creating this,
it will be very helpful for new users.

RE: Static html to GS site, Step by Step Instructions - jyoz22 - 2013-02-03

Thanks Timbow,

I think this will help out a lot of people who want to start off with GS.

P.S.: I think they should pin a copy of this post in the themes section of the forum as well.

RE: Static html to GS site, Step by Step Instructions - eatons - 2013-02-05

Gorgeous piece of workTimbow!
PS have you thought about turning it into a video tutorial?

RE: Static html to GS site, Step by Step Instructions - dianajo - 2013-02-05

I just did this a few days before you posted and this is pretty much spot on as far as I can tell.

It can get a bit more complex with some designs but most people should be able to figure the basics from this and then go from there!

RE: Static html to GS site, Step by Step Instructions - Timbow - 2013-02-05

Thanks, I am going to tidy it up a bit, I need to cover the logo and linking the logo, and I want to cover the secondary content block too.
[done now]