Dynamic Page Title and other PHP magic tricks.

Everything related to the visual and coding aspects of websites.
nyxmidnight
Communications Staffer
Posts: 1078
Joined: Sat Oct 13, 2012 7:55 pm
Location: Canada
Contact:

Dynamic Page Title and other PHP magic tricks.

Post by nyxmidnight »

Lately I have learned how to make dynamic page titles as well as how to highlight the current page in the menu and how to make things load conditionally, all this in PHP.

For the sake of this tutorial, I will assume you know how to use includes for headers and footers.

Let's say you have this very simple site:

index.php

Code: Select all

      <div class="starter-template">
        <h1>HEADER 1</h1>
        <p class="lead">CONTENT GOES HERE</p>
      </div>
Your includes are:

header.php

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TITLE GOES HERE</title>
    <link href="style.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li ><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">
footer.php

Code: Select all

</div><!-- /.container -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body>
</html>
FIRST STEP
In index.php, we will define a title and a name for the page. They can be whatever you want, but we will call upon $current_page elsewhere, so make sure it's specific enough!

Code: Select all

<?php
  //Set values for page
  $page_title = "My Awesome Shrine";
  $current_page = "index";

  //Load header
  include_once('includes/header.php');
?>
      <div class="starter-template">
        <h1>HEADER 1</h1>
        <p class="lead">CONTENT GOES HERE</p>
      </div>
SECOND STEP
We will call our custom title in the header, and add conditional statements to our navigation to add class="active" to the current page.

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php echo $page_title; ?></title>
    <link href="style.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="<?php if ($current_page == "index") { ?> active<?php } ?>"><a href="home.php">Home</a></li>
            <li class="<?php if ($current_page == "about") { ?> active<?php } ?>"><a href="about.php">About</a></li>
            <li class="<?php if ($current_page == "contact") { ?> active<?php } ?>"><a href="contact.php">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">
And there you have it!

Conditional Loading
The same basic idea applies! So let's say on the contact page, you wish to load a contact.min.js file.

footer.php

Code: Select all

</div><!-- /.container -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<?php
  if ($current_page == 'contact') {
    echo '<script src="js/contact.min.js"></script>';
  } else { 
    echo ' ';
  }
?>
  </body>
</html>
With the else{}, you could also load one file for the whole site except on the page whose $current_page variable is set to 'contact', where you load a contact script.

So there you go! Have fun and make beautiful dynamic shrines with highlighting menus and conditionally loading scripts!
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by Robin »

OH WOW

MY BRAIN ASPLODE WITH CODE

xD all kidding aside, Nyx, this is a wonderful tutorial!! :D Thank you!
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by dubiousdisc »

Thank you very much for this. :) Brilliant.

(Hmm, I was wondering if the same principle could be applied to the page title, as in, the <title> tag of the header. Any idea as to that?)

I also wonder if this maybe shouldn't be in the Coding and Scripts subforum. Hmm?
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by Mikari »

I've done conditional loading before for the back link (so that it appears everywhere except the main page.) But the code was a switch instead of if. There's so many different ways to do things with php, it's nice to see different codes and experiment. Thanks for sharing!
nyxmidnight
Communications Staffer
Posts: 1078
Joined: Sat Oct 13, 2012 7:55 pm
Location: Canada
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by nyxmidnight »

Thank you all!

@DD you probably could write something to set the page title automatically depending on the page! I do wonder on a big site if it wouldn't become huge and disorganized, though.
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by Mikari »

DD: Not sure how I missed your post before, but now that I've seen it, I second Nyx in that it can be done. I'm more familiar with the echoing variables approach, so something like <?php echo $variable; ?> between the title tags with each page having this <?php $variable="page"; ?> though I think you'd have to assign the value before you call it so <?php $variable="page"; ?> would go above the header include.

Another trick I like is to have 2 header includes, so that I can link external JS or CSS files on a specific page, while using the same header with the externals between the two includes. (The top one would have meta tags, general css, etc. and the bottom one would have layout codes, the navigation, and the rest of the header.) Also a multi-line echo with a switch case might also be useful for some similar dynamic tricks.
Sarah
Time Traveler
Posts: 1278
Joined: Mon Jun 25, 2012 11:18 am
Location: Ohio, USA
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by Sarah »

This is very cool! Thanks for sharing, nyx. :D

(And I hope you don't mind, but I moved this to Codings and Scripts, as dubs and I both had the same idea.)
If you're interested in time travel, meet me last Thursday.
nyxmidnight
Communications Staffer
Posts: 1078
Joined: Sat Oct 13, 2012 7:55 pm
Location: Canada
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by nyxmidnight »

No problem!
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
Masao
Host
Posts: 579
Joined: Thu Jun 16, 2011 12:29 am
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by Masao »

Hey, hope you don't mind me jumping on this, but I wrote a tutorial that also covers this, but removes the need to manually set the current page in a variable.

http://blog.aurenen.org/2015/11/php-dyn ... age-title/
THE FATE OF DESTRUCTION IS ALSO THE JOY OF REBIRTH.
nyxmidnight
Communications Staffer
Posts: 1078
Joined: Sat Oct 13, 2012 7:55 pm
Location: Canada
Contact:

Re: Dynamic Page Title and other PHP magic tricks.

Post by nyxmidnight »

I don't mind at all! Thank you so much, Masao!
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
Post Reply