Amassment Message Board

Posted: **Sun Jun 28, 2015 3:19 pm**

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!

Posted: **Sun Jun 28, 2015 8:49 pm**

OH WOW

MY BRAIN ASPLODE WITH CODE

xD all kidding aside, Nyx, this is a wonderful tutorial!! :D Thank you!

Posted: **Mon Jun 29, 2015 8:17 am**

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?

Posted: **Mon Jun 29, 2015 12:41 pm**

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!

Posted: **Mon Jun 29, 2015 12:54 pm**

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.

Posted: **Mon Jun 29, 2015 1:20 pm**

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.

Posted: **Wed Jul 01, 2015 9:25 am**

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.)

Posted: **Wed Jul 01, 2015 10:23 am**

No problem!

Posted: **Wed Nov 04, 2015 2:18 am**

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/

Posted: **Wed Nov 04, 2015 9:38 am**

I don't mind at all! Thank you so much, Masao!

Amassment Message Board

Dynamic Page Title and other PHP magic tricks.

Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.

Re: Dynamic Page Title and other PHP magic tricks.