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.
- Session Management: The code begins by starting a session using
session_start()
. This is crucial for storing the selected theme across different page loads. - 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). - 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. - Current Theme Retrieval: The current theme is retrieved from the session. If no theme is set, it defaults to ‘default’.
- 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. - 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.
- 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… 🙂
I’ve been designing web applications—on and off—since 2001, back when animated GIFs were all the rage and ‘responsive design’ meant answering your client’s emails. Over the past 14 years, I’ve kept pace with the ever-evolving trends in PHP development, successfully delivering a variety of projects that made my clients happy (and kept me caffeinated).
This website serves as my soapbox—a place to share the insights I’ve picked up along the way with anyone curious enough to dive in. Welcome aboard!
Need some custom work done? Or, just want to reach out? Email: dan@danoriordan.com