I’ve been playing around with the Genesis Framework on a couple of small niche sites I’ve been building, mostly because I plan to upgrade this blog to Genesis and I wanted to know the ins and outs of it before I took the big plunge.
One thing I used to love about building my joomla sites was that it was so easy to make a dynamic header because I could drop the modules wherever I needed with much less fuss than the WordPress sidebar functionality.
All I had to do was drop in a random image module wherever I wanted it (no worries about if the theme was “widgetized” or not), set the folder and I was done.
With WordPress this is a little bit more difficult, and even more so if you’re using Genesis, but I found a way to take all the pain out of it by using a few awesome widgets and a very helpful video tutorial. This post is written about Genesis version 1.7.1 and WordPress 3.2.1.
It’s like this, you want to have a rotating set of images that display in your header area so you can have a different image show up on each page refresh. When people revisit your site it seems fresh and lively, even if you don’t update but once every couple of weeks.
I searched around for a bit and I finally found a plugin that combines the functionality and ease of use I was looking for. It’s called Dynamic Headers by Nicasio Design.
This plugin is pretty awesome. You can just tell it to be random, but you can also assign specific headers to specific post and pages, too.
After installation, there’s a still a couple of things you have to do at the outset, though.
1. You’ll need to create a folder called “header-images” and make sure it’s writable. If you don’t have ftp access to your server then this will be a problem.
If for some reason you’re at a host where they don’t allow you ftp access (hey, don’t laugh it actually happens), don’t walk, RUN to a new host where you do have it.
2. Then the next thing you need to do is place the header code into your header.php file. This you can do from the WordPress backend (Appearance>Editor) so no need for ftp access (although I use TextWrangler to edit my files instead of the browser).
Once you do this you’re ready to upload some header images and start assigning them as you will.
So all’s well that ends well, right?
NO. Hell no.
So, what’s the problem here really?
I’ll tell you the problem. It’s these blasted WordPress Frameworks!
Seriously, the level of functionality they provide comes at the cost of editing simplicity. Meaning you just can’t count on code being where it should be or files doing what they’re supposed to do as outlined by the WordPress Codex.
I’ll give you an example. The Dynamic Header plugin says to drop the line of code into your header.php file.
It doesn’t exactly say where, but that’s fine. I’l just figure it out once I get in there. Except when you get to the header.php file in a Genesis theme you get this:
* WARNING: Oh, you thought there was some code in here? Well
* there AIN'T! You can't put a damn thing in here, son!
* You can make a child theme if you want, it don't matter!
* Signed, the Genesis team.
* @ package Genesis
Er, ok. So if you look in that file you’ll see a smattering of php code. Obviously this file is pointing somewhere else and including other files. But from where?
I do a little more digging, and I get into the “lib>structure” folder (inside the Genesis theme folder). Hey, there’s a header.php file here! I found it. Whooohooo!
Except once again, when you get in there, you see some php code that doesn’t really lend itself to pasting in a line of code from the plugin. It looks like this:
* HAHAHAHAAA!: So you found this file, huh? Nice try, chump!
* You'll still never figure out how to modify this thing
* because we both know you ain't that good at PHP. If you
* were you'd make your own theme and wouldn't even be using this!
* Signed, the Genesis team.
So by now I’m really pissed.
THE SEARCH CONTINUES
So after breaking the site many times by trying to paste in the plugin code without screwing up the php code, I went on the hunt for answers.
Long story short: between the Studiopress forums and the wordpress.com help forum for the plugin, I came up with nada. I saw a lot of similar questions but no answers posted. Crap!
After the official options were used up, I turned to Google. My search struck gold immediately! It brought me an awesome video tutorial that I’d like to share.
So he goes through installing and setting up the plugin, but I was very curious as to where he was going to paste the line of code.
As you’ll see if you watch the video, he doesn’t go digging through a bunch of theme files. Instead he brings your attention to a theme-specific plugin called Genesis Simple Hooks.
This plugin allows you to insert and run code before or after any number of WordPress hooks written into the theme. SWEET!
So essentially you have to look under “Genesis>Simple Hooks” on the left menu, then put the code into the “genesis_header Hook” field, check a couple of the options and that’s all! Wow.
There are more video tutorials over at WordPress U. Also, check this list of more Genesis specific plugins to see if there’s anything else that might help you out. Dynamic Header problem officially solved.
A RANDOM PROBLEM
This has nothing to do with the dynamic headers, but I found a problem with the favicon (the bookmark icon that appears to the left of the domain name URL field in your browser) in Genesis.
After I made my child theme, I tell you I could not get my favicon to update.
I checked the url six ways from Sunday but it wouldn’t show. Only the default icon would appear. I’ve never seen a theme so aggressively hold onto a file!
I emptied my cache, switched browsers, restarted the browsers, restarted my machine, switched to a different machine. SHEESH!! It would not update!
Well, it turns out there’s actually a function for that in the Simple Hooks plugin! Yes!
There’s a checkbox under the “genesis_meta Hook” section called “Unhook genesis_load_favicon() function from this hook?”
So I checked the box, then saved and refreshed my page. All I had was the default “no favicon” image from my browser.
Then I went back and unchecked it, saved again. I refreshed my page again and my custom favicon was there. Awesome! Problem solved.
In my travels around the web I often see that default Genesis icon on websites. I usually thought they didn’t care enough to change it, but maybe they just couldn’t figure out how to get it to work.
THE WRAP UP
So, in conclusion, the way to best the Genesis Dynamic Header problem is like so:
- Install Dynamic Headers.
- Install Genesis Simple Hooks.
- Watch video tutorial (above) to find correct placement of plugin code.
- All done! Enjoy your dynamic headers!
Do you have any Genesis specific tips and tricks that you’d like to share? If so, let me know in the comments. Until next time!