Differences

This shows you the differences between two versions of the page.

--- themes:tutorial [2013/10/14 09:15]
datiswous [Editing]
+++ themes:tutorial [2023/03/21 12:57] (current)
gintoxic Link to beadysite template updated and changed the text a bit for fluent reading
@@ Line 1: / Line 1: @@
 ======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:
+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.
-http://www.html5-templates.co.uk/beadysite/
-No knowledge of PHP is needed, you can 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 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.
+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 <file>
@@ Line 96: / Line 93: @@
 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 ''?>''
+<code php>
+<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
+/****************************************************
+*
+* @File:         template.php
+* @Package:      GetSimple
+* @Action:       Beadysite theme for GetSimple CMS
+*
+*****************************************************/
+?></code>
+<code><!DOCTYPE html>
+<html lang=en>
+</code>
+==head==
 **2**       Between the title tags I copy and paste the php tags
@@ Line 109: / Line 127: @@
 **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 already so I make it an absolute link by replacing ''href="style.css"'' with ''href="<?php get_theme_url(); ?>/style.css"''
+**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.
+<code php><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></code>
 **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 [[:basics#page_names_titles_and_slugs|here]].
+<code php><body id="<?php get_page_slug(); ?>" ></code>
+<code><div id="page"></code>
+==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.
@@ Line 121: / Line 152: @@
 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.
+<code php><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></code>
+==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.
@@ Line 129: / Line 168: @@
 **11**	If we want we can put in the 'published on' date statement but I am going to leave it out
+<code php><div id="content"></code>
+<code php><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></code>
+<code php><div id="left">
+					<h2><?php get_page_title(); ?></h2>
+					<?php get_page_content(); ?>
+				</div></code>
 **12**	The next div (id="right") is the right hand sidebar so all the content is replaced with
 ''<?php get_component('sidebar');?>''
+<code php><div id="right">
+					<?php get_component('sidebar');?>
+				</div></code>
+<code php></div> <!-- end-of-"content" --></code>
+==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(); ?>/''
+<code php><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></code>
+<code php><div style="clear: both;">&nbsp;</div>
+	<img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" /></code>
+==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.
@@ Line 141: / Line 226: @@
 **16**	We ought to Link to GS with ''<?php get_site_credits(); ?>''
-**17**	Some plugins require ''<?php get_footer(); ?>''. It won't have any visible effect.
+**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. ==== This is my new file template.php: ====
+That's it for a basic page
+<code php><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></code>
+<code></div> <!-- end-of-"page" --></code>
+<code>   <?php get_footer(); ?>
+</body>
+</html>
+</code>
+ ==== This is my new file template.php: ====
 <code php>
@@ Line 154: / Line 253: @@
 *
 *****************************************************/
-?></code>
+?>
-<code php><!DOCTYPE html>
+<!DOCTYPE html>
 <html lang=en>
-</code>
-<code php><head>
+<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></code>
+</head>
-<code php><body id="<?php get_page_slug(); ?>" ></code>
+<body id="<?php get_page_slug(); ?>" >
-<code><div id="page"></code>
+<div id="page">
-<code php><header>
+<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></code>
+			</header>
-<code php><div id="content"></code>
+<div id="content">
-<code php><div class="post">
+<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></code>
+				</div>
-<code php><div id="left">
+<div id="left">
 					<h2><?php get_page_title(); ?></h2>
 					<?php get_page_content(); ?>
-				</div></code>
+				</div>
-<code php><div id="right">
+<div id="right">
 					<?php get_component('sidebar');?>
-				</div></code>
+				</div>
-<code php></div> <!-- end-of-"content" --></code>
+</div> <!-- end-of-"content" -->
-<code php><div id="sidebar">
+<div id="sidebar">
 <ul>
 	<li>
@@ Line 203: / Line 302: @@
 	<br />
 	<p>
-   <a href="http://validator.w3.org/check?uri=referer"><img src="images/HTML5_Logo.png" alt="Valid HTML5" />  </a>
+   <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 />
@@ Line 213: / Line 312: @@
    <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></code>
+</div>
-<code php><div style="clear: both;">&nbsp;</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" /></code>
+	<img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
-<code php><footer>
+<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>
-</footer></code>
-<code></div> <!-- end-of-"page" --></code>
+</div> <!-- end-of-"page" -->
+<?php get_footer(); ?>
-<code></body>
+</body>
-</html>
+</html></code>
-</code>
 ====Content====
@@ Line 241: / Line 339: @@
 ====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.
+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.

GetSimple CMS Wiki

User Tools

Site Tools

Differences

Page Tools