Website Designer Nepal

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.

You should know:

• There’s no right way to set up the comments template in comments.php.
• Most WordPress designers use the default comments template from the WordPress Default Theme, Kubrick.
• Some designers modify the default comments template to suit their needs.
• You will use my modified version of the default comments template.

Step 1

• Create a new file: comments.php.
• Copy my comments.txt file to your comments.php.
• Save comments.php.

Step 2

• Copy my comments-template-css file to your style.css.
• Place it at the end of style.css or right above #footer.

Step 3

Type this under the entry DIV, in the single.php file:

<div class=”comments-template”>
<?php comments_template(); ?>
</div>

The comments_template() function is what calls for the comments template from the comments.php file. The comments.php file then follow its template (or codes) to display the comments listing. Each item in the listing is a comment.

You can also use the comments_template() function in the page.php file to allow people to comment on them too. Whether to do that is up to you. If you like, repeat step 3 for page.php.

Step 4

Step four is validate, validate, and validate your codes some more. However, there is no step four because you’re using my cleaned-up and modified version of the default comments template. I’ve validated the codes for you.

To validate offline:

• Go to View > Page Source or Source.
• Copy all the source codes.
• Go to the validator.
• Paste your codes in the Direct Input box.
• Click Check.

For future reference (when you build your own theme and comments template), here are the pages to validate:

• Home page
• Archive pages
• Category pages (if you customize category pages)
• Search result pages
• Pages (i.e: About)
• Single post view page
• Single post with no comments
• Single post with comments
• Single post with must login message
• Single post with no login required message
• Password protected single post with comments

Further Comments Template Explanations

• The comments template is basically one Ordered List (OL), not unordered. Although, they basically work the same way. Unordered is organized by bullet listing. Ordered is organized by number listing (each item has a number, starting from one).
• In the single.php file, you wrapped the comments-template DIV around comments_template(). Now, your comments template is an ordered list within a DIV.

When you password protect your post, your comments option is also password protected:

The modified version of comments template that you’re using has an H2 sub-heading that says Password Protected. The default comments template doesn’t have that.

Here’s what makes up the comments listing:

And here’s what that actually means:

The comment_text() function is what calls for each comment.

I will not explain what the CSS codes for the comments template means. Unlike the codes in the comments.php file, you can actually play with the CSS codes without breaking the comments template. They’ll do you more good if you play with them instead of reading an explanation from me.

And guess what? There’s no lesson review, today. You’re done.

The initial batch of lessons for this tutorial series is complete. Future lessons will cover more advance design and styling techniques.

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.

Now that the index.php file’s divided, it gets even easier.

Step 1

Before you do this step, look at the Sidebar, click on an Archives link. The resulting page doesn’t look different from your front page right?

• Create a new file: archive.php
• Copy and paste everything from index.php to archive.php
• Save archive.php
• In the archive.php file, change the_content to the_excerpt.
• Save the archive.php file again.

By creating an archive.php file and changing it to make it different from index.php, you are customizing the appearance of archive pages.

Now, if you refresh your archive page, it will give you only excerpts, not the full posts.

Why would you want to do this? – to prevent Google from penalizing your blog for having duplicate content. If one of the archive pages and the front page display the same content, that’s duplicate content.

What if you have a private blog? Then, it’s not necessary to distinguish the archive pages from the front page. That’s not to say excerpts aren’t useful for private blogs.

Also – By default, your category pages will look for instructions on how to display content from the archive.php file. If you don’t have an archive.php file, category pages will look for index.php.

If you want the category pages to look different the front page and archive pages, create a category.php file and customize it.

Step 2

• Create a new file: search.php
• Copy and paste everything from archive.php to search.php
• Save and you’re done.

Now, all search results will be returned as excerpts. Without the search.php template file, the search option looks to index.php on how to display search results.

(Optional) You can go back to lesson one to review the hierarchy.

Step 3

• Create two new files: page.php and single.php
• Copy and paste everything from index.php to page.php and single.php. (For now, page and single should be the same.)
• Save page and single. Close index. Close single.

Step 4

There’s a difference between a Page and a page remember? The page.php template customizes the look of those special Pages.

First, in page.php, type the following codes under <?php the_content(); ?>:

<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

and

<?php edit_post_link(’Edit’, ‘<p>’, ‘</p>’); ?>

