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).

It has only been a few weeks since I started using a new theme, but today I went through it and tweaked it up a bit and made it 50 times better. It is a bit wider (the sidebar is, the content is the same), the text size is a bit smaller, it uses different fonts, has a new header, and the sidebar was completely redone. Most of the compatibility problems with certain browsers have also been fixed up.

The new theme is live now, so if you visit you may have to reload a couple of times to refresh your browser’s cache.

The slogan is still the same and there isn’t a regular logo yet, I may change those fairly soon.

Update: I just made a quicky web 2.0 logo in Photoshop and tossed it on the header.

Here are some of the common ways of formatting a blog post with CSS:

Change Text Color

Well this is easy, just wrap your text in a span tag and apply the color style:

I’m Blue

<span style="color: #0000ff">I'm Blue</span>

Color are defined using hexadecimal, and are set by defining the red, green, and blue values for it. You can view a color chart here.

Align An Image

The easiest way to align an image to the left or right is using the float style (which will also cause the text to flow around the image):

<img src='image path' style="float: left;" />
<img src='image path' style="float: right;" />

To center an image I usually just create a DIV, put the image in it, and apply the text-align to the DIV:

<div style="text-align: center"><img src='image path' /></div>

Get Rid Of List Formatting

To change the way a UL or OL list looks like, use the list-style attribute. To get rid of any indentation, change the margin and padding around (you may also have to do that for each list item as well).

• Item 1
• Item 2
• Item 3
• Item 4

<ul style="list-style: none; padding: 0px; margin: 0px;"><li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li></ul>

Change Font Info

To change the font-family, font-size, or font-weight, wrap a span around the text and apply the style to it:

I am bolded, 10px in size, and I use the Verdana font!

<span style="font: bold 10px Verdana">Changed text</span>

Change Background Color

<div style="background-color: #dddddd;">Gray Background</div>

Center A DIV

Setting margin-left and margin-right to auto causes it to be centered:

<div style="width: 200px; background-color: #cccccc; margin-left: auto;margin-right: auto;">Text in DIV</div>

Stay tuned for more Back To The Basics posts!

**Because of all the code in this post, if you are using an RSS reader I suggest loading the actual post in your browser. It’ll be much easier to read.

This is part 2 of the WordPress Theme Design post.

If you read part one you’re probably half asleep by now. “I know about PHP’s syntax, and I know how to add in template tags and I know about the loop, now let me make a friggin theme,” you might be thinking. Well, today’s your lucky day!

Theme Files

WordPress themes are split up between several PHP files, and a CSS file, and everything is in a dedicated folder for the theme. The PHP files that are in most themes are:

• header.php - The header of the blog, this covers where the HTML header is, your logo, maybe a navigation menu, etc. Sometimes the sidebar will be loaded by this file as well by using the get_sidebar() template tag, other times it is loaded in the footer file
• footer.php - This is usually where you will toss your statistics code, copyright information, and maybe a few more navigation links.
• sidebar.php - This is where your sidebar goes.
• index.php - The main theme file. This is usually used for the main page of the blog, and sometimes the archives and category pages (I use it for that here on Nusuni Dot Com).
• single.php - For a single post, like if you click on a permalink.
• category.php - For when you view a category.
• search.php - Search page.
• 404.php - For 404 errors, when WordPress can’t find a specified page.

There are many more files you can use, but those are the main ones.

The CSS File

The CSS file is where your theme’s name, author, url, etc is all defined. In addition, this is also the file where you should put all of your CSS code. The file must always be named style.css. The text used to define the meta info for the theme looks a bit like this:

/* Theme Name: NusuniTheme
URL: http://www.nusuni.com/
Description: The Nusuni.com WordPress Theme
Author: Jeremy Steele
URL: http://www.nusuni.com/
Version: 1.0*/

That is actually an exact copy of it from the theme I use here. Basically WordPress will read in the data (make sure the labels like Theme Name: and URL: are written exactly as in the example), then use that information in the “Presentation” section of the admin panel, as well as use it when it actually loads the theme.

The rest of the CSS file can be whatever.

The Header

Alright, let’s say you just want to do a really basic header. Well, here’s a really basic header.php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

<style type="text/css" media="screen">
	@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>

<body>
<div id="wrap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>

<div id="content">
<!-- end header -->

If you read part 1 most of that stuff shouldn’t be too difficult to understand. There are a lot of template tags in use here.

language_attributes() will print out the XML language info. bloginfo() is how you can get certain info about your blog, like the site URL, the name, slogan, etc. The first time it is used here it fetches the html_type and charset information. Then nice thing about bloginfo() is whenever it is used you know what information it is getting. WordPress template tags and their arguments are very human-friendly.

The rest of the header gets the stylesheet, puts the blog name as the text logo, and sets up the content wrapper. Pretty easy, right?

Ah yes, I forgot to mention wp_head(). Well, let’s say you use a plugin that automatically makes your meta tags, or it requires a certain CSS style to display something. That is what wp_head does, it prints out that extra stuff.

The Content

