OK folks, here’s the final installment of the hefty ‘create your own wordpress theme’ tuts. What I’m basically going to do to this time is demonstrate a few different small php scripts that bring that ever-important wordpress functionality to your site. I will outline where the different snippets go within your code, and what each bit means, so you can play with the variables yourself!

The fantastic thing about Wordpress is; there is so much you can do with it, it’s so versatile and there’s a massive community out there constantly coming up with new plugins, ideas and improvements. To discover more that you can do with this awesome blogging platform - visit the Wordpress site at www.wordpress.org or go to the wordpress codex section for more code and help.

Blog functionality

OK, let’s attack the bulky bit first. Wordpress’ central use is as a blog. The wordpress backend already gives you all the tools you need to create, edit and organise your blog articles - but you need to put some code into your theme’s files so the blog articles appear on the site.

Treating the index.php file as your primary blog page, the code below will input blog functionality into your site. You will most likely want to place this information between the ‘content’ div, where we currently have just a paragraph of text. The descriptions in brackets are just to tell you what each line’s purpose is, don’t actually include this in your code:

<?php if(have_posts()) : ?> (php asks if there are any posts)
<?php while(have_posts()) : the_post(); ?> (if there are posts - do this below:)

<div class=”post” id=”post-<?php the_ID(); ?>”> (begins div ‘post’ - the php automatically assigns the wordpress post id as the CSS id - so you can edit individual posts using CSS)

<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2> (creates the post header - the php draws in the individual blog titles from the database.)

<div class=”entry”> (starts div ‘entry’)

<?php the_content(); ?> (php brings in the content from your article)

<p class=”postinfo”> (starts paragraph ‘postinfo’)
<?php _e(’Filed under:’); ?> <?php the_category(’, ‘) ?> <?php _e(’by’); ?> <?php the_author(); ?> (here the php calls up loads of meta information about the articles and cleverly inserts it to create a nice phrase - ‘Filed under ‘category’ by ‘author name’)
<br />
<?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?> (php displays if there are any comments and provides a link to these comments)
<?php edit_post_link(’Edit’, ‘ | ‘, ”); ?> (inserts link for post author to edit post)
</p> (closes paragraph ‘postinfo’)

<!– <?php trackback_rdf(); ?> –> (pulls in RSS capabilities)

</div> (ends div ‘entry’)
</div> (ends div ‘post’)

<?php endwhile; ?> (end php condition ‘if there are posts’)

<?php else : ?> (if there aren’t any posts - do this instead:)
<div class=”post”>
<h2><?php _e(’404 Error: Not Found’); ?></h2> (displays 404 error page)
</div>
<?php endif; ?> (ends php whatif statement)

There seems a lot of code there but if you take out my descriptions and condense it, it’s only short and pulls in plenty of information on your posts. You only need to put this code in once, regardless of how many posts you have it will pull all the posts up and display them in order on your page

If you want to display the date on your blog posts you can insert the following php where you wish it do display, in the ‘postinfo’ area’s usually your best bet:

<p>Posted: <?php the_time(’F j, Y’); ?> at <?php the_time(’g:i a’); ?></p>

which will render in the format:

‘Posted: May 9th, 2008 at 10:28am’

For information on inserting date and time information into your wordpress themes - visit the Wordpress docs section here.

There is a plethora of other mini-scripts and lines of code you can slap into the body of your theme to spruce it with functionality but above outlines the major blog technology that made Wordpress so popular in the first place.

Now a few other bits:

Header

There’s little bits of WP php we can even sneak into your header.php file to add tricks to your site. The first few below are to be placed within the <head> area:

Title
<title><?php bloginfo(’name’); ?><?php wp_title(); ?></title> (replaces your static title with a dynamic title that changes according to each individual page name as specified in your Wordpress posts.)

Wordpress Stats
<meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” /> (this doesn’t really do anything for your blog but helps WP to gather stats on it’s users)

RSS/Atom Feeds
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(’rss2_url’); ?>” /> (RSS2)
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(’rss_url’); ?>” /> (RSS 1)
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(’atom_url’); ?>” /> (Atom)
<link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” /> (pingback)

Archives
<?php wp_get_archives(’type=monthly&format=link’); ?> (displays links to your monthly archives)

There are also other snippets of code that can actually go anywhere in your site but are most likely found in the header area, but are no good within <head> and must make sure they’re placed within the actual <body> of your site:

Header Title
<h1><a href=”<?php bloginfo(’url’); ?>” title=”<?php bloginfo(’name’); ?> <?php _e(’home page’); ?>”><?php bloginfo(’name’); ?></a></h1> (creates a header link with your blog name, as specified in the Wordpress options area - the name you decided when building your WP site.)

