Part 5: Preparing for The Loop With Test Content

The Loop isn’t as scary as it sounds or seems, but it seems to be what trips beginners up. So on that, I felt it’d be a great time to look back at what we’ve covered, because if you’ve made it this far the Loop will be a walk in the park.

We’re going to perform two tasks here, getting content for us to play with, and cleaning index.php out so it’s ready for building the Loop.

Resources

For this tutorial you’ll need to have WordPress installed. If you’re not sure how to do that, please read one the following.

• Setting up Self-hosted WordPress
• Setting up WordPress on Mac, Windows, or Ubuntu.

Preparing for The Loop

What we don’t yet have is content, and it’s something we need. Creating it all yourself is time consuming and pointless. Instead, we’ll be using what the WordPress.org Theme Review Team use. If you’d like to know what it includes, you can check it out on the codex and can download it straight away.

Uploading Sample Content

The test data is provided as an xml file and we need to import it, here’s how.

Head to Dashboard » Tools » Import and choose WordPress

Image may be NSFW.
Clik here to view.

Odds are you’ll need to install it and be presented with this

Image may be NSFW.
Clik here to view.

Hit install. When it’s ready, activate the plugin and run the installer with the link provided, and on the next screen choose the xml file you want to upload.

Image may be NSFW.
Clik here to view.

You can choose to import the authors, make new ones, or assign them to your username, it doesn’t really matter which one you pick. Just make sure you do select to import attachments.

Image may be NSFW.
Clik here to view.

Hit submit and let it go (be patient, it can take a while). When it’s complete we have loads of posts, pages, comments, categories, and tags with which to utilize.

Readying index.php

Open it up and start deleting. I’ve opted to cut down everything in the main area except one example, as it’ll serve as a great reminder of what we can use. I’ve also moved <div class="container"> from the top of sidebar.php to index.php above get_sidebar, and I advise you do the same.

This is my index.php at present.

<?php get_header(); ?>

<div class="container">
        <?php get_sidebar(); ?>
      <div class="span9">
        <!-- Download
        ================================================== -->
        <section id="download-bootstrap">
          <div class="page-header">
            <h1>1. Download</h1>
          </div>
          <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
          <div class="row-fluid">
            <div class="span6">
              <h2>Download compiled</h2>
              <p><strong>Fastest way to get started:</strong> get the master CSS file and replace your existing Bootstrap CSS file (remember to back up your old file before overwriting) No docs or original source files.</p>
              <p><a class="btn btn-large btn-primary" href="https://github.com/littlesparkvt/flatstrap/blob/master/assets/css/bootstrap.css" >Download Bootstrap</a></p>
            </div>
            <div class="span6">
              <h2>Download source</h2>
              <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
              <p><a class="btn btn-large" href="https://github.com/littlesparkvt/flatstrap" >Download Flatstrap source</a></p>
            </div>
          </div>
        </section>
      </div>
    </div>

  </div><!-- closing .container -->
<?php get_footer(); ?>

Which leaves us with this

Image may be NSFW.
Clik here to view.

Moving Right Along

We’ve set our WordPress install and Theme-in-progress up so that we can jump straight into the Loop relatively care free. It’s really easy, and we’ll walk you through the whole way!

Table of Contents

• Part 1: Setting up Self Hosted WordPress
• Part 2: Grasping Theme Anatomy
• Part 3: Templating with PHP
• Part 4: Beginning Our First WordPress
• Part 5: Preparing The Loop with Test Content
• Part 6: Learning The WordPress Loop
• Part 7: Getting Familiar with the Template Hierarchy and Building Pages
• Part 8: Creating an Easy, All-in-One Archive Page for Your Theme
• Part 9: Building Comments into your Template
• Part 10: Build a Dynamic, Customizable Menu
• Part 11: Widgetized Sidebars
• Part 12: Implementing Search
• Part 13: Your 404 Page

The post Part 5: Preparing for The Loop With Test Content appeared first on YinPress.