This is where The Loop comes in. In case you already forgot, The Loop is where your theme will print out any posts that need to be displayed. This is always put in the files for actually displaying posts, like index.php, category.php, or single.php. Here is the entire loop section of the index.php file of the Classic theme:

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

<?php the_date('','<h2>','</h2>'); ?>

<div class="post" id="post-<?php the_ID(); ?>">
	 <h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
	<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> &#8212; <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>

	<div class="storycontent">
		<?php the_content(__('(more...)')); ?>
	</div>

	<div class="feedback">
		<?php wp_link_pages(); ?>
		<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
	</div>

</div>

<?php comments_template(); // Get wp-comments.php template ?>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

It looks more complicated than it is. The first line sets up The Loop. The next one prints out the the date (if there are multiple posts on the same day, it will only show the date the first time it is called and it wont show it again until it gets to posts written another day). The rest of the stuff in the actual while loop prints out the post, content, etc. All of those functions can be found on the wonderful Template Tags help page for reference.

The little _e() function is a WordPress function that translates the argument passed to it into the currently selected language. That way “Edit This Post” will be written in Spanish if you have Spanish set as the current language.

comments_template() simply loads in the comments.php file for your theme, if you made one. You can make one to help separate your theme out even more. Basically comments.php says how the comment form and all comments should be printed out.

Then the while loop ends, and the else statement begins (just in case no posts were available for display), then finally the if statement ends and The Loop is done and over with.

Not too difficult, and most of the chunks of code are well-documented Template Tags.

The Sidebar

Whenever you make a sidebar for WordPress always, and I mean always, wrap it all in an unordered list (and customize that via CSS). Most Template Tags print out in a way that assumes you are using lists to organize your sidebar - plus it just makes more sense to do things that way. For this tutorial I won’t be getting into the nitty-gritty details (like Widgets). To save space I won’t print out a whole example sidebar here (that’d be madness!), instead I’ll list bits and pieces of it:

Let’s say you want to list all pages. Well, that’d be as simple as this:

<ul>
<?php wp_list_pages('title_li=Pages:'); ?>
</ul>

If you were to use that as your Sidebar WordPress would look at the template tag wp_list_pages and…

• Create a list item
• Add the label (title_li)
• Create another ul
• Add each page to that ul
• And close everything off

To style it even more you could do something like this:

<?php wp_list_pages('title_li=<h2>Pages:</h2>'); ?>

Which will wrap the label in header tags.

A good thing to remember is if the Template Tag you want to use has the “title_li” option, it will almost always create it’s own list item. If it doesn’t then you must manually create the list item, the label, and another ul. For example, here is wp_get_archives(), which doesn’t handle all of that on its own:

<ul>
 <li><h2>Archives:</h2>
  <ul>
   <?php wp_get_archives('type=monthly'); ?>
  </ul>
 </li>
</ul>

Of course those only apply for tags that print out data as lists (like categories, archives, etc). Other tags like wp_loginout() simply print out a link or some text.

Well, I think pretty much covers the Sidebar.

The Footer

The footer usually closes off any body wrappers opened in the header, prints Copyright data, and closes off the body and html tags:

<!-- begin footer -->
</div>

<?php get_sidebar(); ?>

<p class="credit"><!--<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> <cite>Powered by <a href='http://wordpress.org/'><strong>WordPress</strong></a></cite></p>

</div>

<?php wp_footer(); ?>
</body>
</html>

The footer may contain some tags, like get_num_queries() (which prints out the number of database queries performed), and maybe it’ll display the load timer. wp_footer() is the same thing as wp_head(), it prints out any extra junk required by plugins.

How Do I Connect All Of These?

One thing to remember is WordPress decides which files to load depending on what page the user is looking at. If they are loading a category page, it looks for category.php, If they are loading a single-post permalink, it loads single.php. If the file WordPress is looking for doesn’t exist, it loads the index.php file. In fact, if you really wanted to you could use index.php for everything.

The rest of the files (the ones that don’t have The Loop, like the header.php file) are loaded manually. This can be achieved by putting the get_header() and get_footer() tags at the beginning and end of the files. The sidebar can be loaded with get_sidebar(), and it will almost always be loaded in the header.php or footer.php file.

The other miscellaneous theme files, like comments.php, must also be loaded manually, with slightly different tags of course.

That’s It!

It is incredibly hard to really “teach” someone how to make a WordPress theme. 99% of what is required to make your HTML/CSS them into a WordPress-compatible theme is simply inserting a few tags. Your theme will probably only use 20 or so template tags per page (I think the theme I use is around that number).

The best way to learn is to experiment and look at other themes. That general idea is true with anything in life. If you want to learn how to bake a cake, experiment and look at other cakes. If you want to do web design, experiment and look at popular web sites.

The main part of the theme, The Loop, is probably one of the more confusing parts. To be honest I never really took the time to learn about it until I had to, before I just copied the existing loop from other themes. Don’t make the same mistake - it really isn’t that complicated.

I hope you’ve learned something from part 1 and part 2 of this post, because I sure as heck know I’ve learnt a few little tricks while writing it. If there is any WordPress theme-related stuff you need help with, just leave a comment or contact me.

Stay tuned for even more Back To The Basics posts!

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.