Activating your theme
Go to your home page and click the ‘Customize’ button on the admin bar. Click the ‘Change’ button next to your active theme name, scroll through the list of available themes, then select Showcase. Click ‘Save & Activate’ to activate Showcase on your site.
Showcase requires or recommends several plugins. When you activate the theme, you’ll get a notification in the dashboard asking you to activate certain plugins. This is optional but remember that certain features in Showcase require the use of plugins.
Customizing the Theme
All customizations for Showcase should take place through the Customizer. From the your site’s front end, click the Customizer button in the top admin bar. Here you’ll see a number of options:
Here you can upload a logo for your site, update the site title and tagline, opt whether to hide the tagline under the logo, and upload a favicon. You can also adjust your logo’s width.
This panel is divided into several sections
- Choose between a standard header layout with the logo on the left and the navigation menu on the right or a centered layout with the logo above the menu.
- Enable top bar – add a widgetized top bar above the logo and navigation menu.
- Fixed header – select this to keep the header visible at the top of the page even when you scroll down
- Vertically center elements – select this to vertically align the logo and navigation menu
- Archive Layout – set the global template for post archives and taxonomy pages, e.g. with or without sidebar
- Post Layout – set the global template for single post pages
- Sidebar Width – either 25% or 33% of the content width
- Sidebar Format – choose a style
You can create more complex banners for all posts and post types using featured and background images. Upload an image to the background image then have your featured image site on top. Apply styles to the background image via the Customizer to change opacity, color filter and overlay design.
- Background image opacity – you can reduce the opacity of the background image to create a color filter using the background color setting
- Background color – when you reduce the image opacity, this color will start to show through
- Overlay effect – choose a pattern: dots work best
- Box shadow – this will add a shadow to your featured image
- Enable Call to Action Area – enable a widgetized area above the footer columns
- Call to Action Background – upload an image as background to the Call to Action area
- Background Image Layout – either a repeating pattern or a single image to cover the whole area
- Footer Columns – choose how many widget areas in the footer
- Show Credits – select whether to include a credit back to the theme at the bottom of each page
- Credits Text – change the credit text
- Credits URL – change the URL
Easy Digital Downloads
If you have EDD enabled on your site, you’ll get some additional layout options here:
- Single Layout – choose the page layout for your product pages
- Archive Layout – choose the layout for archive and taxonomy pages
- Downloads per Row – how many products to display per line on archive pages
Showcase has a special homepage template that allows you to create an engaging and visually striking homepage quickly and easily – and without the need for complicated and clunky page builders.
To start, create a new page called ‘Home’ and set its page template to ‘Homepage’. Publish, then view the page on the front end. Click the ‘Customize’ button to start setting it up.
You need to ensure that your homepage is set to display as the front page of your site. From the Customizer panel, select ‘Static Front Page’ then select ‘A static page’ from the radio group. In the ‘Front Page’ dropdown list, select your ‘Home’ page.
Return to the main Customizer panel. If you’ve followed the guidance above and your homepage is using the homepage template and is set to display as the front page, you’ll see a new ‘Homepage’ panel available in the Customizer. Click this.
You can configure up to 6 sections on your homepage using the Customizer. Each section will display your choice of content from the following options:
- Blog posts
- Featured Pages
- Homepage Widget Area 1
- Homepage Widget Area 2
- Standard Page Content
- Downloads (if the Easy Digital Downloads plugin is enabled)
- Download Categories (if the Easy Digital Downloads plugin is enabled)
- Testimonials (if the Testimonials for WP plugin is enabled)
To start, click on the ‘Section 1’ menu item in the ‘Homepage’ panel. Below some styling options you’ll see fields for Title, Description and Content. Click the ‘Content’ dropdown to see the available content options. Select ‘Blog Posts’ from this dropdown and you’ll see some further options. Change your selection to ‘Icons’ and you’ll see some different options.
Styling homepage sections
Once you’ve decided what content to use in this section and you’ve added an optional title and description, you can start styling the section. Each homepage section can have its own background color and/or background image. If you upload an image to use as the background select between ‘Repeat’ (for background patterns) and ‘Cover’ (for a single, large background image). You can also adjust the text color for the section.
Homepage hero banner
The homepage doesn’t use the orthodox featured image. You can add a background image to act as a banner and optionally add a featured image to sit over the banner, but adding a featured image by itself will not have any affect on the page.
In the Customizer > Homepage > Banner tab, you can replace the title of the page (e.g. ‘Home’) with different text that will appear in the banner. You can also add a call to action button – just enter the button text in the ‘Call To Action Button Text’ field and select which page to link to from the ‘Call To Action Link’ dropdown.
Re-ordering homepage sections
If you allocate all your content to different sections, then decide you’d like to place the sections in a different order, use the Section Order tab.
This panel is divided into several sections:
- Global – including background color, text and link colors
- Header – set alternative header and top bar background and text colors
- Footer – set alternative footer background and text colors
In the Customizer, click on ‘Menus’ then click ‘Add a Menu’. Create a new menu for your main navigation and select the display location as ‘Primary’. (You can also select its location as ‘Mobile’ if your mobile menu will be exactly the same). Add some pages to your menu and save.
Each post and page can have a unique banner composed of a background image, a featured image or video on top, plus a title and subtitle.
- Ensure that you have activated the Showcase Toolkit plugin that is bundled with the theme.
- In your page where you wish to add your banner, upload an image to the Background Image field. Preferably, the image will be landscape orientation and at least 1920 pixels wide.
- Upload a separate image to the featured image field. Alternatively, if you have the Featured Video Plus plugin activated, you can embed a URL to a featured video.
- Your page title will appear on the banner as well. Any content in the Excerpt field will appear as the subtitle.
Showcase supports Google Fonts and Typekit. By default, the theme will use a Google Font which you can select from the dropdown lists available. The secondary font is optional and you’ll need to add your own style rules to use this font.
If you have a Typekit subscription, enter the ID number in the Kit Reference field. This will override any Google Font you’ve selected. You’ll also need to add the font family name, e.g.
proxima-nova for the Proxima Nova font, in the Font Family field.
Showcase supports several widget areas. It has additional sidebars for Easy Digital Downloads pages and for Discussion Board pages. It creates a couple of widget areas to be used with the homepage template, several areas in the footer, and two widget areas in the optional top bar.
Documentation Page Template
The Documentation page template allows you to create documentation for your products quickly and easily. Write your documentation into the page editor – every H2 heading type that you use will be automatically set to a navigation link at the top of the page.