Installing and setting up WordPress

This project will be a little different from the rest because it's going to be sort of an introductory project. We will see how to install and set up WordPress, so that you can have a fresh installation to work with. We will create a theme, but we'll be focusing more on the code and the overall look and style. We'll create files and folders, add PHP code, and related things. First, I want to get you familiarized with PHP code, and then we can add some simple style.

With respect to an environment, there are a lot of different ways you can run WordPress. You may have your own server set up; if you don't, you can use something like AMPPS, which is what I'll be using. It gives you an Apache server, PHP, and MySQL all on your local machine. You could also use XAMPP, which is very similar, or WAMP; there's also MAMP for Mac. There are lot of different choices, but if you want to use AMPPS, you can go to https://ampps.com/ and download it. It's available for Windows, Mac, and Linux, and it is pretty easy to get set up.

Now, let's see how to install WordPress. Most of you probably already know how to do this:

1. Go to the link https://wordpress.org/download/ and click on the Download WordPress button:

2. Download the package and go to your server root folder, as shown here:

If you're using AMPPS, the package should be in your C:\ drive or in your route drive. In the Ampps folder, you'll find a www folder; this is the hosting root, as shown in the preceding image. In most cases, the default folder will be Program Files in the C:\ drive.

3. Create a folder called wpthemes; this is where we will install WordPress.

4. Go to the Downloads folder and open the WordPress package. Next, extract all the files into the project folder, wpthemes. Before we proceed, we need a database, a MySQL database, and if you installed AMPPS or if you're using XAMPP or something similar, then you most likely have phpMyAdmin, as shown as follows; this is what we'll be using.

5. Now, go to http://localhost/phpmyadmin:

6. Next, go to the Databases tab to create a new database called wpthemes and click on Create. We will see an empty database.
7. We'll go back to the files we created or brought over from the WordPress package. You will see the wp-config-sample.php file. We'll rename this to just wp-config, and get rid of the -sample.
8. Open the wp-config file using Sublime Text as the editor. You can use whichever editor you feel comfortable with.
9. Now, in this editor, we will change or add some information:

      /** The name of the database for WordPress */
      define('DB_NAME', 'wpthemes');

      /** MySQL database username */
      define('DB_USER', 'root');

      /** MySQL database password */
      define('DB_PASSWORD', '123456');

We will add DB_NAME, as shown here, which in this case is wpthemes, then DB_USER, which in this case is root, and then DB_PASSWORD—you need to enter whatever the password is for your database. The rest can stay the same.

10. We'll go ahead and save the entered information, and then we should be able to go to localhost/wpthemes:

11. We can now go ahead and run the installation. As shown in the following screenshot, we will enter Site Title as WordpressDEV and Username as admin. Next, you need to enter the password; I'm using a very weak password here. After you enter the email address, click on Install WordPress:

You can see that WordPress has been installed.

12. Now, click on Log In, and this will take us to the admin login. Go ahead and put your username and password in, and it'll take you to your backend:

13. Now we can click on Visit Site, as shown in the preceding image. Open this in a new tab, and you'll see that we have a brand new WordPress site:

This is what we'll be working with.

I'm sure a lot of you have experience with WordPress.

On the localhost/wpthemes/wp-admin/ WordPress page, we have our Posts area, where we can create and manage posts:

We can have Categories, as shown in the following screenshot:

We can also see Pages:

Website pages such as About Us, or Services, would go on Pages. If we go to Appearance, and click on Themes, it will show us the installed themes, as shown in the following screenshot:

By default, we have Twenty Seventeen, Twenty Fifteen, and Twenty Sixteen, but we will be creating a new theme in the next section.

Creating and enabling themes

In this section, we'll see how to create our theme files and enable a theme. We'll use Sublime Text and add the project folder, so that we can access the files easily:

1. Go to C:\Ampps\www\wpthemes.
2. The folder in which you want to create your theme is going to be themes, which is within the wp-content folder:

You can see here that we have the three themes that come with WordPress already installed, namely twentyfifteen, twentyseventeen, and twentysixteen.

3. We'll create a new folder and call it simple. This is going to be the name of our theme:

There are two files that you absolutely need in order to enable your theme: one will be style.css, and the other will be index.php. Now, the reason we need style.css is because that's where all of our declarations, such as theme name and the descriptions, go.

4. We'll open up a comment block and enter the fields, shown as follows:

You can refer to the documentation at https://codex.wordpress.org/Theme_Development, which shows all the different fields that you can use. We'll not use all of them as they're not required. Theme Name is all that's required, but it's good to have some other information as well.

