When you visit the blog page, you can see we have multiple post types:

• Gallery posts
• Linked posts
• A-side posts
• Regular blog posts

In the following screenshot, you can see Gallery post and the linked posts:

This is how the A-side post looks:

This is what a regular blog post looks like:

When we click on Read More, it takes us to a single page where we have our comment form and the customized comments interface, as shown in the following image:

We will now see how to create custom layouts; for instance, the About page, shown in the following screenshot, is in a layout called Company, where we have the phone number displayed in a div class:

Now let's click on Posts or Pages and then on About:

You'll see that we have Default Template and Company Layout in the Template option:

Now we will see how to create a submenu for pages that have parents; for instance...

Let's see how to create our theme, but before we get into WordPress, we'll first map out and just create the design using HTML and CSS.

Usually, when we build a WordPress theme, or a Drupal or Joomla theme, you can usually create the design first using just static HTML and CSS.

As you can see in the following screenshot, we have an empty folder called advanced-wp-html, and we'll create a couple of files here. First, we'll create an index.html file, and then we'll create our style sheet, which will just be style.css.

Let's open both the files with Sublime editor. In the index.html file, add in our core html markup, as shown in the following...

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,...

We created the theme and added the header and navigation bar. All of this stuff on the page is now dynamic and integrated with WordPress, but this is all just static HTML.

Let's go back to our index.php page and go down to where we have the container content div, and we have different blog posts. We have three article tags with blog posts; we will delete two out of the three.

Then we will cut the paragraphs down and make it much shorter just so we can get it all in the page or in view. We want to write in this main block div, and we want to create our post loop.

First, we'll have to check for posts, and for that, we will enter if(have_posts),and then we have to end it after the ending </article> tag. We will put an else statement as well. If there are no posts, then we will enter php echo, with the wpautop() function, where we can put the text...

We will now see how to create a single post. If we click on Read More now, it takes us to the single post, but it's not what we want, we want to change this. Also, we want the ability to add a featured image to a post, also called a thumbnail. Let's start with the thumbnail. We'll first go to functions.php and we need to enable that support for our theme. For this, we'll go to the adv_theme_support() function and add a Featured Image Support comment. Next, we'll enter the add_theme_support() function and pass in post-thumbnails, as shown here:

// Theme Support
function adv_theme_support(){
    // Featured Image Support
    add_theme_support('post-thumbnails');

Let's save this, and if we go to, let's say Blog Post One, you'll see that we have the Featured Image block:

We will click on Set...

Let's create custom archive pages. Now if we click on one of the categories, it'll take us to a category archive.

If we click on admin, the username, it will take us to the author archive. There are others as well. We can also have archives by dates, we can have them by tags, and so on. So let's go into our themes folder. We will create a new file and save that as archive.php and open that up.

Now if we go back and click on a category, you can see it's blank because it's looking at the archive.php page. We will copy what's in the index.php page and paste that in archive.php.

I want these pages to be much more simple. We don't need the meta, and we don't need the image; pretty much just the title and the date is all that we want. So let's go to where we have the <article> tag and get rid of the whole...

Let's take a look at a few different things now. We'll look at post types or post formats. Right now, if we look at our theme, we have just basically one kind of post, and it's just a standard blog post. We can also have things, such as galleries, links, images, and quotes status updates, and we can format these different types of posts in different ways. We will now see how to do that, how to add these to our theme. Also, we'll look at a function called get_ template_part(), which allows us to stop repeating ourselves. For instance, if we look at our index page, we have while (have_posts()), and then we're just outputting our post. We observe the same thing in the archive, in search.php, and so on. So we want something that's going to stop us from repeating ourselves over and over. I know that each of these files have minor...

Now we'll move from the posts to pages. If we visit the About page, you can see that it's formatted just like a post, which is definitely not what we want.

We just want the pages to have the title, we don't want metadata, Read More, and stuff like that. So to change all that, we have to create a new file and save it as page.php.

Now if I go back to that page and reload, it's just a blank white page. It's looking to this file to parse it.

Just to start with, I'll grab what we have in the index page, paste it in page.php, and just change some stuff. We want the while loop, we'll not use get_template_part(), so we can get rid of that. We want an <article> tag, and let's give this a class of page. Let's also put in an <h2> tag. This is where the title will go, so we'll say &lt...

In this section, we'll take a look at widgets.

Right now, we have a sidebar, but this is just static content in our php file. So we want this to come from the widget system. Also, we should be able to add multiple widgets in the sidebar. Now, on the blog page, and on any other page, this is going to be the only widget aside from a custom Home page that we'll create later on. However, we will add those positions in our functions file.

So, let's open up functions.php, and go right under the after_theme_setup action; this will be to set up widget locations. We'll create a function, call it init_widgets() and it will take an id; then, we'll say register_sidebar. Now, even though this is called register_sidebar, this is used with all widget positions, not just a sidebar. It takes in an array and it's going to take a name; this...

Now we'll create a custom home page and then add widgets to the positions that we added.

Let's create a new file and save this as front-page.php. If we reload the home page it goes completely blank because it's looking at front-page.php file. So I'll copy what we have in page.php and paste it in front-page.php.

Now let's reload:

This doesn't look very good because we're showing the posts with just the page formatting. So let's go into pages, and create two new pages. We will call one Home; we'll just say This is the homepage, click on Publish, and similarly create a new one called Blog and Publish:

Now we'll go to Settings and then to Reading:

In Your homepage displays, we'll set A static page; for Homepage, we'll choose Home; for Post page we'll choose Blog, and then we'll save it.

Now we...

In this section, we'll add the custom comment functionality.

Let's open up single.php and go right under endif. We'll say <?php comments_template(); ?>:

   <?php endif; ?>

   <?php comments_template(); ?>
</div>

Let's save this and reload. We have our comment section now:

Let's say Great Post, click on Post Comment, and it works!

Now this will work as far as functionality goes, but it doesn't look too good, so I want to show you how we can customize this.

We'll create a new page, or a new file, and we'll call this comments.php. If we go back now and reload you'll see there's nothing here, it's reading from this file; if we say Test and reload, we get Test:

So it's up to us to customize how we want this to work.

Great! So that was pretty much it. The purpose of this project wasn't to build a beautiful theme, it was to really get you familiar with the different files that we need to create the syntax, the different functions, and things like that.

We saw different post formats and created design using HTML and CSS. We created a WordPress theme by learning how to display blog posts, single posts, custom archive pages, and different post formats. We also saw how to add an image to the post and dealt with pages, custom templates, and sub navigation. We also worked around theme widgets, custom homepages, and the comment functionality.

So, hopefully you enjoyed this chapter.

In our next chapter, we will build a WordPress theme for the photo gallery.