WordPress Search Theme Tutorial

Published by admin on

My new advanced WordPress course:
My new beginner WordPress course:

In this lesson we learn how to add a search form to our theme’s header, and also how to control the output for the relevant search results screen.

To view a complete list of the WordPress lessons in sequential order visit:

Link to download .zip of theme files as shown in this video (note: this is not a “complete” WordPress theme yet and this download is only intended for educational purposes to dissect and review):

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow me on Twitter for updates and cat pics:



John Meas · May 11, 2016 at 6:57 pm

Great series!

kaleem ullah · July 25, 2016 at 7:36 pm

fantastic tutorial

Miroslav Jiriste · July 26, 2016 at 11:06 pm

Best WordPress tutorials I've ever seen. Thanks a lot!

Samiron Barai · August 4, 2016 at 4:52 am


vandy vicario · August 14, 2016 at 4:15 am

nice tutorial sir, one question. how to create a pagination for search result page?

Subba Pdm · August 15, 2016 at 2:10 am

You are the perfect ,, How easily i could learn… Thank you soo much .. i expect further more useful tutorial of wordpress.

F Loren Tina · August 23, 2016 at 12:04 am

Another GREAT lesson!!!

F Loren Tina · August 23, 2016 at 12:35 am

one question though : for the div.hd-search label , why tou did not want to use the display:none; ? it would have affected the accesibility ?

Piotr Wasilewski · September 23, 2016 at 8:46 am

Well done

Nick Wilson · October 24, 2016 at 6:23 pm

Question, at 0:55 seconds roughly you're doing something to create a open div, comment, and close div with comment at the same time. How ?

zin moe · October 26, 2016 at 12:54 pm

Hello LearnWebCode!
Your tutorials are very helpful for me and
I very appreciate.
I have one question about my stylesheet doesn't work with the correct code .
Can you show me why and how to fix it.
Thank you very much.

Wasim Dar · November 22, 2016 at 1:41 am

Hi There, i am facing one issue regarding CSS, it's seem it is not communicating with anything i have to wait at least 10 hours to see the actual change, can u suggest some please?

Mr Hassan Javed · December 1, 2016 at 2:31 pm

if we want search results by tags, which query will be used?

Mr Hassan Javed · December 1, 2016 at 2:34 pm

and can you make a video for make own Widget for featured posts or for any part we can add as in mind ? will wait for your reply thanks.

Milan Jalic · December 28, 2016 at 2:35 pm

thanks for everything but seriously dude hiding an element with left: -9999px? how about display: none? don't show people things that could mess them up… Great course by the way 🙂

Sammy Youm · January 3, 2017 at 6:00 am

oh fuck… this guy is a coder and developer… i copied a bunch of videos only to find out that this stuff is way over my head 🙂 well, back to the drawing board.

Isuru Fernando · March 2, 2017 at 10:39 pm

Thank you again for the useful videos! I am following your WordPress lessons, although I am a SAP consultant and new to web development they are very clear and easy to understand. Keep up the good work.

jellycoding · April 1, 2017 at 2:23 pm

Well, when I search for a category that I have on a post I get no results. I have tried with different categories but without any luck.

Nano Byte · April 16, 2017 at 9:49 am

@LearnWebCode 3:30 Why can't we simply make label element to Display : none and add aria-* attribute for accessibility reasons ..???

Romy Kim · June 24, 2017 at 2:20 am

Can you please do a normalize css instruction video !!!! CSS seemed easiest at the beginning, but it might as well be most un-working part of web making at least… to me. I've been searching ways to make styles work reasonably acceptable in older browsers when hand coding.

Shuhrat Xodjakov · August 16, 2017 at 8:11 am

best tutorial ever

low shu hang · October 16, 2017 at 5:03 am

Having some problem when searching one of categories, it return no content found. stil wondering how should i found my result.

Muhammad Bilal Bin Noor · November 9, 2017 at 6:43 am


Forrest Carlton · November 13, 2017 at 3:54 am

For those having issues with searching categories, as a sibling element, under <input type="search" …etc /> enter the following code:

<?php wp_dropdown_categories( 'show_option_none=Select' ); ?>

Should give you a dropdown for each category

ruth giron · February 2, 2018 at 5:25 am

I've installed Google Language Translator plugin and if I am in another language I can't search in that language. Search is only working in English language. Do you know what to do?

Russ Wilkie · March 2, 2018 at 9:38 pm

searchform.php template

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />

manu mathew · June 8, 2018 at 10:23 am

how to prevent injection serach form

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: