WP Theme Lesson #6d: Search Form and Calendar

Although the title is Search Form and Calendar, I’ll throw in the Meta block for today too. Let’s wrap up the regular Sidebar today and figure out how to widgetize your Sidebar by tomorrow okay? All right, let’s start…

Step 1 : Add search form

Before I give you the codes to type, open a new notepad, leave it blank, save it as searchform.php (in the same folder containing index.php, of course). Copy the codes in my searchform.txt file to your searchform.php file. That’s it; from this point on, leave the searchform.php file alone.

In the index.php file, type the following codes on top of every listing within the Sidebar:

<li id=”search”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

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

So what happened?

• <li id=”search”> - start a list item with an ID named, search. You’re giving it an ID so you can style it later.


• include() - include whatever file you want to include. This is different from using a WordPress template function to call for something because include() is simply including what’s already there. In this case, it’s the codes within the searhform.php file. The information to be included does not change on a per blog basis. In other words, my search form looks exactly like yours.


• TEMPLATEPATH - the location of your theme’s folder, wp-content/themes/tutorial


• ‘/searchform.php’ - location and name of the file, /searchform.php


• The period between TEMPLATEPATH and ‘/searchform.php’ connects them so you end up with:
  wp-content/themes/tutorial/searchform.php


• </li> - close the list item

Notice, the search form block doesn’t have a sub-heading like Categories, Archives, Pages, or Blogroll. You can give it a sub-heading if you like, but for the sake of keeping your regular Sidebar as close to the widgetized version (which we’ll work on tomorrow) as possible, don’t give it a sub-heading.

Step 2: Add calendar

Type the following codes under the Search-Form or Page-listing block:

<li id=”calendar”><h2><?php _e(’Calendar’); ?></h2>
<?php get_calendar(); ?>
</li>

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

What happened?

• <li id=”calendar”> - open a list item with an ID named, “calendar”


• <h2> - start a sub-heading


• <?php _e(’Calendar’); ?> - print the word Calendar


• </h2> - close sub-heading


• get_calendar() - call for the calendar using get_calendar() function


• </li> - close list item

You’re done with the calendar.

Step 3: Add meta

Type the following codes under the get_links_list():

<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

Save notepad and refresh browser. Here are the results:

(If you’re not logged into WordPress administration)

(If you’re logged in)

So what happened?
You started a list item (LI) with a sub-heading (H2) Meta. Under the sub-heading, you nested an unordered list (UL). And for each link, you wrapped list item (LI) tags around it.

The wp_register() generates its own set of <li> and </li> tags; when you’re not logged in, it displays the Register link; when you are logged in, it gives you the Site Admin link. wp_loginout() doesn’t generate its own list item tags so you wrapped list item tags around it; when not logged in, you get the Login link; when logged in, you get the Logout link. For now, wp_meta() does nothing; it’s invisible on the web page and invisible in the source codes. Don’t think about wp_meta() for now; you’ll rarely use it.

That’s it. You’re done with the Meta and finally finished the regular Sidebar.

Read More...

WP Theme Lesson #6c: Get Archives and Links

Today’s lesson is fairly easy. You’ll learn how to call for an archive link listing and the blogroll links. Tomorrow’s lesson is the calendar and search form.

Before we start, I want to explain why I’ve been breaking down my lessons into smaller lessons. Everything that you’re learning took self-taught people MONTHS to digest! It’s important that you understand everything I’m showing you the first time around so you won’t have to go back and re-check.

Step 1 - Add archive links.

Type the following codes in the Sidebar area, under the Categories listing:

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

Give it some tab spacings for organization. Let’s see if your codes match mine:

Save your file, refresh the browser, here’s the result:

What happened?
You used the wp_get_arhives() PHP function with the type attribute and monthly value to call for the archive links by month.

• <li> - open list item


• <h2> - open sub-heading


• <?php _e(’Archives’); ?> - text of the sub-heading


• </h2> - close sub-heading


• <ul> - open unordered list under the sub-heading, within the list item


• <?php wp_get_archives(’type=monthly’); ?> - call for archive links by month, nest each link within <li> and </li> tags. If you check your source codes (View > Page Source). You’ll see that wp_get_archives() generated list item (LI) tags for each link, just like the wp_list_cats() function.


• </ul> - close the unordered list sitting under the sub-heading


• </li> - close list item

Step 2: Add blogroll links

Type the following codes under the Archives link listing:

<?php get_links_list(); ?>

Save, refresh, and here’s the result:

By default, my blogroll is no different from yours. Here’s how it looks in the source codes:

The organization is not all there because the get_links_list() function generates the codes for you, just like the wp_list_pages() function you learned about, from yesterday’s lesson. However, it stuck with rule number one, which is close everything in the order that you open them. I circled the list item and unordered list tags for you to see.

That’s the end of today’s lesson. Come back tomorrow for the calendar and search form.

Follow this WordPress Theme Tutorial Series from the beginning.

Read More...

WP Theme Lesson #6b: Page-Link Listing

Now that you’re familiar with the structure of the Sidebar, we’ll continue working on the Sidebar with Page-link listing. After the regular Sidebar is complete. I’ll show you how to widgetize your Sidebar.

Add the following codes on top of the Categories block:

<?php wp_list_pages(); ?>

Save your file and refresh the browser. Here’s what it looks like:

By default, you have only one Page link, the About link. I added more pages and child-pages to my offline blog. That’s why I have four levels of Page links.

Go to View > Page Source to see that wp_list_pages() generated the whole structure and all codes for you. Here’s an example:

First, it wraps everything within a list item (LI). Second, it gives your listing a name, Pages. Third, it adds another unordered list (UL), under the Pages title, within the list item. Fourth, it nests each link within a set of <li> and </li> tags.

In the screen-shot above, notice that the “Pages” title for the listing doesn’t match the size of the “Categories” title for the Category-link listing.

How do you get it to match? Add ‘title_li=<h2>Pages</h2>’ to wp_list_pages().

Save file and refresh browser to see the change.

title_li is an attribute used to customize the look of the Page-link listing’s title. <h2>Pages</h2> is the value of the title_li attribute.

Further customization:
In my example, I have four levels of Page links. Some layouts/designs cannot handle that many levels of links within the Sidebar. To limit the amount of link levels to list, add the depth attribute to wp_list_pages() and set it to 3.

Notice, I added depth=3& instead of depth=3 only. The & sign is there to separate the depth and title_li attributes. (If you have only the About link, you will not notice any difference.)

Here’s the difference on for my listing: (Compare this screen-shot to the screen-shots above.)

Follow this WordPress Theme Tutorial Series from the beginning.

Read More...

WP Theme Lesson #6: Sidebar

Have you been looking forward to the Sidebar? At first glance, the Sidebar looks difficult, but it isn’t tricky at all. Once you get used to its structure, you’ll be able to code and style it very quickly.

Before jumping on the Sidebar, here’s what your index.php file should look like.

Don’t forget to open Xampp Control…

Step 1: Let’s wrap a box with a class named, sidebar around everything in the Sidebar. Type this code under the container box and above the </body> tag:

<div class=”sidebar”>

</div>

Step 2: Start an unordered list within your new sidebar box.

<ul> - open unordered list

</ul> - close unordered list

Step 3: Add a list item (LI) inside the unordered list (UL) and put a sub-heading inside the list item (LI).

<li><h2><?php _e(’Categories’); ?></h2>

</li>

Notice the tab spacing added before the <li> and </li> tags for organization.

<li> - open list item
<h2> - open sub-heading
<?php _e(’Categories’); ?> - print the word Categories
</h2> - close sub-heading
</li> - close list item

Again, you don’t need to wrap <?php e(’ ‘); ?> around the word Categories. If you’re building this theme for yourself, it’s okay if your sub-heading is <h2>Categories</h2>

Save the index.php file and refresh your browser. You should see the Categories sub-heading structured like this:

The little bullet or dot before your sub-heading indicates that the sub-heading is sitting in a list item (LI). If you have two list items within your unordered list (UL), there should be two bullets. It’s like taking bulleted notes. Dot each item right?

Step 4:
Add the following codes within the list item:

<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>

Here’s what that means:

<ul> - open another unordered list
<?php wp_list_cats(); ?> - call for the list of category links
</ul> - close unordered list

Save it and refresh the browser. Here’s what my category links look like:

Your default category is Uncategorized. If you did not publish under multiple categories, then your list of category links should have only one link, the Uncategorized.

Further explanations:

• sort_column=name - list category links alphabetically


• optioncount=1 - display the number of posts made under each category


• hierarchial=0 - don’t turn sub-categories into sub-list-items, which explains why my Sub Category link is listed in the first level of the list.


• & - each time you add on another attribute, you have to type & before it to separate it from the existing attributes. For example & sits in between sort_column and optioncount.

Why you didn’t wrap the <li> and </li> tags around <?php wp_list_cats(); ?>:

When you call for the category links list using wp_list_cats(), it automatically attaches a set of <li> and </li> (list item) tags around each link. Look at your browser, go to View > Page Source or Source; after the window pops up, scroll to the bottom to see the codes for the category links list; notice that each link has a set of list item tags around it.

When dealing with the sidebar, unordered list, and list items, it’s very important to remember:

Rule #1: Close everything in the order that you open them.

Follow this WordPress Theme Tutorial Series from the beginning.

Read More...

WP Theme Lesson #5e: Posts Nav Link

At the bottom of most WordPress blogs, there’s a Next Page or Previous Page link. You call for those links by using the posts_nav_link() function of the WordPress template system. In this lesson, there’s only one step!

Do I really have to tell you to open Xampp Control again, theme folder, browser, and index.php file again?

Step 1: (and only step)
Add the following codes between <?php endwhile; ?> and <?php else : ?>

<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>

Notice the spacing in the screen-shot. I always use tab spacing for organization.

<div class=”navigation”> - start an invisible box named navigation to wrap around your Next and Previous links area.
<?php - start PHP
posts_nav_link() - call for the Next and Previous links.
; - stop calling for them.
?> - end PHP
</div> - close the invisible box named navigation.

Here’s what it looks like:

Save index.php, then refresh your browser to see your own Next or Previous link. By default, if you don’t have more than ten posts, nothing will appear. If you don’t have more than ten posts, but still would like to see it, login into the administration panel, select Options > Reading, then set it to one less than the amount of posts that you have. For example, if you have six posts, set it to five.

How to customize posts_nav_link():
Just like some of the functions in the postmetadata lesson, you can give this function three sets of… anything that you want to be displayed in between, before, and after the Next and Previous links. It looks like this:

<?php posts_nav_link(’in between’,'before’,'after’); ?>

The first set of single quotes is for holding anything that you want to appear between the Next and Previous links. The second set of single quotes is for holding anything you want to come before it. The third set is for holding anything that comes after it.

Here’s an example of a customized posts_nav_link():

Follow this WordPress Theme Tutorial Series from the beginning.

Read More...