How To Make Custom Theme For Cmslooks

Cmslooks has a theme system to extend the CMS functionality with your customized Frontend. And you can build your own custom theme and use it in the project. And also you can sell the theme personally or through the marketplace.

If you want to create a new plugin, follow our folder structure.


Step By Step Guide:

1. Create a folder with the name of your theme. In lowercase and no spaces. Like: test-theme.

2. The new folder must contain a JSON file named "theme.json". Create the file and here you must have to put all the theme information.
    Here is what a demo-theme JSON looks like.

  {

      "name": "Test Theme",

      "location": "test-theme",

      "namespace": "Theme\\TestTheme\\",

      "version": "1.0",

      "author": "Themelooks",

      "url": "http://www.themelooks.com/",

      "description": "Test Theme for CMSLooks",

      "license" : false,

      "license_api": " "

  }

      * Name: Here the name field is the full name of the theme.

      * Location: Here the location will be the same as the theme folder name. It will be needed to check whether the theme is active or not.

      * Namespace: The Namespace for the Theme class file. You have to use the namespace for all the classes created in the theme folder. Like controllers, Models, repositories, or others.   

      * Version: The Version of the plugin.

      * Author: You can give the original Author's name here.

      * url: You can give a URL here.

      * Description: A description of the plugin.

      * License: You have to provide a boolean value, True or False. If True, then to activate the plugin a verify purchase key field will appear, If False then it will activate without any license key. (Optional)

      * License Api: If the License is true, then you can provide the API here to check the license verification. If the License is false then let the field just empty. (Optional)

      These fields are important for the theme to work.

3. routes. This is where all the route files should be available. api.php for the APIs and web.php for others.

    

4. src. Here are all the src files Like Http/Controller, Http/Request, Models, Repositories, Services, or Any Class File that should be situated. And remember all class files should have the Theme Namespace to work.

     

5. views: All the theme view files should be here. You can get the view file like this - "theme/your_plugin_location::rest_of_the_file_path". Example - "theme/test-theme::home" OR "theme/test-theme::page.index".

    Also if you want to show the theme related modules link in the admin sidebar you have to create a includes folder in views/backend. And a themeOptions.blade.php in the includes folder. In the themeOptions file, you can write the nav item.

6. config: If you want to have a config file for your theme-related data, you can create a config folder. And a config.php file. And to access the config file data - "config('plugin_location.data')". Example - config('test-theme.status.active') .This config folder is required to build a theme. And a menu location array must be there - 

 'menu_position' => [

      'Header Menu'

],

      

7. helpers (Optional): If you need a helper function for your theme, you can create a helpers folder and a helper.php file in the folder. All the functions in that folder will be autoloaded. You can follow the Core/helpers/helper file on how to write functions on this theme helper. But this is optional and not required for the theme.

8. banner.png: You need to have a banner.png file to showcase the theme image. preferred size 294 x 95 px.

This was the step-by-step guide with folder and file structure. A Test Theme is Provided With our Latest update. You can follow the theme struction to make your own customize theme or you can customize the Test Theme with your own functionality.

We have a Theme helper function in Core/Helpers. You can use those functions to develop your theme and avoid getting errors.
When you ready your Theme then for the next install, you can follow this post.