POSTS IN Filling the Keg
A back stage look into the making of our blog.
Keg’s first branding concept was a quick decision for me: it should be similar to Barrel’s, but lighter and more playful (like a little sister blog). I would keep the feel clean and minimal. Instead of black, I would use white and pale grays, with a touch of one bright accent color to instill a little playfulness into Keg. The logo would obviously be the same typeface that Barrel uses for their logo: Berthold Akzidenz Grotesk.
What came out of that idea was my first draft:
A very simple Keg layout.
Berthold Akzidenz Grotesk logo? Check.
Playful accent color? Check.
But there’s something missing. It fits neatly into my initial concept, but it felt “plain” to me. I know design isn’t about bangs and whistles, but I wasn’t completely happy with the mockup I had on my screen.
So naturally, I decided to go the other completely logical way and try out new designs with a huge, all-up-in-your-face graphic.
At this point, I was stuck. The graphics took up so much space on the screen and I wasn’t really sure where to go next.
Thankfully, Jane gave me some very useful advice: focus on blocking out the structure before stylizing. In twenty minutes, I had an early draft of the design we have now.
This version takes the elements I liked best from all of the earlier concepts, combined into an awesome design.
It has all the elements of my original idea, but has just enough color and details to give Keg its own voice. The small touches of animation with the logo and search makes the design less static. The narrow width allows for an optimal line length (around 62 characters per line) and body text size (16pt), which results in a very comfortable reading experience.
I had a lot of fun designing Keg. I’m happy with how it turned out, and I hope you like it too!
Building this blog is my first experience with WordPress . To give you background, I have experience with both PHP and other object oriented languages, which helped with understanding the code and the way it works. So, instead of using a template I built our theme “keg” from scratch. While using a template would probably have been much easier, through developing our blog I have gained a much better understanding of the way WordPress works and how useful its vast library of functions are.
Patrick sent me a really helpful link to Chris Spooner’s tutorial, which is basically a manual that you can more or less copy and tweak to meet your own needs (for example we included a tag filtering subject in our blog). You simply place the WordPress function in a div that you can customize the styling of with CSS. What I didn’t realize until this was how many functions WordPress has and how well documented they are. The WordPress Codex is a life-saver. Pretty much if you want to do something, they have a function for it. You want to list the tags, use list_tags(), you want the template url, use template_url(), etc. Taking our site from the generic 2011 theme to this:
While Spooner’s tutorial is amazing, it did leave me with some confusion surrounding search.php, more or less because it is the only thing he did not specifically spell out word for word. Like everything else WordPress has a function that builds a search form for you (get_search_form()). To customize it is practically as easy as calling it. In your theme folder simply create a php file called searchform.php and build the form with what ever traits you wish your search function to have. For example here’s our code:
Key things to remember are setting the method as “get” and the action as the homepage url. WordPress will automatically look for your search.php page to display the results on. After this get_search_form() calls the form you have created rather than the default form. Katie designed a simple yet classic speech bubble form like this:
for our blog so our php file only consists of a few lines of code.
Also key to our search form was that it remain hidden unless you click the search icon, a magnifying glass, so the top of our page transforms from this:
In order to do this jqModal offers a great plug-in. You simply insert into your html the div that contains the element you want to appear and give the div the class jqmWindow:
It is also important to add CSS styling for the jqmWindow and the overlay (if you’re using it):
Finally, we move onto displaying the results. Both WordPress and Spooner cover this. More or less your search.php should be very similar to your index, calling header.php, footer.php, sidebar.php etc. The main difference is that you want to display the results. To do this you are going to want to use WP_Query. WordPress extensively describes how to first form the query:
This will search throughout your blog and the results will be stored in the variable $search. You can then customize the way the results are printed out varying what you echo in between the while loop:
while ( $search->have_posts() ) : $search->the_post();
We decided that our post should contain links to the titles as well as brief excerpts of the posts:
Then all that’s left is to style away!