Laravel Custom Theme – Step-by-Step Guide (2025)

Developer Sahayak
Laravel Custom Theme – Step-by-Step Guide (2024)

Creating a custom theme in Laravel using Blade templating is easy. Follow this guide to design a well-structured theme for your Laravel project.

1. Install Laravel

If Laravel is not installed, run the following command:

composer create-project --prefer-dist laravel/laravel theming-app

2. Set Up Blade Layout

Create a layout file at resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <header>
        <h1>My Laravel Theme</h1>
    </header>
    @yield('content')
    <footer>
        <p>© 2024 Laravel Custom Theme</p>
    </footer>
</body>
</html>

3. Create a View File

Create resources/views/home.blade.php and extend the layout:

@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
    <h2>Welcome to Laravel Custom Theme</h2>
    <p>This is a sample custom theme for Laravel.</p>
@endsection

4. Add Routes

Modify routes/web.php to serve the theme:

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('home');
});

5. Add Custom CSS

Create a CSS file at public/css/style.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
header {
    background: #333;
    color: white;
    padding: 15px;
    text-align: center;
}
footer {
    text-align: center;
    padding: 10px;
    background: #333;
    color: white;
}

6. Run the Laravel Application

Start the Laravel server with:

php artisan serve

Now, open http://127.0.0.1:8000 in your browser to view your theme.

Conclusion

By following this guide, you have successfully created a custom theme in Laravel. You can now customize it further as per your requirements.

Visit Developer Sahayak

0 Comments