5. We will enter the Theme Name as Simple. We also need to have an Author; you can put your own name there if you'd like. We'll also have Author URI. If you are creating themes for clients, you'd probably want to put your company's website there. We can have a Description. We'll enter Very Simple Wordpress Theme, and then enter Version: 1.0. Let's save this. Now, just having this information will allow WordPress to see your theme.
6. Now let's go back into our localhost/wpthemes/wp-admin/themes.php backend, and go to Appearance and then Themes; you can see the Simple theme, and we can actually activate it:

7. Now, in order for a screenshot to show in the Simple theme, we need to put an image in the root of the theme folder and call it screenshot.png:

8. Let's create a sample screenshot using Photoshop, which just says SimpleTheme, and place that in our theme folder, as shown in the preceding screenshot. Go to the server root, www\wpthemes\wp-content\themes, and then simple. We'll just paste that screenshot in there. Now if we go back to the backend and reload, you can see that we have a screenshot, as shown here:

Well, it's not really a screenshot but it's an image.

9. Now if we go ahead and activate our theme for this, and go to our frontend and reload—we get absolutely nothing because we haven't added any code yet:

Our theme just contains nothing, it's completely blank.

10. Now let's open the index.php file and enter TEST, then save and reload; we can see that we get TEST on our frontend too:

Basically, it's reading our index.php file by default.

Creating an HTML structure

1. Now let's create our HTML structure. We will put in some core HTML tags, as shown here:

      <!DOCTYPE html>
      <html <?php language_attributes(); ?>>
      <head>
         <title><?php bloginfo('name'); ?></title>

As you can see, we have DOCTYPE, an html, head, body, and title tags. Now, if you consider starting at the top, we have our <html> tags; sometimes, you want to include a language here, and WordPress has a function that we can actually include in this file to make it dynamic. We can add php language_attributes, which is a function that will determine the language we want the theme to display. You probably want to make your title dynamic, or you want to add your site name; to do that, we can say php and use a function called bloginfo, as shown in the preceding code block. This is really useful because it has a bunch of things that you can get, such as the site name, the description, the character set, URLs, and the list goes on. You can actually look at the documentation to see exactly what it includes. However, what we'll use is name.

2. Once you save this, you can go back and reload the page. You can see that the title says WordpressDEV, as shown here:

If you remember, this is what we named the site.

3. Let's go back to our head tag and continue. We'll need a character set, so we'll enter meta charset. Then, we can use bloginfo here as well, and just pass in charset:

      <!DOCTYPE html>
      <html <?php language_attributes(); ?>>
      <head>
         <meta charset="<?php bloginfo('charset'); ?>">
         <title><?php bloginfo('name'); ?></title>

4. Let's save this, and take a look at our source code. Using Ctrl + U, you can look at both the language attributes; it says that we're using English US and the character set is UTF-8, as shown here:

These things can now be controlled from within WordPress.

Working with the style sheet

The next thing we will do is include our style sheet:

1. Open the style.css file and enter the following code:

      body{
          background:#000;
      }

2. Save this and reload; we'll not get a black background as the style sheet is not being read:

3. In order for that style sheet to be seen, we'll enter the following code:

      <!DOCTYPE html>
      <html <? php language_attributes(); ?>>
      <head>
         <meta charset="<?php bloginfo('charset'); ?>">
         <title><?php bloginfo('name'); ?></title>
         <link rel="stylesheet" 
          href="<?php bloginfo('stylesheet_url'); ?>">

The preceding code will get the style sheet from the correct location.

4. Save this code and reload. We can now see a black background:

So whatever we put in our style sheet will now be registered.

Adding a function in the head tag

We will next see how to enter a function called wp_head() in the <head> tag. This puts any additional information that is needed into the head tag. For example, when you install a plugin and, let's say, it needs to include a style sheet, or it needs to do something in the head, to do this we need to enter the following code. So when you create plugins, you can have stuff pop out right in the head:

<!DOCTYPE html>
<html <? php language_attributes(); ?>>
<head>
   <meta charset="<?php bloginfo('charset'); ?>">
   <title><?php bloginfo('name'); ?></title>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>

In the following source code, we have a bunch of other stuff now, and this is all coming from that wp_head() function:

If I go ahead and take the wp_head() function out, and then go back and reload, it just gives us what we have in the index.php file. So we're going to need the wp_head() function:

In the next section, we'll start to build out the body. We will see how to grab posts, create menus, and so on.

Building the HTML body

We will now see how to add basic HTML tags in the body:

1. We'll create a <header> tag, which is an HTML5 tag. We will enter an <h1> tag, and in this tag we will add the website name:

      <header>
         <h1><?php bloginfo('name'); ?></h1>
      </header>

2. We can actually take the dynamic code from the <title> tag, which we saw earlier, and put that in <h1> as well. Now if we save that and look at our frontend, we get WordpressDEV:

3. Now, if we wanted to change the frontend output, we could go to Settings, and change Site Title to My Website:

