Navbar

Author: Dawid Adach

-

Header

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

  1. Create new folder called components
  2. Place an empty file called navbar.inc.php. inside
  3. Cut the navbar code part from index.php:
  4. 
            <!-- 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/getting-started/" target="_blank">Link</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link waves-effect" href="https://mdbootstrap.com/bootstrap-tutorial/" 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="fa fa-facebook"></i>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="https://twitter.com/MDBootstrap" class="nav-link waves-effect" target="_blank">
                                    <i class="fa fa-twitter"></i>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="https://github.com/mdbootstrap/bootstrap-material-design" 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 -->
    
    
  5. Paste it inside your new file components/navbar.inc.php
  6. Add following line into index.php. Place it after get_header() function
  7. require_once('components/navbar.inc.php');
    
  8. Refresh your website.

Nothing changed? That's perfect! Although we haven't changed anything in the way our website look, we've just made first step to make our website dynamic. In next lessons you will learn how to create different pages like single post page, category page or search result page. Imagine that without extracting 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 use of existing assets. It's very important to write your code in the way it could be used in different places. Exactly same as we did with our navbar. Now we can easily add navbar to different pages (using function require_once();. Shall we change anything in the navbar (i.e. add new link, or change hyperlink) we will only have to do it once in navbar.inc.php file and change will be automatically reflected in all pages.

Since our navbar is extracted you can have a look at MDB Dropdowns, Icons and other components from documentation to adjust it to your need. In future lessons we will write a function which will automatically create navbar from WordPress admin panel.

Note

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

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


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...