Second, remove the postmetadata codes from page.php. Here’s what you should have without postmetadata.

Third, remove the posts_nav_link() or navigation block from page.php.

What just happened?
The first line of codes was for displaying links to sub-pages.

For example, edit your About page. Follow my screenshot below for what to add.

This is useful for when you have to break down one REALLY long page into multiple pages.

For the second line of codes, it’s your administrator-only Edit link.

Your Pages don’t have categories attached to them and you usually don’t want to show a time stamp for them either so that’s why you removed the postmetadata. You also removed the posts_nav_link() codes because the Page pages don’t display Next page and Previous page links.

Save the page.php file and close it.

Step 5

Clicking on a post title to read the rest of an entry takes you to the single post view. single.php template handles the appearance of the single post view.

In single.php, type this under <?php the_content() ?>:

<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

Yes, that is the same line of codes for sub-page links. Did you know you can also break down posts into multiple sub-posts?

Second, in the postmetadata area, remove the <?php comments_popup_link(); ?> function and the <br /> tag before it. Don’t remove the whole postmetadata.

You removed the comments link function because it doesn’t work on single post view so there’s no use in having it in the single.php file. Without the number of comments link, there’s only the invisible, administrator-only, Edit link, left after the BR tag. You don’t want to skip-a-line for an INVISIBLE link that only you can see right? That’s why you removed the BR tag.

Third, replace <?php posts_nav_link(); ?> with:

<?php previous_post_link(’&laquo; %link’) ?> <?php next_post_link(’ %link &raquo;’) ?>

On front, archive, category, and search pages, you use the posts_nav_link() function to call for Next page and Previous page links. For the single post view page, there’s no Next page or Previous page link. You use the previous_post_link() and next_post_link() functions to call for the previous and next post links.

Save the single.php file. Go to a single post view page to see the difference in the navigation area.

Lesson Review

• You created four new files or sub templates:archive.php, search.php, page.php, and single-lession-15.
• The archive.php and search.php templates are the same.
• Pages (different from posts) don’t have categories attached to them. They also don’t have Next and Previous page links.
• Single.php can’t display the number of comments link (called for by the comments_popup_link() function) and it doesn’t use posts_nav_link() to call for navigation links.

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.

Open Xampp, theme’s folder, Firefox, IE, index.php, and style.css.

Step 1

Add a 10px top padding to the footer DIV. You remember how to add padding right? I’m not giving you the codes this time.

Step 2

Give all P tags under within the footer an 18px line-height. That’s #footer p{}. (You’re done with style.css for today.)

Step 3

• Create a new file, name it header.php. Make sure the result is a PHP file, not a text document.
• In the index.php file, start coping from the end of the header DIV to everything above it. Paste it in the header.php file.

Here’s my header.php file. Don’t copy and paste from my file. Copy and paste from your index.php file.

Step 4

For everything that you’ve copied and pasted in the index.php. Still in the index.php file, replace it with:

<?php get_header(); ?>

is a function within the WordPress theme system to speficially include the header.php file, instead using <?php include (TEMPLATEPATH . ‘/header.php’); ?>.

Save and refresh the browsers. You should see no changes. If your theme look broken after you made the change then there’s a mistake.

Step 4

• Step 4 is more of the same thing. This time, create the sidebar.php file.
• From the beginning of the Sidebar DIV to the end of it, copy and paste into the sidebar.php file.
• Then, in the index.php file, replace it with <?php get_sidebar(); ?>.
• Save and refresh the browsers. Again, you should see no changes.
• Here’s my sidebar.php file.

Step 5

• Repeat the steps above for the footer.php file.
• Here’s myfooter.php file.

Lesson review

• You created three new files: header.php, sidebar.php, and footer.php.
• You learned three new functions: get_header(), get_sidebar(), and get_footer().
• The following are my files by the end of this lesson: index, style, header, sidebar, footer. Don’t just copy and paste or use them to replace your own files. If you’re getting errors or your theme isn’t displaying correctly, check your codes against mine.

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

Again, you don’t need the index.php file today. Open Xampp, theme’s folder, Firefox, IE, and style.css in Notepad.

Step 1

Type this under .sidebar{}:

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

