SGW is called Self-Growing-Websites and it can handle projects on complete autopilot but it still needs a bit of your attention and creativity. In this Chapter we will learn how to create templates for using them in Static Pages module.
As you know the program works very efficiently with different types of content. But what you have to do on your end is to work on appearance of this content. You can do it while setting up a project. We have offered a lot of editing options there.
Another important part of your setting up job is creating a template of your website.
Though we have provided some default templates we strongly recommend using your custom templates to avoid footprints.
Let’s see how you work with templates.
First of all let’s have a look at a default template and note its structure.
Pic.8.1- Template structure
You see the main parts of the page: header, body and navigation bar. Plus you should also remember about page title:
Pic.8.2- Webpage title
Now let’s see what elements of content are considered by SGW. There are five elements the program works with: title, content (text), links, navigation (archive) and Google ads.
To place all these elements to your template you need to use special tags. Here they are:
<$SGW_page_title$> - for page title
<$SGW_page_content$> - for content
<$SGW_page_previous_page$> (Links to the previous page) and
<$SGW_index_link$> (Links to the main archive page) - for the links
<$SGW_month_archive$> - for the archive navigation
<$google_ad_200х200$> - for the Google ads blocks (note 200x200 is used to regulate the size of the block).
Note: you may have any structure of your template but if you want the elements we talked above to appear on webpage you have to use special tags.
Let’s see how these tags will work in default template on an example of an article pulled by the program.
Page title. <$SGW_page_title$>.You use this tag to show the program where you want the title of the content to be. You may set it to go before content text or after, however you want. Remember, the program will use content title to name the webpage (file).
Content. <$SGW_page_content$>. You use this tag to show where you want the content to go. When we say content we mean the body or the text of an article (in our case). Usually we place our content to the body of our webpage.
Links. <$SGW_page_previous_page$> <$SGW_index_link$>. You need to use these tags to cross-link your generated webpages so a visitor could easily navigate from one page to another.
Navigation. <$SGW_month_archive$>. This tag you use to create an easy navigation through monthly archive. So your visitors will be able to choose a month and a year of publications.
Pic.8.3- Page elements
Google Ads. <$google_ad_200х200$>. You use this tag to insert Google ads to your template. Google Ads units will show up in your template no matter whether you use Google AdSense module or not.
Pic.8.4- Google Ads in content
Now let’s see how we get ready our template in practice. For the example we take a template which has graphics.
Pic.8.5- Template with graphics
This template contains Index file and a folder with styles and images:
Pic.8.6- Template’s files
So every time you move your template you need to consider this two "guys". They can’t work without each other. And if you have a look into a source code of the template you will see that they are connected with a relative path:
Pic.8.7- CSS relative path
As you know some default templates are provided with the program’s installation. But you can use your own templates. And if you need to add your template with CSS folder you need to go to this program’s folder: /sgw/modules/archive/templates and upload your files in there. When you will set up Static Pages module you will find your template in the list of provided templates.
Now you need to learn one more special tag <$SGW_template_url$>. This one is used in case of using templates with styles folders (like in our example). In practice you may use your template on different servers with different SGW installations. This tag will automatically insert a relative path to "styles" (CSS) folder depending on the directory SGW was installed to. So in your source code you need to place this tag next to CSS folder path. Like this:
Pic.8.8- Template special tag
Note: relative path to ‘styles’ folder is usually placed to the of the source code.
If you have different names for your files, please do not forget to use correct ones when setting a path in the source code. Be accurate to let it work smoothly.
Now we place <$SGW_page_title$> tag to our template. First of all we need to set it to be shown in the title of the webpage. To do so we place this tag into <head> of our source like this:
Pic.8.9- Page title tag
<$SGW_page_content$>
Let’s find the spot for content in the source code and place needed tag there.
Most likely it will be in the <body> of your template:
Pic.8.10- Page content tag
Let’s put tags responsible for cross-linking to the body as well. They will be under the content.
<$SGW_page_previous_page$> (Links to the previous page) and <$SGW_index_link$> (Links to the main archive page)
Pic.8.11- Page links tag
Here is used <hr> (horizontal row) tag to separate links from the content. You may also use any separating mark between ‘links to the previous page’ and ‘links to the main page’ to make it look nice. As you see here is used vertical line " | ". This is on your choice.
Now let’s take care of a navigation.<$SGW_month_archive$>. This tag will show links to your monthly archive pages in your template making an easy to follow navigation.
We will place it to the sidebar. Again, we find the spot for the Sidebar in the source code and put the tag into it.
You can arrange a title for the navigation. Here is used ARCHIVE.
You can edit it with some HTML tags to look nice like <b> (bold) tag in this example.
Do not forget to close your tags when needed to avoid a mess.
Pic.8.12- Monthly archive tag
Now we can use <$SGW_index_link$> to also place link to the index page so visitors could come back to the main page from any archive page.
Plus in case Sitemap module is used we can use additional tag <$SGW_sitemap_link$>. This tag will be automatically converted into link to the Sitemap file created by SGW. To complete our navigation settings we may put this tag to the side bar along with <$SGW_index_link$> and <$SGW_month_archive$>.
Again, we may use any additional HTML tags to make it look nice.
Pic.8.13- Page navigation tags
There is the last tag left and it is for Google Ads <$google_ad_200х200$>. You may use it or not. This depends on your reasons. You may choose any spot in the template to place it in. But do not forget that Google allows only three units with Ads on the same page simultaneously. Taking into account that one unit will come with content, we will place two additional units on the page in our example.
For example one ad unit will go to Sidebar below the navigation menu and another one to the bottom of the page right below the links to the previous page.
Pic.8.14- Page Google Ads tags
Again, horizontal line was used to make it look nice. Also do not forget to set the size of your Google Ads blocks, so they could shape the template.
Now we are all done with our tags. Let’s see how our template looks like now.
Pic.8.15- Template with tags
Save this template to the folder we mentioned above (/sgw/modules/archive/templates).
Note: as soon as you save the template to "templates" folder you will be able to edit it from "Static Pages" module interface.
Here is what you will receive as a result of using SGW special tags. SGW will generate a webpage using your template and its special tags. You can place special tags in any spot you need depending on the structure of your template and your project. You can also use only those special tags you think are useful for you. Just set up your template once and let SGW generate content pages on complete autopilot.
Pic.8.16- Generated webpage
All rights reserved worldwide.