PHP: Theme Choosing

1 post Page 1 of 1
Contributors
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

PHP: Theme Choosing
smashapps
Hello everyone,

I haven't seen many good tutorials on this so I thought I'd try and cover it. There are a few aspects to this, setting and retrieving cookies, this will be what tells us what theme to display to the user. By theme I mean what colour our website will be. We are using different style sheets for this.

I am using bootstrap so the navbar's styling will come from a custom stylesheet. I'll provide everything in this tutorial as a download.

We need to set the cookie when the user goes on the website, and then load our stylesheet. We need a way to change our stylesheet also.

Our first stylesheet will be default, we don't need a stylesheet for this, we just won't use a custom stylesheet for the website.

I used this website to set the styles for the navbar

We have two stylesheets, red.css and blue.css

We are also using two files.

index.php:
Code: Select all
<?php
if (isset($_COOKIE["theme"])) {
  //Our cookie is set already
  $theme = $_COOKIE["theme"];
}else{
  setcookie("theme", "default", time()+2419200);
  $theme = "default";
  }
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Theme Chooser</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css" media="screen">
    <link rel="stylesheet" href="css/bootswatch.min.css">
	<?php
	if($theme=="default")
		{
		//theme is default, do nothing
		} else {
			echo "<link rel=\"stylesheet\" href=\"css/" . $theme . ".css\">";
		}
	?>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../bower_components/html5shiv/dist/html5shiv.js"></script>
      <script src="../bower_components/respond/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Theme Chooser</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">
            <li><a href="#">Something</a></li>
			<li><a href="#">Something Else</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
		<div class="row">
			<div class="col-lg-6">
				<form class="form-horizontal" method="post" action="change_theme.php">
					<fieldset>
						<legend>Choose your theme</legend>
						<div class="form-group">
							<label for="inputTheme" class="col-lg-2 control-label">Theme</label>
							<div class="col-lg-10">
								<select name="inputTheme">
									<option value="default">Default</option>
									<option value="blue">Blue</option>
									<option value="red">Red</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-lg-10 col-lg-offset-2">
								<button type="submit" class="btn btn-primary">Submit</button>
							</div>
						</div>
					</fieldset>
				</form>
			</div>  
		</div>

    </div>


    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootswatch.js"></script>
  </body>
</html>

Before any of our html code we are checking if our theme cookie is set, if it is then we store it in a variable, if its not then we set a new cookie called default. In our <head> section we them the value of our variable theme, if it is "default" we don't do anything, if it has a different value (red or blue) then we use a stylesheet.
In our index.php file we also have an html form to choose what theme we want to use. Our form posts the theme to change_theme.php.

Change_theme.php:
Code: Select all
<?php
$selectedTheme = $_POST['inputTheme']; //Grab our chosen theme
setcookie("theme", $selectedTheme, time()+2419200); //Store our chosen theme
echo "<a href=\"index.php\">Go back</a>";
echo "</br>Chosen theme was: $selectedTheme";
?>
Here we just update our cookie. Going back to index.php should display the new menu.

Default theme:

Image

Red theme:

Image

Everything is included in the zip file I've attached to this thread. I hope you liked my tutorial.
Thanks
You do not have the required permissions to view the files attached to this post.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
1 post Page 1 of 1
Return to “Tutorials”