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):

1. WP Rotator plugin (to add rotating images)
2. 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
3. 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