How to add custom banners to Worpress TwentyEleven theme
I’m setting up a new personal blog and settled on using WordPress’s Twenty Eleven theme that ships with current downloads.
I wanted to create custom banners to be displayed in the “Header” settings under the “Appearance” menu.
I thought they could be uploaded, this was something I simply presumed and didn’t actually check. I had seen the options to display a random header but hadn’t actually tried it… or read everything for that matter… 😉
There aren’t any uploaders. If you do upload a custom banner it is set as the banner for all pages.
The work around was quite easy, if you can follow PHP code of course.
First, create the banners you want to have on the blog, at appropriate sizes of course (defaults are 1000 × 288 pixels for the banners on the Twenty Eleven Theme out of the box). Then, your thumbnails (230×66 pixles, less important as it’s for the admin panel)…. then go into the theme’s image folder (unless you want to change those settings, but we won’t get into that here). Theme folder should be in:
Upload your banners and thumbnail images.
Once that is there, you must open the theme’s functions.php file (in twentyeleven’s root folder). In there, find the register_default_headers() function. You’ll want to configure your custom banners in the arrays as such:
register_default_headers( array( 'every-man-lives' => array( 'url' => '%s/images/headers/first-banner.jpg', 'thumbnail_url' => '%s/images/headers/first-banner-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Banner 1', 'twentyeleven' ) ), 'love-dies' => array( 'url' => '%s/images/headers/second-banner.jpg', 'thumbnail_url' => '%s/images/headers/second-banner-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Banner 2', 'twentyeleven' ) ) ) );
Once you’ve registered the new banners, refresh the admin panel Header or Custom Header page and check out the public site.
Was nice and simple.