User Tools

Site Tools


themes:creation

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
themes:creation [2013/08/26 22:12]
Timbow [Anatomy of a Theme]
themes:creation [2017/06/02 08:03] (current)
Timbow [Theme Development Tips]
Line 1: Line 1:
 +~~NOTOC~~
 ====== Theme Creation ====== ====== Theme Creation ======
  
-If you are building a site from scratch, converting an existing site to GetSimple or you have a web page you want to use as a template you need to create a GetSimple Theme. ​There is a [[themes:​tutorial|Step-by-Step Tutorial]] for converting a static html template ​into a simple ​theme.+There is a [[themes:​tutorial|Step-by-Step Tutorial]] for converting a static html page into a php template for a GetSimple ​theme.
  
-Creating themes for GetSimple is extremely easy. GS uses [[themes:​template_tags|template tags]] similar to WordPress (if you are familiar with that). All template pages are written in PHPThere is only one truly required theme file, and that's ''​template.php''​. ​You then place that file within it's own unique folder name, and [[themes:installation|install it]] on your server.+If you are building a site from scratch, converting an existing site to GetSimple or you have a web page you want to use as a template ​you need to create a GetSimple //Theme// which will define the html and css of your web pages. ​Just as a single html file can define a web page there is only one truly required theme file, and that's ''​template.php''​. ''​template.php''​ defines the html of the default page layout for your sitebut you can make other page templates ​and set particular pages to use an alternative template by choosing it within the **Page Options -> Template** setting:{{ :themes:page-options.png |}}
  
-''​template.php''​ is the "​Default Template"​ file used for most pages within your site, but you can make other files within your theme and set particular pages to use that new template file instead by choosing it within the **Page Options -> Template** setting: 
-{{:​themes:​page-options.png|}} 
  
 +Content is inserted into your page template by using [[themes:​template_tags|template tags]] similar to WordPress. You then place that file within it's own uniquely named folder and [[themes:​installation|install it]] on your server. All template pages are given the .PHP extension.  ​
 ===== Anatomy of a Theme ===== ===== Anatomy of a Theme =====
-At the very minimum, a GetSimple theme consists of only one file: ''​template.php''​. This file should reside ​inside a folder named specifically for your theme, and placed within the theme folder of your GetSimple installation such as: ''/​path/​to/​getsimple/​theme/​my_theme/​template.php''​ You can rename a theme by renaming the folder that contains it. +The default page template named ''​template.php'' ​goes inside a folder named specifically for your theme, and placed within the theme folder of your GetSimple installation such as: ''/​path/​to/​getsimple/​theme/​my_theme/​template.php''​ You can rename a theme by renaming the folder that contains it. If you just want to add another ​template as part of an existing theme you may place it in that theme's directory with any name other than ''​functions.php'' ​and ''​*.inc.php'' ​and it will show in the selection field of the above form.
- +
-By default all new pages use the ''​template.php''​ file when displayed. Developers have the ability ​to create other non-standard ​template ​files such as ''​homepage.php'' ​or ''​contact.php''​. The user of the cms would then choose that particular template when creating a new page. +
- +
-A file named ''​editor.css'' ​in the theme folder will enable ​the CKeditor to display page content more accurately +
-===== Template Tags ===== +
-Once you have the file layout and style created, the next step is to use our [[themes:​template_tags|template tags]] to show the content that will come from GetSimple. +
- +
-For example, if you want to show the title, link and body inside your template, use something like this: +
-<​code>​ +
-<a href="<?​php get_page_url();​ ?>"><?​php get_page_title();​ ?></​a>​ +
-<?php get_page_content();​ ?> +
-</​code>​+
  
 +Other files found in a theme folder are:
 +  * Normally an external stylesheet referenced in the html of the page template file.
 +  * Alternative,​ optional templates for other pages such as ''​homepage.php''​ or ''​contact.php''​. They will be available for selection in **Page Options**.
 +  * A file named ''​editor.css''​ in the theme folder will enable the CKeditor to display page content more accurately.
 +  * Any images used in the theme, along with favicons and backgrounds
 +  * A screenshot image of your theme saved in an //images// folder as ''/​path/​to/​getsimple/​theme/​your-theme/​images/​screenshot.png''​ will be displayed on the Theme Selection Page in the Admin Pages.((Be sure to name it that exact name or else our system will not pick it up. Lowercase AND in the folder /images/ AND named screenshot.png))
 +  * A file ''​[[theme:​advanced#​theme_functions_file|functions.php]]''​ contains any custom functions that are used within your theme.
 +  * Sometimes template files are split into parts and saved as [[theme:​advanced#​optimal_theme_files_layout|partial template files]] with names like ''​header.inc.php''​
 +  * Sometimes javascript and other files are included in the theme
 ===== Theme Development Tips ===== ===== Theme Development Tips =====
- +   Start any PHP file within your theme with ''​<?php if(!defined('IN_GS')){ die('​you cannot load this page directly.'); } ?>''​. This will stop any unwanted direct access to that particular ​file. 
-These are some tips to help development of themes for GetSimple +  * Most themes id the body of the html by writing the opening body tag ''​<body id="<?​php get_page_slug();​ ?>" >'' ​It makes it easy to restyle a single page
- +  * Many plugins require ​''​<?php get_header();​ ?>'' ​between ​the ''​<​head>​'' ​tags and ''​<?php get_footer();​ ?>'' ​somewhere before ​the closing ​''​</body>'' ​tag
-  ​There are many optional settings located in the ''​/​path/​to/​getsimple/​gsconfig.php'' ​fileIncludes CKEditor, ​file upload, security, language and sitemap settings+  * urls in php template files need to be written as absolute links not relative, in the form http://www... or with the path called by <?php get_site_url();​ ?or <?​php ​get_theme_url(); ?> so that they will always be correct even if the site is moved.
-  * To turn on debugging, uncomment ​the GSDEBUG line in ''​/​path/​to/​getsimple/​gsconfig.php''​ to enable full PHP errors to help debug+
-  * If you want to see all PHP errors written to a log, check out ''​/​path/​to/​getsimple/​data/​other/​logs/​errorlog.txt'' ​- It is automatically generated by the system regardless of the GSDEBUG setting. +
-  * Add the file ''​/​path/​to/​getsimple/​theme/​your-theme/​functions.php'' ​into your theme to add custom functions that can be used within your theme. +
-  * Add a image of your theme as ''​/​path/​to/​getsimple/​theme/​your-theme/​images/​screenshot.png'' ​to enable the theme image that shows when it s activated in the administrator panel.  +
-    * Be sure to name it that exact name or else our system will not pick it up. Lowercase AND in the folder ​''/​images/'' ​AND named ''​screenshot.png''​ +
-  * Add the code below to the top of any PHP file within your themeThis will stop any unwanted direct access to that particular file. +
-<code><?​php ​if(!defined('​IN_GS'​)){ die('​you cannot load this page directly.'​); ?></​code>​ +
 ======Links====== ======Links======
 Back to the GetSimple Wiki [[:​start|Contents Page]] Back to the GetSimple Wiki [[:​start|Contents Page]]
themes/creation.1377555164.txt.gz · Last modified: 2013/08/26 22:12 by Timbow