WP Theme Lesson #6d: Search Form and Calendar
- Filed under: Tutorials
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.
Follow this WordPress Theme Tutorial Series from the beginning.
I’m confused on which functions add the list tags, and which don’t. Is there a way to tell - or a list of those commands that will add them, and those that won’t?
Or is it just down to experience?
No, there’s no way to tell. I learned from looking at the default theme.
clean and simple way of putting parts of the sidebar, im not confused, gladly lol
thanks for it.
Thank You
very clear to me now…thanks
Hey, just reporting in.. Got some validation errors (2) with some improperly nested ul/li tags.. took me about 30 minutes to find them.. had to back track and view all your code in these few lessons.. what a pain in the ass
Silly question but is there a way to put the “Search” button next to the search box instead of under it?
Thanks a ton for your tutorials. They’ve been a big help!
Make your search box shorter to make both fit on the same line.
Great tutorial you’ve made here. could you help me with why I’m getting this after adding the search box code?
Warning: Division by zero in C:\xampp\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 67
Warning: include(C:\xampp\htdocs\wordpress/wp-content/themes/tutorialphp�) [function.include]: failed to open stream: No such file or directory in C:\xampp\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 67
Warning: include() [function.include]: Failed opening ‘C:\xampp\htdocs\wordpress/wp-content/themes/tutorialphp�’ for inclusion (include_path=’.;C:\xampp\php\pear\’) in C:\xampp\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 67
I don’t understand why it’s looking for /tutorialphp, I can’t spot any errors in my code and I’ve resorted to C&P from the tut but still no joy.
Whatever you do, don’t cut and paste. Search for tutorialphp in your index.php file. If you find any, delete.
Repeat the step for the search box.
I’ve retyped the code
There is no sign of tutorialphp in index.php
Post your codes at the forums. I’ll have a look at it.
Very cool lesson, u is the best!
I am impressed with the way you have built this up so far! It has made it much more understandable. Many many thanks!
Man, a big thank you
You are a very good tutor!
What should I have instead of TEMPLATEPATH? I tried diff things but getting errors.
Works good except when I’m not logged into Wordpress administration, I only see Login below Meta, not register. When I am logged in, it looks exactly like your example for (if you’re logged in). Any idea why?
Here is the index.php with ticks:
‘
; charset=” />
” />
” type=”text/css” media=”screen” />
” />
” />
” />
” />
“>
“>
” title=”">
Pages’); ?>
‘
Trying it without ticks:
; charset=” />
” />
” type=”text/css” media=”screen” />
” />
” />
” />
” />
“>
“>
” title=”">
Pages’); ?>
So sorry. I’ll try typing it in:
I get this error after putting the search box:
Warning: Division by zero in C:\xampp\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 75
Warning: include(C:\xampp\htdocs\wordpress/wp-content/themes/tutorialphp�) [function.include]: failed to open stream: No such file or directory in C:\xampp\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 75
Warning: include() [function.include]: Failed opening ‘C:\xampp\htdocs\wordpress/wp-content/themes/tutorialphp�’ for inclusion (include_path=’.;C:\xampp\php\pear\’) in C:\xampp\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 75
I`ve checked the files, I copied everything by myself (no copy paste), and still the same “warning”… I don’t know what I`m doing wrong…
the division error message happens if you cut and paste. For some reason the single and double quotes are not recognized. If you just go to them and delete them and retype them from your keyboard then save and refresh the problem should disappear, Found this because I was being lazy and cutting and pasting LOL
This tutorial has been great so far by the way. thanks so much for this - I just learn better with step by step and you have kept things very clear.
^hahaha
[…] Link #6 Sidebar (and Categories) #6b Page-Link Listing (wp_list_pages) #6c Get Archives and Links #6d Search Form and Calendar #6e Widgetizing Sidebar #7 Footer #8 How to Validate #9 Style.css and CSS Intro #10 hex Codes and […]
For all those like Leo, the problem is that this site uses smart quotes, and php doesn’t recognize smart quotes.
And now I have a problem: When I create the functions.php file, I can’t view my website anymore. The screen is just white. Renamed it functionsi.php and everything worked. Any thoughts?
Even after all the styles are applied to the sidebar, my calendar has extra padding above and below it. Checked the code, and it’s the same as yours - I even copied and pasted your final files and still get the same problem. I’ve tried joining the forums so I can post code and results there - but for some reason I never get the confirmation email, so I still can’t post there. Any way to manually add me to them so you can see what I’m talking about?
Man, your lessons rocks!!
Now i have a doubt.
Do i have to activate in some where of the admin page the register link? ’cause i know i have no errors at this part and when i’m not logged in only show me the login line. Thanks!
Sorry 4 my poor English…
ok, forget about it! haha man i’m good!
well, thanks to you of course hehe, bytes!
I am having a similar problem to Gregg, except that whether I’m logged in or not, all I get under Meta is the Login option….Register or Site Admin aren’t coming up at all. I’ve typed and re-typed, checked and double-checked and I’ve got everything just like it is here. Any ideas?
Jenn - Don’t copy and paste.
I’m not (I’m a good student….you said not to, so I haven’t ;). I’ve typed everything out myself and it’s still not working. I’ll keep checking back to see if there are any more troubleshooting ideas from anybody, but at this point I’m going to move on to the next lesson!
Why is the variable TEMPLATEPATH not preceded by a “$”?
I don’t know. That’s how I learned to use it. I’m not a PHP guy.
Only variables are prefixed with a $. TEMPLATEPATH is a constant.
Thanks for the lesson, it was so fun and easy at the same time!
but the calendar shows a different date, than the one is set on my computer… How can i fix it?
(it’s 19th sept 2007) while on my computer is set (21st sept 2007)
Calendar has… nothing… to do with your computer’s time
ok, then how can i have the calendar show the right date?
thanks!
For those not seeing their “Register” option when trying to do the Meta portion; try the following:
Log into your site >>
go to ‘Options’ >>
select ‘General’ >>
the 6th item down says ‘Membership’, make sure you have ‘Anyone can register’ selected (checked) >>
then go to bottom and select ‘Update options’.
If you now log out of your site and do a refresh of it you should see your ‘Register’ link as SP shows in his example… took me a few minutes trying to figure out where I went wrong, too.
SP… you’re doing great…. thnx man
So, for all of you who are having trouble with the files not being found with the search box…I ended up just trying this:
No period between the path and the searchform.php
Also, make sure to take out any quotes and re-type if you copied.
Hope that helps
To Slava,
Blue date on your calendar not showing today’s date, but the date of your posts.
SP.. your tut very great. it make me understand all the word function in index.php file. Million thanks to you.
Jay
Thanks Jay
Hey great tutorial this is the best one ive seen yet, ive got two thing though..
1) Im not sure if its a widget, but ive kind of figured out how to show recent posts on the sidebar with this code:
<a href=”">
But it only gets the first post on every page and displays it…
2) Nothing shows up under my blogroll, it shows the title with nothing underneath… This is how i did it to fit my theme:
Any help would be great thanks.
Please take your question to the forums.
I copy the search form coding, and type all the code for the seachform correctly but the error still persist
I was having the same problem with the error that others were getting.
What I did to make it work was this:
Hope that helps
My code didn’t post. I removed the period from between the template path and searchform.php. I then removed the quotes and instead wrapped the entire path to searchform.php in quotes.
include([quote]wp-content/themes/theme/searchform.php[quote]);
I was having the same problem with the “division by zero” error and I was not copying and pasting. I looked at the index.php file for the Default Worldpress theme and saw that searchform.php was wrapped in double quotes, not single quotes as I was trying from the above example.
So if you change those single quotes to double quote marks, you can then use the TEMPLATEPATH (not typing the actual path as I was doing before), then [space], period, [space], and the searchform part.
Can I assume that this is the “proper” or correct way of doing it?
Thanks to SnapRider for the tip about the register option!
I’m really liking this tutorial, SP. I’ve got a lot of background in HTML and in have gotten my feet went tweaking a WP Theme to get it to function the way I want. But your tutorial explains things really well and is helping me understand how WP puts everything together. Hopefully soon I will have my site redesigned using WP. Thanks!
thanks a million (-________-) I won’t sleep until I’m done with it…… thank you so much , small POTATO…..
I typed all the code carefully character for character (several times), but i still cant get the search bar to appear.
Then copied and pasted the code in under my code to check it and, aside from the quotation marks not being picked up in my editor, the code is identical.
Very confusing???
Also had the same problem with the Meta section.
Log in works, however the site admin thing doesn’t appear.
Anyone had the same issues?
Can anyone help please?
Perhaps post a .txt up here with working code???
Not sure if this has any bearing but I’m working on a Mac locally using MAMP, editing in Smultron, Browsers are Firefox, Opera & Safari.
Same issues in all browsers.
Someone please help!!!
Bravo!!!