I finally dropped the button for the search field in the latest update of the Nusuni Dot Com theme, so I decided to put placeholder text in the search box instead. Here’s how I did it:

The HTML

Here’s the HTML code I use:

<div class="searchform">
  <form method="get" action="<?php bloginfo('home'); ?>/">
<input type="text" value="Search Nusuni Dot Com..." name="s" class="searchbox" onfocus="if(this.value == 'Search Nusuni Dot Com...') { this.value=''; this.style.color='#000000'; }" onblur="if(this.value == '') { this.value = 'Search Nusuni Dot Com...'; this.style.color='#888888'; }" />
</form></div>

Basically the initial value of the field is set to “Search Nusuni Dot Com…”, and if you click on the field when the text is equal to that, the text disappears and the text color is changed to the normal black. If you click off of the field and nothing is entered, the text color changes to the gray and the placeholder text is put back in it.

The CSS

This is the CSS I used for the whole search form:

.searchform {
	float: right;
	width: 170px;
	position: relative;
	margin-right: 10px;
}

.searchbox {	
	width: 170px;
	margin-bottom: 5px;
	margin-top: 5px;
	color: #888888;
}

Nice and simple, but makes your search field look really sexy. Even better, it is compatible with pretty much all somewhat-modern browsers (including IE 6).

I went to load my test server after updating the database with a current Nusuni Dot Com database backup, and to my surprise it kept redirecting to www.nusuni.com. This is because Wordpress 2.3 introduced canonical redirection, which is a good thing, but they did it in probably the stupidest way possible.

Basically they force you to use it without giving you any way to disable it other than editing code. If you are experiencing problems with it, go into the /wp-includes/canonical.php file, then insert “return;” at the top of the redirection_canonical function. Fixed my problem perfectly.

Well, here it is, the newest Nusuni Dot Com Webmaster Tool - an Htaccess Generator.

Right now it is still in its infancy (alpha version), but I’ve tested it thoroughly and asked others to do the same, and it seems to be working perfectly. I will be fixing little interface problems and will be adding in a very nice help system over the next few weeks.

Basically you choose and option you want - like to make www.example.com go to example.com, enter the needed data, and boom, the .htaccess code pops up in a text area on the bottom.

I also updated the How To Redirect All Non-WWW Traffic To WWW post and fixed the code up a bit - the code in the post wasn’t very efficient.

Update: Whoops, fixed the link to the generator. It was pointing to my internal testing server.

Yesterday I wrote about general blog design. Today we’ll discuss something a bit more specific - WordPress theme design. This is a two part post, this post is mostly the boring stuff and the next one will have actual examples and such.

Throughout this tutorial I will probably constantly say “WordPress functions.” By that I mean Template Tags. I apologize for that ahead of time - I’m simply a coder… everything is bits and bytes to me… Hah, tags? Yucky name.

PHP

WordPress themes are created with a scripting language called PHP. Now, some people out there say “the way you create WordPress themes is with template tags - not PHP” but it is, in fact, PHP code. PHP lets you develop web applications. But don’t let that scare you away, today we will only get into the basics of it - and that is all you need to create beautiful WordPress themes.

File Extension - All PHP files should end with .php. Go through and check the existing WordPress themes in the /wp-content/themes directory. Most of the files are .php, and there is always one .css file (we will get into that later).

PHP Blocks - Blocks of PHP code are wrapped in tags called the start and end tags. Depending on your server’s setup you can use a wide range of start/end tags - but the generally accepted way is by doing something like this:

<?php php code ?>

The first bit tells the parser that PHP code is inserted in here, and the last part tells it the PHP code is ending. You can do multiple blocks like this throughout your PHP file.

Syntax - Unless otherwise noted all lines end with a semicolon ( ; ).

Data Types - For the purpose of this tutorial I won’t get into this too much. All you should know is that whenever you pass an argument to a template tag (see below) it has to be wrapped in either a single or double quote (data wrapped in those is called a string).

Calling A Function/Template Tag - 99% of the what you must do to create a WordPress theme is simply calling functions (aka: Template Tags). In a nutshell this means you are telling PHP to run code that exists in the WordPress system somewhere. You can call a function by doing something like “the_title();”. That will tell WordPress to give you the title of a post. The stuff that goes in-between the ( and ) are called arguments - data that is passed to the function. WordPress arguments use a custom style (not PHPs way of doing it), as you will see later in this tutorial.