Now that you’ve styled the parent unordered list (UL) tag for the Sidebar, all child ULs or nested ULs will inherit the same style. In this case, it’s none, zero margin, and 10-pixel side paddings.

For example:

The second-level (or nesting) UL inherits the styles from the first UL. If you apply a border to the first UL, the second UL will also get a border.

Save and refresh to see that your list items (LI) are no longer bulleted.

Notice how you add padding to the top and bottom.

Step 2

Type this under .sidebar ul{}:

.sidebar ul li{
padding: 10px 0 10px 0;
}

Here’s the padding now:

Why not add the 10-pixel padding to the UL tag in the first place? You need a way to separate one LI from another. Before the added padding to .sidebar ul li{}, there was no space in between the search form and calendar and no space in between Calendar and Pages. The spacing in between each block is what 10-pixel top and bottom paddings for .sidebar ul li{} are for. If the UL tag had padding for all four sides instead of just left and right (0 10px 0 10px), you would end up with a 20px top padding or 20px bottom padding in trying to separate the LIs after padding the UL. Get what I’m saying?

If you don’t, go ahead and add top and bottom padding for .sidebar ul{}.

Step 3

Type this under .sidebar ul li{}:

.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

Remember that styling the sub-heading under .post{} didn’t matter because you were targetting sub-headings only under .post{}? Now, you’re styling the unaffected sub-headings in the Sidebar. Here’s the result:

That’s how my Pages links listing looks. You probably have only one link, About. I added multiple links or page levels to my offline WordPress install to test and see how lower level links would look. Notice the unnecessary extra padding at the bottom that I circled. That’s a perfect example of style inheritance. Instead of 10 pixels, it’s 20 pixels.

Because you added padding to .sidebar ul li{}, the lower level LIs inherited that padding. To fix it, do Step 4.

Step 4

Type this under .sidebar ul li h2{}:

.sidebar ul ul li{
padding: 0;
}

The consecutive ULs in .sidebar ul ul li{} indicates that you’re targeting the lower level LIs. Again, when all values are 0, you don’t need the px suffix.

Here’s the result:

The line spacing is too close so lets make the line height equal 24px.

Add line-height: 24px; to .sidebar ul ul li{}.

By the way, if you’re getting extra spacing under the search form in Internet Explorer. Add form to:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}

like this:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}

Step 5 (Optional)

Do this step if you want the calendar dates to stretch and cover the full sidebar width. Your calendar currently looks like this:

To style the calendar, find out tag it’s sitting in and what the name or id of that tag. To do that, go to View > Page Source or Source. Your sidebar is at the bottom so go to the bottom of the source codes and look for the Calendar.

Now that you know the calendar sits in a TABLE tag with wp-calendar as id. How do you target the wp-calendar table in in the style.css file?

table#wp-calendar{} is the answer. Why? Earlier, you learned to use the pound sign when styling DIV named with an id instead of a class. In this case, it’s a table instead of a DIV, with an id value, wp-calendar.

#wp-calendar{} would work because it’s unique and WordPress doesn’t use #wp-calendar for any other tag. But, you should try to be specific when you can. If you want to be more specific, use .sidebar ul li table#wp-calendar{}. Even more specific? Fine, use .sidebar ul li#calendar table#wp-calendar{}. That’s because the list item (LI) containing the Calendar sub-heading and Calendar TABLE has an id named calendar.

Now that you know what to use, how do you make the table stretch? Use width: 100%; for the table.

Type this under .sidebar ul ul li{}:

table#wp-calendar{
width: 100%;
}

Save and refresh. Here’s the result:

width: 100%; because you want the Calendar table to adjust to the width of the Sidebar, no matter how many pixels you want to change the Sidebar to.

It doesn’t look good, but you’re learning how to do it, in case you want to. This calendar needs more styling to look right. Hint: Look in source codes again, find out what tags under the TABLE that you can style.

That’s the end of today’s lesson.

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.

Step 1

Get rid of most margins and paddings by typing the following codes above the body{} in style.css:

body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}

• Notice that it’s margin: 0; instead of margin: 0 0 0 0;. When all your values are the same, use one number. Same goes for padding.
• Save your file. Refresh Firefox and Internet Explorer. Don’t worry, now you’ll add in the margins and paddings where you actually want them to appear, and not where the browsers want them by default.

