Simple WordPress theming for matching your site

When I added this  blog to my personal site, I really wanted to just maintain the look and feel of my existing site, but wanted to have the flexibility to make posts without having to SSH into my hosting, pop open VIM, and directly make edits to my pages.  I already had a layout that I had customized from free CSS templates because I’m not a dev-igner and also because I wanted to save myself some time.  Here’s how I did it.

Install WordPress

This was cake!  I use 1and1 hosting (shameless plug, affiliate link, if you just use the basics, it’s $6 / month for 150gb storage, unlimited upload/download, and CGI).  They have a (free) feature that lets you “click and build” a number of free solutions, one of them being WordPress.

Open the WordPress admin interface

Using the login you have setup, go to http://yourwordpressURL.com/wp_admin.

Hack the theme

This is a little tricky, I happen to know PHP which makes it easier since WordPress is all done in PHP.  Anyways, from the admin interface, there’s an “appearance” section.  In this section is a link to “editor” which lets you edit the raw source  files for WordPress.  The “Templates” appear at right.  I only revised four pages:

  • Header
  • Main Index Template
  • Single Post Template
  • Footer

Header

I modified the header section to have the basic HTML for my site all the way up to the section where I wanted posts to appear.  Since I’m using a subdomain and wanted to source my CSS and JavaScript files, I added the base URL for my root domain <base href=”http://gusclass.com/“>.  This saved me from having to use absolute URIs to point to my includes.

Main Index Template

I modified the Main index template to have some very simple HTML in it and inserted the <?php ?> sections for variables that WordPress assigns to posts.  The following code shows what this looks like:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */

get_header(); ?>
<div id=&quot;page&quot;>
  <div id=&quot;page-bgtop&quot;>
    <div id=&quot;content&quot;>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class=&quot;post&quot; id=&quot;post-<?php the_ID(); ?>&quot;>
          <h2 class=&quot;title&quot;><a href=&quot;http://blog.gusclass.com/?p=<?php the_ID(); ?>&quot;><?php the_title(); ?></a></h2>
          <div class=&quot;entry&quot;>
            <?php the_content('<p class=&quot;serif&quot;>' . __('Read the rest of this page &amp;raquo;', 'kubrick') . '</p>'); ?>
            </p><a href=&quot;http://blog.gusclass.com/?p=<?php the_ID(); ?>&quot;>Read and comment</a></p>
          </div>
        </div>
        <?php endwhile; endif; ?>
    </div>
    <!-- end #content -->
    <?php get_sidebar(); ?>
    <div style=&quot;clear: both;&quot;>&amp;nbsp;</div>
  </div>
  <!-- end #page -->
</div>
<?php get_footer(); ?>

There are a couple things happening in the above code:

  • Including template files
  • Looping and printing posts

The includes for the templates are:

  • Header – get_header();
  • Sidebar – <?php get_sidebar(); ?>
  • Footer – <?php get_footer(); ?>

All this does is dump the content of the WordPress templates into the page which is handy for reuse.

To loop and print all of the posts, I just inserted HTML that wraps the posts and used some handy PHP for looping through the entries.

The code:

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

Starts a while loop that will iterate over all the posts.

Within the while loop, the following variables are used:

  • Post ID – <?php the_ID(); ?>
  • Post Title – <?php the_title(); ?>
  • Post Content – <?php the_content(‘<p>’ . __(‘Read the rest of this page &raquo;’, ‘kubrick’) . ‘</p>’); ?>

After the content section is complete, I just added the code:

<?php endwhile; endif; ?>

Which tells the interpreter where to stop the loop.

Single Post Template

The single post template is almost identical to the Main Index Template.  The following code shows what I have:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */

get_header(); ?>

<div id=&quot;page&quot;>
  <div id=&quot;page-bgtop&quot;>
    <div id=&quot;content&quot;>

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

    <div class=&quot;navigation&quot;>
      <div class=&quot;alignleft&quot;><?php previous_post_link( '%link', '&amp;laquo; %title' ) ?></div>
      <div class=&quot;alignright&quot;><?php next_post_link( '%link', '%title &amp;raquo;' ) ?></div>
    </div>

    <div <?php post_class(); ?> id=&quot;post-<?php the_ID(); ?>&quot;>
      <h2><?php the_title(); ?></h2>

      <div class=&quot;entry&quot;>
        <?php the_content('<p class=&quot;serif&quot;>' . __('Read the rest of this entry &amp;raquo;', 'kubrick') . '</p>'); ?>

        <?php wp_link_pages(array('before' => '<p><strong>' . __('Pages:', 'kubrick') . '</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
        <?php the_tags( '<p>' . __('Tags:', 'kubrick') . ' ', ', ', '</p>'); ?>

        <p class=&quot;postmetadata alt&quot;>
          <small>
            <?php printf(__('This entry was posted on %1$s at %2$s and is filed under %3$s.', 'kubrick'), 
                get_the_time(__('l, F jS, Y', 'kubrick')), get_the_time(), get_the_category_list(', ')); ?>
            <?php printf(__(&quot;You can follow any responses to this entry through the <a href='%s'>RSS 2.0</a> feed.&quot;, &quot;kubrick&quot;), 
               get_post_comments_feed_link()); ?>

            <?php if ( comments_open() &amp;&amp; pings_open() ) {
              // Both Comments and Pings are open ?>
              <?php printf(__('You can <a href=&quot;#respond&quot;>leave a response</a>, or 
                <a href=&quot;%s&quot; rel=&quot;trackback&quot;>trackback</a> from your own site.', 'kubrick'), get_trackback_url()); ?>

            <?php } elseif ( !comments_open() &amp;&amp; pings_open() ) {
              // Only Pings are Open ?>
              <?php printf(__('Responses are currently closed, but you can <a href=&quot;%s&quot; rel=&quot;trackback&quot;>trackback</a> from your own site.', 'kubrick'), 
                get_trackback_url()); ?>

            <?php } elseif ( comments_open() &amp;&amp; !pings_open() ) {
              // Comments are open, Pings are not ?>
              <?php _e('You can skip to the end and leave a response. Pinging is currently not allowed.', 'kubrick'); ?>

            <?php } elseif ( !comments_open() &amp;&amp; !pings_open() ) {
              // Neither Comments, nor Pings are open ?>
              <?php _e('Both comments and pings are currently closed.', 'kubrick'); ?>

            <?php } edit_post_link(__('Edit this entry', 'kubrick'),'','.'); ?>

          </small>
        </p>

  <?php comments_template(); ?>

  <?php endwhile; else: ?>

    <p><?php _e('Sorry, no posts matched your criteria.', 'kubrick'); ?></p>

<?php endif; ?>
      </div>
    </div>
</div>
<?php get_sidebar(); ?>
    <div style=&quot;clear: both;&quot;>&amp;nbsp;</div>
  </div>
  <!-- end #page -->
</div>
<?php get_footer(); ?>

The page template is virtually identical to the index template except for the metadata and comment section which has the links and content for embedding comments.

Footer

Just as with the header, the footer has straight HTML that I copied from my site.

Additional notes

This will get you the minimum that you need to have a simple layout for your site. The rest of the templates for WordPress should still be filled out. I’ll strongly recommend you set up your 404 template, for example. The cool thing is that you can use static content if you choose to.
Profit
So that’s all there is to it. If you’re looking to create a very simple layout and publish with ease, this is the easiest way to go. Keep it real!