How to Build a WordPress Starter Theme: Part 6 – Wrapping It Up

5

Welcome to the final part of the WordPress Starter Theme series! Hopefully, you’ve seen by now that getting started with building a WordPress theme isn’t as complicated as you might’ve thought. The hardest part really is getting started!

For that reason, I’ve focused each part up to now on getting straight into writing the necessary code to get it working quickly. However, the savvy WordPress developers amongst you will have noticed pretty quick that some files have been missing all along. Those files are of course: header.php, sidebar.php and footer.php. It is indeed the standard to break your theme into these parts and quite often a few more. Though, as you’ll have seen already, to actually get your theme working, you don’t need to do any of that… but you should. So, lets do that now!

The Process

It’s pretty simple from here. We won’t be writing much new code. In fact, we won’t be using the functions.php file either. All we will be doing is:

  1. Creating the relevant file (such as header.php)
  2. Moving the relevant HTML/PHP from index.php into that file.
  3. Placing a template tag in our index.php file where that code once was which will include the Template Part.

Sublime Text Users: If you are using Sublime Text 2 you can easily split your workspace into two columns using Alt+Shift+2 (Option+Command+2). Or you can find it under View > Layout > Columns:2. Then, simply move the tabs by dragging them. If you’re not a Sublime Text user… you should be! I’m joking, I’m joking! If you’re not, I’m sure your editor of choice will have something similar.

Troubleshooting: Rather than repeatedly reminding you to check everything in the browser, I’ll simply mention it here once. After each section, when we’ve moved markup to it’s own file and replaced it in index.php with its template tag, you should check the theme in your browser and then view the source code to make sure everything is the same as it was before moving the markup. Most modern browsers will highlight broken HTML or unclosed tags in red. This is the quickest way to see if you’ve inadvertantly broken something.

Template Part: header.php

So the first thing we’ll need to do is create the header.php file in the root of the theme. Your file/folder structure at the moment should be:

  • noesis (root folder)
    • functions.php
    • header.php
    • index.php
    • style.css

For easy reference, here’s our index.php file with comments showing where each file (header.php, footer.php and sidebar.php) begins and ends:

<!-- START OF header.php -->
<!DOCTYPE html>
<html <?php language_attributes(); // Get the language to be used from the admin > settings ?>>
  
  <head>
    
    <!--  SEO & META -->
    <title><?php wp_title(':', true, 'right'); // Show the site name and post/page name ?></title>

    <?php wp_head(); ?>

  </head>

  <body <?php body_class(); ?>>
    
    <!-- CONTAINER -->
    <div>
      
      <!-- HEADER -->
      <header>
        <hgroup>
          <h1><?php bloginfo( 'name' ); // Display the site's title defined in Admin > Settings > General ?></h1>
          <h2><?php bloginfo( 'description' ); // Display the site's description defined in Admin > Settings > General ?></h2>
        </hgroup>
      </header>
      
      <!-- NAV -->
      <nav>
        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); // Display the user-defined menu in Appearance > Menus ?>
      </nav>

      <!-- END OF header.php -->

      <section>

        <main>
        <!-- START OF "The Loop" -->
        <?php if( have_posts() ) : ?>

          <?php while( have_posts() ) : the_post(); ?>

          <article>
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <?php the_content(); ?>
          </article>

          <?php endwhile; ?>

        <?php endif; ?><!-- END OF "The Loop" -->

        </main>

        <?php if( is_active_sidebar( 'noesis-right-sidebar' ) ) : ?>

        <!-- START OF sidebar.php -->
        <aside>
          
          <?php dynamic_sidebar( 'noesis-right-sidebar' ); ?>

        </aside>
        
        <!-- END OF sidebar.php -->
        
        <?php endif; ?>
  
        </section>  

        <!-- START OF footer.php -->
        <footer>
          <p>&copy; <?php echo date('Y'); ?> - Luke Watts</p>
        </footer>

      </div><!-- container  -->
      
      <?php wp_footer(); ?>

  </body>
