Adding a Photo or Slider to your Page or Pages

In addition to having a front page showcase header, you can also use the separate Banner Header widget position to add photos or even sliders to your site’s inner pages, or perhaps get creative and setup section headings with a nice background.

For Photos: Prepare your photo before you upload it to your Media Library with a recommended 1200 x 225 (height can be more) size for those with large monitors.

For Sliders: You just need your shortcode available

Note: Make sure you have the “Advanced Text Wdget” plugin installed because this is a very flexible widget that lets you disable the title output plus you can select where you want your widget to show in your site. In this case, we will be saying “Pages”.

1. Upload your photo to the Media Library and copy the url path to the full size image
2. Go to Appearance >> Widgets
3. Drag an “Advanced Text Widget” into the “Banner Header” position
   
4. Create your title and then in the text area field, paste this code into it, but replace the /your-image-path with your own:
   <img src="http://www.yoursite.com/your-image-path" alt="My nice Photo" />
5. In the “Widget Visibility” settings, select “Page” and then “Suppress Title Output“
6. Click Save

If all goes well, your site “pages” will look like this:

Adjusting the Padding Around the Image

You also get the option to adjust the padding around the image, whereas by default, the padding is set to 0 (zero pixels), so therefore the image will be flush up under the menu and right to the left and right sides of your content page as you see in the screenshot. IF you would like to have a little more space for example at the top, you can adjust the padding by going to the theme’s customizer.

1. Go to your dashboard and then click on the big blue button labeled as “Customize this site” or you can go to Appearance >> Themes >> then click on the text link labeled as “Customize“.
2. Click on the Header Image tab in the left side of the customizer window and look for the Banner Background Padding setting which will probably have a default value of 0
3. Add your own padding value such as 5px 0 0 0 which means: 5px on the top, 0 for the right, 0 for the bottom, and 0 for the left.
4. Click Save & Publish and then Close

Important

Please be aware that this page banner tutorial will display your photo on “all” pages. If you need more control of what pages or posts you need this photo on, you will need to use a plugin called “Dynamic Widgets“. This is a very powerful plugin which lets you assign widgets to almost any position but allows selective locations such as pages, posts, even tags…but a lot more. The demo site for Preference uses Dynamic Widgets, but I will go over this more in the tutorials about assigning widgets to specific pages. 

If you would like to install Dynamic Widgets now, simply go to your Plugins and click Add New. Type in “Dynamic Widgets” and then install, activate, and then I strongly recommend you read up on the developer’s documentation for this plugin before you start using it.

Using the Advanced Widget

Using the Advanced Text widget to display a slider or image can be used in many ways but with this particular widget, you get a few additional features to help you out:

1. Disable the widget title while keeping it active for the admin area only
2. Publish the widget to show on select areas of your site

This is the ideal widget to use when you want to insert a slider or image into the Showcase or Banner positions because of the features listed above.

If you would like to use a different image header on different pages (WP will show widgets on every page unless you use conditionals), you can use the advanced text widget.

Here is a quick tutorial:

1. Drag an Advanced text widget into the Showcase or Banner widget position
2. Title your widget (noting this is only for the admin area as a reference)
3. In the text area, add your <img src=”link to your image” alt=”image description” />
4. Select “Pages” from the “Widget Visibility” setting
5. In the Slug/Title/ID field setting, add the page slug, title, or ID. For more than one, separate with a comma for each. To find the Page ID, you can open a page in the admin and at the top below the title is the permalink with the ID like this:
   
6. Save the widget
7. Repeat for each new image header.