admin
If you want to make a custom search box for your WordPress installation, but you want to place it without using a plugin, this is very easy.
You can add a modern and functional search box to your site with the following codes and steps.
First of all, let’s state that; Since the search box comes by default in all WordPress themes, we do it by adding !important to the end of the codes we will add. If you have no coding experience, we used this feature to make it easy for you. This is a basic css principle, when you add !important, if a value is given to that div in another section, it skips it and runs the value you give.
There are two methods of operation via code; via FTP or via the admin panel. Since we are preparing this article for inexperienced friends, let’s go the simplest way and show it from the admin panel.
Log in to your website admin, you will access the theme files with the following steps.
- Appearance
- Theme File Editor
You will see your theme on the right and its files below it.
Where will you place the search box?
- If Header, header.php
- If you are going to place it in the index, index.php
click on the file.
Place the following code in the area where you want to place the search box and save it.
<div class="privateSearchBox">
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" value="" name="s" id="s" class="search-boxPrivate" placeholder="Search..."/>
<input type="submit" id="searchsubmit" class="search-buttonPrivate" value="Search" />
</form>
</div>Then find and open the style.css file in the same place and paste the following code and save it.
.privateSearchBox{
background: #f9f9f9;
margin: 40px 0; /* Determine the position of the search field between the top and bottom or between the left and right elements */
padding: 30px; /* Set Padding */
}
.search-boxPrivate {
width: 400px!important; /* Sets the width of the search box */
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; /* Gives a shadow to the search box*/
border:1px solid #dcdcdc!important; /* Set border */
border-radius: 30px; /* Set Border Radius */
padding: 10px 20px!important; /* Set Padding */
margin: 0 10px 0 0; /*Distance from the search button */
}
.search-buttonPrivate {
background: #000!important; /*Button backgroun */
border-radius: 30px!important;
}You can also run both codes in index.php or header.php. You should add .
<style>
.privateSearchBox{
background: #f9f9f9;
margin: 40px 0; /* Determine the position of the search field between the top and bottom or between the left and right elements */
padding: 30px; /* Set Padding */
}
.search-boxPrivate {
width: 400px!important; /* Sets the width of the search box */
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; /* Gives a shadow to the search box*/
border:1px solid #dcdcdc!important; /* Set border */
border-radius: 30px; /* Set Border Radius */
padding: 10px 20px!important; /* Set Padding */
margin: 0 10px 0 0; /*Distance from the search button */
}
.search-buttonPrivate {
background: #000!important; /*Button backgroun */
border-radius: 30px!important;
}
</style>
<div class="privateSearchBox">
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" value="" name="s" id="s" class="search-boxPrivate" placeholder="Search..."/>
<input type="submit" id="searchsubmit" class="search-buttonPrivate" value="Search" />
</form>
</div>If you are using a block theme, you can add a custom search box by adding Custom Html.
If you have any difficulties, we recommend you to use ChatGPT, it is an incredible tool to improve yourself. It gives you unlimited answers for all kinds of web design etc. operations.
If you want to use special fonts in your designs or website, you can download fonts with very good design on DaFontFile. You can download the most popular font of recent times, Gotham Font Download or Sans Serif fonts from the Dafont family.