Screencast: Part 19: Creating a WordPress Search Form

You have a great site but what good is it if people can’t find stuff on it. Enter the Search form. You will be surprised how easy it is to create and use. That is what this screencast is all about.

Part 1: THE HTML and CSS of the form

Part 2: Adding the JavaScript

Part 3: Adding the finishing touches

searchform.php

[prettify]


‘ . get_search_query() . ‘‘ ); ?>





[/prettify]

loop.php

[prettify]






Sorry, no posts matched your criteria.



[/prettify]

Links used in Screencast

Download the finished files here

(How do I use the finished files)
custom-wordpress-theme-step-19-finished

Back to Main WordPress Page with all Tutorial Links

Back to Main WordPress Page with list of tutorials on creating a WordPress custom theme from scratch.

3 Replies to “Screencast: Part 19: Creating a WordPress Search Form”

  1. It should be noted that I had a strange bug. It took me about 2 hours to figure out and I’m not sure why my fix worked but it does. It appears that in this video, I lost the ability to see my menus in the Dashboard. They just disappeared. I researched the register_nav_menu() and register_nav_menus() documentation and came up blank. I’ll spare you the long, boring details. The end result is my menus reappeared when I made one seemingly insignificant change to the functions.php page. I ran the register_nav_menu function before the javascript register and enqueue section. Once I completed that switch, it worked. (If I used actions and hooks, this error may not have occurred – more info here (http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes)

  2. you want to add your javascript at the end of your html. This link shows you how. http://wordpress.stackexchange.com/questions/37960/cant-enqueue-scripts-in-the-footer
    You also don’t need to include your javascript in the footer.php if you are registering and using wp_enqueue_script. If you do both, you will call your javascript twice. I plan on creating a screencast on adding a jQuery image slider where I’ll show how this is done. (by adding javascript at the bottom, studies have shown that it will give your users the impression your site is loading faster as the page will load first and won’t get hung on JavaScript that may not exist yet. More to come on this.

Leave a Reply

Your email address will not be published. Required fields are marked *