Example: My second theme

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.

1. 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/

2. 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": "2018-09-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."
    }
}

3. 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>

4. 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>

5. 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>

6. 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>

7. 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>

8. 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>

9. 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>

Download

Download the source code of the theme Mars.

Collaborate with us and edit this page