Change Website Design via Admin Panel

In modern web applications, providing an admin panel that allows administrators to customize the website’s design is essential for maintaining a fresh and engaging user experience. This functionality can be achieved by allowing the admin to select different themes or styles directly from the admin interface. In this post, we will explore a simple implementation in PHP 8 that enables an admin to change the website design dynamically.

<?php
session_start();

// Sample themes array
$themes = [
    'default' => 'Default Theme',
    'dark' => 'Dark Theme',
    'light' => 'Light Theme',
];

// Check if a theme is set
if (isset($_POST['theme'])) {
    $_SESSION['theme'] = $_POST['theme'];
}

// Get the current theme
$currentTheme = $_SESSION['theme'] ?? 'default';

// Function to load the selected theme
function loadTheme($theme) {
    switch ($theme) {
        case 'dark':
            echo '<link rel="stylesheet" href="styles/dark.css">';
            break;
        case 'light':
            echo '<link rel="stylesheet" href="styles/light.css">';
            break;
        default:
            echo '<link rel="stylesheet" href="styles/default.css">';
            break;
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - Change Theme</title>
    <?php loadTheme($currentTheme); ?>
</head>
<body>
    <h1>Admin Panel</h1>
    <form method="POST">
        <label for="theme">Select Theme:</label>
        <select name="theme" id="theme">
            <?php foreach ($themes as $key => $value): ?>
                <option value="<?= $key ?>" <?= $key === $currentTheme ? 'selected' : '' ?>><?= $value ?></option>
            <?php endforeach; ?>
        </select>
        <button type="submit">Change Theme</button>
    </form>
</body>
</html>

The provided PHP code snippet demonstrates a simple implementation of an admin panel that allows the administrator to change the website’s design by selecting a theme from a dropdown menu.

  1. Session Management: The code begins by starting a session using session_start(). This is crucial for storing the selected theme across different page loads.
  2. Themes Array: An associative array named $themes is defined, containing the available themes. Each theme has a key (used for identification) and a value (used for display).
  3. Theme Selection Handling: The code checks if a theme has been submitted via a POST request. If so, it updates the session variable $_SESSION['theme'] with the selected theme.
  4. Current Theme Retrieval: The current theme is retrieved from the session. If no theme is set, it defaults to ‘default’.
  5. Theme Loading Function: The loadTheme function is responsible for including the appropriate CSS file based on the selected theme. It uses a switch statement to determine which stylesheet to load.
  6. HTML Structure: The HTML structure includes a form with a dropdown menu populated with the available themes. The selected theme is marked as ‘selected’ in the dropdown for user convenience.
  7. Dynamic Stylesheet Linking: The selected theme’s stylesheet is linked in the <head> section of the HTML document, ensuring that the design changes are reflected immediately upon selection.

This implementation provides a straightforward way for administrators to customize the website’s appearance, enhancing user engagement and satisfaction.

Happy coding… 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *