My Wordpress Dev

Myth – as in ‘My Theme’ : step 1

Wednesday, October 28th, 2009

This is by no means a tutorial. Just my notes while I try to write a Wordpress theme. There are umpteen themes available out there, so why write one of your own? Strictly educational…

The theme (also used in this blog) is still in the making. That probably explains the ugly look of the site. Hopefully that should change as the theme progresses.

Starting Point

So, I have started with pretty much an empty theme. All it has is a style.css file with following contents:

/*
Theme Name: Myth - as in 'My Theme'
Theme URI: http://wp.mahesha.com/
Description: A simplistic theme
Version: 1.0
Author: Mahesh Asolkar
Author URI: http://tech.mahesha.com/
Tags: fixed width, widgets
*/  

body {
  font-family : "Georgia", serif;
  font-size : 1.2em;
}

An index.php file with:

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

get_header(); ?>

<?php get_sidebar('north'); ?>

  <div id="content" class="narrowcolumn" role="main">

  <?php if (have_posts()) : ?>

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

      <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

        <div class="entry">
          <?php the_content('Read the rest of this entry &raquo;'); ?>
        </div>

        <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
      </div>

    <?php endwhile; ?>

    <div class="navigation">
      <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
      <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
    </div>

  <?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    <?php get_search_form(); ?>

  <?php endif; ?>

  </div>

<?php get_footer(); ?>


This is almost a copy of the same file from the default theme that comes with Wordpress. The only change I probably made was move the get_sidebar('north') above the content and specifically called for ‘north’ sidebar. This also means that I have a sidebar-north.php file that has the sidebar implementation. Here’s the content of that file:

 <?php
# Myth Sidebar
?>
<h1>Activities</h1>
<ul id="sidebar_north">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Activities Bar') ) : ?>
  <li id="about">
    <h2>About</h2>
    <p>This is my blog.</p>
  </li>
  <li id="links">
    <h2>Links</h2>
    <ul>
      <li><a href="http://wp.mahesha.com">Home</a></li>
    </ul>
  </li>
<?php endif; ?>
</ul>
 

Using the dynamic_sidebar('Activities Bar') function sort of widgetizes the theme. You can use the theme preferences in the admin panel to add widgets in the sidebar. This also requires the definition of the ‘Activities Bar’ sidebar. This is done in the functions.php file, like so:

<?php
automatic_feed_links();

if ( function_exists('register_sidebar') ) {
  register_sidebar(array(
    'name' => 'Activities Bar',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
  ));
}
?> 

So there. That’s where I am at right now, the starting point.

Wish me luck with this theme. I have no plans on what I want it to look like, function like. I am going to let the beast grow on its own!

Tags: Myth Theme, Theme, Wordpress
Posted in Uncategorized | Comments