Tag: Theme in Laravel

In this article, I will show you how to make a theme in Laravel.

Step1: Installation>

First install the fresh Laravel project. Run composer command in your terminal:
“composer create-project –prefer-dist laravel/laravel MyTheme”
Next, after install the project, run larval-themes command like this: This will install the theme directory in you public directory.
composer require “facuz/laravel-themes”

Step2: Theme Configuration

After installation, open config/app.php file and register the service provider with the application.
Add service provider at provider array:
Register the facades in the aliases key of your config/app.php file:
Run command: publish –provider=“Facuz\Theme\ThemeServiceProvider”. This will publish the configuration.
This will create a global config file at config/theme.php.
And also add the theme “APP_THEME=themename” at .env file that we are going to use:

Step3: Create new Theme

Run the artisan command for creating theme: php artisan theme:create default
This command will create theme “default” structure under the public folder like this:

Step4: Basic Usage of Theme

In this step, I will show you basic usage of theme, how we can use and create the theme.
First we will add css and js file in our theme asset directory. You can download bootstrap from https://getbootstrap.com/ site. After downloading the bootstrap file, copy the css and js folder and paste it into public/themes/default/assets directory and as well as add the jquery file under js folder.
Configuration of assets:
After adding the file under assets directory, open public/themes/default/config.php file and add assets on the asset method of the config file. The config file is convenient for setting up basic CSS/JS, partial composer, breadcrumb template and also metas.

Step5: Display view from the controller

First we need to create a controller, run the artisan command php artisan make:controller HomeController.
Next, open the controller “app/Http/Controller/HomeController.php” file, add data or define the theme:
Next, we need to create a view file under resources/views/home/index.blade.php. In this view, I have added basic data for viewing your default structure. You can create your own view according to you.
Define routes for calling the view from the controller. Open routes/web.php and define routes.
Browse the URL: 127.0.0.1:8000/theme you will get simple output like this:
In this output, you can see that there is no header and footer structure define. So you can define your own header and footer in your themes directory and as well as you can add files according to your themes requirements.
For example: In this example, I have structure our header and footer under public/themes/partials directory:
public/themes/partials/header.blade.php
public/themes/partials/footer.blade.php
Navigate URL: 127.0.0.1:8000/theme in your browser, and you will get output like this:
So, you can create your own theme by adding different files and customizes your theme according to you.

Note: you can get more information about this theme package:
Visit this link: https://packagist.org/packages/facuz/laravel-themes

Theme Cheatsheet

Commands:

Blade Directives: