Remove the unwanted code from Underscores 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">
			<?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.

Comments