WordPress: Home Page Carousel

Each section of the website may have a carousel like that on the main home page. The carousel’s purpose it to highlight key pages or resources. It can only appear on the main landing page of your part of the site.

Enabling the Carousel

To enable a carousel on your site, contact helpdesk@hmc.edu to make the request.

Viewing Carousel Admin Page

Position of the 'Carousel Feats.' option in the dashboard menu.

Select Carousel Feats. from the left menu.

Once enabled, you can start creating slides to be displayed. You should see a new option in the left menu of your Dashboard called “Carousel Feats.” Select this to go to the Carousel admin screen. Any previously created slides will be listed here, but it will initially be blank.

Carousel admin page in WordPress backend.

In this example, the carousel slides for the Harvey Mudd main home page are shown listed.

Create a New Carousel Slide

At the top of the admin screen, select the Add New Carousel Feature button.

Location on admin screen of button to add new carousel feature.

You will see the carousel feature creation page.

Enter Carousel Slide’s Properties

There are five fields that need to be completed for each slide.

Example of slide creation showing fields to be completed. Explained below

Title

The title is the headline for the slide. Make it relevant and about 30 characters in length.

Slide Image

Here you can upload or select the image for the slide. Pay particular notice to these requirements, otherwise the slide may not appear. It must:

  • have a width of 1300 pixels
  • have a height of 623 pixels
  • have a resolution of 96 pixels per inch
  • not contain any text that provides information to users. If it does, this text must be duplicated in either the title, caption or both. This may look odd, and is therefore best avoided.

Caption

The caption allows you to elaborate on the slide’s destination.

Slide Destination

A valid URL for the slide to direct to when clicked.

Slide Order

Enter a number to determine the position of the slide within the carousel. The slide with the lowest number will be shown first, with subsequent slides ordered by the value of their respective numbers.

Note that the numbers do not have to be consecutive. The order is determined by the relative sizes of the numbers to each other. This allows you to use numbers that make it easier to insert news ones in a specific location without the need to renumber all of the slides.

Slide Order Example

You may have four slides and decide to number them 10, 20, 30 and 40. The slides will be shown as:

  1. Slide numbered 10
  2. Slide numbered 20
  3. Slide numbered 30
  4. Slide numbered 40

You then decide you would like to insert a new slide between the first and second slides. You number this slide as 15. The slides will now be shown in this order:

  1. Slide numbered 10
  2. Slide numbered 15
  3. Slide numbered 20
  4. Slide numbered 30
  5. Slide numbered 40

Publishing Slides

When you have completed all of the slide’s fields, select the “Publish” button to have your slide set live on your site. Setting the status of a slide to Draft of Pending will remove it from the site, but leave it in the admin backend.

Example of finished carousel slide.

This is how the slide shown above would look when viewed on the website.