Learn to Create WordPress Themes by Building 5 Projects

上QQ阅读APP看书，第一时间看更新

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.

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;
      }

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.

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>

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

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

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

We will also add a container p 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.

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

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

We'll add the same code to main:

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

Also, for footer, it would be the same:

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

When you reload, you can see that everything's moved to the middle.
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;
      }

Next, we will add margin to the main p:

      .main{
          margin:15px 0;
      }

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.

To do this, we will now create a new file, call it header.php, and then create a new file called footer.php.
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>
            <p class="container">
               <h1><?php bloginfo('name'); ?></h1>
               <span><?php bloginfo('description'); ?></span>
            </p>
         </header>

We'll replace the highlighted portion with php get_header:

      <?php get_header(); ?>

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

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

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

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(); ?>

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 inpidual post page.