Sunday, April 20, 2014

Wordpress Notes 2 - The Header (Mostly)

Given that I'm separating things out just a little more, I've got this whole "head" and "header" thing going on. The head has information about the page in general whereas the header will contain the heading (title), menu bar and search bar.



So for my header I'm going to have a white background (the body will be a light shade of grey to draw the viewer's attention to the content). In header.php I'm going to have the following:


 <section id="header_background" class="white_back">  
   <div id="header_area" class="header">  
     <h1><a href="<?php echo get_option('home'); ?>/">  
       <img src="<?php echo get_bloginfo('template_directory'); ?>/images/logo.jpg"  
         alt="<?php echo bloginfo('name'); ?>" >  
     </a></h1>  
     <?php include (TEMPLATEPATH . '/menubar.php'); ?>  
     <?php get_search_form(); ?>  
   </div>  
 </section>  



You'll notice I'm keeping things horribly simple - I've defined two more files to bring in: menubar.php and I'm using the "get_search_form()" convenience function to bring in a search bar.
.
The title is defined in the
h1 block. That's easy... I've hard coded an image in there. Given that this is a custom template for a particular entity, I'm not bothering to make it a configurable field (that's beyond me at the moment). I've also added in a alt value for accessibility more than anything - generated from Wordpress.

I'm going to leave out the navigation menu for the time being. Mainly because it requires
functions.php - which I'm going to have to look into. I don't like it all being in a single file so I'll probably make a functions directory and import files from there in order to be able to separate our functions - i.e. should stuff around menus be in the same place as code needed for putting widgets in the side bar?

The default search bar is kind of ugly...



Or rather... it's just lacks a certain something. For example, why do we need a button that says search? Wouldn't an icon do? And it just feels so.... boxy. What I really want is something that looks like this:


It's a much more minimal look with all the functionality we need. It would also re-size well - i.e. should we need it, we can make the search box a little smaller. In terms of structure, it looks like this:


So the search form gets a border and the search field doesn't which gives the feel of a the search field and submit button being all one control. The submit button is represented by a graphic - a magnifying glass.

searchform.php looks like this:

 <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">  
   <div class=search_form>  
     <input type="text" value="" name="s" id="s" class="search_field" placeholder="Search" />  
     <input type="image" id="searchsubmit" class="search_button" src="<?php echo get_template_directory_uri(); ?>/images/icon-search.png"/>  
   </div>  
 </form>  

I'm not entirely sure if this is a functional search form - I need to do some testing around it. But for the time being, I'm going to assume that it is working and instead worry about it's appearance. Inside of style.css, we need the following:
 .search_form {  
   border-style: solid;  
   border-width: 1px;  
   border-color: rgb(234, 234, 234);  
   border-radius: 5px;  
   line-height: 30px;  
   height: 30px;  
   float: right;  
   margin-top: 30px;  
 }  
 .search_field {  
   border-width: 0px;  
   font-size: 14px;  
   padding: 5px 30px 5px 10px;  
   float: left;  
 }  
 .search_field:focus, input:focus{  
   outline: 0;  
 }  
 .search_button {  
   width: 18px;  
   line-height: 30px;  
   padding-top: 6px;  
   padding-right: 5px;  
 }  

So the border is on the form. I then remove the border on the search field and make sure the outline isn't visible when you click inside of it (making it feel like a single widget rather than 2). And the search button bits just make it kind of pretty...

I was going to talk about css and possibly moving it all into a php file so that we could use variables (meaning that the different parts where width are defined can be set as a variable). Of course, we could do something with the structure to make this completely unnecessary... Which would require some refactoring but nothing too major.

No comments:

Post a Comment