WP Twenty Eleven – Add Responsive Image Rotator to Header
Goal: Rotating images, in WP Twenty Eleven’s child theme header, that are also “responsive” (they shrink to different device sizes):
- WP Rotator plugin (to add rotating images)
- Flex Slider for WP Rotator plugin (to make the rotating images “responsive”)
– Turns WP Rotator into a fully “responsive” jQuery slider
– MUST have WP Rotator installed - Regenerate Thumbnails plugin (in case the thumbnails need to be re-generated)
In the Child theme. These bullet points are merely a “memory-jogger” of what I did:
- Header.php code needs to be altered
- Functions.php: Add function to “set up post type for WP Rotator”
- Index.php (copy & pasted directly from Twenty Eleven)
- style.css file (nothing added yet – just the basics to make the Child theme)
Edit some CSS to remove the navigation “dots” below the slider:
- Plugin: Flex Slider for WP Rotator
- File: flexslider.css
- Line 37 (.flexslider): change border to “none”
- Line 56 (.flex-control-nav): add display: none
- Line 65 (.flexslider): comment-out the whole line
To-Do: make the rotating images display only on the Home page
What I’m running:
- WordPress: v3.2.1
- Parent theme: Twenty Eleven, v1.2
- Child theme: Custom for ReidWalley.com