Responsive Theme Home Page Edit

Responsive WordPress Theme Home Page Slider, Google Search and Colophon Widget

For this tutorial I had fun modifying the Responsive WordPress Theme Home Page. I removed the default layout for the Main content and Featured content area's and put in a custom full width image slider and placed the Call to Action Button below the slider.

Before: Default Responsive Theme Home Page

It only took about 10-15 minutes for me to get it exactly how I wanted and my method got even easier as I dove deeper. I simplified method is to edit the Home PHP file and use the default theme options panel to add my slider in the Featured content area. This applies the settings already associated with the "Featured" content container which can accommodate text, images, video and other media formats.

A simple "shortcode" is added and viola, you have a beautiful wide featured image slider thanks to the Meteor Slides Plugin for WordPress. I wrote about this Plugin in my Blog post; "Three WordPress Plugins I can't live Without". I install this plugin very soon after installation since images are such an integral part of web design and with the popularity of the "Featured Image Slider" on websites these days, it just makes sense to have a tool that can afford me that option conveniently inside WordPress.

After: Responsive Theme Modified Home Page with Featured Slider

The added benefit of the Meteor Slides Plugin is that it is "responsive" so if you happen to be using a responsive theme, your images will be contained and sized along with the rest of your website on the many different viewing screens out today. 

I learned the hard way when I first started with WordPress, I installed a responsive theme and started adding plugins. I selected what seemed to be a good image viewer/slider plugin only to realize later that the images and slideshows were NOT responsive with the rest of my theme. thats when I learned about what responsive really means and I started making sure that any plugins I installed were "responsive" as well.

By removing the main content div and editing the remaining Featured content div and modifying its size and location, I managed to create a container that would accept and center an image slider with the dimensions I wanted. The end result was so smooth that I just had to create a video tutorial for my viewers and subscribers on YouTube and the response (no pun) has been great.

Check out the full tutorial at my YouTube Channel or at my Website

Written by
Allan Whitney
Owner/Administrator
MindVisionMedia.net