Remove the unwanted code from Underscores Theme Step 7 of Convert Bootstrap 4 Template to WordPress Theme

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">
			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>

			$description = get_bloginfo( 'description', 'display' );
			if ( $description || is_customize_preview() ) : ?>
				<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
			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>
				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">

			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() ) :

			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.



# 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( __( '', 'freelancer-b2w' ) ); ?>"><?php
				/* translators: %s: CMS name, i.e. WordPress. */
				printf( esc_html__( 'Proudly powered by %s', 'freelancer-b2w' ), 'WordPress' );
			<span class="sep"> | </span>
				/* translators: 1: Theme name, 2: Theme author. */
				printf( esc_html__( 'Theme: %1$s by %2$s.', 'freelancer-b2w' ), 'freelancer-b2w', '<a href=""></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.


Laravel / WP Hosting on Cloudways

Easy website management with Amazing Site Speed and Affordable Prices (Starting 5 $ / month)
Use promo 5Balloons for 10% discount

Related Articles

Site Footer