Perle Documentation

Perle - Features

Perle Features

Perle theme offers a simple set up. All customization is available in the Customize menu of your dashboard. Below are step-by-step instructions on how to set up each feature.

Important info

Featured Post Requires Jetpack

Perle allows you to highlight up to four Featured Content items using Posts, Pages or Portfolio items. Here’s how to set it up:

  1. Go to Appearance Customize.
  2. Click on the Featured Content section.
    Perle - Featured Content
  3. On the next screen, set a tag name for your Featured posts. Then hit Save & Publish.
    Perle - Featured Content
  4. Add the featured content tag to the posts you wish to highlight.

And you’re done!


WooCommerce is one of the most popular eCommerce plugins available for WordPress. Perle give you built in WooCommerce support.

Simply activate the plugin, set up your products and your latest three will automatically display on your Blog Page. To access the theme’s WooCommerce features go to Appearance Customize Theme Options panel.

Perle - Theme Options

Here you can choose to hide your latest products if you prefer not to show them on the Blog Page. You can also set the Title of this section.

Perle - WooCommerce Options

WooCommerce Colours

Perle - WooCommerce Colors

WooCommerce comes with its own set colors. If you want a more integrated look with Perle, simply download the WooCommerce Colors plugin.

The following hex decimal colors are being used on the Perle demo site.

Primary Colour……………………….#DCE7E9
Secondary Colour…………………..#DCE7E9
Highlight Colour…………………….#95afb5
Content Background Colour….#FFFFFF
Subtext Colour ……………………..#777777


Perle lets you customize your site even further by letting you upload your very own Site Logo from the Site Identity panel in the Customizer.

To set your logo go to Appearance Customize Site Identity.

Perle - Site Logo

From here you can upload your logo. There is no size restriction but do keep in mind the available space. Finally, click Save & Publish.

Perle -Site Logo

Social Media Menu

Set up is as simple as creating a new menu, assigning it to the Social Media location and then simply adding your social media link (ex: as a custom link. Based on the url, the icon will appear automatically. Here’s a step-by-step:

  1. Go to Appearance Menus.
  2. Next, click on the “Create new menu” link. Give your menu a name like “Social Media Menu” and the click Create Menu.
    Perle -Social Media Menu
  3. Next you’ll add in your social media links one at a time using the “Custom Links” option. Add your url “Link Title“. Click, Add to Menu. The final step is to check the “Social Media” box in the Menu Settings at the bottom of the screen .
    Perle -Social Media Menu

Perle has 21 different social media icons for you to choose from. They include:

  • Behance
  • Bitbucket
  • Contact page
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • Github
  • Google +
  • Instagram
  • Linkedin
  • Pinterest
  • Reddit
  • Snapchat
  • Soundcloud
  • Spotify
  • Stumbleupon
  • Twitter
  • Tumblr
  • Vimeo
  • Vine
  • WordPress
  • YouTube


Portfolio Section & Section Title

Perle lets you showcase your three latest Portfolio items directly on the front page. The Portfolio posts area available when you activate the free version of Jetpack. Once that’s done, simply create your post and they’ll display on your Blog page.

If you’d rather not display them on the Blog Page, you can easily hide this in the theme’s Customizer. Here, you can also set a title for the Portfolio. To access this, go to the Appearance Customize Theme Options panel.

Perle - Theme Options

Perle - Portfolio


With Perle adding a sidebar to your main post or archive page is as simple as adding a widget in the Customizer‘s Widgets panel. The layout will automatically adjust from a three-column grid layout to a two-column grid layout with sidebar.

Perle - Sidebar

And the result will be:
Perle - Sidebar

Footer Widgets

With Perle, you can add widgets to your site’s footer. Simply drop your widgets in and the layout will automatically get set to a three-column layout.

Perle - Footer Widgets

Image Animation

From the HTML Editor, simply add an “animate” class to your <img alt="" /> tag. Here’s what that will look like:

<img class="animate size-full wp-image-83" alt="" />

And the result will be:

Perle - Animated Image

Drop Caps

From the HTML Editor, wrap your first paragraph with a <p> tag and add class="drop-cap" to it. The first letter will automatically get transformed into a drop cap.

Here’s a visual example:

<p class="drop-cap">Your awesome paragraph</p>

And the result will be:

Perle - Drop Caps

Sub Headings

From the HTML Editor, wrap your first paragraph with the <p> tag and add “sub-heading” class to it. Here’s what it’ll look like:

<p class="sub-heading">Your awesome introduction paragraph</p>

And the result:

Perle - Sub Heading


Overhanging Images

Also from the HTML Editor, simply add an “extra-wide-image” class to your <img alt="" /> tag. Here’s what that will look like:

<img class="extra-wide-image size-full wp-image-83" alt="" />

And the result will be:

Perle - Overhanging Image

Content Options Requires Jetpack

Perle now allows you to hide certain meta information from your blog posts such as author name, author bio, date, category and tags. Here’s how to do it:

  1. Once Jetpack has been activated, go to Appearance Customize.
  2. Click on the Content Options menu.
  3. On the next screen, simply uncheck the information you wish to hide. Then hit Save & Publish.
    Content Options Checked
    Content Options – Options checked

    Content Options unchecked
    Content Options – Options unchecked

About Me Widget

Another new feature in Perle is the About Me Widget which easily allows you to add an image, short bio and a link to any page to any widget area.
About Me Widget

Here’s a step-by-step on how to set it up:

  1. From your dashboard go to Appearance Widgets.
  2. Add the Perle About Me Widget to either of your widget areas.
    About Me Widget - Blank
  3. Add a title. For example, About Me.
  4. Add an image url. For this, head over to:
    • Media Add New if you are using a new image or
    • Media Library if you are using one from your library.

    Make sure your image is at least 135px by 135px.

  5. Once uploaded, click on the image to get to the Edit Media page.
  6. Double click or highlight the File url. Right click and copy.
    About Me Widget - image url
  7. Go back to your Widgets and paste the url into the Image URL field.
  8. Select the image shape. Add in a short text.
  9. Optionally, you can link to a page with more bio info. Your image, if you have one, will automatically link to the url you set in the field.
    About Me Widget - Filled
  10. Hit Save. And you’re done!

Still need help?

Still having trouble with your theme? If you're a premium customer, just sign in and head over to the support tab.