{"id":2531,"date":"2026-10-20T08:34:13","date_gmt":"2026-10-20T07:34:13","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/style-the-search-bar\/"},"modified":"2026-10-20T08:41:01","modified_gmt":"2026-10-20T07:41:01","slug":"style-the-search-bar","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/style-the-search-bar\/","title":{"rendered":"How to style the GeoDirectory search bar"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Most of the search bar look is set in two places: the search texts in GeoDirectory settings, and the design options in the GD &gt; Search block. CSS covers anything beyond that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change the placeholder text and the button<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to GeoDirectory &gt; Settings &gt; General &gt; Search.<\/li>\n\n\n\n<li>Enter your own text in <em>Search field placeholder text<\/em> and <em>Near field placeholder text<\/em>.<\/li>\n\n\n\n<li>Click <em>Show Advanced<\/em> to see <em>Search button label<\/em>. Enter a word such as Find to show text on the button, or a Font Awesome class such as <code>fas fa-search<\/code> to show an icon. The default is the search icon.<\/li>\n\n\n\n<li>Save.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/core-features\/hidden-advanced-settings\/\">Hidden Advanced Settings<\/a> doc explains the Show Advanced button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Icons inside the fields<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">With the default Bootstrap design, the search field already shows a magnifying glass and the Near field shows a map marker inside the input. They turn into a clear button when you hover over them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sizes, borders and colours<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Edit the GD &gt; Search block, widget or shortcode where the search bar appears. Its design options include the input size, input borders, rounded corners, the button colour, the background, and margins and padding. The <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/gd-search\/\">GD &gt; Search<\/a> doc lists them all.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Anything else with CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For changes the settings do not cover, add CSS at Appearance &gt; Customize &gt; Additional CSS, or in the site editor styles on a block theme. For example, to make the search button wider:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.geodir-search .geodir_submit_search {\n    min-width: 120px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">More examples are in <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/advanced-search\/how-to-adjust-the-gd-search-bar-with-css\/\">How to Adjust the GD Search Bar with CSS<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most of the search bar look is set in two places: the search texts in GeoDirectory settings, and the design options in the GD &gt; Search block. CSS covers anything beyond that. Change the placeholder text and the button The Hidden Advanced Settings doc explains the Show Advanced button. Icons inside the fields With the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[213,422],"class_list":["post-2531","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-extensions-features","gd_placecategory-core-widgets"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=2531"}],"version-history":[{"count":1,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2531\/revisions"}],"predecessor-version":[{"id":2709,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2531\/revisions\/2709"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=2531"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=2531"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=2531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}