Latest posts by techwriter (see all)
- The Good News About McDonald’s Typo - March 29, 2017
- Test Your Knowledge of 4 Basic Fonts – Drag & Drop - January 27, 2017
- How NOT to Design a Web Site - January 25, 2017
© Ugur Akinci
WordPress Twenty Eleven blog theme looks pretty good with its rotating header images:
But the template comes with eight default images which may not be appropriate for your blog. Or you may want to add new images to keep your blog lively.
So, how do you add new images and/or change the default ones? Easy.
(1) Create new header images in the following two sizes: 1000 pixels x 288 pixels, and, 230 pixels x 66 pixels. The first one for your header image and the second for its thumbnail sketch that PW displays in the Header administrative panel. Sizes are very important. Make sure your images exactly measure as above or this method will not work.
Name your new image file as “[IMAGE-NAME].jpg” and the related thumbnail file as “[IMAGE-NAME]-thumbnail.jpg” since that’s how they are typed in the “functions.php” code file (see below).
(2) Upload (FTP) your images to the following folder on your WP site:
If your blog host is using CP panel for site administration, select Files > File Manager.
Select Go To Web Root (public_html/www).
Select wp_content folder.
Select Themes folder.
Select twentyeleven folder.
Select Images folder.
Select headers folder. This is where WP saves all your rotating header images. Upload all your header images and thumbnails into this folder.
After you’re done, log out of your FTP application (or CP panel).
Log into the Admin module of your WP site.
Select Appearance > Editor on the left navigation bar.
Select Theme Functions (functions.php) code screen:
NOTE: It’s a good idea to create a .txt backup of this file before you edit it. If anything goes wrong, you can reload the php code from your backup file.
Inside the functions.php file, find the comment line:
“// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.”
Underneath that line, you’ll see that each header image has its own code block:
Copy one such block, including the closing right-parenthesis and comma at the end.
Then edit the both the name of the image (by typing the name you gave to the new image) and also inserting it in THREE other places in the code, as shown below (for a new image named AIRPORT):
Repeat this procedure for every new image you have added via FTP (as described in an earlier step) to your header images file.
When done, click Update File to save the changes.
View your blog.
Now you should have new header images rotating randomly in your header.