Melody Documentation

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


Featured Post Premium FeatureRequires Jetpack

Melody lets you highlight three of your best posts. Here’s how to set things up:

  1. Go to Appearance > Customize
  2. From the Featured Content section set a tag name for your Featured posts.
    Customizer - Featured Content closedCustomizer - Featured Content open
  3. Add the featured content tag to the posts you wish to highlight.

And you’re done!

 


Grid Layout Premium Feature

  1. Go to Appearance > Customize
  2. From the Theme Options section pick the number of posts you’d like to show on each row for your blog.

Customizer - Theme Options closed

Melody Grid Layout

 


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.

Customizer - Theme Options closed

Melody Theme Options

 


Drop Caps Premium Feature

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:

Melody Drop Caps

 


Sub Headings Premium Feature

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:
Melody Sub Heading

 


Overhanging Images Premium Feature

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:

Melody Overhanging Image

 


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.

Melody Logo

 


Social Media Menu

  1. To set up your Social Media menu, start by creating a regular menu. I like to call mine Social Media.
  2. Next add A Custom Link. This will be the url of your social media account.
  3. Add the newly created link to your menu.
    Social Media menu
  4. Next go to Appearance > Widget
  5. Add your menu to one of the three Footer Widget areas by using the Custom Menu widget.

Melody Social Media Menu

Melody has 21 different icons for you to choose from. They include:

  • Behance
  • Bitbucket
  • Contact page
  • Dribbble
  • Facebook
  • Flickr
  • Github
  • Google+
  • Instagram
  • Last.fm
  • Linkedin
  • Pinterest
  • Reddit
  • Soundcloud
  • Stumbleupon
  • Spotify
  • Tumblr
  • Twitter
  • Vimeo
  • Vine
  • Youtube

Content Options Requires Jetpack

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:

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

    Melody Content Options - Unchecked
    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.

Melody About Me Widget
Melody 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 Melody 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.
    Melody About Me Media Library
    Melody About Me Media Library
  6. Double click or highlight the File url. Right click and copy.
    Melody About Me URL
    Melody About Me 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.