Php includes

Wappler General Need Help
2

You could use custom elements instead.

As an example, here I have created a custom element called <my-header>

web-components.js

class Header extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = `
      <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    `
  }
}

window.customElements.define('my-header', Header)

This component is used in index.html as follows

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <!-- Custom Header-Navigation Element -->
    <my-header></my-header>

    <main>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>Hello, world!</h1>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="js/web-components.js"></script>
</body>

</html>

image
image1002×115 5 KB

For the creation of a custom element, all that is required is to place the html code as a template inside the following construction. Notice the backticks.

class ELEMENT extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = `

      HTML CODE GOES HERE

    `
  }
}

window.customElements.define('CUSTOM-ELEMENT', ELEMENT)

Change the capitalized words to suit, making sure that the used element is hyphenated.

In the same JavaScript document, you can place as many custom elements as you wish, requiring just the one JS link for each page.

The great part: there is no need for a PHP extension if no other PHP code is used in the document.

Edit: I have created a short tutorial (if needed).

2 Likes