By the way, I’m telling you to put this and that under or above this or that, but know that it’s optional. You can type/place your codes anywhere. The way I’m doing it is how I organize.

Step 2

Style H1 title, type this under the body{}:

h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

• font-family: Georgia, Sans-seriff; changes the H1 title front from Arial to Georgia. Without Georgia, the web page looks for Sans-serif;
• font-size: 24px; is self-explanatory. However, notice that when you set the font size to 12px within body{}, the H1 and H2 tags didn’t follow that rule. That’s because heading tags follow their own rules. To control them, you need to style specifically for them.
• padding: 0 0 10px 0; means 10-pixel bottom padding. It’s for adding space between your blog’s title and description.

Save, refresh, and here’s the result:

Step 3

Type the following codes under #container{}: (Save and refresh after each block of codes to see what the changes are.)

.post{
padding: 10px 0 10px 0;
}

(You added 10-pixel top and bottom paddings to each DIV with a class named, post.)

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

(.post h2 is not a general rule. It specifically targets the H2 sub-headings within the post DIV. The H2 sub-headings in the Sidebar aren’t affected.)

.entry{
line-height: 18px;
}

(Increased the size of the space between each line within the entry DIV.)

Step 4

Type the following codes under a:hover{}:

p{
padding: 10px 0 0 0;
}

(10-pixel top padding to each paragraph tag.)

Step 5

Type under .entry{}:

p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

Remember the pargraph tag that you gave a class named, postmetadata, to? Styling a specific paragraph tag and styling DIV are very much the same. You can apply border, margin, padding, and background to both.

For the postmetadata paragraph tag, you added a gray border and a 10-pixel top margin to it.

border-top means top border only. border-left means left border only. Etc. border, alone, without -top, -right, -bottom, or -left means all borders. For example, border: 1px solid #ccc; means all four sides have a gray 1px border.

Step 6

Type under p.postmetadata{}:

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

For the navigation DIV wrapping the Next page and Previous page links, you just:

• added a 10-pixel top padding
• change its font size to 14px
• change its font-weight to bold.
• increased its line-height to 18px.

That’s the end of today’s lesson.

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.

Step 1

The first thing you want to do is decide what’s going to be the overall width of your theme. We’ll use 750px (750 pixels); each 100-pixel is one inch. Your theme depends on the view specs of the majority of your blog’s visitors. What you want to avoid is using a 900px theme for an audience that uses mostly 800px by 600px resolutions, which means your 900px theme would expand 100 pixels beyond their screens. That’s a no-no.

How do you limit the overall width to 750px anyway?
You need everything to sit within a 750px box or DIV. Everything includes: header, container, sidebar, and footer.

Add: <div id=”wrapper”> after <body>
Add: </div> before </body>

Type the following in style.css:
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

In CSS, speficially in style.css, the pound sign (#) is how you address a DIV with an id. The period is how you address a DIV with a class. For a class example, if your codes were <div class=”wrapper”> then use .wrapper instead of #wrapper to address the wrapper DIV.

Save both the index.php and style.css files. Refresh the Firefox and Internet Explorer browsers (press F5) to see the change.

Further explanations

• margin: 0 auto 0 auto; means (in exact order) 0 top margin, auto right margin, 0 bottom margin, and left auto margin. For now, just remember that setting right and left margins to auto is centerting.
• width: 750px; is self-explanatory.
• text-align: left; is aligning the text to the left within the wrapper DIV because you will be changing body{ text-align: left;} to text-align: center;

Step 2

Go ahead and change text-align: left; within body{} to text-align: center;

Why? (I’m assuming you’re using Firefox and Internet Explorer 6). Your layout might look right to you, but not to people using earlier versions of Internet Explorer. Remember setting right and left margins to auto is centering? Well, that doesn’t work for all Internet Explorers so body{ text-align: center; } is a fix for older IEs to center the wrapper DIV or box.

(By the way, the text sizes in Firefox and Internet Explorer are different right now. We’ll fix that later.)

Step 3

Make the Header float left with a 750px width:

#header{
float: left;
width: 750px;
}

Step 4

Make the Container float left with a 500px width:

#container{
float: left;
width: 500px;
}

Step 5

Make the Sidebar float left with a 240px width and a gray background: (10px is missing; I know.)

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

