Time for action—editing our mobile theme files

Now let’s edit our mobile theme in line with the web app’s design. To edit the mobile theme files, perform the following steps:

1. 1. We will open each of the mobile theme files in turn in our chosen code editing application and edit out all of the code we don’t need. Let’s start with header.php. You’ll remember that it contains a number of conditional tags to detect mobile devices, for example:

   <nav class=”access”>
   <?php if ( is_mobile() ) {
   wp_nav_menu( array( ‘menu’ => ‘web-app’, ‘container_class’ => ‘menu-header’, ‘menu-class’ => web-app-menu’ ) );
   } else {
   wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) );
   } ?>
   </nav>
   

2. 2. As this theme will only be loaded on mobile devices, we can remove the conditional function. The resulting code is as follows:

   <nav class=”access”>
   <?php wp_nav_menu( array( ‘menu’ => ‘web-app’, ‘container_class’ => ‘menu-header’, ‘menu-class...