4. Save the settings. Now, we can see the change.
5. In addition to the name, we can also include a Tagline. To do this, we will enter the <small> tags, but instead of using name, we will use description, as shown in the following code block:

      <header>
         <h1><?php bloginfo('name'); ?></h1>
         <small><?php bloginfo('description'); ?></small>
      </header>

6. When you reload it, you can see that we get Just another WordPress site:

7. We can make the changes in the settings. We'll enter The Best Website Ever in the Tagline textbox:

8. Save the changes and put description in the span tag, as shown in the following code block:

      <h1><?php bloginfo('name'); ?></h1>
      <span><?php bloginfo('description'); ?></span>

9. When we reload, we get this:

10. Now let's add more HTML tags, as shown in the following code block:

         <header>
            <h1><?php bloginfo('name'); ?></h1>
            <span><?php bloginfo('description'); ?></span>
         </header>

         <div class="main">
         <?php if(have_posts()) : ?>
            post found
         <?php else : ?>
            <?php echo wpautop('Sorry, No posts were found'); ?>
         <?php endif; ?>
         </div>
      </body>
      </html>

Here, we go under the <header> tag and enter the div class as main. We'll fetch our blog posts; WordPress uses something called the loop, or the main loop, which will fetch every blog post that you have, regardless of the category or whatever it may be. Without specifying any restrictions, it's going to get every post. So, the first thing we'll do is check to see whether there are any posts. We'll use an if statement for that, and then use the shorthand. We will use the syntax that will help us go quickly in and out of php. We'll then use if(have_posts) to see whether there are any posts in WordPress. We'll also put an else statement here, so that if there are no posts, then we just want to let the user know that. Now, instead of just spitting out text, we'll use a function. We'll say echo wpautop; what this does is that it takes double line breaks and automatically makes them into paragraphs. It's a good function to use when you just want to output text. We'll say, Sorry, No posts were found. Then, inside if(have_posts), we'll use post found. Let's go and reload, and you can see that we get post found:

11. Let's go back to our backend and go to Posts; you can see that we have Hello world. We will move that to Trash, and if we now go back and reload, we get Sorry, No posts were found, as shown in the following screenshot:

12. Now let's go to Trash and restore it. We will see that the post can be seen again. We will now see how to display these posts. We'll delete post found within the if statement and we'll use a while loop for this with a php tag. We'll use while(have_posts). Now, with WordPress, we have to use this thing called the_post(), so we'll use the_post(), which is a little weird as far as a syntax is concerned. I've never really seen this anywhere else apart from WordPress, but just know that you need to have this as well. Then, we'll use endwhile; again, this is just using shorthand syntax, so you could just use the curly braces. But what we'll do here is when it finds a post, we want to get the title. So, in an <h3> tag, we'll use <?php the_title(); ?>, which is a function:

      <div class="main">
      <?php if(have_posts()) : ?>
         <?php while(have_posts()): the_post(); ?>
            <h3><?php the_title(); ?></h3>
         <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, No posts were found.'); ?>
      <?php endif; ?>

13. Let's go and reload, and now you can see that it's getting the Hello world! title:

14. Now, let's go ahead and create a post as an example. We will name it My Blog Post, and let's just get some sample text. I have taken some text from the www.lipsum.com website:

We will add a couple of paragraphs and publish it.

15. Now let's reload; you can see that it gives us My Blog Post:

16. Now, to get the actual content, we'll go right to the <h3> tag and enter <?php the_content(); ?>. As you can see, WordPress makes it really easy in terms of the names of the functions:

      <div class="main">
      <?php if(have_posts()) : ?>
         <?php while(have_posts()): the_post(); ?>
            <h3><?php the_title(); ?></h3>
            <?php the_content(); ?>
        <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, No posts were found'); ?>
      <?php endif; ?>
      </div>

So now, this gets us the content from each blog post and displays it:

17. There are different things that we can display with the posts: the date, author, categories, and so on. Let's go right under the title and add the following code block:

         <h3><?php the_title(); ?></h3>
         <div class="meta">
         Created By <?php the_author(); ?>
         </div>
         <?php the_content(); ?>
      <?php endwhile; ?>

Here, we added Created By along with the author's name.

18. When we reload, we can see the following output:

In this case, admin is the username of the person who created the post.

19. Now, if you want the date, you can add this code:

      Created By <?php the_author(); ?> on <?php the_date(); ?>

20. When we reload, we get Created By admin on December 12, 2017; basically, it gives us the date:

