Conversion

There are 2 ways to convert your HTML theme into Pulse Template.

  • 1. Replace existing template with the new template.
  • 2. Leave the existing temaplte and create a new one.

Note: I would suggest to follow the second one. In this way, your files will never be replaced whenever you update Pulse. And you will be able to use the default theme whenever you want.

01

Go to Pulse installation directory and open the folder 'template'. Create a new folder (example: some-name) for the new theme and put your template files there.

02

Rename your index.html to layout.php

03

Open the file layout.php in a code editor. For example. This is your basic layout

                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                        <title>Document</title>

                        <link href="css/style.css" rel="stylesheet">
                    </head>
                    <body>
                        
                    </body>
                    </html>

04

4.1

Now replace <html lang="en"> with

                    <html lang="<?php echo \pulsecore\language_to_iso(\pulsecore\get_context()->theme->language->render()); ?>">

4.2

Replace <title>Document</title> with

                    <title><?php echo $page_title; ?></title>

4.3

Under the <title> tag add the following code

This code will render meta informations like content/keywords.

                    <?php echo \pulsecore\get_context()->theme->meta->render(); ?>

4.4

Put those codes before the header closing tag.

                    {{theme_css}}
                    {{theme_js}}

4.5

Replace <body> with the following code. This will render body classes.

                    <body <?php echo \pulsecore\get_context()->theme->body_tag->render(array('')); ?>>

4.6

After the opening body tag, add the following code. And this will show the admin menu on the site when you are logged in.

                    {{navigation_logged_in}}

4.7

Before the end of the body tag put the following code.

                    <?php $http_referrer = (empty($_SERVER['HTTP_REFERER']) ? 'none' : $_SERVER['HTTP_REFERER']); ?>
                    <script src="<?php echo $path; ?>/<?php echo $admin; ?>/inc/tracker.php?uri=<?php echo \urlencode($_SERVER['REQUEST_URI']); ?>&ref=<?php echo \urlencode($http_referrer); ?>"></script>
                
                    {{theme_js_body}}

4.8

Now, whereever you have external files (ex: css/js/img) called, you have to set the correct path to make them working properly.

For example, if you have a css file named style.css in '/template/your-template/css/' you need to set it's correct path like the code bellow.

                    <link href="<?php echo $path; ?>/template/your-template/css/style.css" rel="stylesheet">

4.9

Before style.css you need to call pulsecore.css. And this will add the general styles you need. Just add the following code before your style.css

                    <link href="<?php echo $path; ?>/pulsecore/asset/css/pulsecore.css" rel="stylesheet">

4.10

To pull the content from the admin panel add the following code in between the body tags.

Make sure to add the classes inner and group in the wrapping element. They will enable front-end block editing of the content.

                    <main class="inner group">
                        <!-- Main Content -->
                        <?php echo (isset($parsedown) ? $parsedown->text($content) : $content); ?>
                    </main>

05

Now your basic template should look like the following:

                    <!DOCTYPE html>
                    <html lang="<?php echo \pulsecore\language_to_iso(\pulsecore\wedge\config\get_json_configs()->json->language); ?>">
                    <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                        
                        <title><?php echo $page_title; ?></title>
                        
                        <?php echo \pulsecore\get_context()->theme->meta->render(); ?>

                        <!-- Other CSS files -->

                        <link href="<?php echo $path; ?>/pulsecore/asset/css/pulsecore.css" rel="stylesheet">
                        <link href="<?php echo $path; ?>/template/your-template/css/style.css" rel="stylesheet">

                        {{theme_css}}
                        {{theme_js}}
                    </head>

                    <body <?php echo \pulsecore\get_context()->theme->body_tag->render(array('')); ?>>

                        {{navigation_logged_in}}

                        <main class="inner group">
                            <!-- Main Content -->
                            <?php echo (isset($parsedown) ? $parsedown->text($content) : $content); ?>
                        </main>

                        <!-- Stats Tracking Code -->
                        <?php $http_referrer = (empty($_SERVER['HTTP_REFERER']) ? 'none' : $_SERVER['HTTP_REFERER']); ?>
                        <script src="<?php echo $path; ?>/<?php echo $admin; ?>/inc/tracker.php?uri=<?php echo \urlencode($_SERVER['REQUEST_URI']); ?>&ref=<?php echo \urlencode($http_referrer); ?>"></script>

                        {{theme_js_body}}

                    </body>
                    </html>

06

Now activate your new template form the Pulse admin panel.

  • From top-right user menu, select settings.
  • Select last tab named "Extend"
  • Select your theme from the dropdown menu.
  • Hit "Save" in the bottom.

FAQ

                                    {{ block:"block-name" }}
                                
                                    {{navigation}}
                                
                                    {{email-list}}

Support

If you face any problem, post on our forum.