Responsive Subheader

Description

Download Responsive Subheader v1.0.5.1

With this plugin you will be able to add a sub-header to your pages that utilizes the "featured image" of your page. There is a special custom post type that is used for the front page to display text and an image, or an image slideshow. For your other pages this plugin will display a pre-sized, banner type image beneath the header of your website. The background color is customizable to match your website color scheme.

A customizable image overlay will decorate the right side of the banner and add a stylish transition between the image and the page title display block for all pages, except the front page. Your pages will display the the page title on the lower-left corner of the banner, the background color of which is your choice.

This plugin is very easy to use. Just add a small snippit of code to your header.php file and create your responsive subheader post with a featured image and you are all set. Once you add a featured image to each of your pages the subheader will be displayed on each of them as well.

Features:

  • Custom, editable sub-header on the Front page
  • Use a featured image as the sub-header for all sub-pages
  • Attach multiple images to the Front page Responsive Subheader to make a slideshow
  • Choose your transition type for the slideshow
  • Choose your custom color for the sub-header backgrounds
  • Each page will have its own unique sub-header
  • The page title is displayed on all subpage sub-headers

This plugin works best when you have set static pages for your Front and Posts pages.

If you have not done so already, please, create a child theme for your current theme. Then copy the 'header.php' file into your child theme folder. Only edit the copied file - never alter your original theme files!

Create a new 'Responsive Subheader' and add a 'Featured Image' to it. The title is only for reference; it is not displayed on pages. Be sure to add a 'Featured Image' (at least 720px x 200px) to your pages. You can even add a featured image to the page you set as your 'Posts' page.

Be sure to choose a background color and the overlay style you will want displayed on your subheader. On your sub-pages (those not the Front page) the page title will be displayed over a colored background of your choice on the right side. The image you choose as the 'Featured Image' for the page will be displayed on the left side. This is a dynamic, responsive subheader that should display properly on all screens.

This plugin will add the option for your theme to use thumbnail images automatically. It will also add the image sizes it needs to the list of available sizes.

Once you have copied over the 'header.php' file to your child theme, open it up in a text editor and add the following code (including the opening and closing php tags) to the bottom of the file:

<?php
// Output of Responsive Subheader block
if( class_exists( 'ResponsiveSubheader' ) ) {
  display_responsive_subheader_here();
}
?>

Installation:

Download Responsive Subheader v1.0.5.1

Use the download link:

  1. Unzip the downloaded file and upload all the contents to your wp-content/plugins directory.
  2. Activate the plugin through the 'Plugins' menu in WordPress.

Install from WordPress:

  1. Simply search for 'Repsonsive Subheader' and install from your WordPress plugin page.
  2. Activate the plugin through the 'Plugins' menu in WordPress.
  3. Add the code to the child version [Please never alter your main theme file] of your themes header.php file.
  4. Create a new Responsive Subheader for the front page and add featured images to your other pages.

Usage:

  1. Go to 'Responsive Subheader' and create a new post to display on your front page.
  2. Add a Featured Image
  3. Add a 'Featured Image'* to your pages.

To use a slide show on the front page:

  1. Uncheck the setting 'Use featured image'
  2. Edit your responsive subheader post (or do this while creating your post)
  3. Click on 'Add Media' button and select the 'Upload files' tab. Add your image(s) - but do not click the 'Insert into post' button. Just close the modal window (by clicking the x button on the top right).
  4. Choose the type of effect you want to use for the slide transition
  5. Enjoy the new slider on your front page.

*Sub-pages will automatically use the parent pages featured image and page title.

Frequently Asked Questions

Can I use any image?

Yes. A special subheader image size is added to your images and is used by the plugin.

Changelog

1.0.0

* Initial release.

1.0.4

  • * Added un-install file
  • * Fixed some minor issues with image sizing and margins
  • * Removed white background from front page sub-header
  • * Updated usage page and this readme files
  • * Enhanced admin settings panel by making overlay selection more distinctive

1.0.5

  • * Made instructions easier to understand
  • * Corrected minor typos in text and code
  • * Added background color for Front Page subheader
  • * Added option for image to span full width of content
  • * Added option to have no overlay
  • Upgrade Notice

    1.0.0

    * Initial release

    1.0.5

    * Added new enhancements (see changelog)

    Screenshots

    1. Write a post and add a featured image to create a dazzling new front page sub-header.
      screenshot 1 screenshot 1 fullsize
    2. Turn your boring old front page...
      screenshot 1 screenshot 1 fullsize
    3. ...into an exciting, eye-catching, engaging front page!
      screenshot 1 screenshot 1 fullsize
    4. Each sub-page utilizes its own featured image as a sub-header banner complete with page title.
      screenshot 1 screenshot 1 fullsize

    Upcoming Releases

    In future updates I hope to:

    • Make it easier to edit the front page sub-header
    • Easily attach and detach images from the Responsive Sub-header for the slider
    • Add more overlays
    • Add a cropping function for your sub-page featured images
    • Add translations