Creating a WordPress theme

Now we'll convert our HTML template into a WordPress theme. I have a fresh install of WordPress here with just the default twentysixteen theme. We will go to the WordPress folder, wp-content and then in the themes folder, we will create a new folder and name it advanced-wp.

Here we will create a style.css file and also an index.php file.

Now let's open the style sheet. Here we will put our declaration first, so that WordPress can see the theme. We will set Theme Name as Advanced WP and enter a value for Author. Next we will add Author URI, a description, and a version:

/*
    Theme Name: Advanced WP
    Author: Brad Traversy
    Author URI: http://eduonix.com
    Description: Advanced Wordpress Theme
    Version: 1.0
*/

Now we do have a screenshot as well in our project files, so we will add that.

Let's go to C:. Since I'm using AMPPS, I will go to my www folder and then to wpthemescontent hemes, and then to advanced-wp. We will go ahead and paste the image called screenshot.png here. If we go to the backend of WordPress, and we go to Appearance and then Themes, you can see that we have the AdvancedWP theme:

We will now go ahead and activate this. If we go to the frontend and reload, we just see a blank white page, as shown here:

Let's add styles here. Open the style.css file from the HTML template. We will copy all the code and paste it right in the style sheet.

We will save this, and then in the index.php file, we will copy everything from the index.html file and paste it in index.php:

Save it and reload the frontend. We'll see all the HTML and static HTML:

We cannot see the style sheet though, because we don't have it going to the right place. So let's update the code as follows. We will get rid of style.css. We will open up some php tags, and use bloginfo, and then we will just put stylesheet_url:

<head>
   <title>Advanced WP Theme</title>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

Let's save this and reload:

You can see that now the CSS is being read. All the stuff we're looking at here is just static content in the index.php file, it's not actually coming from WordPress yet. So let's do a few things here.

The best thing to do is to just start at the top and work our way down. Into the html tag, we will put the language_attributes() function. We will update the <title> tag with php bloginfo, and in it we will put name. We will also put the character set <meta> tag by adding meta charset. We can use the bloginfo() unction as shown and pass in charset. Next, we want enter the wp_head() function, hence we will add <?php wp_head(); ?>. Add a viewport function using the <meta> tag with the name viewport. We will set the content attribute to width=device-width. Then, we'll set initial-scale to 1.0; this just helps with the responsiveness of the theme:

<!DOCTYPE html>
<html>
<head>
   <meta charset="<?php bloginfo('charset'); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><?php bloginfo('name'); ?></title>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
</head>

Now in the <body> tag, we want our body_class() function.

For the logo, or the heading, we will get rid of the static text and add php bloginfo with the name. Next, we will add the tagline to make that dynamic using bloginfo, and then we can pass in 'description':

<body <?php body_class(); ?>>
   <header>
      <div class="container">
         <h1>
            <a href="index.html">
            <?php bloginfo('name'); ?>
            </a>
            <small><?php bloginfo('description'); ?></small>
         </h1>
         <div class="h_right">
            <form>
               <input type="text" name="s" placeholder="Search...">
            </form>
         </div>
    </div>
 </header>

Now the search form is pretty easy. We'll just take the <form> tag and add some stuff to it. We will update it with method="get" and then action, which is where it's submitted, and for this, we will enter php with the esc_url() function. We will then pass in home _url and then /. Then, in the input, we will added a name attribute and just set it to s:

<h1>
   <a href="index.html">
      <?php bloginfo('name'); ?>
   </a>
   <small><?php bloginfo('description'); ?></small>
</h1>
<div class="h_right">
   <form method="get" action="<?php esc_url(home_url('/')); ?>">
   <input type="text" name="s" placeholder="Search...">
   </form>
</div>

That's pretty much it. The rest will get taken care of by WordPress. Let's save this and look at it so far:

We have our logo, which is coming from WordPress, same thing with the tagline. We can't really test Search yet because we don't have any dynamic content down here. Now you'll see that we have the white space at the top; the reason for this is that we don't have the wp_footer() function yet, which will put the admin menu there. We'll add this next.

Let's go back and after the closing </footer> tag, add wp_footer():

      </div>
   </footer>
   <?php wp_footer(); ?>
</body>
</html>

Let's save this and reload:

Now you can see that we have our admin bar.

Let's go back up, and take care of the menu. We'll go down to where we have our nav menu, and get rid of the whole <ul> tag and all the <li> tags. We'll first create a variable called args, and we'll set that to array, and the arguments can be passed into the wp_nav_menu() function. We'll just have one argument for now, which is going to be the location of the menu. So we will enter theme_location and we set it to primary. Next, we will enter wp_nav_menu, and pass in args:

<nav class="nav main-nav">
   <div class="container">
   <?php
       $args = array(
           'theme_location' => 'primary'
       );
   ?>

   <?php wp_nav_menu($args); ?>
   </div>
</nav>

If we go and look at it, we find that it is working here:

However, we want to specify in our functions file the different menu positions in our theme, and we have two. So let's go and create a new file. We'll save it as functions.php, and set a function for Theme Support.

We'll enter a function with adv as a prefix, and then _theme_support. All of our custom functions will have the adv prefix. Next, we'll register the nav menus. We will pass in an array and put our different positions; we have primary, which we will set to a readable name, so we enter Primary Menu, and then we will add another one in footer, and get this out of the way for now:

<?php
    // Theme Support
    function adv_theme_support(){
        // Nav Menus
        register_nav_menus(array(
            'primary' => __('Primary Menu'),
            'footer' => __('Footer Menu')
        ));
    }

Now underneath the function we'll add add_action and after_setup_theme, and then the function we want to run is adv_theme_support:

add_action('after_setup_theme', 'adv_theme_support');

Let's save this and reload:

You can see that our menu is now here. If we click on it, you'll see the URL change, but you won't see any content change because this is all still just static HTML, but we do have our menu. Now, by default, every page that we have will show up here. Your pages might actually be different; you probably don't have Our Team because here I did a little bit of work with this WordPress site earlier, so your links may be a little different. Now if you look under Appearance, you'll see that we don't have a Menus option.

// Nav Menus
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer'  => __('Footer Menu')
 ));

Since we added register_nav_menus to the functions file, if we reload now, you will see a Menus link. Click on this, and you'll see that in Themes Locations we have Primary and Footer because we added them in the functions file.

Let's check the Primary Menu, and for menu name let's just enter Main Menu, and you can put whatever pages you'd like. We'll just leave one unchecked, we'll leave Our Team unchecked; and click on Add to Menu. Then, click on Save Menu:

Now if we go to the frontend, you will see we only have About and Sample Page:

Now I will create a couple of pages, so that you have the same pages as I do. So we have an About page which just says This is the about page.

For Our Team page, we will choose the parent of About and we'll update it:

Now let's create a new page called FAQ. We will select the parent of About, and you'll see why we're doing this later on:

Then, we'll create another page called Services, and this will not have a parent. Next let's add Services to the menu as shown. We will not add FAQ or Our Team just yet. We will see how we can use submenus, but we'll do that later on:

We'll save the settings, and then your menu should look like this:

We have the navigation bar, header, Search box, and all of our styles done. In the next section, we'll move on and start to create our main blog post loop.

Table of Contents for Creating a WordPress theme

Create new playlist

Sign In

Sign Up

Table of Contents for
Creating a WordPress theme