How to Build a WordPress Starter Theme: Part 3 – The index.php File

0

In this part of the WordPress Starter Theme series, we’ll move the HTML we wrote in Part 1 into our index.php file and then insert some common WordPress Template Tags, including the necessary hooks such as wp_head and wp_footer to get our admin bar to display from the frontend of our theme. Once that’s done, we’ll create our functions.php file, register our stylesheet, and link it to our theme correctly using WordPress hooks, filters and actions. This is where the fun and creativity truly begins, so lets jump right in!

At this point, I could tell you to go ahead and move ALL the HTML from Part 1 into the index.php file, but then we’d have alot of HTML to replace and PHP to add. It would get confusing very quickly, so instead, we’ll work in much the same way we wrote our HTML, but this time with some WordPress Functions and Template Tags included. We’ll tackle the problems as they naturally arise and cover the most important tags in a logical problem/solution workflow.

Setting Up the Document

The first thing we would do when writing any HTML page would be to set up the document. The index.php file is not much different. We’ll use our first two WordPress Functions/Template Tags here also. Open index.php and write the following:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <title></title>
</head>
<body <?php body_class(); ?>>

</body>
</html>

The language_attributes() function simply handles the languages which are defined by the user from the Settings of WordPress, such as lang="en-GB". RTL (Right-to-Left) language support is handled by this function also.

The body_class() tag will display a series of classes specific to the page/content being loaded by WordPress. For instance, on the homepage, it’ll return class="home", and for logged in users with the admin bar set to visible, it will append logged-in admin-bar to the classes. Remember I said we wouldn’t be using classes in our markup? WordPress on the other hand most certainly will be adding classes to our markup in some places. This is another reason why it’s a good idea to leave classes out of your own markup while learning so you can see exactly which classes and markup WordPress is generating for us. Once you’ve saved your index.php file, check your theme in the browser and view the source code to see what each of these functions has done (and to ensure there are no errors at this point).

The first issue we’ll address is the title. Right now, we have a blank title (you’ll see the URL in the page tab) so we want WordPress to generate our Site Name: Description for us. The function for this is wp_title(). Update your index.php file to include the wp_title() function as such:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <title><?php wp_title(); ?></title>
</head>
<body <?php body_class(); ?>>

</body>
</html>

The Title

Now, when you refresh your browser, you’ll see the URL still appears instead of our site name and description. This is perfectly normal. WordPress handles the homepage/frontpage differently than other pages in WordPress. This is because the homepage can be your blog page with your latest posts, or it can be set as a static page by default. For now, we’re going to implement a temporary fix for this issue and we’ll revisit this once we’re working on our functions.php file. For now, simply add the following if/else statement between your <title> tags:

<?php

    $site_name = get_bloginfo( 'name' );        // Returns the "Site Title" set in Settings > General.
    $site_desc = get_bloginfo( 'description' ); // Returns the "Tagline" set in Settings > General.
    $seperator = ': ';

    if ( is_home() || is_front_page() ) {
      echo $site_name . $seperator . $site_desc;
    }
    else {
      wp_title();
    }

?>

The get_bloginfo() function returns an array of information retrieved by WordPress from the Settings table in the database. You can read more about it here.

The if_home() and is_front_page() functions are conditional WordPress Template Tags which simply return true if you are viewing the homepage or a custom page template for the frontpage. If you’re not viewing either of these pages (as in you are viewing a single post page), they return false. However, there are slight differences, so it’s safest to check for both.

Displaying the Admin Bar

The next issue is that when we view the frontend of our site, the admin bar isn’t visible. For WordPress to properly “hook” into your theme, you need two Template Tags: wp_head() and wp_footer(). These two functions are also required for many plugins to work. Essentially, what these two functions allow you to do is inject CSS, JavaScript, and any other code you might need into the <head> section, and just above the <body> tag, which is where we place these functions. Update your index.php file with both of these functions like so:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  
  <title><?php

    $site_name = get_bloginfo( 'name' );        // Returns the "Site Title" set in Settings > General.
    $site_desc = get_bloginfo( 'description' ); // Returns the "Tagline" set in Settings > General.
    $seperator = ': ';

    if ( is_home() || is_front_page() ) {
      echo $site_name . $seperator . $site_desc;
    }
    else {
      wp_title();
    }

  ?></title>

  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

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

Now, refresh your browser and you should see the admin bar. It’s as simple as that! If you view the source code in your browser now, you’ll also see that WordPress has inserted a lot of meta tags and other information where the wp_head() and wp_footer() hooks are, including some JavaScript and CSS for the admin bar.

The Header

Next, we’ll insert some markup and dynamically generate our header info from the Site Title and Tagline used in the Settings > General page. First, we’ll need some markup. Insert the following in the body:

<!-- CONTAINER -->
  <div>

    <!-- HEADER -->
    <header>

      <!-- SITE TITLE & TAGLINE -->
      <hgroup>
        <h1>NOESIS</h1>
        <h2>The Perception of the Mind</h2>
      </hgroup>

      <!-- PRIMARY MENU -->
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
      </nav>
    </header>

    <!-- ROW -->
    <section>

      <!-- MAIN CONTENT -->
      <main>
        <!-- POSTS / ARTICLES -->
        <article><p>This is article 1 in the main content area.</p></article>
        <article><p>This is article 2 in the main content area.</p></article>
        <article><p>This is article 3 in the main content area.</p></article>
      </main>

      <!-- SIDEBAR -->
      <aside>
        <p>This is the sidebar</p>
      </aside>

    </section><!-- END ROW -->

    <!-- FOOTER -->
    <footer>
      <p>&copy 2014 - Luke Watts</p>
    </footer>

  </div><!-- END CONTAINER -->

Our last step for now is to get WordPress to handle the site name and description in the <hgroup>. To do this, we’ll be using a function we’ve seen already called bloginfo(). We used get_bloginfo() to store the name and description in variables which we then echoed out for our <title>. get_bloginfo() returns a value but does not echo it out by default. However, simply using bloginfo() with a parameter will echo that information out. So, in the <hgroup>, replace the text as such:

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

Click save, and refresh in the browser where you should see the header, nav, and footer copyright info. Finally, change the title and tagline in Settings > General to be sure the bloginfo() template tags are working.

In Summary

So far we’ve seen how easy it is to use WordPress Template Tags and Functions to display information in our WordPress Starter Theme. In the next part, we’ll create our functions.php file so we can register our menus, insert our stylesheets and JavaScript, and properly handle our title text.

If you have any questions, comments or feedback, please leave a comment below and I’ll get back to your as quickly as possible. See you in Part 4!

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