Give your readers visual rhythm and harmony with Melody. With just a few simple clicks, you’ll have this light and minimal look for your site. Below are the steps on how to get you set up.
Important info
- The post width is 660.
- The sidebar width is 330.
- Featured Images are 1400 wide by 740 high.
- Don’t forget to install Jetpack. Melody was designed to work flawlessly with the following Jetpack features:
Featured Post
Melody lets you highlight three of your best posts. Here’s how to set things up:
- Go to Appearance > Customize
- From the Featured Content section set a tag name for your Featured posts.
- Add the featured content tag to the posts you wish to highlight.
And you’re done!
Grid Layout
- Go to Appearance > Customize
- From the Theme Options section pick the number of posts you’d like to show on each row for your blog.
Site Introduction Text & Sidebar Position
These options are available in both Simple Melody and Melody. They can easily be found in the Appearance > Customize menu under Theme Options.
Drop Caps
From the Text Editor of your WordPress dashboard, 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 Text/HTML Editor of your post dashboard, 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 Text Editor of your post screen, simply add “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:
Site Logo
When you download and activate JetPack, Melody lets you upload a Site Logo. There is no size restriction so be sure to upload the perfect size for your site.
Here’s how to set your logo:
- Go to Appearance > Customize
- Next click on Site Title, Tagline, and Logo
- Click the Add Logo button and set your logo.
Social Media Menu
- To set up your Social Media menu, start by creating a regular menu. I like to call mine Social Media.
- Next add A Custom Link. This will be the url of your social media account.
- Add the newly created link to your menu.
- Next go to Appearance > Widget
- Add your menu to one of the three Footer Widget areas by using the Custom Menu widget.
Melody has 21 different icons for you to choose from. They include:
Content Options
Melody 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:
- Once Jetpack has been activated, go to Appearance → Customize.
- Click on the Content Options menu.
- On the next screen, simply uncheck the information you wish to hide. Then hit Save & Publish.
Melody Content Options – Checked 
Melody Content Options – Unchecked
About Me Widget
Another new feature in Melody 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:
- From your dashboard go to Appearance → Widgets.
- Add the Melody About Me Widget to either of your widget areas.
- Add a title. For example, About Me.
- 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.
- Once uploaded, click on the image to get to the Edit Media page.
Melody About Me Media Library - Double click or highlight the File url. Right click and copy.
Melody About Me URL - Go back to your Widgets and paste the url into the Image URL field.
- Select the image shape. Add in a short text.
- 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.
- Hit Save. And you’re done!