Notice, you did not use a pound sign to address the Sidebar DIV; you used a period. Also, remember #ffffff is white? background: #eeeeee; is very light gray. You added a background color to the Sidebar just to see the difference when you’ll add the remaining 10 pixels later.

Step 6

Make the Footer float left and clear both with a 750px width:

#footer{
clear: both;
float: left;
width: 750px;
}

What’s the difference between the Header and Footer stylings? The answer is the presense of clear: both; in footer{}. It’s there to make sure the Footer doesn’t attach itself to anything above it, like the Sidebar or Container.

Save the style.css file. Refresh the browsers.

Step 7

Add the remaining 10 pixels to the Sidebar by using a margin. Now your sidebar style codes look like this:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

Save file and refresh the browsers to see a 10-pixel space added to the left of the Sidebar.
margin: 0 0 0 10px; specifically means 0 top, 0 right, 0 bottom, 10px left. When size is 0, the px suffix isn’t necessary.

Step 8 (Extra step)

This is just in case you’re getting a 20px margin instead of a 10px margin. 20px margin would break your layout and push the sidebar to the bottom of the page because a 20px margin makes the sum of the Container and Sidebar widths equal 760px instead of 750px. This extra step is Internet Explorer’s fault because the bug of doubling the set margin doesn’t exist in Firefox.

To fix this bug, add display: inline; to the Sidebar. Now your Sidebar should be:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

That’s the end of today’s lesson. If you have any question, feel free to ask me. I’m here to help, not just to show you the ropes.

And here’s what I have in the index and style files.

If you’ve read the first version of this lesson, forget the screenshot that I showed you. When taking the screenshot, I forgot to turn off the widget plugin for the sidebar, which made the sidebar looked a little different than what you should have.

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.

