Creating Bootstrap Template
Template structure
Microweber templates are a set of files that determines the overall look of your website. These files are used to generate the site layout and the html code.
You can use PHP and HTML to make your template as flexible as you need it to be.
Here is a link you can use to download our bootstrap 3 template and check it out code by code:
https://github.com/microweber-dev/bootstrap3
OK, let's get down to some basic explaining.
Modules
Each template is made of modules. You can think of them as the building blocks of your template.
Examples of modules are: menu, posts list, contact form, shopping cart, user login, etc.
You can use the modules if you do not want to write custom functionality or re-use code you have already written.
The Modules are loaded with the <module type="the_name_of_the_module" template="the_skin_you_want" id="the_id_of_the_module" /> tag
Post list
List of all the posts in your blog section
Product list
Product list of your online shop
Categories
All the categories for your posts or shop
Pictures
Gallery pictures
Shop
Displaying the Microweber's shop module
Menu
Displaying the menu module
Comments
List of comments for the current item
Social network
Quick buttons for our favourite social networks
This is just a short list of all the free modules we offer you. You can find more in the /userfiles/modules/ and experiment with them as much as you like!
Layouts
Layouts are pre-defined simple pieces of code that can be added in the page.
You are build one for the purpose of your page or you can use/modify one from ours.
The Layouts are loaded with the <module type="some_module_name" /> tag
Basic files
All templates are located into userfiles/templates directory. Each template is contained within its own folder and you need to create a new folder when creating a new template. Usually, the name of the folder is the name of your new template.
Template folders must be in lower-case and must not contain spaces or special characters.
Here is the most basic template structure
Files and their purpose
config.php
holds the information for your template, like name, version
index.php
homepage default layout
header.php
site header
footer.php
site footer
clean.php
default layout for page
inner.php
default layout for post
editor.php
used to visualize page's preview in the editor
template_settings.php
template's settings
Configuration and Template Setup
For the purpose of this tutorial we are going to use this free template. You can get the source code from Bootswatch at https://bootswatch.com/paper/
Lets download the template css file from here https://bootswatch.com/paper/bootstrap.css and unzip it in new folder at userfiles/templates/bootswatch_paper
After unzip create a new file at userfiles/templates/startbootstrap-agency/config.php, this file holds information about the template name, author, version, etc.
The config.php file must contain a $config array with the following information.
Getting to work
Now that we have the template and our config file in place, lets get to work and connect it to the CMS
The index.php file is loaded when the user goes on the home page. You can see the HTML source code of the downloaded template here.
We will need to separate the header and the footer part, so we can re-use them in our inner pages layouts.
header.php
Create a file at userfiles/templates/startbootstrap-agency/header.php and move the template styles and scripts there.
Let's get to some explanation, shall we?! Most of the code should be simple- we put the html mark-up inside for the head section and the first part of the body for the header. Including your .css and .js files are pretty easy, too.
For the .css you use
where
is the template's url. Don't worry, Microweber knows what to do with that.The same goes for the .js files. Using
we are pointing where the file is and Microweber is taking care for the rest.
Declaring module is simple, too. Here we are saying that we want a module that is menu type, which has a name,an id and as we are going to see in the footer.php page you can assign a template as well. Moving on.
##footer.php Well, same as the header.php, this is going to be a file that will be part of every page and, as the name suggests, inside we are going to put our footer information.
The code is again as simple as it can be. Few things to note! You will see that we have this
Notice the class="mw-row" and class="mw-col". This will allow you to resize the columns in real time via the live editor. You can also set the initial width with style="width:x%".
Now all you have to do is to use
and this
to include this files wherever you want them to appear! Simple as that!
##index.php
Here, we include the header and the footer and between them we put some content.
A few notes about this:
This is the section where you give your page some attributes like name, description, type, etc. Microweber will go trough that comment and will extract everything it needs . For the rest of the tutorial we are going to call this
When having .edit class, we are saying that we want the elements, that are in the containing tag, to be editable. With this information, Microweber will know that in Live Edit mode we want to have absolute control over the content. Id, rel and field should be also included in order to make the fields unique and prevent different edit field from colliding and outputing errors.
More function and explanations you can find in our documentations : http://microweber.com/docs/guides/README.md
##clean.php
Clean page is for one purpose- to be clean and ready for filling. Call it blank page if you want.
##layouts\shop.php
Like all the pages we saw before, this is a simple and standard page for Microweber. As the name suggests it's for the SHOP part of the site and it's purpose is to view the main content. REMEMBER that this is for the main part. If you want to create a view for a single product for example, we can do it like this
Note: In order to create a single-view product that is connected to the main part it has to be called something like "theNameOfThePage_inner.php". The "_inner" part is helping Microweber to transfer all the data that it needs and display the right information within the field you told it to.
If you want to add a page inside a page, you can do it like that
##blog.php
Creating a view for the blog is no different than creating a shop layout
And the inner page for the blog will be:
##Creating other layouts
There are a lot of ways of creating a layout. You can put a plain HTML code inside, you can use modules, predefined layouts or all the mentioned together. It's up to you. Make sure to check all the files inside the zip file for more information.
#Module skins
You don't like the current skin? Well in Microweber nothing is permanent. Here is how to change a module's skin.
In your template's folder create a folder called "modules". Now, for every module, that you want to edit, you create a separate folder. Let's say we want to create new skin for the menu module. We create a folder called "menu" inside our "modules" folder and then we create another folder called "templates" inside "menu". Inside, we add a new php file- let's call it navbar.php. The choice of name is up to you. Inside we put
If you do not specify skin's name, Microweber will look for a file called default.php!
And this is it. If you want to hard-code the template, in the module declaration you have to write
Or you can choose it from the Live Edit mode by clicking on the name you put in the commented section above. And that's it!
For references you can go in \userfiles\modules and check out all the modules you have access to with all there skins inside. If you want to create new skins for them, you repeat the same steps for the new module.
Last updated
Was this helpful?