Setting up your theme

1) Creating theme pages

Start by adding the pages you are going to need. Go to Pages > Add New and create the following pages:

  1. Home: This will serve as your homepage. Assign to it the Homepage Template from the Page attributes panel. Publish the page and set it as your static Front Page as described below.
  2. Projects Listing: This page will list all your projects. Apply to it the Projects Listing template to it and publish the page.
  3. Blog: This will be your posts page. Just create and publish it.
  4. Contact: (optional) Here you can place the contact form that you will create using the Contact Form 7 plugin. Apply the Contact Page template and publish it.

(TIP: all page titles serve as examples, you can name your pages according to your needs
Once the pages are created, navigate to Settings > Reading, set the “Home” page to be your static frontpage and the “Blog” page to be your posts page, as demonstrated in the image below:

reading-settings

2) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post and enter the content in the editor. Upload a featured image by clicking Set featured image on the Featured Image panel, add a category and/or tag to the post from the respective panels and publish the post by clicking Publish.

TIP: the “more” tag is functional in posts, which means that you can directly control which part of the post will appear on the blog listing page. If, for example, on a video post format you want to display just the embedded video and no text, you can add a ‘more’ tag between the video embed URL and your text content.

3) Adding project items

To add a new portfolio item go to Projects > Add New. Set a featured image from the panel on the right, fill in the text you have for the portfolio item and move to the Project Options panel below.  Here you can add project Information or Images. Each tab contains instructions available for a quick reference. Follow them and easily set up your projects.

TIP: You can toggle the appearance of related project items under Appearance > Customize > Project Options.

4) Creating your menu

Now that your content is in place, you will need a menu. Go to Appearance > Menus, check the pages you want on your menu and add them. Give your menu a name and save it. Finally you will need to set your menu as Main menu. This can be done by checking the Main menu box in the Menu Settings just below your menu items in Menu Structure. Alternatively, go to the Manage Locations tab and select the menu you just created.

(TIP: for more info on creating and managing menus, please read the WordPress Menu User Guide)

5) Customizing the appearance

All theme customization is done via the WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this:

hellomouse-customizer

TIPΑny changes you make in the tabs below will be previewed live on the website that appears in right side of the screen. However to save these changes you need to click the Save & Publish button on the top of the bar. If you have made a change but see the button grayed out move the cursor outside the input box to the next input box. Then the button should be clickable again.

Take a look at the options each tab gives you:

Site Identity

In this tab you can modify the website’s title, tagline, logo and website icon.

Layout Options

From here you can modify the excerpt size and select the pagination layout.

Typography Options

Here you will find multiple options regarding the theme’s typography. You can change heading, body text and widget title sizes. You can also toggle the capitalization of various elements.

Content Colors

Do you want to have your own unique color scheme? Through this tab, you can modify the colors of many content elements. Click the Select Color button and either use a hex color value in the box or use the palette provided to select a color.

color-picker

Sidebar Colors

Through this tab you can modify the colors of your sidebar elements, in order to complete your custom color scheme.

Social Networks

Here you can fill in the URLs to multiple social network profiles supported by the theme. These will appear on the header and footer automatically. You can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

Posts Options

From here you can shape multiple aspects of the single post like the appearance of categories, tags, date, comments etc.

Project Options

This tab allows you to adjust the appearance of related projects and modify your project layout in project category listings.

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features eight sidebars that are extensively shown in the next section of the documentation.

Static Front Page

If you don’t want to have your latest posts on the front page and prefer to display static content using a normal page or want to use the looks template as your front page, you can do so from here. Set the desired page as your static front page and save.

Other

In this tab you can find the Custom CSS panel. You can use it to insert styles for elements not covered by the rest of the tabs. Also you can place your Google analytics tracking ID here.

Sidebars

Hellomouse comes with eight widget areas (sidebars):

  1. Blog: Used to display widgets in your Blog page and all your Posts.
  2. Pages: Displayed in all static Pages.
  3. Contact: Displayed in your contact page (i.e. a page that has the “Contact Page” template set).
  4. Homepage Left: First column of widgets on the Homepage. This widget area appears on your Homepage templates.
  5. Homepage Right: Second column of widgets on the Homepage. This widget area appears on your Homepage templates.
  6. Homepage Full Width: Full width area of widgets on the Homepage. This widget area appears on your Homepage templates.
  7. Footer #1: First column of the footer widgets.
  8. Footer #2: Second column of the footer widgets.

Additional Information

Creating Galleries

To create a gallery using the gallery management system follow these steps:

  1. On the Gallery Information panel click the Add Images button.
    gallery-settings-add-images
  2. To upload your images, drag & drop them in the Edit Gallery window that will pop-up. Select Add to Gallery in order to select already uploaded images. Once you are done, click the Update Gallery button on the lower right side.
    gallery-settings-update-gallery
  3. Your Gallery Information panel will look like this:
    gallery-settings-gallery
  4. You can re-arrange the order of images by drag & drop.
    gallery-settings-rearrange
  5. If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below.
    gallery-settings-remove
  6. By checking the Randomize order box your gallery images will appear in a random order that will change on every page refresh.
  7. When you are done, publish the gallery item.

If you need to add images after the gallery’s creation just follow the same procedure.

Useful plugins

  • CSSIgniter Shortcodes: You can use this custom made shortcode plugin to help you create a variety of layouts and elements on your website.
  • Contact Form 7: Use this plugin to create a contact form, then copy the shortcode it generates and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.

Image sizes

The minimum recommended image sizes for Hellomouse are:

  • Main thumbnail: 750×450px
  • Wide thumbnail: 1140×450px
  • Square thumbnail: 555×555px
  • Tall thumbnail: 750px in width, not limited in height