Skip to Content
  • University of Georgia

WordPress: Cover Image Shortcode

May 13, 2019 | Written by

The 2019 CAES-Extension Theme allows for full width templates. This means certain parts of your website’s template can reach from edge-to-edge of the page, like the header, navigation, and footer.

The Cover Image Shortcode takes advantage of this by setting up a “cover image”, a background image with overlaying text, that can be used as a banner at the top of your page or post, or even within the body content.

The shortcode can be placed in the body of any post or page, though it will only reach edge-to-edge on pages without a sidebar.

A cover block at the top of a page
A cover block at the top of a page.

The Shortcode

Here’s an example of what the [[coverimage]] shortcode will look like:

Cover image shortcode example

Lets break down the four important parts:

Cover image shortcode example with four parts outlined
  1. URL: The url= part of the shortcode should be followed by a link to the image you have already uploaded to your WordPress site’s Media Library. See below for more information on uploading the image and copying the link.
  2. Dim: The dim= part of the shortcode should be followed by any number 1 through 10. The higher the number is, the darker the overlay is over the image. This should be adjusted to ensure the text over the image is easy to read.
  3. Fixed: When set to fixed=yes, the cover image background will stick in place when the visitor scrolls, creating a parallax effect.
  4. Text: The text inside of the [[coverimage]] shortcode will be centered and overlap the photo. Typically the text should be formatted as a heading 2.

Uploading the image, and copying the image link

When you choose a background image for the cover image, make sure it is sized more “landscape” instead of “portrait”, or that the image is wider than it is tall, for best results.

Once you have the image ready to go as a file on your computer:

  1. Upload the image to your Media Library
  2. Click on the image in the Media Library to view its Attachment Details
  3. Click the text that says “Copy Link”
  4. Paste the link directly after the url= part of your [[coverimage]] shortcode
  5. If the link text in the shortcode is highlighted in blue, be sure to click on the link and click the “Remove link” button to remove the hyperlink
Attachment details screen with Copy Link option highlighted
Click the “Copy Link” text on the image’s Attachment Details page to easily copy the image’s link.
Screenshot of removing hyperlink from shortcode link
If the link text in the shortcode is blue, click on the link, and click the “Remove link” button to remove the hyperlink

Hiding the Title Text on pages

When setting up a cover image at the top of a page, you may notice that the page title appears in-between the page navigation and the cover image.

Screenshot of page with title in-between site navigation and the cover image

If you would like the cover image to be the first thing on the page, without the title, edit the page and check the box next to “Hide Title”.

Screenshot of "Hide the Title" option checked

The end result looks like this:

Screenshot of page with the cover image right next to the navigation

Note that this option is only available for pages, and not posts.

Pages and posts that use a standard template with a sidebar can also use the cover image shortcode. The cover image will not reach edge-to-edge of the page, but can still be used as a banner.

Screenshot of page with a sidebar using a cover image