WordPress 101 - Part 12: Create a custom search form and manage the search results page

746 ratings | 85972 views


WordPress 101 - Part 12: Create a custom search form and manage the search results page

:: Support Me :: Twelfth lesson of the series WordPress 101 for Beginner Developers, Create a custom search form and manage the search results page Learn how to build a Theme from scratch, create the folder and the necessary files to install and activate a custom theme. This tutorials are meant to be a starter help for developers who never used WordPress before and want to learn how to code themes and plugins without using pre-coded assets. GitHub Repository: 1st Part: 2nd Part: 3rd Part: 4th Part: 5th Part: 6th Part: 7th Part: 8th Part: 9th Part: 10th Part: 11th Part: Tutorial Page:

Comments to the video: WordPress 101 - Part 12: Create a custom search form and manage the search results page

Gerson Chávez 3 months ago
Great tutorial!
Alessandro Castellani 3 months ago
Thanks
Kerry Ruddock 4 months ago
After taking a Udemy course that used a different approach for Search (javascript, WP REST API ,etc), I was confused when I didn't find the same approach in our company website. I was recently hired to maintain and upgrade their WordPress site and enhance their search. Your video has help me to understand the changes I need to make as the search is built very similar.
Alessandro Castellani 4 months ago
Awesome, I'm glad I was helpful. Happy Coding!
Zack Akai 5 months ago
Love the tutorial, but I notice that now (August 2018), the step converting the search form to HTML5 seems to be enabled by default. No need to enable that in your functions anymore.
Alessandro Castellani 5 months ago
Awesome, thanks for the heads up
Anoop Seth 5 months ago
Where is Search button??
Alessandro Castellani 5 months ago
You can create one and assign a type= submit to it.
1UP Creative, LLC 10 months ago
Thanks! This is what I needed. Fantastic explanation!!!
Alessandro Castellani 10 months ago
I'm glad it was helpful. Cheers
Nanda Hadibrata 11 months ago
is this work for woocomerce sir? i need search box at my header. but cant do it. so my search box is only at sidebar (L/R), for dekstop view this case is OK, but for mobile view, there is no search box before i scroll down my phone coz search box is not at top or below the header. can u help me sir?
Alessandro Castellani 11 months ago
Sorry, this question is not related to my tutorials. WooCommerce uses the same templating system of WordPress, if you learn WordPress theme development properly, you'll be able to do anything in woocommerce.
Hausa24 TV 11 months ago
Hello.I want to create a searching form for my students admission results. To search using their exam number.And there to display as thisCONGRATULATION YOU HAVE BEEN OFFER ADMISSIONNAME: RAHUL SAMIDCOURSE: COMPUTER STUDIESGRADE: 7Please help me with some videos tutorial and guide
Alessandro Castellani 11 months ago
I will create a custom Search widget in the plugin series. Meanwhile, follow my tutorials to learn everything you need about WordPress, I'm sure after a while, you'll be able to build it by yourself.
monodeep roy 1 year ago
I AM NEW IN WORDPRESS!!! HOW THE ALL SEARCH PAGES U MADE LINK WORKS?? CONFUSED!!
Alessandro Castellani 1 year ago
Check my source code on Github and carefully follow the video, I explain everything in there
ozair ashfaque 1 year ago
Is it work on divi too???
Alessandro Castellani 1 year ago
I didn't try, but I don't think so. Divi is more of a framework to let you build a theme without coding. Unrelated to this series.
Ahmed Almulki 1 year ago
Thanks , do you make any video how can I search from another post type with multiple choices from meta , like real estate websites.
Alessandro Castellani 1 year ago
Not specifically for the search form, but I did more videos on how to filter the results via the WP_Query, you can adapt that approach to a search field. Cheers
Humayun Raza 1 year ago
Hi, AIess. I dont find much point in forming the content-search.php file. Cant we use the code of content-search.php in search.php only and have the same results.
Alessandro Castellani 1 year ago
Sure, you can definitely do that. I wanted to show how easily modular a WP theme can be, but of course, you can organize your files in the way you like. Cheers
khushi khuhi 1 year ago
Thank you for this video iam the beginner where you writte these code and what is the programm you use 😊
Alessandro Castellani 1 year ago
I use Panic Coda
Doğu Çağrı Özarpacı 1 year ago
Hey Alessandro please take video for wordpress post like system plugin development.
Mohammad Abdul Hye Shaon 1 year ago
Great.. Thank You Very Much.
Alessandro Castellani 1 year ago
You're very welcome :D
Suraj Maharjan 1 year ago
Is there another process if there please reply with link.
Alessandro Castellani 1 year ago
Another process for what?
Josip Matić 1 year ago
Nice explained.I do something similar, but I need different layout of page result for categories, and second search for whole page on search.php, how to do that?
Josip Matić 1 year ago
Alessandro Castellani Can you give me some link for example?
Alessandro Castellani 1 year ago
You could use different template archives and style different search results page based on the results.
Alvin Villanueva 1 year ago
Very well-explained, Alessandro. Thank you for this!
Alessandro Castellani 1 year ago
You're very welcome
FantasyEst 1 year ago
And btw, what is that program that u are using to code? i use notepad ++
Alessandro Castellani 1 year ago
In these videos I used Panic Coda, but I recently switched to Sublime Text 3
FantasyEst 1 year ago
i dont know anything about coding. so can u please tell me where exactly do i have to write that. And please also write the code here too so i could copy it
Alessandro Castellani 1 year ago
In order to follow this tutorial, you should know a little bit about web development. Search on YouTube and you'll find many videos for absolute beginners that can help you. You can also find all my source code on Github if you need to copy it. The link in the description of the video.
Ville Heikka 1 year ago
Hey! your tutorials are great! I got a problem with custom search. Is it easy or hard to add custom search with checkbox ? Example: I wanna search a driver from spesific town with a spesific car like area Berlin and car Volvo and when I submit the search the search results would show only the drivers with Volvo in the area of Berlin. Could you help me with this one? Edit: The drivers would choose their area and car from checkbox from their profile page. Bets Regards Ville
Alessandro Castellani 1 year ago
+Ville Hei hi, thanks for watching. You have to code something custom for that, for example have a list of check boxes that match your categories or custom post type, and then overwrite the search method to match those ceckboxes with your search parameters. It's not something small that I can just write you here. Go to my forum and post a question in the right section, me and other developers can help you there. forum.alecaddd.com
Mubasher Noor 1 year ago
hi can show me how to add search bar like Amazon in world press i mean that long search bar
crimsonmedia 96 1 year ago
do you have something about product page search ?
Wasim Shinkada 1 year ago
Thank you so much, that is amazing
Alessandro Castellani 1 year ago
You're very welcome :D
Rikky Malviya 1 year ago
I want my search bar to be showing result as user type in search box. And also my search should be middle in first and then get animated to header. Pretty much like Google Search Box.
Jay Prasad 1 year ago
can you create non exact search query like(input men or menn but result would be same)?
EL - Largo Kena 1 year ago
Hey hey, how do I get the search bar in the nav bar??
Alessandro Castellani 1 year ago
Live Development session video 1, check that playlist :D
vaibhav roy 2 years ago
Hello Alessandro, how can I create Search Panel with filters of taxonomy or categories like in amazon, I am making a woocommerce online store. Thank you for help. Like in this link
Theodoros Vragkos 2 years ago
Very Good Tutorial !!! Good Job !!! But how can we add a grid plug-in into the search result page to display the page with a specific grid?
Theodoros Vragkos 2 years ago
Thank you Alessandro!!! :D
Alessandro Castellani 2 years ago
You don't need a grid plugin, you can simply style the content file you're using to display the search result in order to have a grid structure with CSS. Cheers
Hollywood Press 2 years ago
You are really a nice person and very handsome.
Alessandro Castellani 2 years ago
+Akidsuki GangstaCat ahahah, thank you so much 😆
Roberto Luces 2 years ago
Hey Alessando, Great tutorial! Quick question for you if you have the time. I followed the tutorial and I got my search form to show where I want it in my website, but for some reason when I try to use it I get an error saying SyntaxError: Unexpected token <. Would you know why this is happening, I copied your GitHub code for my website to make sure it wasn't me missing something, but for some reason I still get the error.
Alessandro Castellani 2 years ago
Does your error message say also in what file and at what line the error is happening? It looks like you have an extra < symbol that it's causing issues to your php.
popa andrei 2 years ago
If I type somethin' on my search bar, it displays just my first 4 posts. Why so?
LAI HLA INN PI 2 years ago
can you please help, how to adjust heigh and width?
Alessandro Castellani 2 years ago
Height and width of what? If you're more accurate I can try to help you
Guilherme Campello Arruda 2 years ago
amazing dude keep blessed!
Arslan Saghir 2 years ago
i just do my search bar into my nav bar how i do
Arslan Saghir 2 years ago
hello. how i change the search bar position
Laura Camellini 2 years ago
Ciao Alessandro, ti ringrazio molto per questo tutorial, spero di riuscire ad usarlo per i miei loschi fini (custom taxonomies filtering) in maniera adeguata. Meno male che c'e' anche chi come te diffonde ancora l'uso consapevole di codex :)
Alessandro Castellani 2 years ago
Ciao, sono molto contento che anche altri Italiano seguono i miei tutorial :D Condividerò sempre l'uso consapevole di documentazioni ufficiali, mai senza! Happy Coding!
darshan kumar 2 years ago
Excellent tutorial, I like specially when you use term super simple , It make feel beginners more comfortable :)
Alessandro Castellani 2 years ago
Happy to hear that :D
Andres Navas 2 years ago
Thanks for your help, it make me made a great page. Is there some way to show a message when the search doesn't find anything?
Alexander Farber 2 years ago
Thank you for the nice lesson, however I don't understand how is bootstrap involved and what is it here - a JavaScript library for styling?
Alessandro Castellani 2 years ago
+Alexander Farber Bootstrap is a CSS framework with also a built-in JavaScript library of plugins and extensions like popovers, tooltip or drop down menus. Check the first live development session to see how I integrated it into the theme
Thalis Valle 2 years ago
im running a theme which does not loads pages results, just blog results. i already customized the search form but no way!!! how can i show both pages and blog results?
Anil Panthi 2 years ago
You saved my time !!! thanks a lot!!
Alessandro Castellani 2 years ago
Happy to hear that :D
Ankit Jaiswal 2 years ago
Thanks, its superb cool.
Alessandro Castellani 2 years ago
Thank you so much
Ramón Miklus 2 years ago
I found this video super useful, thanks Alessandro! What is in your opinion the best way to create a search form with multiple search inputs?
Alessandro Castellani 2 years ago
+Ramón Miklus Thank you so much for following. WordPress by default handles only 1 search input, crawling inside the database for a match in the Title and the Content. If you wanna use multiple values you have to create a custom query to the DB with the wpdb class. If your inputs are relative to categories, tags, etc, you could potentially handle everything with a dynamic WP_query.
Connected Earth 2 years ago
hello Alessandro Castellani how to add demo content to your GitHub Repository...
Alessandro Castellani 2 years ago
+saini42787 What do you mean by demo content ? You want me to add the content I'm using to the repo, or you want to add your content to the repo? In both ways I d'int really think it's necessary. The content I'm using for this tutorial is really minor,a nd you should use your own content and images, to manage everything independently. Cheers
Shashank Naithani 2 years ago
Hello Alessandro, Thanks a lot for the awesome tutorial. You are a great teacher
Shashank Naithani 2 years ago
Now I am going to watch all your videos. Subscribed your Channel
Alessandro Castellani 2 years ago
+Shashank Naithani Thank you so much for watching and your positive feedback. Happy Coding!
Nantu Dutta 2 years ago
awesome tutorial !!! Thank you So much !!!
Alessandro Castellani 2 years ago
+Nontu Dutta Thank you for watching :D
Mainframe 2 years ago
Thank you a lot! Im a beginner and your tutorials are very helpful for me, great work!
Alessandro Castellani 2 years ago
+RE JUv (REJUv) Thank you for following, helping beginners is my main goal!
Hamad Rashid 3 years ago
I have installed wordpress in wampserver. I want to create a text box where when I put some ID of an item it should display me description of it. I have already created a table in wamp.
Greg Crowell 3 years ago
Wow, awesome! Thank you so much
Alessandro Castellani 3 years ago
+Greg Crowell Thank you for following!
Nitin shukla 3 years ago
Fantastic video Alessandro. Learned a lot but i am having a unique issue where search results for a term shows results of articles that do not have that term how should i resolve that?
Mahfuz Rahman 3 years ago
Thanks for this video. It is very essential for me. thank you very very much.! :)
Alessandro Castellani 3 years ago
You're very welcome!
Play Media Inc 3 years ago
+Alessandro Castellani Thank you so much for making this video. How do we make the search result excerpts Title linkable to its content? I copied everything in here btw.
Play Media Inc 3 years ago
thank you for responding. So its gonna be like <h1><?php get_permalink(); ?></h1> <?php the_excerpt(); ?>
Alessandro Castellani 3 years ago
+Play Media Inc You can use the function get_permalink() to get the URL of the blog post, and than apply an <a> tag to the title. Thank you so much for following!
jesus sanchez 3 years ago
This is the only functional tutoring I found, thank you very much
jesus sanchez 3 years ago
+Alessandro Castellani yes, i refer to this topic (wordpress search) i searched many tutorials but none worked for me.
Alessandro Castellani 3 years ago
+jesus sanchez Wow, are you sure? The only one? Well, I take that as a fact. Thank you so much for your comment!
Costas Moschopoulos 3 years ago
Great video Alessandro! Thank you very much! I created a demo wp site but I noticed that in firefox the new search field is outside the whole template area. Is it a bootstrap issue? You can see if you like at Cheers! C.
Bob S 3 years ago
+Costas Moschopoulos This seems to happen only with firefox (chrome handles this fine). Moving the search bar code introduces a new spacing issue between the search bar and carousel with ff, so I tried something different. - Remove the display:block property in the form-control class (within bootstrap.css) and the search bar falls into proper place in ff. To avoid changing bootstrap.css I added a custom class and set display to initial for the same effect.- This change introduced the spacing issue that I mentioned so next I added padding to the search-form-container class used in the header.php/get_search_form().
Costas Moschopoulos 3 years ago
+Alessandro Castellani I styled the form in the searchform.php file. Not perfect but it did the job :) Thanks again for your help! C.
Costas Moschopoulos 3 years ago
Thank you very much +Alessandro Castellani!
Alessandro Castellani 3 years ago
+Costas Moschopoulos It's a bootstrap style option. You didn't insert the search bar inside any col- div, so it's missing the padding. Cheers
Rousha Rudgar 3 years ago
Alessandro, Thank you for all the lessons. I'm totally new in web design and programming languages. But following you I like my first moves through this world. Good Teacher :)
Alessandro Castellani 3 years ago
+Ro sha Amazing, I'm really happy to hear that!
Dewald Pen 3 years ago
Thank you very much Alex for all these tutorials. Also your personal website looks pretty cool , did you make the source code for it available somewhere?
Alessandro Castellani 3 years ago
+Dewald Pen Hi and thank you so much for you comment. I'm planning to rebuild my website, and after that I will release the source code of the current theme on GitHub. Cheers.
Ricardo Labate 3 years ago
I watched the 12 videos, it was awesome! I learned a lot. Thank you, Alessandro!
Alessandro Castellani 3 years ago
+Ricardo Labate Thank you so much, I hope you will keep following my channel for the upcoming tutorials! I'm glad I was able to help you.
Project: Assembly 3 years ago
Hey, thanks a lot. I watch all 12 lessons and wait continue.
Alessandro Castellani 3 years ago
Thank you for watching, new tutorials are coming this weekend