Moodby Automattic

Getting started

When you first activate Mood, your homepage will display posts in a traditional blog format. If you’d like to use the Front Page Template instead, follow these steps:

  1. Create or edit a page, andassign it to the Front Page template from the Page Options panel.
  2. Go to Customize → Static Front Page and set “Front page displays” to “A static page.”
  3. Select the page created in Step One as “Front page,” and choose another page as “Posts page” to display your blog posts.

Now that you have set your home page, you can start customizing by navigating to Customize → Theme Options.

The Front Page Template consists of six sections: Blog, Portfolio, Static Page, Team, Social, and Front Page Widget Area.

Blog section

Mood Theme - Front Page Blog Section

The blog section displays four recent posts. To change the section’s visibility and modify the section title, follow these steps:

  1. Head to Customize → Theme Options → Front: Blog Section.
  2. Check “Show Blog Section.”
  3. By default, this section displays the title “Journal” above the posts. You can modify this by adding your own title in the text field under Blog Section Title.

Portfolio section

Mood Theme - Front Portfolio Section
The Portfolio section displays recent projects. You can learn more about the Portfolio feature here.

To toggle visibility and modify settings, follow these steps:

  1. Head to Customize → Theme Options → Front: Portfolio Section.
  2. Check “Show Portfolio Section.”
  3. By default, this section displays 4 recent portfolio projects. You can choose to display 4, 8 or 12 projects with the Number of Projects to display option.
  4. By default, this section displays the title “Work” above the projects. You can change this by adding your own title in the text field under Portfolio Section Title.

Page section

Mood Theme - Front Page Section

This section will display the title and content of the page assigned as the static Front Page. You can show or hide this section via Customize → Theme Options → Front: Page Section.

Team section

Mood Theme - Front Team Section

This section will display the Gravatar, name and profile description of all blog users assigned the Author, Editor, or Administrator role. To toggle visibility and modify section title, follow these steps:

  1. Head to Customize → Theme Options → Front: Team Section.
  2. Check “Show Team Section”.
  3. By default, this section displays the title “The Team.” You can edit this by adding your own title into the text field under Team Section Title.
  4. It is recommended to turn off Gravatar Hovercards, for optimal results.

Social section

Mood Theme - Front Social Section
This section will display a social links menu assigned to Social Menu location under Customizer → Navigation. To toggle visibility and modify section title, follow these steps:

  1. Head to Customize → Theme Options → Front: Social Section.
  2. Check “Show Social Section”.
  3. Set up a Social Links Menu.
  4. By default, this section displays the title “Get in touch”. You can edit this by adding your own title into the text field under Social Section Title.

Front Page widget area

Mood Theme - Front Widget Area

Mood includes a homepage-specific widget area located just above the footer. To configure, navigate to Customize → Widgets.

To set up a full-width background image behind the widget area, navigate to Customize → Theme Options → Front: Widget Section, where you’ll have the option to upload your custom image.

Setting up the Blog Page

To set up your blog page, simply create a new page called “blog: or whatever name you like. Go to Customize → Static Front Page and under “Front page displays” set “posts page” to the page you want as your blog page.

Portfolio

Mood takes advantage of the Portfolio feature on WordPress.com, offering unique layouts and organization for your portfolio projects. To add a project, go to Portfolio → Add New in your WP Admin dashboard.

<blockquote><strong>Note:</strong>You can get to the WP Admin dashboard by adding <code>/wp-admin</code> to the end of your site’s url (e.g.: example.wordpress.com/wp-admin)</blockquote>

Projects

Mood Theme - Single Project
You can include a full-width image carousel in your projects. Mood will take the first gallery in your project and turn it into a carousel automatically. To set it up, follow these steps:

  1. Create a new Portfolio project.
  2. Insert an image gallery into project content. The placement of gallery inside project content does not matter; the gallery will always be displayed directly below the project title.
  3. Continue adding content to your project — you can add more images, pull quotes, videos etc.
  4. Be sure to add a featured image to your projects. Although it won’t be displayed in single project view, it’s used on the portfolio archives page (see below).
  5. Save or publish your project.

Portfolio archives page

Mood Theme - Portfolio
All projects are displayed on the portfolio archive page in a grid layout. This page can be added to a Custom Menu using the Links Panel.

The portfolio archive page can be found at http://mygroovysite.wordpress.com/portfolio/ — just replace http://mygroovysite.wordpress.com/ with the URL of your website.

You can customize the portfolio archive page by changing the title, adding some content, and uploading a featured image. To do so, go to Customize → Portfolio.

Custom Menu

Mood includes one Custom Menu in the header, which can be configured via Menus from your site dashboard. If no menu is assigned, this area will display a list of Pages by default.

Overhanging Images and Pull Quotes

Pull quotes are great ways to entice your readers into your post. On a large monitor, the pull quote overhangs from the main column to maintain the readability of the wrapping text around it. All you need to do is to add a class of alignleft, alignright, or aligncenter to a blockquote element. Here are some examples of how to do that in the HTML Editor.

<blockquote class="alignleft">A bolder blockquote that floats into the left margin
</blockquote>
<blockquote class="alignright">A bolder blockquote that floats into the right margin
</blockquote>
<blockquote class="aligncenter">A bolder blockquote that extends into both margins
</blockquote>

Images that are wider than 1088px also overhang from the column. Show off your images without being restricted by the column width!

Mood Theme - Pull Quote styles

Featured Images

Mood takes advantage of all available screen space to display large, full-width images as a background for post title. For the optimal result, provide an image at least 1440px wide and 600px high.

Mood Theme - Full-Width Featured Image

Custom Header and Background

You can personalize your site with a custom header that will appear on the Front Page, behind your site title and description:

Mood Theme - Custom Header Image

The background can be customized by going to Customize > Colors & Backgrounds.