Example: My second theme
Contents
This is the second example about how to create from scratch a theme for Bludit, including CSS, Javascript and support for plugins.
The next theme is called Mars
.
If you are not interested in the tutorial you can download the source code of the Theme Mars.
Folder structure
Create the folder for the theme inside the folder /bl-themes/
, you will get /bl-themes/mars/
.
Next, create the languages, css and js folders:
- Create the folder
languages
inside the folder/bl-themes/mars/
- Create the folder
css
inside the folder/bl-themes/mars/
- Create the folder
js
inside the folder/bl-themes/mars/
/bl-themes/mars/
css/
js/
language/
Name and information
Create a file with the theme information. The file will be in the root theme folder, file metadata.json
, with the next JSON code:
{
"author": "Bludit",
"email": "",
"website": "",
"version": "1.0",
"releaseDate": "2019-01-01",
"license": "MIT",
"compatible": "3.0",
"notes": ""
}
Create another file with the name and description of the theme; create a file called en.json
inside the folder /bl-themes/mars/languages/
, with the next JSON code:
{
"theme-data":
{
"name": "Mars",
"description": "This is my second theme for Bludit."
}
}
Index.php
Let's work on the file index.php
, create the file inside the folder /bl-themes/mars/
, with the next HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
CSS files
Add some CSS files:
- Using the Helper object
Theme::css()
- or using the HTML tag
<link href="..." rel="stylesheet" type="text/css" />
In this case we are going to use the Helper to add the CSS file /bl-themes/mars/css/style.css
. With the Helper you don't need to specify the absolute path.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS -->
<?php echo Theme::css('css/style.css') ?>
</head>
<body>
</body>
</html>
Javascript files
Add some Javascript files:
- Using the Helper object
Theme::js()
- or using the HTML tag
<script>...</script>
In this case we are going to use the Helper to add the Javascript file /bl-themes/mars/js/mars.js
. With the Helper you don't need to specify the absolute path.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS -->
<?php echo Theme::css('css/style.css') ?>
<!-- Javascript -->
<?php echo Theme::js('js/mars.js') ?>
</head>
<body>
</body>
</html>
Add Plugin Support
Add support for plugins, you can use the helper Theme::plugins()
.
The plugin hooks for the site are:
siteHead
, contains all the plugins which returns code for inside the<head>...</head>
siteBodyBegin
, contains all the plugins which returns code for inside the<body>...</body>
at the beginning, could be some welcome banner, or some tool bar for the top.siteBodyEnd
, contains all the plugins which returns code for inside the<body>...</body>
at the bottom, such as javascript code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS -->
<?php echo Theme::css('css/style.css') ?>
<!-- Javascript -->
<?php echo Theme::js('js/mars.js') ?>
<!-- Load plugins with the hook siteHead -->
<?php Theme::plugins('siteHead') ?>
</head>
<body>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyBegin') ?>
<!-- Here all the rest of HTML code -->
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyEnd') ?>
</body>
</html>
Site title and slogan
You can use the Site-Object to get the title and slogan.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS -->
<?php echo Theme::css('css/style.css') ?>
<!-- Javascript -->
<?php echo Theme::js('js/mars.js') ?>
<!-- Load plugins with the hook siteHead -->
<?php Theme::plugins('siteHead') ?>
</head>
<body>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyBegin') ?>
<h1><?php echo $site->title() ?></h1>
<h2><?php echo $site->slogan() ?></h2>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyEnd') ?>
</body>
</html>
Where Am I
Now let's work with the content of the site.
To locate what page the user is browsing on the site you can use the variable $WHERE_AM_I
. For example, if the user is watching a page the value of the variable has the string page
, and if the user is watching the front page (home page) the value of the variable is going to be home
.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS -->
<?php echo Theme::css('css/style.css') ?>
<!-- Javascript -->
<?php echo Theme::js('js/mars.js') ?>
<!-- Load plugins with the hook siteHead -->
<?php Theme::plugins('siteHead') ?>
</head>
<body>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyBegin') ?>
<h1><?php echo $site->title() ?></h1>
<h2><?php echo $site->slogan() ?></h2>
<?php if ($WHERE_AM_I=='page'): ?>
<p>The user is watching a particular page</p>
<?php elseif ($WHERE_AM_I=='home'): ?>
<p>The user is watching the homepage</p>
<?php endif ?>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyEnd') ?>
</body>
</html>
Main Content
If the user is in the home page, Bludit generates a global array $pages
with all the published pages, each page is a Page Object
.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS -->
<?php echo Theme::css('css/style.css') ?>
<!-- Javascript -->
<?php echo Theme::js('js/mars.js') ?>
<!-- Load plugins with the hook siteHead -->
<?php Theme::plugins('siteHead') ?>
</head>
<body>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyBegin') ?>
<h1><?php echo $site->title() ?></h1>
<h2><?php echo $site->slogan() ?></h2>
<?php if ($WHERE_AM_I=='page'): ?>
<p>The user is watching a particular page</p>
<?php elseif ($WHERE_AM_I=='home'): ?>
<?php foreach ($content as $page): ?>
<h3><?php echo $page->title(); ?></h3>
<?php endforeach ?>
<?php endif ?>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyEnd') ?>
</body>
</html>
If the user is watching a particular page, Bludit generates a global Page-Object $page
, in this example, we are going to print the title and the content.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS -->
<?php echo Theme::css('css/style.css') ?>
<!-- Javascript -->
<?php echo Theme::js('js/mars.js') ?>
<!-- Load plugins with the hook siteHead -->
<?php Theme::plugins('siteHead') ?>
</head>
<body>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyBegin') ?>
<h1><?php echo $site->title() ?></h1>
<h2><?php echo $site->slogan() ?></h2>
<?php if ($WHERE_AM_I=='page'): ?>
<h3><?php echo $page->title(); ?></h3>
<?php elseif ($WHERE_AM_I=='home'): ?>
<?php foreach ($pages as $page): ?>
<h3><?php echo $page->title(); ?></h3>
<?php endforeach ?>
<?php endif ?>
<!-- Load plugins with the hook siteBodyBegin -->
<?php Theme::plugins('siteBodyEnd') ?>
</body>
</html>