The background property, followed by a hex code, is for coloring anything that’s not text. For example, body{ background: #ffffff; } means white background for the body.

Hexadecimal Codes

• Preceded by a pound sign (#) each hex code has six digits. Those numbers range from #ffffff (white) to #000000 (black).
• #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111
• The first two digits represent red, third and fourth represent green, and last two represent blue. #ff0000 is red. #550000 is dark red. #220000 is darker red. #00ff00 is green. #0000ff is blue. Wait, isn’t yellow a primary color? Which hex code is yellow? #ffff00 is yellow. #ff00ff is violet.

Step 1

Type the following codes under the the body{ } selector:

a:link, a:visited{
text-decoration: underline;
color: #336699;
}

• What was that for? You made sure all your links are underlined (text-decoration: underline;) and blue (color: #336699;). It’s a different shade of blue and it’s blue because the last two digits (represent blue) are the highest numbers.
• a:link is for styling links. When you want to turn a word into a link, what do you use? The <a> and </a> tags, hence, the A in a:link.
• a:visited is for styling links that have been clicked on (visited pages), hence, Visited in a:visited.
• Instead of typing:
  a:link{
  text-decoration: underline;
  color: #336699;
  }

  AND

  a:visited{
  text-decoration: underline;
  color: #336699;
  }

• You used the comma to separate a:link and a:visited while applying text-decoration: underline; and color: #336699; to both selectors.

Step 2

Type the following codes under a:link, a:visited{ }

a:hover{
text-decoration: none;
}

What was that for? You made sure that the link underline disappears when you hover the cursor over a link, hence, Hover in a:hover.

If you don’t want to underline by default and underline when you hover over then switch the text-decoration: value for a:link and a:hover.

If you want change the color of your link on hover then add color: and whichever hex code you want. For example:

a:hover{
text-decoration: none;
color: #ff0000;
}

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.

• First line is the theme’s name, which is self-explanatory.
• Second is the location of where your theme is available. If you’re creating a theme for yourself, not for public use, don’t worry about it.
• Third line is theme’s description.
• Fourth is version number, which is important, especially when you release updated versions of your theme for public use.
• Fifth and sixth is your name and home page.

The /* and */ signs wrapping around your theme’s information is for preventing the theme’s information from affecting the rest of the page. It’s CSS commenting. While typing CSS codes to style your web page, you might want to add comments here and there to keep track of things. But, you don’t want your comments to affect the codes so you use the /* and */ signs to make your comments invisible.

Here’s the processed theme information:

Step 1:

• Open Xampp Control, theme folder, a Firefox browser, an Internet Explorer browser, and the style.css.
• Point both browsers to http://localhost/wordpress

Here’s where you really need both Firefox and Internet Explorer to test your theme. Different systems interpret CSS codes differently. It’s best to test your theme in as many browsers and in as many operating systems as possible (Safari, Opera, Linux, Netscape, etc). If you’re lazy like me, test your themes in only Firefox and Internet Explorer.

(Notice: You don’t need to open index.php in Notepad, in this lesson. If you can’t already open the style.css with Notepad, right click on your file, select Properties, click Change, and select Notepad.)

Step 2:

Type the follow codes in the style.css file:

body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}

Just like working with XHTML or PHP, add tab spacing for organization:

Save your style.css file, refresh both Firefox and Internet Explorer browsers to see the change. (You’ll be working with two browsers from now on.)

Treat body{ } as a tag and everything in between as attributes and values, just like you did with XHTML. { is open. } is close. Within the { and }, the colon means start and semicolon means stop. (I use the terms tags, attributes, and values when referring to XHTML, PHP, and CSS to keep it simple. In reality, PHP and CSS have different terms for their codes. For example: parameters, selector, and property.)

Before we move on, there’s a reason why you used the body{ } (CSS selector) and that’s because you’re working on styling the most basic (or overall) part of the web page, the <body> tag. You don’t style the <header> tag because there’s nothing to style. Everything that shows up on your web page sits in within the <body> and </body> tags.

However, later on, you will style the DIV box with the ID named header.

Further explanations:

margin: 0; gets rid of the default margin spacing of the body tag. If you wanted a margin or bigger margin, change the 0 to 10px, 20px, or etcetera. PX means pixels. Each pixel is a dot on your computer screen. When your margin is a 0, there’s no need to follow it with px.

In the image below, the red highlighted space is the default margin spacing applied to the body tag.

After styling it margin: 0;, here’s the same page without the margins:

font-family: Arial, Helvetica, Georgia, Sans-serif; selects which font to use for your web page or website. The fonts following the first one, which is Arial in this case, are alternates. If your users don’t have the Arial font installed on their computers, the style.css file looks for Helvetica, then Georgia, and then Sans-serif. You can find your list of fonts in the Fonts folder under My Computer > Hard Disk > Windows

font-size: 12px; is self-explanatory. Change it to a smaller or bigger number to see the change.

text-align: left; aligns your text to the left. Change it to text-align: right; to see the difference.

vertical-align: top; makes sure everything starts from the top. If you middle or bottom align the body tag, everything will be pushed down.

background: #ffffff; means white background. #ffffff is the hex code for white. #000000 is the hex codes for black.

color: #000000; means your text color will be black.

If you want to move ahead or learn CSS on your own, the best place to start at is w3schools.com

Follow this WordPress Theme Tutorial Series from the beginning.

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.

After today, you better be ready. When we take on CSS, I’ll dive deep into it because the style.css file is what you’ll work with eighty percent of the time.

For today’s lesson, you need to open only the Xampp Control and browser (pointing to http://localhost/wordpress).

Looking at the browser, go to View > Page Source or Source.

Select all. You can do this by clicking and dragging to highlight all the source codes or simply press Ctrl + a.

Copy all the source codes. That’s right click and copy or Ctrl + c.

Open a tab or another browser pointing to the XHTML Validator.

Go to the bottom of the page, paste the source codes in the Validate by Direct Input box. Paste by right click and paste or Ctrl + v.

After clicking Check, the validator will check your codes, then send you to the results page. If the message is green, then you have no errors.

Follow this WordPress Theme Tutorial Series from the beginning.

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.

Step 1: Add the DIV

Type the following codes under the Sidebar DIV:

<div id=”footer”>

</div>

Step 2: Add footer text within paragraph tags. For this, say anything you want. Here’s my message:

<p>
Copyright © 2007 <?php bloginfo(’name’); ?>
</p>

Save notepad and refresh browser. Here’s the result:

If you didn’t use the footer text above, © is the code for displaying the copyright sign. Also, remember the bloginfo() function that you used when putting the header together? I used it again for the footer. ‘name‘ calls for the blog’s title and ‘url‘ calls for the blog’s address.

If you want the blog’s title to be a link, check the header to remember how you did it.

Follow this WordPress Theme Tutorial Series from the beginning.