</html>
<!-- END OF footer.php -->

So, our next step is to cut and paste everything from the top of our index.php file down to, and including, the <-- END OF header.php --> comment into our header.php file. Your header.php file should now look like this:

<!-- START OF header.php -->
<!DOCTYPE html>
<html <?php language_attributes(); // Get the language to be used from the admin > settings ?>>
  
  <head>
    
    <!--  SEO & META -->
    <title><?php wp_title(':', true, 'right'); // Show the site name and post/page name ?></title>

    <?php wp_head(); ?>

  </head>

  <body <?php body_class(); ?>>
    
    <!-- CONTAINER -->
    <div>
      
      <!-- HEADER -->
      <header>
        <hgroup>
          <h1><?php bloginfo( 'name' ); // Display the site's title defined in Admin > Settings > General ?></h1>
          <h2><?php bloginfo( 'description' ); // Display the site's description defined in Admin > Settings > General ?></h2>
        </hgroup>
      </header>
      
      <!-- NAV -->
      <nav>
        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); // Display the user-defined menu in Appearance > Menus ?>
      </nav>

      <!-- END OF header.php -->

Now, we need to tell WordPress we want the contents of that file to be included in our index.php file. This is done with the template tag, get_header(). Since this is PHP, don’t forget to wrap the function in PHP tags. The index.php file should now look like this:

<?php get_header(); ?>

      <section>

        <main>
        <!-- START OF "The Loop" -->
        <?php if( have_posts() ) : ?>

          <?php while( have_posts() ) : the_post(); ?>

          <article>
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <?php the_content(); ?>
          </article>

          <?php endwhile; ?>

        <?php endif; ?><!-- END OF "The Loop" -->

        </main>

        <?php if( is_active_sidebar( 'noesis-right-sidebar' ) ) : ?>

        <!-- START OF sidebar.php -->
        <aside>
          
          <?php dynamic_sidebar( 'noesis-right-sidebar' ); ?>

        </aside>
        
        <!-- END OF sidebar.php -->
        
        <?php endif; ?>
      
      </section>

        <!-- START OF footer.php -->
        <footer>
          <p>&copy; <?php echo date('Y'); ?> - Luke Watts</p>
        </footer>

      </div><!-- container  -->
      
      <?php wp_footer(); ?>

  </body>
</html>
<!-- END OF footer.php -->

Template Part: footer.php

At this point, I prefer to work on the footer section, rather than simply working down the file. The reason for this is the loop will be left in the index.php file and you might have other template parts such as searchform.php or comments.php in the middle of your file too. For this reason, I find you’re less likely to break something if you work from the outside-in until the only markup and PHP in your index.php file is the loop and the various template tags.

So, once again we create the file and then move our markup and replace it with the appropriate template tag. Create the footer.php file in your theme root and cut and paste everything from the <-- START OF footer.php--> comment to the end of the file into footer.php. Your file should now look like this:


        <!-- START OF footer.php -->
        <footer>
          <p>&copy; <?php echo date('Y'); ?> - Luke Watts</p>
        </footer>

      </div><!-- container  -->
      
      <?php wp_footer(); ?>

  </body>
</html>
<!-- END OF footer.php -->

In the index.php file, place the template tag, get_footer(), where our markup was. Here’s how the index.php file will now look:

<?php get_header(); ?>

      <section>

        <main>
        <!-- START OF "The Loop" -->
        <?php if( have_posts() ) : ?>

          <?php while( have_posts() ) : the_post(); ?>

          <article>
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <?php the_content(); ?>
          </article>

          <?php endwhile; ?>

        <?php endif; ?><!-- END OF "The Loop" -->

        </main>

        <?php if( is_active_sidebar( 'noesis-right-sidebar' ) ) : ?>

        <!-- START OF sidebar.php -->
        <aside>
          
          <?php dynamic_sidebar( 'noesis-right-sidebar' ); ?>

        </aside>

        <!-- END OF sidebar.php -->
                
        <?php endif; ?>

      </section>