21. We will now see how to format the date. You can format the date in a lot of different ways; if you know PHP and you've worked with the date function, you know that there's a lot of different formatting options.
    We will take a look at one such example from php.net/manual/en/function.date.php:

      Created By <?php the_author(); ?> on <?php the_date('l jS \of F
          Y h:i:s A'); ?>

22. Let's see what that gives us. You can see the format, shown in the following screenshot, with the day, date, time, and PM or AM:

One thing that I like to do is to use the time instead of the date:

Created By <?php the_author(); ?> on <?php the_time(); ?>

This will give you just the time; it doesn't give you the date, but you can actually format it to give you the date:

Created By <?php the_author(); ?> on <?php the_time('F j, Y g:i a'); ?>

If we take a look at this, it gives us the date and the time:

So it's all up to you, it all depends on your preferences.

Now, let's do a little bit of styling. We will see how to add a <footer> tag at the bottom, and a paragraph to make it dynamic. We can put a copyright symbol, and then for the year, instead of just typing in the year, we can use the_date(), and then just pass in as a parameter, Y, as shown in the following code:

<footer>
   <p>&copy; <?php the_date('Y'); ?></p>
</footer>

So we get © 2017:

Then, if we want the site name, we can just say bloginfo and pass in name:

<footer>
   <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>

So now we have a dynamic footer.

Base styling

Now let's add some base styling. To do this, we will work with the style sheet. Now, the idea of this whole project actually is not to create some great-looking theme, I just want you to get familiar with the PHP code and how themes are set up.

1. Let's enter the following code:

      body{
          font-family: Arial;
          font-size:15px;
          color:#333;
          background:#f4f4f4;
          margin:0;
          padding:0;
          line-height: 1.7em;
      }

      header{
          background: #393939;
          color:#fff;
          padding:20px 10px;
      }

      header h1{
          color:#fff;
          margin:0;
      }

2. Save the code and reload. You will get the following result:

You can see the empty space at the top; this is because we're logged in as an admin, so even on the frontend it knows that, and it's trying to display the admin bar. Now, it's not displaying the admin bar because we don't have the special function to display it.

3. Let's go to index.php, and before the ending body, we'll add <?php wp_footer(); ?>:

        <footer>
           <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
           </p>
        </footer>

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

4. Save this and reload. You can see that we have the admin bar:

5. We will add a little padding to h1 at the bottom:

      header h1{
          color:#fff;
          margin:0;
          padding:0;
          padding-bottom: 10px;
      }

6. We will also add a container div to the code, as shown here:

      .container{
          width:1020px;
          margin:0 auto;
          overflow: auto;
      }

We have set width to 1020 px, margin to 0 auto, and overflow to auto.

7. We will now go to index.php, to the <header> tag, and enter this code:

      <header>
         <div class ="container">
         <h1><?php bloginfo('name'); ?></h1>
         <span><?php bloginfo('description'); ?></span>
         </div>
      </header>

8. We'll add the same code to main:

      <div class="main">
         <div class="container">
      <?php if(have_posts()) : ?>

9. Also, for footer, it would be the same:

      <footer>
         <div class="container">
            <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
            </p>
         </div>
      </footer>

10. When you reload, you can see that everything's moved to the middle.
11. Let's add a little bit of styling to footer. Just copy what we have in the header. We'll also align the text to the center:

      footer{
          background: #393939;
          color:#fff;
          padding:10px 10px;
          text-align: center;
      }

12. Next, we will add margin to the main div:

      .main{
          margin:15px 0;
      }

13. Let's reload and this is what we get:

You can see that we have our header and main area, where we're looping through the posts and displaying them, and we have our footer area.
Now, common practice in WordPress is to break the header and footer into their own files and then include them in the index.

14. To do this, we will now create a new file, call it header.php, and then create a new file called footer.php.
15. Let's go to the index.php file and cut the portion of code, as shown in the following code block:

      <!DOCTYPE html>
      <html <?php language_attributes(); ?>>
      <head>
         <meta charset="<?php bloginfo('charset'); ?>">
         <title><?php bloginfo('name'); ?></title>
         <link rel="stylesheet" 
          href="<?php bloginfo('stylesheet_url'); ?>">
         <?php wp_head(); ?>
      </head>
      <body>
         <header>
            <div class="container">
               <h1><?php bloginfo('name'); ?></h1>
               <span><?php bloginfo('description'); ?></span>
            </div>
         </header>

16. We'll replace the highlighted portion with php get_header:

      <?php get_header(); ?>

17. Go into header.php and paste the previous code which was cut, and save it.
18. We will now do the same thing with footer:

        <footer>
           <div class="container">
              <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); 
                 ?>
              </p>
           </div>
        </footer>

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

19. We will cut the code shown in the preceding code block and replace it with php get_footer(), as shown in the following code block:

      <?php get_footer(); ?>

20. Paste the footer code that was cut in step 18 and place that in the footer file. The output will look the exact same.

Next, we will see how just a click on these posts will take us to the actual individual post page.