It’s my last Blog Design post of the week! I just wanted to say thanks to Cameron for writing two great posts, and I really hope you guys benefit from these tutorials. Please let me know if you have any questions, or suggestions for future tutorials! I’m thinking of doing this bi-weekly or monthly if the demand is there =). So today, we’ve got a beginner’s guide to Simple Hooks.
I’ve had my blog self-hosted for about a year now, and even after 1 year, there have been so many changes to it. I used to have a red and white gingham header designed by my high school classmate, TerraÂ (she has a screenshot of what my site used to look like). I also played around with a bunch of different free themes before I ended up buying Genesis (best 75$ I have ever spent) and getting my child theme (Pretty Young).
As much as I love my theme, one of the most infuriating things though was to learn how incompatible it is with withÂ customizableÂ headers, adding ads, adding code (for Google Analytics or other), and about a ton of other things.
Luckily for Genesis users, there’s a great plugin that lets you easily paste in code like you would add into a textbox widget. It’s probably my favourite plugin. But when I first started using it, all I saw was code gibberish. I’m not an expert and I don’t know exactly what “hooks” are to explain them to you properly, but here’s how I see it.
How Simple Hooks Works
Think of your site design as a wall with shelves. At the top are a bunch of full-width shelves, and there is a shelf for your menu and for your header. Below that, you have two basic columns of shelves: your content, and your sidebar (unless you have two sidebars, then I guess that’s 3 columns). What Simple Hooks does is create a nifty little basket that can attach itself above or below any of those shelves: above your header, below your menu, after your post content, below your footer, above your sidebar, etc.
Using Simple Hooks, you can place whatever the heck you want in those baskets, be it ad script above your header, or an affiliate button at the bottom of your site. If you want to get a little extra fancy with your site and you think you can take it from here, then go nuts. Here’s a visual guide of where the hooks place content.
You don’t need to know ever function that’s made possible with SH, so instead of explaining what every single hook does (you can look at the visual guide to see that), I’m going to explain how I’ve used Simple Hooks to do specific things.
If you haven’t already downloaded and installed SH, go do that. To access the SH page, from your dashboard, go to Genesis>Simple Hooks.
Can’t find the place before the </head> tag? Copy and paste your tracking code under the wp_head hook. There are also a ton of other things that can go in there, like other tracking codes (Quora, codes from your ad networks, etc.) Some of you see the little “Like my FB page” box every now and then in the bottom right corner of my site. I put that code in here too.
Click Save and you’re good to go.
Placing bars at the very top of your website
For those who want to place a bar (like the BlogHer Tune-in bar or the Hello Bar, place the code before the </body> tag in theÂ genesis_beforeÂ hook.
Placing ads before your header
If you have a leaderboard ad that you want to place above your header, copy and paste your ad code into theÂ genesis_before_headerÂ hook, and click save. The same thing for the PHP box applies for suppressing ads as above.
Customize your header
This is possibly my favourite hook of all time. I spent 6 months trying to figure out where in both Genesis and my child theme CSS stylesheets the header was found. Editing the standard header is easy (just ensure that your header matches the width of your website/content so it’s not awkwardly long or too short. To find the width of your header from your Dashboard, go to Appearance>Header and there should be a place to upload your file for a new header. On that page it should indicate the exact dimensions for your header.
If you’d like to customizer your header with clickable links for social media or other links, create an image map. I like to use Image-Maps.comÂ for HTML (they used to do CSS as well but the website changed), but CSS Image Map Generator Â by Web Presence Partners is easy and is what I prefer for image maps.
Once you’ve generated your CSS code for your customized header, copy and paste it into theÂ genesis_headerÂ hook, then click save!
That’s basically all I’ve done using SH. There is a ton of other stuff you can do, like placing after post ads in theÂ genesis_after_contentÂ hook, placing stuff below your footer, placing ads after your header, etc.Â Again, check out the visual guide for SH to see exactly where the hooks are. Good luck!
That wraps up this week of blog design posts, check out the others below =)
[cgview name=blog-design num=20 orderby=title order=asc size=150×150 quality=100 lightbox=0]