| |

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

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *