======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 [[https://web.archive.org/web/20120615044726/http://www.html5-templates.co.uk/temps/beadysite/ | 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 Beadysite - Free HTML5 Template
About Beady Site
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.
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.
Welcome to Beady Site
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.
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.
Latest news
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.
If you're having problems editing the template you can find help on my website via the forums.
====Editing====
From the top, these are the changes I make:
==start==
**1** The file needs to start with:
''''
Optionally, I put in the commented notes, but make sure the php tag is closed with ''?>''
==head==
**2** Between the title tags I copy and paste the php tags
'' < ''
I don't much like the ”less than” symbol so I am going to replace it with a long dash:
'' — ''
**3** '''' 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="/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.
<?php get_page_clean_title(); ?> — <?php get_site_name(); ?>
**5** It's optional but handy to id the page body with '''' It makes it easy to restyle a single page. The term //slug// is explained [[:basics#page_names_titles_and_slugs|here]].
==header==
**6** In the header I fix the links to images by adding ''/'' 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:
''''
Better still would be to replace the image with the text of the site name by using the tag '''' and styling with font and colour but we will do that another day.
==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 (
) is to be my main one so I replace the title (Welcome to Beady Site) with ''''
**10** All the remaining content to the end of the div I replace with ''''
**11** If we want we can put in the 'published on' date statement but I am going to leave it out
About Beady Site
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.
**12** The next div (id="right") is the right hand sidebar so all the content is replaced with
''''
==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 ''''. The author of Beadysite has nested the nav links as a
within a
for selection purposes but that need not confuse us.
**14** Another link to an image needs mending with ''/''
Menu
==footer==
**15** In the footer now 'Your Site Name ' is replaced with '''' and the copyright year can be '''' so that it will always show the current year.
**16** We ought to Link to GS with ''''
**17** Some plugins require ''''. 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 .
That's it for a basic page
==== This is my new file template.php: ====
<?php get_page_clean_title(); ?> — <?php get_site_name(); ?>
About Beady Site
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.
Menu
====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 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.
; ?>/images/logo.png){kind=logo}
; ?>/images/bg_banner_grey.gif){kind=small}
; ?>/images/HTML5_Logo.png){kind=logo}