This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
themes:tutorial [2013/10/23 23:55] datiswous [This is my new file template.php:] |
themes:tutorial [2023/03/19 17:40] gintoxic Removed typo |
||
---|---|---|---|
Line 7: | Line 7: | ||
====Getting Set Up==== | ====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> | This is the static index.htm <file> | ||
Line 130: | Line 130: | ||
**3** ''<?php get_header(); ?>'' is required in the head section by some plugins. It won't have any visible effect. | **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. | 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. | ||
Line 229: | Line 229: | ||
**16** We ought to Link to GS with ''<?php get_site_credits(); ?>'' | **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 | That's it for a basic page | ||
Line 236: | Line 236: | ||
<?php get_site_name(); ?> | <?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 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></code> | </footer></code> | ||
<code></div> <!-- end-of-"page" --></code> | <code></div> <!-- end-of-"page" --></code> | ||
- | <code></body> | + | <code> <?php get_footer(); ?> |
+ | </body> | ||
</html> | </html> | ||
</code> | </code> | ||
- | . | ||
==== This is my new file template.php: ==== | ==== This is my new file template.php: ==== | ||
Line 306: | Line 305: | ||
<br /> | <br /> | ||
<p> | <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> | </p> | ||
<br /> | <br /> | ||
Line 325: | Line 324: | ||
<?php get_site_name(); ?> | <?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 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> | ||
</div> <!-- end-of-"page" --> | </div> <!-- end-of-"page" --> | ||
+ | <?php get_footer(); ?> | ||
</body> | </body> | ||
Line 343: | Line 342: | ||
====Finishing Touches==== | ====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'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. | ||