First WordPress Theme: 4 - Comments

You have your index.php file (as made here). We need to put the comments in.

1. Download comments.zip and extract the contents (comments.php and comments-popup.php) to your theme directory - again, this is based on the default WordPress theme.

2. We need to add the call to comments.php into the code of index.php

In index.php, find the point in your code where the post output is finished, but before the while comand loops to the next post

It will almost certainly be between </div> of the id=”post” div and the <?php endwhile; ?>

and paste this

<?php comments_template(); ?>

(You could have the comments and form above the post, but this isn’t common…)

Save it all and upload it - the comments and form should be appearing on the individual post pages.

That’s it - that’s a workable Wordpress theme - not very advanced, but something that can be built on. The next thing to explore is the array of template tags that Wordpress offers.

If these tutorials have helped you get started with theme design - please give us a link from your blog, eg…

<a href="http://www.codescheme.net/">WordPress Theme Design</a>

First WordPress Theme: 3 - Header and Footer

Separate header and footer files - PHP includes

As a programming language, PHP was expressly designed to work in close conjunction with (X)HTML.

A major part of its usefulness are the include functions, where a separate file and its php code is “included” into a main file - (this allows files to be edited independently, or you can even select different files, and therefore different code, to be included depending on your requirements).
read more »

First WordPress Theme: 2 - A sidebar

Adding the sidebar to the basic layout.

For simplicity, we’re just going to do 1 sidebar - adding 2,3 sidebars follows the same principles, but with a few complications best left for later.

1. Go to your index.php (from the first wordpress theme tutorial) and cut out the code for the sidebar:- probably something like this

<div id="sidebar">
....
Some dummy text at the moment
....
</div>

read more »

Simple design: a first WordPress Theme: 1

You want to design a Wordpress theme. You know how to do a web page in HTML, know how to upload files to your Wordpress blog, eg. by FTP, but aren’t sure about the PHP bit. It’s not difficult…

First, design a web page - call it index.html, give it a sidebar and somewhere to put the main content (the posts). Use dummy text to give it some body, maybe courtesy of Lipsum (no, it isn’t real Latin)

Put all the CSS in a file named style.css - it has to be named this. While you’re doing the HTML designing, link to style.css in the usual way in the head of the document

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

- this will be replaced shortly

You probably should use all the principles of tableless design, but you don’t actually have to.

You’ll probably want to give the page a header and a footer - most blogs have them.

For now, don’t try putting any fancy code in the <head> of your page.

And to make it really easy, don’t use any images yet.

When the page looks right in Firefox, Internet Explorer and Opera, you’re ready for the next step (Although you could just check it validates at this point). read more »

Redirect visitors to your new Wordpress blog

You moved your blog to a new domain name and want to redirect everything still going to the old location to the new one.

This applies only if you still have some control over the old server and can put a .htaccess file in, via the control panel or FTP.

.htaccess commands apply only to the directory in which the .htaccess file resides, and all the directories under it - so it’s by far the best that it goes in the same directory as your old blog left.

The .htaccess file

A plain text file where server directives are stored. The server reads it before doing anything else like outputting a page and acts on its commands.

No name, just a dot and an extension - some text editors struggle with this. If you are creating a .htaccess in desktop Windows, say, always use Notepad, or something simple. And set your file explorer to display hidden files, while you’re doing it.

The basic command is simple

Redirect /olddir http://www.newdomain.com/newdir/

But this will do a temporary redirect (status 302) which search engines do not like - it’s long been favored by spammers, so we need a 301 status code.

Redirect 301 /olddir http://www.newdomain.com/newdir/

(or

RedirectPermanent /olddir http://www.newdomain.com/newdir/

does the same thing).

Mapping the old domain to the new - mod_rewrite.

This requires the PHP mod_rewrite module to be installed and active on your server. It usually is - you can check the php_info in your control panel, or just try it and see if it works.

Again, in your .htaccess file

Options +FollowSymLinks
RewriteEngine ON
RewriteRule ^(.*)$ http://www.newdomain.com$1 [R=301,L]

