Shoreditch is a functional and responsive theme perfect for your business’s online presence.
Custom Page Templates
Shoreditch has two custom page templates that work particularly well for corporate sites:
Panel Page Template
The Panel Page Template is a way to highlight multiple pages on your site’s home page, and is what you see on the demo site. It displays the page you’ve assigned to the template, followed by a panel for each of its child pages. You can change the order that your child pages are displayed in by using the Order field of the Page Attributes module. The Panel Page Template is powerful and flexible enough to be used for a variety of purposes — use it to introduce your business to the world, or present all the services you offer.
When you first activate Shoreditch, you’ll see your posts in a traditional blog format. If you’d like to set up your site like the demo, follow these instructions:
- Create or edit a page, and then assign it to the Panel Page Template from the Page Options box.
- Add an introduction to your site in the editor.
- Add Featured Image, which will be displayed behind the text in that panel.
- Go to Customizer → Static Front Page and set “Front page displays” to “A static page.”
- Select the page to which you just assigned the Panel Page Template as “Front page”, and then choose another page as “Posts page” to display your blog posts.
- Add some child pages to the page to which you just assigned the Panel Page Template.
Full-Width Page Template
The Full-Width Page Template gives you more space for your content. It’s perfect for showcasing a gallery of images, embedding a map, inserting a large video, or adding a contact form. Select the template under Page Options.
Although its main purpose is business, Shoreditch looks great as a personal blog theme too.
Shoreditch displays Featured Content in a slideshow on the blog page. To set it up:
- Navigate to Customize → Featured Content.
- Choose a word to use as your Featured Content tag and add it in the text field. We suggest using a lowercase, single word, like featured.
- Click the Publish button to save changes.
- Create at least a few posts. For each post you’d like to feature, use the Tags & Categories area of the editor to add the tag you chose under Customize → Featured Content. With this theme, you can also tag pages to be displayed as Featured Content, in addition to posts.
- Add a featured image to each post or page you’re featuring.
Check out the full Featured Content setup guide and video.
Shoreditch features testimonials in two ways:
- The dedicated testimonial archive page displays all testimonials in reverse chronological order, with the newest displayed first.
- The Testimonial Shortcode allows you to display the testimonials wherever you want on your site. On Shoreditch‘s demo site, it is used on the homepage.
To add a testimonial, go to My Site → Testimonials → Add. Testimonials are composed of the testimonial text, the name of the customer — added as testimonial title — and an image or logo, which can be added as a Featured Image.
Testimonial Archive Page
All testimonials are displayed on the testimonial archive page, which can be added to a Custom Menu using the Links Panel.
Where is the Testimonial archive page?
Let’s say you have a WordPress.com site at:
The URL of the testimonial archive page will be:
This page can be further customized by adding a title, intro text, and featured image via Customizer → Testimonials. This content will appear above the testimonials list.
Shoreditch offers three widget areas, configured in Customizer → Widgets:
- A Sidebar widget area, which appears on the right.
- An optional Top Footer widget area.
- An optional Bottom Footer widget area.
Shoreditch comes packed with three Theme Options available via the Customizer:
- Fixed header when scrolling down: On larger screens the header will stick to the top of the browser when scrolling down. This option has been enabled on the demo site.
- Top Footer Area Layout: You can choose between one, two, or three columns to display your widgets in the Top Footer Area. The default setting is one column.
- Bottom Footer Area Layout: You can choose between one, two, or three columns to display your widgets in the Bottom Footer Area. The default setting is three columns.
Shoreditch includes one Custom Menu in the header, which can be configured via Customizer → Menus.
With Shoreditch, you have the option to display links to your social media profiles in the footer with perfectly sized icons, just next to the site credits. Learn how to set up your social links menu.
Shoreditch comes with a few special CSS styles.
You can add these classes to your links in the HTML Editor, to create “call to action” buttons:
<a href="https://shoreditchdemo.wordpress.com/" class="button">Button</a> <a href="https://shoreditchdemo.wordpress.com/" class="button minimal">Button Minimal</a>
Columns (recommended for advanced users only)
Two special CSS classes are available to create a two-column or three-column area within a post or page:
You will need to use the HTML Editor to create your columns. We recommend not switching back and forth between the Visual and HTML Editor once you start creating columns.
For example, this code creates a two-column layout:
<div class="column-1-2 column-first"> London!—that great place!—nobody—not even Mr. Bumble—could ever find him there! He had often heard the old men in the workhouse, too, say that no lad of spirit need want in London; and that there were ways of living in that vast city, which those who had been bred up in country parts had no idea of. </div> <div class="column-1-2 column-last"> London!—that great place!—nobody—not even Mr. Bumble—could ever find him there! He had often heard the old men in the workhouse, too, say that no lad of spirit need want in London; and that there were ways of living in that vast city, which those who had been bred up in country parts had no idea of. </div>
This variation creates a three-column layout:
<div class="column-1-3 column-first"> The stone by which he was seated, bore, in large characters, an intimation that it was just seventy miles from that spot to London. The name awakened a new train of ideas in the boy's mind. </div> <div class="column-1-3"> The stone by which he was seated, bore, in large characters, an intimation that it was just seventy miles from that spot to London. The name awakened a new train of ideas in the boy's mind. </div> <div class="column-1-3 column-last"> The stone by which he was seated, bore, in large characters, an intimation that it was just seventy miles from that spot to London. The name awakened a new train of ideas in the boy's mind. </div>
See live examples on Shoreditch‘s demo site.
Linked content images without the shadow
Due to styling of the links, when adding a linked transparent image to the content, you may notice a line behind the image.
To make sure, the above doesn’t happen, you can add a class
.no-shadow to the anchor element:
<a href="#" class="no-shadow"><img src="#" /></a>
Quick Specs (all measurements in pixels)
- The main column width is
580except when using the Panel Page Template or Full-Width Page Template where it’s
- A widget in the sidebar and a widget in the footer when it’s a 3-column layout is
- A widget in the footer when it’s a one-column layout is
- A widget in the footer when it’s a two-column layout is
- Featured Images for posts and pages are
- Featured Images for testimonials are
business, agency, freelancer, services, responsive, modern, light, clean, professional, ecommerce, product, technology, software, computer, it
This theme is available for download to be used on your WordPress self-hosted installation.Download