5 Balloons

This is the Step 7 of Tutorial How to Convert Bootstrap 4 Templates to WordPress Themes . In this step we will remove the code from underscores theme which is not required for our Template Conversion.

# Cleanup Header.php

As the first step, open your header.php file and completely remove the following code from this page.

<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'freelancer-b2w' ); ?></a>

 <header id="masthead" class="site-header">
  <div class="site-branding">
   <?php
   the_custom_logo();
   if ( is_front_page() && is_home() ) : ?>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
   <?php else : ?>
    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
   <?php
   endif;

   $description = get_bloginfo( 'description', 'display' );
   if ( $description || is_customize_preview() ) : ?>
    <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
   <?php
   endif; ?>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation">
   <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'freelancer-b2w' ); ?></button>
   <?php
    wp_nav_menu( array(
     'theme_location' => 'menu-1',
     'menu_id'        => 'primary-menu',
    ) );
   ?>
  </nav><!-- #site-navigation -->
 </header><!-- #masthead -->

 <div id="content" class="site-content">

As a boilerplate code, Underscores has provided with a default header and a content div to put the content. But since we are converting a already existing template into a wordpress theme. We don’t need this code, and hence it is comfortable to remove it.

# Cleanup Home Page Template file page-home.php

We created a new file page-home.php by copying page.php . page.php is a default page file provided by underscores to create new template pages.

Open page.php file in your editor and completely remove the div with id primary .

 <div id="primary" class="content-area">
  <main id="main" class="site-main">

   <?php
   while ( have_posts() ) : the_post();

    get_template_part( 'template-parts/content', 'page' );

    // If comments are open or we have at least one comment, load up the comment template.
    if ( comments_open() || get_comments_number() ) :
     comments_template();
    endif;

   endwhile; // End of the loop.
   ?>

  </main><!-- #main -->
 </div><!-- #primary -->

Also remove the function to fetch the sidebar on the page, Since we our single page template don’t have a sidebar.

get_sidebar();

# Cleanup footer.php

Open footer.php file in your editor and completely remove the end of content div, footer section and the end of page div

 </div><!-- #content -->

 <footer id="colophon" class="site-footer">
  <div class="site-info">
   <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'freelancer-b2w' ) ); ?>"><?php
    /* translators: %s: CMS name, i.e. WordPress. */    printf( esc_html__( 'Proudly powered by %s', 'freelancer-b2w' ), 'WordPress' );
   ?></a>
   <span class="sep"> | </span>
   <?php
    /* translators: 1: Theme name, 2: Theme author. */    printf( esc_html__( 'Theme: %1$s by %2$s.', 'freelancer-b2w' ), 'freelancer-b2w', '<a href="http://underscores.me/">Underscores.me</a>' );
   ?>
  </div><!-- .site-info -->
 </footer><!-- #colophon -->
</div><!-- #page -->

That it ,  with the code cleanup. See you at Step 8 Convert the Hero Section of the Template into Dynamic WP.