You need the first two commands to get mod_rewrite going

The ^(.*)$ is an example of a regex, or regular expression. Complicated things, but this one essentially captures a path, any path, into a reference $ which is then used in the second part of the command as $1

[R=301,L] the redirect is to be a status 301 http request and the L is for last command - we’re finished…

Unless you want to redirect all requests, regardless of the page requested, to the index page of new domain, in which case:-

RewriteRule /.* http://www.newdomain.com/ [R=301,L]

That is it - upload the .htaccess to the old server and see if it does what it’s supposed to. (It probably won’t, these things rarely work first time - but stick at it…).

Related resources:

Megaboring, but total explanation of mod_rewrite

(If you’re looking at this tutorial in 800 x 600px the commands have been kept on the same line with non-breaking spaces where necessary - you might need to go up one resolution)

Customizing WordPress posts by Author

You’ve got a multiuser blog and want mugshots of the different proud authors next to their posts - this is how…

The key is to use the template tag the_author_ID()

This returns the numeric value of the user ID for the current post - unlike the category or categories of a post, it’s unique - so the programming becomes relatively simple. See wp-admin/users.php for the values on your blog

In strict programming terms, this is a bit of bodge - or you could say it takes advantages of the unique flexibility of PHP to dip in and out of HTML code. The following block of code needs to go within the Loop of posts on index.php. We are going to switch the value of $image_path according to the value of the function the_author_ID()

<?php

switch (the_author_ID())
{

case 1:
$image_path = ‘http://www.mysite.com/uploads/john.jpg’;
break;

case 2:
$image_path = ‘http://www.mysite.com/uploads/mary.jpg’;
break;

default :
$image_path = ‘http://www.mysite.com/uploads/default.jpg’;
}

?>

Don’t forget the break;

Probably best to use absolute urls in this case, especially if you’re using mod_rewrite seo-friendly urls. And the form of the post will be something like this

<div class=”post”>

<div style=”float:right;”><img src=”<?php echo $image_path; ?>” height=”140″ width=”100″ /></div>

<h2><?php the_title(); ?></h2>

<?php the_content(); ?>

</div>

Further work
For perfection, you might want to use relative locations in the filesystem and check that the photo exists before outputting a broken path, using file_exists()

and, if not, supplying a default that you know does exist.

Also life is going to be easiest if all your photos are the same size - if you don’t want to make your life easy, something like this is the way to go:-

case (2):
$image_path = ‘http://www.mysite.com/uploads/mary.jpg’;
list($width, $height, $type, $attr) = getimagesize($image_path);

break;

But see getimagesize for details

There’s lots more to do with individual authors and their posts…

(These discussions assume some working knowledge of php and how to put it together - the code is given as suggestions, so you’ll need to do a bit more than just a cut ‘n paste to get results for your blog…)

WordPress - the Loop

Sitting bang in the middle of index.php, this is the heart of Wordpress’ functions - to print out the posts of a page.

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

Post Data

<?php endwhile; else: ?>

“No posts found”

<?php endif; ?>

This will display all the posts for a given page - for example, if the index page, the 10 (say) most recent posts, or if an archive page, the posts for that particular month (say). A call has gone to the database to return a given number of selected posts, in a given order.

And the second part - if no posts are available to be selected for that page, it supplies some message to indicate this…

Post content

Post content is output using the template tags. The full and rather daunting list is here.

It is possible to use other ways, but for now, why not use all the functions the wordpress developers have supplied.

Because what they output varies according to the current post [the the_post() bit ] template tags are only ever going to work in the Loop.

For example, <?php the_title(); ?> outputs the post title, as simple as that.

Similarly, the_content(), the_permalink(), etc., fairly self-explanatory.

So a very simple template for a post would be

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>

<?php the_content(); ?>

<p>Posted by <?php the_author(); ?> - <?php the_date(); ?></p>

</div>

Note div class=”post ” and not div id=”post” which won’t be valid XHTML, because most likely there will be several of them on a page.

There are more complications with template tags - to be discussed…