Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The remaining issues that I have to work with on the Search widget are all text related. First, there is a label, Search for, that we don't need. Then there are some placeholder texts that should be in the input field that isn't. Finally, there is a mysteriously placed search term that's overlaying our graphic, which we don't want. To deal with these issues we are going to combine some basic CSS as well as some PHP functions.
So let's take care of the CSS-based solution first, and that's changing the label to a display none. Now I just want to affect the label that's in the Search form. So I'm going to enter #searchform and then a space and the tag name label, with our opening and closing curly braces. Now let's set the display property to none. And if I click back in this section, refresh the page automatically for the stylesheet, we can see that the label is no longer visible.
The next two issues, as I mentioned, are putting in the placeholder text in the input field and getting rid of the word Search on the button. We can combine the solution for those in one PHP function. To handle this efficiently and show you the necessary code I've created a code snippet. Let's open that now. So we are going to go to File > Open. Let's go into Code view so I can explain how the code works. You can see that there's a number of string replacement functions that are doing the primary work here in my searchform function here. Where do I get these string values to replace? Well, if we look in the index.php file, and I have Live Code already enabled here, I will just switch to Live Code here.
Then let me just go ahead and click right into the input field. Here you can see the two input tags that I'm working with. The first one is my text input, and that has an id of s. The second one has an ID of searchsubmit, and this is where the value for search appears, and that's the text that's appearing over the button. So what we are going to do is take advantage of this id=s since I know that WordPress always puts that in, and we will add placeholder text next to that.
So we are going to add an attribute by using the String Replacement. Here what we will do is we'll just replace value=Search to value=nothing. So that's what these two string replacement values do. The first one looks for id=s and then replaces it with id=s placeholder=Enter Keyword. Second one looks for a value=Search and then replaces it with value="".
Now once we have that function declared all we need to do is to add a filter, and this is a standard WordPress function that's used for hooking in custom functions. What we are hooking it into is a WordPress function called get_search_form, and we are hooking my_search_form into that. So let's copy just the code and not the opening and closing PHP brackets. Then I want to go expand my Panels set here and then open up the Files panel where I am going to locate in the roux folder functions.php.
So this is our child functions.php file, and I am going to paste in the copied code. I like to leave a little bit of room between each of the function sets so when I go back and look at it it's easier to read. So now Ctrl+V will paste it in. I will save this page, and let's head back index.php. We will go it right into Design view, and I will refresh the page. Well, we're getting really close. I now have my placeholder text, I have my Search button with the image, and no text added to it.
Obviously, we've got a little bit of alignment work to do here, but that's just a tad of CSS. So what I am going to do is go back to my style.css file, and let's take a look at our image here to see what happens. It looks like it's pushing it too far to the right and my field here is too big. So let us go down to where the input s, that's the text field, and let's reduce that width by a 20 pixels. To make sure that it gets put in exactly as I have it here I am going to add an exclamation mark and then important.
That will override any in-line text that WordPress happens to put in. So if I click into here that should refresh the page, and it looks like that's working perfectly. Let's handle our little Search button here which is scroll down just a little bit too far. For that let's use a negative margin top value that I'll add into my searchform input type submit. We will try a -10 value here.
So now the final property I am going to need to add in is a vertical alignment property. I am going to change the vertical alignment to bottom. Let's try refreshing the page, and we are there. I will save the stylesheet, go Design view, and it looks like our header, our main content area is all good and the final remaining element is the footer.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.