Create Your Own Templates

What is a template?

A template can have mainly styles related to your website. Sometimes, it includes JavaScripts that support special functions/events. Also it can have fonts, images and other assets that improve the look and feel of your website.

In most cases, web designers put their styles inside a CSS file. RND Framework also uses a main CSS file named “style.css” inside the template folder to achieve this.

SPECIAL: Many designers can create their own templates and sell to RND customers to make extra money.

Steps to add a new template

If you already have a template, just follow this guideline to install it on your website. But please note that some templates can have their own page layouts that you may have to manually link with your pages.

1. RND Framework stores templates inside "rnd-content/templates" path. Just put your template folder there.
2. Open "settings.json" file in "rnd-content" folder using a code editor.
3. Find "site_template_name": "template-name" line inside the code.
4. Just replace template-name with your new template name (folder name of new template).
5. Reload the website once. That's it!

Please note that your template folder can have many templates. But RND Engine will only load the template that you have configured in settings.json file.

---

Creating your first template

1. Go to "rnd-content/templates" path.
2. Create a folder named "my-first-template".
3. Inside "my-first-template" folder, create "style.css" file as shown below.

rnd-content/templates/my-first-template/style.css

/*
Theme Name: My First Template
Theme URI: 
Author: Your Name
Author URI: https://www.your-website.com
Description: This is my first template in RND Framework
Version: 1.0.0
License: My License Name
License URI: http://www.your-website.com/my-license.html
Tags: my template
Text Domain: your-website

Whatever styles you add here will universally affect your site.
Do not need to minify them. Framework will do it.
*/  

Just fill this CSS file with your styles and they will affect all pages you create inside your website. Actually, this "style.css" is the universal stylesheet of your website.

Adding JavaScripts to the template (optional)

It is so easy! Inside "my-first-template" folder, create "script.js" file as shown below.

rnd-content/templates/my-first-template/script.js

// Whatever JavaScript you add here will universally affect your site. 

Doing advanced functions using hooks (optional)

RND hooks will help you to build an advanced template with its actions & filters. Many modern templates are based on this technique and here you can see how it works.

Before everything, create "functions.php" PHP file inside "my-first-template".

rnd-content/templates/my-first-template/functions.php

// We will write PHP codes here using RND hooks and constants. 

After creating your template, open “settings.json” and link your template with RND Framework. Scroll up and read “Steps to add a new template” section for more details.

Just scroll down to learn how to write PHP codes in the ‘functions.php” file.

---

How to program your template?

The “functions.php” file is the core file that keeps all instructions & commands that you assign for the template. You have to use our Hooks & Constants with PHP programming to achieve this. Please read RND Hooks & Constants (Click Here) section before you start your template programming.

In this section, we will explain to you how to add/modify elements in your final HTML page. Only thing you need is understanding areas of your web page such as header, footer, content, side menu, etc.

Erase default template that used by RND Engine

RND Engine includes a default template that renders your content. In some projects, we will have to prevent it forcefully. Following functions will do it easily.

functions.php

    clean_header(); // Removing default header
    clean_content(); // Removing default content
    clean_footer(); // Removing default footer 

Adding items to the page’s head area.

The following code shows how to add some meta data to the page head, using add_filter() function. You can link external stylesheets, javascripts and font files here also.

functions.php

    
    function bind_simple_head($items) {

        $str = ''; 

        $str .= '<meta http-equiv="X-UA-Compatible" content="IE=edge">';
        $str .= '<meta charset="utf-8">';
        $str .= '<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">';    

        return $items.$str;
    }
    add_filter('page_head', 'bind_simple_head'); 

Adding a class to the page body

Sometimes, you will have to add new classes to the page body. This code will show how to do it.

functions.php

    function bind_simple_body_class($items) {

        $str = ''; 
        
        if( is_home() ){
           $str .= 'my-home-page-class';  
        }
        
        return $items.$str;
    }
    add_filter('body_class', 'bind_simple_body_class'); 

Create a new header for the template

Sometimes, you will have to create dynamic headers for the pages. The following example shows how to achieve it using hooks.

functions.php

    clean_header(); // Removing default header
    
    function bind_simple_header($items) {

        $str = ''; 

        $str .= '<section id="header" class="' . ( is_home() ? 'home' : 'other') . '">';

        $str .= '<a href="'.APP_URL.'" class="logo">' . SITE_NAME . '</a>';
        $str .= '<nav id="nav">';
            $str .= '<ul>';
                $str .= get_filter('rnd_top_nav',"");
            $str .= '</ul>';
        $str .= '</nav>';
        $str .= '</section>';

        return $items.$str;
    }
    add_filter('simple_header', 'bind_simple_header'); 

In the above example, we use constants & hooks both to build a new header. You must use the clean_header() function first, otherwise RND Engine will render its default header on the page.

You know that ( is_home() ? 'home' : 'other') code logically change the page header class.

Also get_filter('rnd_top_nav',"") filter output the Top Menu items to the header.

Creating a new content body

Your template can have a different content structure. Here we explain how to redesign your content body using hooks.

functions.php

    function bind_simple_body($items) {

        $str = ''; 

        $str .= '<div id="wrapper">';
        $str .= get_filter('simple_header',"");
        $str .= '<section id="content">'.$items.'</section>';
        $str .= get_filter('simple_footer',"");
        $str .= '</div>';

        return $str;
    }
    add_filter('page_content', 'bind_simple_body'); 

However, here we do not erase the default content body. We just modify it and render it on the page.

In a previous example, we explained how to create a header. get_filter('simple_header',"") code will apply that header into the content body here.

get_filter('simple_footer',"") code will apply the footer that we have explained below.

Creating a new footer area

Let us explain how to create a new footer area in your template. This is totally similar to the header.

functions.php

    clean_footer(); // Removing default footer
    
    function bind_simple_footer($items) {

        $str = ''; 

        $str .= '<section id="footer">';
            $str .= '<ul class="footer-menu">';
                $str .= get_filter('rnd_footer_nav',"");
            $str .= '</ul>';
        $str .= '<p class="copyright"> © '.SITE_NAME.' '.date("Y").'.<br>'.SITE_TAG.'<br>Developed by <a href="https://www.dilantha.org/">Developer Dilantha</a> for <a href="https://www.rndvn.com">RND Innovations</a></p>';
        $str .= '</section>';

        return $items.$str;
    }
    add_filter('simple_footer', 'bind_simple_footer');

Do you see that get_filter('rnd_footer_nav',"") filter output the Footer Menu items to the footer?

Detecting active menu item and modifying it

Sometimes, we need to add a special class to the active menu item. The following example helps you to add your own class to the active menu item.

functions.php

    function bind_simple_top_nav_li_active($items) {

        $str = ''; 

        $str .= 'class="my-active-menu-class"'; // This add your class to the active menu item

        return $str;
    }
    add_filter('top_nav_li_active', 'bind_simple_top_nav_li_active'); 

---

Actions & Filters For The Top Navigation

We have defined the following actions/filters to work with the top navigation. These are just system defined hooks. You are free to create your own actions/filters to build a powerful template for RND Framework.