<?php get_footer(); ?>

Template Part: sidebar.php

By now, you probably get the idea. However, unlike the other parts, we’re going to move over a small bit more than simply what’s between the comments (and, of course, the comments themselves).

You’ll notice just before <-- START OF sidebar.php --> there is the if statement which checks if we have widgets in our sidebar or not. And just after <-- END OF sidebar.php --> there is an endif. We’ll need to copy these over to our sidebar.php file too.

“Why is it done like that?”, I hear you ask. Let’s imagine we have no widgets in our sidebar and therefore WordPress will not render any markup for the widgets. Well, because our aside tags are inside the if statement too, they won’t be rendered. So, of course, we don’t want our comments showing up when nothing else in our sidebar has been created. Therefore, we need to place them inside our if statement.

Once you’ve create sidebar.php, go ahead and cut and paste our markup over. Your sidebar.php file should now contain the following:

        <?php if( is_active_sidebar( 'noesis-right-sidebar' ) ) : ?>

        <!-- START OF sidebar.php -->
        <aside>
          
          <?php dynamic_sidebar( 'noesis-right-sidebar' ); ?>

        </aside>

        <!-- END OF sidebar.php -->
                
        <?php endif; ?>

And, of course, you need to insert the get_sidebar() template tag; the index.php file should now look like this:

<?php get_header(); ?>

      <section>

        <main>
        <!-- START OF "The Loop" -->
        <?php if( have_posts() ) : ?>

          <?php while( have_posts() ) : the_post(); ?>

          <article>
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <?php the_content(); ?>
          </article>

          <?php endwhile; ?>

        <?php endif; ?><!-- END OF "The Loop" -->

        </main>

<?php get_sidebar(); ?>

      </section>

<?php get_footer(); ?>

Adding CSS Styles

Now, we need to make sure our theme is fitting together as we expect. When working like this it is quite difficult in the beginning to visualise. Also, because this is a WordPress starter theme, we don’t want to do too much styling because we would end up removing a lot of it when we start building this into a fully featured theme. However, we still need to start giving things dimensions, floating, positioning and so on. When I begin styling, I break each elements styles into the following:

  1. Dimensions: height, width
  2. Positioning: float, positioning, margin, padding, top, left, right etc.
  3. Visibility: display, visibility, overflow
  4. Theme: font-family, font-size, line-height, color, background-color etc.

Rather than simply placing everything in alphabetical order, which offers no practical use, if you group things like this, then when something isn’t the right size, you now it’s a dimensions problem. When it doesn’t sit in the right place, it’s positioning, and so on. Also, this means you can have everything sized and positioned before needing to worry about aesthetics such as colours and text related issues. You could even place all theme related CSS in a separate file and quickly change the look without messing with the layout. This is a more modular way of writing CSS.

Anyone familiar with OOCSS, SMACSS or BEM will have heard these concepts before. To make the most of this workflow, you should use SASS, LESS, Stylus or any other CSS pre-processor to easily accomplish this, whilst still keeping your CSS clean.

This may seem off-topic, but I wanted to explain why the CSS I’m about to use is structured the way it is. That said, use whatever method you’re comfortable with. However, anyone building themes should aim to write CSS in a way that’s scalable and maintainable from day one. We’ve all seen themes with terrible CSS, and it’s a shame when such time and effort goes into every other part of a theme, and the CSS is simply an after thought. Not necessarily the designing of the theme, but the code standard of the CSS.

Anyways, let’s write our styles. The first thing I do is change box-sizing to use border-box. However, a recent CSS Tricks article recommends a slight modification to this process for better modularity. So, we’ll use that.

