WordPress Search Theme Tutorial

by birtanpublished on July 3, 2020

hello everyone welcome to another

WordPress theme development tutorial in

this lesson we'll take a look at

WordPress is search functionality or in

other words we'll learn how to add a

search field about here in our theme and

we'll also learn to control the way that

our theme formats the relevant search

results screen

so those are the two topics we're going

to cover today let's dive right in let's

begin by taking a look at our theme

files in particular we're interested in

headerphp because remember we want to

add the search form right about here so

in hetero THP and again every theme is

different but if you've been following

along this theme development series your

code should look something similar to

this so inside this site header element

we're going to add a new element named

header search head search you could name

it anything you would like

we just want something that we can float

to the right and then within this div

will say PHP there's a function in

WordPress named get search form that

will do a lot of the work for us so if

we refresh we can see that there's

already a search form so now let's just

float it to the right so it sits where

we want it to sit so I'll go into my

style sheet I'll create a search section

and I'll say header search float to the

right okay so now we have a search form

and it's positioned where we want it to

be positioned but you may be thinking

well the get search form function is

great but what if I want to customize

the HTML that makes this search form

well it's pretty simple we'll create a

new file in our theme folder named

search form dot PHP ok now anything that

we place in this file will get output

when this function runs now just a

moment ago our theme folder did not

contain a file name search form dot PHP

and WordPress was obviously still able

to output this form so what was going on

there is that if WordPress doesn't

detect

that file it will fall back to its

default search form code which looks

something like this so I just pasted in

a bit of code if you perform a web

search for WordPress and then the name

of this function you will be able to

find this default code and you can sort

of use this as a place to begin and then

customize it to fit your needs now if i

refresh we see that absolutely nothing

changes because we're still using the

default HTML I'm actually not going to

make any modifications to the mark-up I

just included it for educational

purposes so you can see what sort of

code WordPress works with if you want to

change anything in here feel free but I

will say that this code usually gets the

job done

let's however make a bit of style based

changes so I want to remove this label

text that says search for so instead of

deleting it from the HTML I'm going to

leave it in there for accessibility

reasons but in my stylesheet

I'll say in the head search element find

the label and then hide it by pushing it

to the left so now it's hidden but for

accessibility reasons it's still there

in the code now let's focus on making

the search button I have a blue

background with white text so it sort of

matches the overall aesthetics of our

site and if your theme is different you

can follow along but just use different

colors so in our HTML we can see that

the button has an ID of search submit so

in my stylesheet I'll say if we're in

the head search element let's go ahead

and select the search submit element and

let's just change the styling a bit so

we'll say background color equals the

same blue that we're using throughout

the rest of the site we want the text to

be white let's give it a bit of padding

mmm it doesn't need much vertically and

let's give it a good amount on the

horizontal left and right sides okay so

now if we refresh that already looks a

little bit better let's remove the

border

order none okay let's work on making

this input the same height as the button

so the first step would be to align them

so that they're the same so

vertical-align:top and then let's also

add that to the input which has an ID of

s so we'll create a new rule if we're

inside the head header search module

look for the s input and also align it

to the top so now you can see that

they're both aligned to the top and we

just need to match the height so we'll

give the input a bit of padding

vertically looks like that's too much

let's go down a little bit three pixels

vertical okay so that matches and I

would imagine that this looks good in

most browsers but I will say that if

you're building a theme for the real

world and your client is very particular

about your forms looking identical in

many different browsers then I recommend

you perform a web search for something

called formalize or CSS normalize or CSS

reset and that will provide you with a

bit of CSS code that you drop into your

theme or your style sheet and it will

sort of level the playing field across

all browsers and devices so you have a

bit more predictability when it comes to

styling forms but that is really outside

the scope of this video so now let's

move on to Phase two of this video which

is controlling the way that search

results get output so for example if I

perform a search for opinion you can see

that it will return the two opinion

posts but what if we want to customize

this output what if we want only the

excerpt to show instead of these full

two paragraphs and what if we want some

sort of title above these posts that

reads search results for quote opinion

well we can do just that very easily so

we'll hop back over to our theme code

WordPress will automatically look in our

theme folder for a file named search dot

PHP to output the search

now if your theme folder does not

contain a search dot PHP file it will

fall back and use indexphp to output

the search results so what we can do is

copy and paste the contents from

indexphp into this new search dot PHP

file and then make any customizations

that we would like to see for the search

results so for example let's go ahead

and add the title text that reads search

results for colon and then the search

string that the user entered so here

we'll drop out of PHP and then we can

drop back into PHP here and then in

between those two lines we can include

the new header so we'll say heading

level two search results for : now

WordPress will drop into PHP WordPress

has a really neat function named the

search query it's that simple it will

output what the user searched for so now

if we refresh we see search results for

opinion next let's go ahead and

customize the search results by making

sure that they output an excerpt instead

of the full text so in search of PHP

we'll scroll down here and you can see

that this is the logic that's choosing

whether it should be the full content or

the excerpt but we only ever want the

excerpt since this is a search results

page it's that simple

finally let's add a small detail that

has the potential to improve the user

experience let's add this term that they

recently searched for into the input

field itself

I think this will make more sense in

just a moment so I'm going to go to

search form PHP and I know I said I

wouldn't customize the markup but I will

just a little bit so for the search

field I'm going to add an attribute

named placeholder and then I'm going to

drop into PHP and say the search query

so now you can see that when you perform

a search this field will remember your

most recent search so it's really

obvious to the user that this is what

they just searched

so if they search for news it pulls up

the news results says search for news

and you get an extra reminder in the

input field and that will bring this

search lesson to a close but I want to

segue in to a topic that is indirectly

related that we're going to cover in our

next lesson and that topic is a function

named get template part now the reason

this is related is you might have

noticed that when we created search PHP

we copied the entire contents for index

dot PHP and then only customized a few

things so all of this code is duplicated

and in programming there's a principle

don't repeat yourself and we are

completely in violation of that

principle we are repeating ourselves a

lot we did this just to keep the lesson

as simple as possible but just know that

in our next lesson we're going to learn

about the function named get template

part and it is the solution to this

problem we're going to learn how to not

repeat ourselves and we're going to

learn how to be a lot more intelligent

with our code and when we need to break

out for certain changes in certain

templates so thank you very much for

watching this lesson

I hope you feel like you learn something

and stay tuned for more wordpress and

web development tutorials thanks bye

Related Videos

Be the first to comment “WordPress Search Theme Tutorial”

Your email address will not be published.

There are no comments yet.