Change CSS on PHP Included header

Question

I want to use <?php include 'header.php';?> to include a header for every page of my website, so that I only need to change the header on one place. The website will reuse the header on more than 20 different pages in total. What I am wondering is how I can change the specific highlighted text when using php include?

I have created a website which has a header with 5 links (Home, Portfolio, About, Contact and Store). Currently I am using CSS code to show the user what part of the site they are on by highlighting the selected link (Page).

In the example below the Home "link" is highlighted in white. (See CSS code below.)

The following code is in the header:

<nav>
<ul>
    <li><a id="selected" href="index.html">Home</a></li>
    <span>|</span>
    <li><a href="portfolio.html">Portfolio</a></li>
    <span>|</span>
    <li><a href="about.html">About</a></li>
    <span>|</span>
    <li><a href="contact.html">Contact</a></li>
    <span>|</span>
    <li><a href="store.html">Store</a></li>
</ul>
</nav>

CSS Code:

/* Selected Link */
#selected {
color: white;
}

Do I require some code that detects parts of the website or can I manually manipulate the highlighted link in some easy way? What would be the best practice for this sort of thing. Thank you for any input.

score 3 · Answer 1 · edited Jul 23 '19 at 15:18

3

You can add $pageName variable to every page before including the header. For example on home :

$pageName = 'home';
<?php include 'header.php';?>

....

And inside header.php

<nav>
<ul>
    <li><a id="<?php echo $pageName == 'home' ? 'selected' : ''?>" href="index.html">Home</a></li>
    <span>|</span>
    <li><a href="portfolio.html">Portfolio</a></li>
    <span>|</span>
    <li><a href="about.html">About</a></li>
    <span>|</span>
    <li><a href="contact.html">Contact</a></li>
    <span>|</span>
    <li><a href="store.html">Store</a></li>
</ul>
</nav>

edited Jul 23 '19 at 15:18

Narek Zakarian

215
1
10

answered Jul 23 '19 at 14:31

Berkay

103
2
10

1

This might be exactly the thing I am looking for. But, let's say that I will add 20 other links in the future. That will mean that there will be a whole lot of unused variables as I will only set one "selected". Are there any other alternatives which would allow me to simulate a similar result without as many variables. or maybe even another method than php include? If you can't come up with a better method I will accept your answer. Thank you for all the help! :) – Elias Wick Jul 23 '19 at 14:37
1

You right. Maybe you can use current script name instead of declare a variable. You can get current script with `basename(__FILE__)` – Berkay Jul 23 '19 at 14:44
1

Thank you, that is very helpful! Have a great day! – Elias Wick Jul 23 '19 at 14:46

ni3solanki · Accepted Answer · 2019-07-23T14:52:28.913

this is work for you :

//PHP :

$curr_page = $_SERVER['REQUEST_URI']; // or basename(__FILE__)

//HTML :

<nav>
<ul style="background: #c02828;">
    <li><a <?php if (strpos($curr_page, "index.html") !== false){ ?>id="selected" <?php } ?> href="index.html">Home</a></li>
    <span>|</span>
    <li><a <?php if (strpos($curr_page, "portfolio.html") !== false){ ?>id="selected" <?php } ?> href="portfolio.html">Portfolio</a></li>
    <span>|</span>
    <li><a <?php if (strpos($curr_page, "about.html") !== false){ ?>id="selected" <?php } ?> href="about.html">About</a></li>
    <span>|</span>
    <li><a <?php if (strpos($curr_page, "contact.html") !== false){ ?>id="selected" <?php } ?> href="contact.html">Contact</a></li>
    <span>|</span>
    <li><a <?php if (strpos($curr_page, "store.html") !== false){ ?>id="selected" <?php } ?> href="store.html">Store</a></li>
</ul>
</nav>

What is the difference of `($_SERVER['PHP_SELF'] ==` and your `$_SERVER['REQUEST_URI'];` — Elias Wick, Jul 23 '19 at 14:52
Please reffer this link to know detail : https://stackoverflow.com/questions/16980343/whats-the-difference-between-php-self-script-name-and-request-uri-in-php — ni3solanki, Jul 23 '19 at 14:59

Change CSS on PHP Included header

2 Answers2