Should I place my navbar before or after the `<body>` tag when customizing a WP theme?

1 Views

I am customizing a WP theme by making a child theme. I am placing a navbar from Bootstrap into the header.php file in the child theme directory. However, I’m not sure where to place the navbar code. I can place it both before and after the <body> tag successfully (as in, the navbar shows up just fine no matter which one I pick), but I’d like to phone an experienced friend here and ask which is the better practice.

Original, unmodified header.php code

Read More
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php wp_title( ' | ', true, 'right' ); ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
    <div id="wrapper" class="hfeed">
        <header id="header" role="banner">
        <section id="branding">
            <div id="site-title"><?php if ( ! is_singular() ) { echo '<h1>'; } ?><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( get_bloginfo( 'name' ), 'blankslate' ); ?>" rel="home"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a><?php if ( ! is_singular() ) { echo '</h1>'; } ?></div>
            <div id="site-description"><?php bloginfo( 'description' ); ?></div>
        </section>
        <nav id="menu" role="navigation">
            <div id="search">
                <?php get_search_form(); ?>
            </div>
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
        </nav>
        </header>
        <div id="container">

My navbar code will replace the <nav> section in the above code, like so 

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial scale=1" />
    <title><?php wp_title( ' | ', true, 'right' ); ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
    <?php wp_head(); ?>

</head>

            <nav class="navbar navbar-default">
              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="<?php echo esc_url( home_url( '/' ) ); ?>">MoonLighting</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="pages/adultanswers.php">Side Job</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Account <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Add Funds</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Sign Out</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>

              </div><!-- /.container-fluid -->
            </nav>

<body <?php body_class(); ?>>
    <div id="wrapper" class="hfeed">
        <header id="header" role="banner">
            <section id="branding">
                <!--I removed this for reasons unrelated-->
            </section>
Post Views: 1

Related posts

2 comments

  1. The html element breaks the document into two mainsections: the head and the body.

    head

    The head element contains metadata—information that describes the document itself, or associates it with related resources, such as scripts and style sheets.

    body

    This is where the bulk of the page is contained. Everything that you can see in the browser window (or viewport) is contained inside this element, including paragraphs, lists, links, images, tables, and more. The body element has some unique attributes of its own, all of which are now deprecated, but aside from that, there’s little to say about this element. How the page looks will depend entirely upon the content that you decide to fill it with; refer to the alphabetical listing of all HTML elements to ascertain what these contents might be.

    For more details please see this and this

  2. The navbar is usually inserted as the first item within the <body> tag.

    Minimal example

    Here’s some very basic html

    <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <p>I'm the page body</p>
    </div>
  </div>
</body>

    insert your navbar here:

    <body>
  <div class="container">
    <div class="row">
      <!-- navbar goes here --> 
      <p>I'm the page body</p>
    </div>
  </div>
</body>

Comments are closed.