Now that the HTML template is done, we can now start to convert it into a WordPress theme.

We have a default installation of WordPress. Let's create a new theme folder. We will go to wp-content | themes and create a new folder, MyShop. Inside MyShop, we'll create an index.php file and a style.css file. Let's go ahead and put our declaration in our style.css file as shown in the following snippet:

/* 
    Theme name: MyShop
    Author: Brad Traversy
    Author URI: http://eduonix.com
    Description: Simple ecommerce theme
    Version: 1.0.0
*/

Let's save that. Now if we go to the backend in our webpage and go to Appearance | Themes, we'll see MyShop as seen in the following screenshot:

We have a screenshot that we can pop above the MyShop preview image in our project files. Paste this inside the MyShop folder. So now we have MyShop, let's go ahead and activate it. Obviously, right now if we go and reload the frontend, it'll just be blank.

We'll open the MyShop and myshop_html folders, which is the HTML template that we created, and bring over the css and the js folders into the MyShop folder. Now we have a style.css in our WordPress site. We'll take everything out of the app.css file from our template, cut that out, put it into style.css, and save it. Then we can completely delete the app.css.

We'll now put everything from our index.html folder into index.php. Let's save that, and if we go to our website and reload the page, we can see all of our HTML there. The CSS isn't connected yet so we're not seeing that, but you can see the HTML:

Let's go to the top of the file. We will add our title and fix the stylesheet declarations:

   <title><?php bloginfo('name'); ?></title>
   <link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/foundation.css">
   <link rel="stylesheet" href="<?php echo bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
</head>

Let's save that, reload our webpage, and now we can see that our CSS is in effect:

We're just going to work from the top down. So next is the body! We also want to add our body class. So beside our body tag, let's add <?php echo body_class() ?>.

Now for the logo, we'll do something that we haven't done yet; we'll implement an image, a logo upload from the theme customizer. In order to do that, we need to create a functions.php file. So in our themes folder, let's create a file called functions.php and create a function for Theme Support. Here's what the code should look like inside functions.php:

<?php 
    // Theme Support
    function ms_theme_setup(){
        add_theme_support('custom-logo');
    }
 
    add_action('after_setup_theme', 'ms_theme_setup');

Save that and let's now go to the index.php file. Let's remove <img src="./img/logo.jpg"> and replace it with the following code snippet:

<header class="grid-x grid-padding-x">
   <div class="large-6 cell">
      <?php 
        if(function_exists('the_custom_logo')){
          the_custom_logo();
        }
      ?>
   </div> 

We now go to our backend. In the Themes we'll click on Customize, go to Site Identity, and now you should have the area as seen in the following screenshot for a logo:

We are going to click on Select Logo and we'll upload the logo.jpg file from the myshop_html folder, crop the image as per your preference, and click on Save and then Publish. Now let's go to our frontend and reload, and we now have a logo:

Now let's do the menu. We'll go to the functions.php file and add the following code for Nav Menus:

register_nav_menus(array(
    'primary' => __('Primary Menu')
));

Next we will go to index.php and we have our menu. We'll get rid of it completely and add the following code:

<div class="large-6 cell">
   <?php wp_nav_menu(array(
     'theme_location' => 'primary',
     'container_class' => 'menu simple main-nav'
   ));
   ?>
</div>

Now let's go to our backend. First of all we'll reload, click on the Menus option, and we will keep Sample Page. Make sure that we have the Primary Menu option checked:

We'll click on Save Menu and reload our page. We can see that, now we have our menu and if we click on it we can see the link has changed. You won't see it in the main area of the web page because we don't have that area of the theme set up yet; it's just static content for now, but the menu is working and the logo is there:

The last thing we want to do in this section is to go to the index.php file and right underneath the footer tags, we'll put wp_footer as shown in the following code snippet:

<footer>
<p>&copy; 2017, MyShop</p>
</footer>
<?php wp_footer(); ?>

That should give us the admin menu at the top of the web page:

In the next section we'll work with widgets. We will see how to create a custom widget for our showcase area.