We also have no classes, so we’ll be styling each HTML element (header, nav, footer, aside, section and main) to act as our row. Our first div will be the container.

Here’s the CSS to be placed in style.css:

/*
Theme Name: Noesis
Theme URI: http://demo.luke-watts.com/noesis
Author: Luke Watts
Author URI: http://luke-watts.com/
Description: Semantic, minimally styled starter theme.
Version: 1.0
Tags: semantic, minimal styles
Text Domain: noesis

This is a minimally styled starter theme which will be the foundation of all future themes....EVER!
*/

/**
 * @link: http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
html: 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* Make images responsive */
img {
  max-width: 100%;
  height: auto !important;
}

/* Use our first div as a container */
body > div:first-child {
  width: 99%; 
  margin: 0 auto;
  max-width: 1200px;
  border: black 1px solid;
}

/* Center text */
body > div:first-child > header, body > div:first-child > footer {
  text-align: center;
}

/* Use the section element as a row */
body > div:first-child section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  *zoom: 1;
}

body > div:first-child section::before, body > div:first-child section::after {
  content: " ";
  display: table;
}

body > div:first-child section::after {
  clear: both;
}

body > div:first-child section main {
  width: 75%;
  float: left;
  padding-left: 1em;
  border: black 1px solid;
}

body > div:first-child section aside {
  width: 25%;
  float: left;
  padding-left: 1em;
  border: black 1px solid;
}

nav {
  border: black 1px solid;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  margin-right: 2em;
}

Not too much going on there. I’ve used a border on each element so we can see exactly how everything sizes and aligns. Other than that, it’s all dimension, position and visibility related styles.

Taking Your WordPress Starter Theme Further

From here, the options are limitless. You can use what you’ve learned to add more menus, more sidebars, more stylesheets and JavaScript. You can add comments and search functionality, and could even look into creating shortcodes using the Shortcode API.

In Summary

Hopefully, this series has shown you that building a theme is not as difficult as it seems at first. As long as you work in small chunks and tackle one problem as they arise, you’ll find WordPress makes theme development quite straight forward. Also, most of what you’ve learned here is the same for plugin development. It’s all there in the WordPress Codex!

If there’s something you’re having trouble with, feel free to leave a comment here and I’ll offer whatever help and advise I can. Thank you all very much for reading – as always I’d really like to hear your feedback, and remember, Code is Poetry!

Share.

About Author

Founder and Lead Developer at Affinity4.ie, a web development agency in Galway, Ireland. Develops mosty with WordPress, Laravel, PHP, MySQL, Git, Github, Sass and Compass.

Leave A Reply

  • fouzi

    Thank you for the simple and clear explanations. I am a beginner for a month I’ve read several articles about creating wordpress themes, it is not easy to make a strong theme, but it’s exciting to try. I have a question about the I’ve read that it is useless. What do you think? Thank you again for your simplified method.

    • http://luke-watts.com/ Luke Watts

      I think it’s just about how we think about the markup. I don’t think of the etc as elements different to a They’re just named in a way that means we no longer have to use ids like “header”, “footer” etc. So hgroup is just a nice way to group some headings.

      I find ‘s useful if you want a hero section or a tagline with a h2 and h3 to be larger than other h2/h3 elements. Or have a different font. So just give a class to the hgroup allows easier styling for typographic design tweaks.That said I’m against doing anything just for the sake of it. Markup should fbe lean and descriptive. No “html5 shoe” fits all. Find what works best for the situation :)

  • http://www.hirewpgeeks.com Tracey Jones

    Luke Watts your content is vary nice to understand that how to build a wordpress starter theme, I am vary glad to say its vary helpful for everyone who read this post. Thanks for sharing with us great post.

  • https://www.yarddiant.com/ Shimna Ashwin

    Nice post, its very helpful specially for beginners.

    • http://luke-watts.com/ Luke Watts

      Glad to hear it! Thanks for reading