The search results page, powered by search.php, is a unique archive page because it often returns no results. In this online video tutorial you learn how to format and style the search results template in your custom WordPress theme.
- [Instructor] There's one more archive page…we have yet to address.…That is the search results page.…Now the search results page needs its own template…because it's generated in a different way…from all the other archives.…It's generated based on user input,…so you type in your search,…and then you get a search result.…You can get to the search result archive in two ways,…either add the search widget to the sidebar…and then type in a search, or simply go to the address bar,…and type in question mark s equals,…and then whatever your search is going to be.…So first, I'll search for the word post,…because I know there's a bunch of posts…in the theme unit test data that have the word post in them.…
This gives me the search results page,…and right away you see there's something really wrong here.…First of all, we have that same problem…where the search title not spanning the full width.…That's easy enough to fix.…Go to the theme, go to search dot php,…which is the template we're currently looking at,…then just grab the header here, which is pretty much…
Author
Released
2/6/2017- Setting up a WordPress development environment
- Getting and installing _s
- Automating theme development with Gulp
- The WordPress template hierarchy
- Setting up the basic theme
- Registering and displaying menus
- Applying styles to menus
- Creating conditional layouts
- Working with the comments template
- Working with featured images
- Working with widget areas, or sidebars
- Working with index templates
- Working with static pages
- Adding features to the Customizer
Skill Level Advanced
Duration
Views
Related Courses
-
Introduction
-
Welcome58s
-
-
1. Set Up a WordPress Development Environment
-
Get and install _s3m 48s
-
2. The Design to Development Process
-
Modular, mobile-first design2m 19s
-
Underscores: An overview1m 50s
-
-
3. Set Up the Basic Theme
-
Configure the theme info5m 32s
-
Create responsive typography6m 19s
-
-
4. Build the Header
-
Style the default header8m 3s
-
-
5. Create Menus
-
Apply styles to the menu6m 33s
-
6. Configure the Single Post Template
-
Apply CSS to the post header6m 25s
-
Style image galleries1m 56s
-
Configure post navigation6m 19s
-
7. Create Conditional Layouts
-
Planning an unusual layout1m 49s
-
-
8. Work with Comments
-
Apply CSS to comments5m 41s
-
9. Work with Featured Images
-
10. Work with Widget Areas (Sidebars)
-
11. Work with Index templates
-
Customize the excerpt output3m 51s
-
Highlight sticky posts4m 57s
-
Customize archive pages5m 51s
-
12. Work with Static Pages
-
13. Advanced Features
-
Add SVG icon functionality9m 16s
-
14. Adding Features to the Customizer
-
Get to know the Customizer4m 20s
-
-
15. Back-End Customization
-
Add a screenshot2m 44s
-
Conclusion
-
Going further with WordPress2m 15s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Customize the search results page