Perle Documentation

---

Featured Post Requires Jetpack

This feature requires Jetpack be installed. Here are instructions on how to install and set that up (you’ll need a WordPress.com account. If you don’t already have one you can sign up for free here.)

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.
   
3. On the next screen, set a tag name for your Featured posts. Then hit Save & Publish.
   
4. Add the featured content tag to the posts you wish to highlight.

And you’re done!

---

WooCommerce

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.

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.

WooCommerce Colours

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.

 

---

Site Logo

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.

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

---

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: http://twitter.com/nudgedesign) 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.
   
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 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
• Twitch.tv
• 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.

---

Sidebar & Footer Widgets

Sidebar

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.

And the result will be:

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.

---

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:

---

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:

---

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:

 

---

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:

---

Content Options Requires Jetpack

This feature requires Jetpack be installed. Here are instructions on how to install and set that up (you’ll need a WordPress.com account. If you don’t already have one you can sign up for free here.)

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.

   

   

---

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.

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.
   
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.
   
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.
   
10. Hit Save. And you’re done!

---