Error Handling - If something is not working right go back and check your syntax (Does it have a semicolon? Are the parenthesis closed? Are the caps the same as the actual function (PHP is mostly case sensitive, bla() is not the same as Bla()), check the WordPress theme development help files, then go around and ask for help.

The Template Tags

WordPress’ theme capabilities are so powerful thanks to something called template tags. These are nothing more than PHP functions. Basically you create your theme with HTML/CSS, then use template tags to fill in all of the missing content. Here’s an example of a template tag without arguments:

<?php the_title(); ?>

Here is one with an argument:

<?php bloginfo('description'); ?>

Some WordPress functions require arguments, some don’t, while others may have optional arguments. Optional arguments are used to customize how certain things work. For example, if you want to print out all of the categories for your blog you might use a function like this:

<?php wp_list_categories('orderby=name&hierarchical=0') ?>

Absolutely none of those arguments are required - they are merely used to tell WordPress to display the categories in alphabetical order (orderby=name), and to not show them in a hierarchical fashion (so subcategories will display on the same level as regular ones). Notice how all of that is wrapped in a single quote, that is Wordpress’ way of doing arguments.

You can view all template tags for WordPress here. The documentation is very detailed and very helpful.

The Loop

The loop is the meat of your WordPress theme. This is where it loops through any entries it has to display. Usually the beginning of it looks a bit like this:

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

The first line is an if statement, it checks to see if there are posts available. If there are, it runs the second line. Basically for the stuff inside the if statement to run the arguments of the if statement must literally be true. If have_posts() returns false the else statement is run (see below), and if it returns true the next line is run (and so on, until it hits an else or endif statement).

The second line is the actual loop, basically it says “while there are posts available, load in the a post and do the following”. Just like with the if statement, the stuff inside the parentheses must literally be true for the while statement to run. Both of these things are called conditional statements, since something must be true for them to run. Conditionals don’t require semicolons after them (the second line has one at the end of it because the_post() is on the same line, which isn’t a conditional statement).

Inside this while loop is where you print out the post’s title, timestamp, content, comments, etc. Anything that relies on each individual post is put here. We will discuss how to do all that in part 2.

The next part of the loop is the endwhile statement:

<?php endwhile; ?>

That says to end the while loop. Notice how it has a semicolon, that is because endwhile in itself isn’t a conditional statement, it is simply part of one. The same goes for endif below.

The next part of it is for the “just in case scenario”. Let’s say you load a category page and there are zero posts available. This next part of The Loop is what handles that:

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

The first line is the else statement, which will run if the if statement (the “if (have_posts())” one) isn’t true. The next few lines are what will print out just in case no posts are available (this will also be discussed in part 2)

And finally, we must close everything off, by ending the if/else statement:

<?php endif; ?>

The loop isn’t too complicated. In fact, PHP itself isn’t hard to learn at all, if you can grasp the concept of conditionals (if/else, while loops, etc) then you already know how to program bits and pieces of most programming languages out there.

In reality there is no real reason to know all the stuff about the loop’s syntax (when to put a semicolon, when not to, etc) unless you plan on doing some real theme customizations. But it is still useful to at least understand why certain things are the way they are.

Uhh, How Do I Print Text?

Most WordPress template tags will automatically print out data. But just in case one you are using doesn’t, you can print out text using PHP’s echo or print functions:

<?php echo "Hello World!";
print "Goodbye Cruel World!";
print(get_bloginfo('description'));
?>

The first two print out the text in the quotes. The third one will print out your blog’s description/slogan. Please note you can use echo or print with or without parentheses (they technically aren’t functions… they are more like statements).

The cool thing about PHP is the text will be printed on the webpage exactly where the code appears. So if you make DIV in HTML and have a PHP print statement in-between the start/end tag for the DIV the text will be printed right in the element.

That’s It

Well, this is the end of part #1 of WordPress Theme Design. I wasn’t joking when I said this was mostly boring stuff. Part 2 will cover how to actually make the theme, it will connect all of this boring stuff with your cool HTML/CSS theme.

Stay tuned for even more Back To The Basics posts.

Have you ever wanted to make a static page use the same theme and features that your WordPress blog enjoys? It isn’t too difficult, and I recently did it for my Uptime/Downtime Calculator with just a few lines of code.

The calculator is actually a static page, but it has the same exact layout as my blog. I did this by loading in the WordPress header file, manually calling the template functions, and doing some quick hacks to my theme to make things easier.

Most of the work is done with these few lines of PHP code:

define('WP_USE_THEMES', false);
require(dirname(__FILE__) . '/../../../blog/wp-blog-header.php'); 
get_header();

The first one sets the USE_THEMES variable to false, so Wordpress doesn’t auto load the theme (which would make the 404 page appear, since WP is oblivious to the fact a static page was requested) and the second line loads in WordPress.

The next line is “get_header();”. Which, obviously, tells WordPress “hey, load in the header.php file for my theme!”

After that I manually create content for the page in a way that makes it looks like a regular post. This includes the H1 tag, meta data (written by… on… ) and the entry DIV. For my theme it looks a bit like this:

<h1>Title</h1>
By: Jeremy Steele

<div class="entry">Page content</div>

That isn’t too hard.

And finally I finish off the page by loading in the sidebar and footer by calling get_sidebar() and get_footer() respectively. Depending on your theme you may have to do get_sidebar immediately after the get_header function is called at the top of the page.

And that’s it. Well… actually… not really. Remember those theme hacks I mentioned before? This is where those come in. At the top of the page, before the header.php file is loaded via get_header(), I create two vars called $nusuni_special_title and $nusuni_special_stylesheet. The first one is the title for the page (it’ll end up blank otherwise, remember WordPress has no clue a static page was requested, it things it is just a nonexistent permalink), and the second is an extra stylesheet (if I need one).

For the uptime/downtime calculator I used this code:

$nusuni_special_title = "Uptime/Downtime Calculator";
$nusuni_special_stylesheet = "style.css";

In my header.php file for my theme I simply added some if statements to check if the vars existed. If they did exist the data was inserted.

To load in the extra stylesheet I used this code:

<?php if(isset($GLOBALS['nusuni_special_stylesheet'])) {
	?><link rel="stylesheet" href="<?php echo $GLOBALS['nusuni_special_stylesheet']; ?>" type="text/css" /><?php
} ?>

It isn’t pretty, but it gets the job done. Basically it checks to see if I am using an extra stylesheet, then it loads it in if I am.

Then, for the Title I did this:

<?php if(isset($GLOBALS['nusuni_special_title'])) {
	print("<title>" . $GLOBALS['nusuni_special_title'] ."</title>\n");
}
else {
	?>
		Print title tag info for normal blog
	<?php
}

That checks to see if I am using a special title, and if I am it loads that instead of the titles I use for the blog.

While none of this is too difficult, it can be a pain to do if you haven’t any clue how WordPress works. If you need any help setting up a static PHP file to do this same thing, feel free to contact me (I won’t ask for anything in return, but a link would be nice ).