Header Description
<p><?php bloginfo(’description’); ?></p> (pulls in the description, usually to be used as a slogan or tagline, which can also be changed in the options section of Wordpress)

Menu and Sidebar

If you want to pull your pages into a menu automatically, so you don’t have to code new links into your menu everytime you create a new page, or if you want your categories, archives and such displayed in your menu/sidebar - the code below is for you:

Insert Pages
<ul> <?php wp_list_pages(’depth=1&title_li=’); ?> </ul> (pulls your individual page links into an unordered list)

Display Categories
<ul> <?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?> </ul>

Display Archives
<ul> <?php wp_get_archives(’type=monthly’); ?> </ul>

Display Blogroll
<?php get_links_list(); ?>

Meta
<ul>
<?php wp_register(); ?> (new users click here to register)
<li> <?php wp_loginout(); ?> </li> (login/logout)
<li> <a href=”<?php bloginfo(’rss2_url’); ?>” title=”<?php _e(’Syndicate this site using RSS’); ?>” class=”feed”><?php _e(’Entries <abbr title=”Really Simple Syndication”>RSS</abbr>’); ?></a> </li> (sign up to post RSS feeds)
<li> <a href=”<?php bloginfo(’comments_rss2_url’); ?>” title=”<?php _e(’Syndicate comments using RSS’); ?>”><?php _e(’Comments <abbr title=”Really Simple Syndication”>RSS</abbr>’); ?></a> </li> (sign up to comment RSS feeds)
<li> <a href=”http://validator.w3.org/check/referer” title=”This page validates as XHTML 1.0 Transitional”><?php _e(’Valid’); ?> <abbr title=”eXtensible HyperText Markup Language”>XHTML</abbr></a> </li> (is this site valid?)
</ul>

Footer

I’m not really going to bother with the footer, as most people tend to put their own links in the area. Plus there’s not really that much that can go down there - you could pull in your page links as above, or put a link to Wordpress.

The only script that pops to mind is the ‘timer’ which shows how long it takes for the page to be displayed:

<!– <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –>

But to be honest that’s pretty out-of-date now.

Other Little Bits

There are literally hundreds of scripts and plugins for Wordpress, constantly being developed all the time. But there are a certain few that just never die and always pop up on blogs, either because they’re so useful or just because people think they actually serve some purpose.

Search

<form method=”get” id=”searchform” action=”<?php bloginfo(’home’); ?>/”>
<div>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”15″ /><br />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>

(the above form should search your blog for given keywords, but I would recommend taking a peek at other themes to create a ’search results’ page and to actually hide the above code away in it’s own file that can easily be called up anywhere on your blog with the following php command:)

<?php include (TEMPLATEPATH . ‘/searchform.php’); ?> (/searchform.php refers to the filename of your search script)

The Dreaded Wordpress Calendar
<?php get_calendar(); ?> (usually displayed in the sidebar - make sure to place it within <li> if it’s in a menu.)

Widgets

If you’re not sure what Widgets are, check them out here. They’re basically another method by the great WP community to enhance your blog and make adding and editing functionality to it far easier and cleaner.

To insert widgets into your site anywhere, 2 lines of code are all you need:

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
(in here insert any content you want to display in case you don’t have widgets)
<?php endif; ?>

You can then use the ‘Widgets’ tab in the Presentation area of Wordpress to add and play with your widgets! (that sounds rude… not intended!)

However, there is also a Widgets plugin you can get hold of from the Wordpress site and most likely many other places on the web. I haven’t actually used this plugin so I’m not quite sure what’s required and what the benefits are. Why not check it out for yourselves?

That’s all for today folks

I keep mentioning this at the end of every WP tut. Wordpress is easy to use, it’s exceptionally well built but has such extreme potential if you wish to push it, experiment and learn. These tutorials don’t even scratch the surface, but provide a slight insight into how you go about building your own theme - which, especially if you’re a designer/developer offering your own services built on the Wordpress package - it’s pretty essential to know how to do.

The best way to get really handy with anything, not just Wordpress, is to keep trying different things. Take an existing theme - break it down and find out what everything does and why it does it. Then try incorporating new scripts, designs, plugins etc and see what happens! You will never fully explore WP capabilities - it’s just too versatile!

I hope this series has provided useful. You can find part1 here and part 2 here. If you have any questions or problems please leave comments or get in touch via my contact page.

Nathan

Filed under: Blogging, Tutorials by admin