Navbar

Header

In order to easily maintain our website we can split it into more functional files. That will help us to create more complex structures in future. Let's start with the Navbar (i.e. the top navigation part).

1. Create a new folder called components
2. Place an empty file called navbar.inc.php inside it
3. Cut the navbar code part (as shown below) from index.php:

        <!-- Navbar -->
        <nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
            <div class="container">

                <!-- Brand -->
                <a class="navbar-brand pt-0 waves-effect" href="">
                    <img src="https://mdbootstrap.com/img/logo/mdb-noshadow-38px" alt="MDB logo">
                </a>

                <!-- Collapse -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Links -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">

                    <!-- Left -->
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link waves-effect" href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">Categories </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="">Marketing Automation</a>
                                <a class="dropdown-item" href="">Web Push Notifications</a>
                                <a class="dropdown-item" href="">Analytics & Tag Manager</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link waves-effect" href="https://mdbootstrap.com/docs/b4/jquery/getting-started/download/" target="_blank">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link waves-effect" href="https://mdbootstrap.com/education/bootstrap/" target="_blank">Link</a>
                        </li>
                    </ul>

                    <!-- Right -->
                    <ul class="navbar-nav nav-flex-icons">
                        <li class="nav-item">
                            <a href="https://www.facebook.com/mdbootstrap" class="nav-link waves-effect" target="_blank">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="https://twitter.com/MDBootstrap" class="nav-link waves-effect" target="_blank">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="https://github.com/mdbootstrap/mdb-ui-kit" class="nav-link border border-light rounded waves-effect"
                                target="_blank">
                                <i class="fa fa-github mr-2"></i>MDB GitHub
                            </a>
                        </li>
                    </ul>

                </div>

            </div>
        </nav>
        <!-- Navbar -->

4. Paste it inside your new file components/navbar.inc.php
5. Add following line into index.php placing it after the get_header() function

require_once('components/navbar.inc.php');

6. Refresh your website.

Nothing changed? That's perfect! Although we haven't changed the look of our website, we've just made the first step in making our website dynamic. In nthe following lessons you will learn how to create different pages like a single post page, a category page or a search result page. If we did not extract the navbar code to separate file we would have to keep a copy of exactly the same code in multiple places. This is very, very bad and it's against one of the main IT rule - reusability.

Reusability is the reuse of existing code and assets. It's very important to write your code in a way that it can be used in different places. Exactly as we just did with our navbar. Now we can easily add the navbar to different pages (using the function require_once();. If we change anything in the navbar (i.e. add a new link, or change a hyperlink) we will only have to do it once in navbar.inc.php file and the change will be automatically reflected in every page that uses it.

Now our navbar is a separate file, you can have a look at MDB Dropdowns, Icons and other components from the documentation and adjust them to your needs. In future lessons we will write a function which will automatically create a navbar from the WordPress admin panel.

Note

It's good practice to give files, which are included inside another file an .inc.php extension. This will inform other developers that this file isn't a standalone file but in fact a subpart that is used in other files. Some people tend to use only an .inc extension, however that can be dangerous. The reason is that when a customer tries to open a .php file server renders it first and shows only the output. In case of .inc files, the server will show the source code of the file.

Let's move onto the next lesson where we will learn how to display new posts automatically.