Say hello to Mood, a business theme with a positive vibe. Designed by the talented Veerle Pieters, Mood comes equipped with a custom front-page template, portfolio support, full-width featured images, and much more. Mood will help you build an inviting business or portfolio site.
Mood is a responsive, beautifully crafted theme designed to work across all devices and screen sizes, and provide your visitors with a seamless browsing experience.
Front Page Template
Mood comes with a versatile custom front-page template, giving you the opportunity to feature your latest posts, projects, and team members. Add social media links and make use of the optional footer widget area to create a warm, welcoming homepage for your website.
Mood takes advantage of the Portfolio feature on WordPress.com, offering unique layouts and organization for portfolio projects. Learn how to enable and set up the exciting portfolio feature.
Mood features a grid-style layout for the Portfolio Page, and an attractive single-project view, with a full-width image carousel. You have the option of including a grid of your latest portfolio projects on your custom front page.
Featured images are a great way to highlight your content. Mood takes advantage of all available screen space to display large, full-width images as a background for post title. For an optimal result, provide an image at least 1440px wide and 600px high.
Custom Header and Background
Personalize your site with a custom header that will appear behind your site title and description:
To change the background, visit Customize → Colors & Backgrounds from your dashboard.
Quick Specs (all measurements in pixels)
- The main column width is
- A widget in the footer is
- Featured Images and Custom Headers must be at least
1440 wide by
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:
- Create or edit a page, andassign it to the Front Page template from the Page Options panel.
- Go to Customize → Static Front Page and set “Front page displays” to “A static page.”
- 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.
The blog section displays four recent posts. To change the section’s visibility and modify the section title, follow these steps:
- Head to Customize → Theme Options → Front: Blog Section.
- Check “Show Blog Section.”
- 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.
The Portfolio section displays recent projects. You can learn more about the Portfolio feature here.
To toggle visibility and modify settings, follow these steps:
- Head to Customize → Theme Options → Front: Portfolio Section.
- Check “Show Portfolio Section.”
- 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.
- 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.
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.
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:
- Head to Customize → Theme Options → Front: Team Section.
- Check “Show Team Section”.
- 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.
- It is recommended to turn off Gravatar Hovercards, for optimal results.
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:
- Head to Customize → Theme Options → Front: Social Section.
- Check “Show Social Section”.
- Set up a Social Links Menu.
- 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 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.
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>
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:
- Create a new Portfolio project.
- 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.
- Continue adding content to your project — you can add more images, pull quotes, videos etc.
- 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).
- Save or publish your project.
Portfolio archives page
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.
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
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 class="alignright">A bolder blockquote that floats into the right margin
<blockquote class="aligncenter">A bolder blockquote that extends into both margins
Images that are wider than 1088px also overhang from the column. Show off your images without being restricted by the column width!
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.
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:
The background can be customized by going to Customize > Colors & Backgrounds.