WPDesigner

WordPress looks for a .png image file named, screenshot, in your theme’s folder. If you don’t already have a screenshot of your theme, here’s how:

• Point your browser to the blog currently using the theme.
• Press the Print Screen button on the keyboard.
• Open a new file in Photoshop.
• Change the size to 300 by 225 (in pixels)
• Press Ctrl + v or Right click > Paste.
• With the Move tool activated, resize the screenshot to in the 300 x 225 space.
• Go to File > Save for Web…
• Save it as a PNG file, instead of GIF or JPG.
• Name it screenshot.
• Place your image file in the theme’s folder.

Your WordPress blog sends readers to a 404 Error page when they request for pages that don’t exist or have been moved. 404 means not found.

If your WordPress theme doesn’t have a 404.php template file, your blog redirects your readers to the front page in case of 404 errors. That might cause confusion because some readers will not know why they were sent back to the front page.

If your theme does have a 404.php template file, you can customize the error message and offer your readers some options on how to find the information they’re looking for or simply say, for example:

Not Found - This page doesn’t exist.

So what should you put in the 404.php file?

Simple, copy everything in the index.php file, paste it in the 404.php file, and then remove everything of The Loop, except for the Not Found area (after Else of The Loop).

An example of a customized 404:

<div class=”post”>
<h2>Not Found</h2>
</div>

Don’t copy and paste my codes. Type them out. Above the <div class=”post”> would be your headers and main column container or whatever you have that comes before the content. After the </div> would be your Sidebar and Footer or whatever you have that comes after the content.

You can take it a step further and give the reader a search form, right under the Not Found message:

<div class=”post”>
<h2>Not found</h2>

<div class=”entry”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</div>

</div>

I wrote a lesson on how to include the search form in the sidebar, but you can also include the search form in other places.

So now, Not Found is the title and the search form is the main content.

Follow this WordPress Theme Tutorial Series from the beginning.

You’re almost done. Hang on for just one more lesson. Today, you take on the life of all blogs; the comments template. In my opinion, a blog is not a blog if it doesn’t allow readers to comment. To some, comments are not important, but it’s strange for me to imagine blogs without them. (more…)

Follow this WordPress Theme Tutorial Series from the beginning.

To continue with where we left off, you’re going to create more sub-template files like yesterday’s header.php, sidebar.php, and footer.php files. (more…)

Follow this WordPress Theme Tutorial Series from the beginning.

Today, we wrap up styling and start dividing the index.php file into multiple small files. You’ll need the style.css early in today’s lesson. Later, you’ll work with index.php along with creating some new files. Finally huh? Yes, you’re almost done. (more…)

Follow this WordPress Theme Tutorial Series from the beginning.

After styling the Sidebar, this tutorial series will be almost over. Already? Yes, but don’t worry. I’ll follow up with case studies (break down of how I created my themes). (more…)

Follow this WordPress Theme Tutorial Series from the beginning.

You don’t need index.php today. Open Xampp Control, theme folder, Firefox, Internet Explorer, and style.css.

Before we start, forget yesterday’s screenshot that I showed you. I had the widget plugin turned on while taking the screenshot, which explains why my sidebar looked different from yours. Also, in the style.css file, change all Sans-seriff to Sans-serif. My mistake again, I tend to add an extra ‘F’ to Sans-serif. (more…)

Follow this WordPress Theme Tutorial Series from the beginning.

This lesson will cover how to set the width for each DIV (or invisible box) and how to arrange them. It’ll also show you some work-arounds to get your theme to display right or look the same in both Firefox and Internet Exlporer.

Before we start, open the following items: Xampp Control, theme folder, Firefox browser, Internet Explorer browser, index.php, and style.css. (more…)

Follow this WordPress Theme Tutorial Series from the beginning.

Continuing from yesterday’s introduction to CSS, we’ll do more coloring and learn more about hex codes. The color property, followed by a hexadecimal (hex) code, is for coloring texts (words). For example body { color: #000000;} means all texts (words) in the body of your page will be black. (more…)

The best way to learn CSS is to dive right in. Unlike XHTML and PHP, you don’t need to touch the core files of your template. You also don’t need to understand any basic concept. Just dive in. Trial and error is the way to go.

Before we start, you should already have some information in the style.css file. Let’s find out what that block of information means right now. (more…)

You need to learn how to validate your codes, before stepping into CSS and working with the style.css file. Validate/Validating/Validation simply means making sure there’s no error. At beginning of this series, I gave you two links to bookmark, XHTML Validator and CSS Validator. For this lesson, you’ll use the XHTML validator.

I’ll keep this lesson very short and simple because you need to more time to sink in everything you’ve learned about XHTML and PHP. Don’t keep moving forward with my lessons. Take the time to reflect and picture the codes in your head. How do you start an invisible box? What’s the different between an ID and a Class? What PHP function would you use to call for the blog’s title? Blog’s description? The more you picture the more you remember. (more…)

This lesson on the footer is simple. You’re going to add a DIV or invisible box under the Sidebar DIV and fill in some copyright text for the footer. Think you can do that without my instructions? Go ahead a try it. Come back to this lesson to double check. (more…)