learning WordPress Search Theme Tutorial > WordPress learning

 

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
header.php 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 index.php to output
the search results so what we can do is
copy and paste the contents from
index.php 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