1. Theme installation, demo content import
1.1. Install the theme
In your WordPress Admin Panel go to Appearance > Themes > Add New > Upload. Choose the theme file (mauer-stills.zip) and click ‘Install Now’.
Once the theme is installed, you will see a ‘Theme installed successfully’ message and a link for activating the theme. Click the ‘Activate’ link.
1.2. Install the plugins
After the theme is installed you will see the following message in your Admin Panel.
Click the ‘Begin installing plugins’ link:
In the next screen select all plugins on the list and, choose ‘Install’ under bulk actions and click ‘Apply’:
After the plugins have been installed, activate them by going to ‘Plugins’ in your Admin Panel.
If you have dismissed the required/recommended plugins message, you can use this address:
yoursite.com/wp-admin/themes.php?page=tgmpa-install-plugins
1.3. Import the demo content
To import the demo, go to Tools > Import. At the bottom of the list you will see WordPress, click the ‘Install now’ link — this will install the WordPress Importer plugin.
Choose the demo content XML file (located in the ‘Demo Content’ folder) and click ‘Upload file and import’.
In the next screen, you can assign an author for the content (optional).
Please check the ‘Download and import file attachments’ checkbox and click ‘Submit’.
1.4. Final step
Go to Settings > Reading. Apply the following settings and save changes:
Go to Settings > Permalinks. Under ‘Common Settings’ select ‘Post name’. Click ‘Save Changes’.
Finally, go to Theme Options > General and click the ‘Update’ button on the right.
2. Theme options
Theme Options — General
These are general options like logo, layouts, etc. Each of the options has an explanation of what it does right on the spot. For example:
Theme Options — Colors
To enable custom colors check the ‘Use custom colors’ checkbox at the beginning of the Theme Options > Colors section.
To change a color, please click it and use the color picker:
If you feel like returning to the original color, just copy its value from under the color picker, and insert it in the color picker text field. This theme also provides three ready-made color schemes. To use them, click a scheme name at the top of the color schemes panel.
After a scheme has been preloaded, click the ‘Update’ button on the right to save the settings.
Theme Options — Fonts
To enable custom fonts, check ‘Use custom fonts’ in Theme Options > Fonts.
There are five fonts that can be customized. This, though, does not mean all the five fonts should be different. Having five areas provides freedom of where to use each font from the reasonable two or three fonts combination.
When you select a font weight, please make sure that the font you want to use actually exists in the specified weight. Also, please make sure the font you select exists in your language.
Proportional font size control for your custom fonts
Not all fonts are created equal. E.g. Helvetica and Times appear very different at 18px nominal size. With many themes, you have to reject certain fonts you actually like— just because they look too large or too small in the theme. That’s why Stills provides proportional font size control — to widen your actual choice and offer more precise control over typography.
You can directly specify the font size of the body font. The other fonts’ size can be adjusted with the ‘Size adjustment’ field next to each of them, for example:
When using a Google font, enter its name in the ‘Google font name’ field (if it has spaces in the name, just enter them). Unlike many other theme authors, Mauer Themes is not using a predefined list of Google Fonts in the theme because the list would often get outdated as the awesome Google Fonts library is ever growing.
This theme also provides three ready-made font schemes. To use them, click a scheme name at the top of the color schemes panel.
After a scheme has been preloaded, click the ‘Update’ button on the right to save the settings.
3. Contact form setup
In your Admin Panel go to Contact.
Any contact form that you create while you have this theme activated will have markup different from the default Contact Form 7 markup. The difference is in that this theme makes contact forms have labels displayed inside the fields (as placeholders).
If you are using the demo content, it’s recommended to use ‘Contact Form by Mauer Themes’ form (as it is already added to the About page).
To set up a contact form, click its name on the list and go to the ‘Mail’ tab:
Go through the email addresses here and change them to the ones of your choice. Also be sure to change the site name and email signature.
If you prefer to use the ‘Mail(2)’ option, be sure to do the same for that template.
Don’t forget to click ‘Save’ when you are done.
4. Social sharing setup
Theme demo has sharing icons in portfolio projects and blog posts:
This sharing functionality is powered by the Jetpack plugin, which you should have installed if you’ve followed the steps in the first chapter of this User Guide (‘Theme installation, demo content import’). To have the same social sharing setup as in the demo you will need to connect the Jetpack plugin (see below).
Connecting the Jetpack plugin
You will need a wordpress.com account (it’s free).
Please connect your Jetpack plugin by going to ‘Jetpack’ in your Admin Menu.
Click ‘Set up Jetpack’ and follow the instructions. The plugin is free to use — just click ‘Start with free’ on the ‘Explore our Jetpack plans’ page:
Among other useful things, Jetpack will automatically create OpenGraph tags on your pages — this will tell Facebook to fetch images when someone posts a link to your site on Facebook.
Once you have connected the Jetpack plugin, in your Admin Menu go to ‘Settings’ > ‘Sharing’, apply the settings you see in this screenshot and click ‘Save Changes’:
If you’re wondering about the social profiles icons in the header, they are set up in ‘Theme Options’ > ‘General’.
5. Blog widgets setup
In your Admin Panel go to Appearance > Widgets. You will see 4 widgetized areas:
You can add widgets to these areas by simply dragging them from the ‘Available widgets’ section (on the left). In case you want to have the same widgets as the ones in the demo, please use the configuration you see below:
Leftmost — Text
Center Left — Search
Center Right — Tag Cloud
Rightmost — Categories
6. Enable lazy loading of images
If you turn on lazy loading, your images will be loaded as they are scrolled to (vs. having to wait while all images load). This greatly improves user experience, as users get the content sooner. It is highly recommended to turn on lazy loading of images.
Lazy loading images in this theme are powered by the Jetpack Lazy Images module. As you probably know, Jetpack has been developed and is maintained by Automattic — the actual company behind WordPress itself. So it is well supported and is sure to stick around. There does not seem to be any reason to prefer other plugins for lazy image loading. Furthermore, other plugins may require custom coding to work with the theme.
To turn on lazy images, please go to Jetpack > Settings and turn on “Enable Lazy Loading for Images”:
7. Using the #half tag in galleries
With this theme, you can easily create galleries that alternate between one- and two-image rows.
When creating a gallery (not to be confused with inserting single images), add a #half tag to two neighboring images’ captions and they will stand in one row. The #half tag is not displayed on the frontend.
Please see a demonstration here.
8. Changing order of portfolio items, categories, etc.
Surely, you can change the order of your portfolio projects by changing the dates (as the list is formed chronologically). However, there is a much nicer drag-and-drop solution. It will also let you easily change the order of categories:
Install and activate the Intuitive Custom Post Order plugin. Then go to ‘Settings’ > ‘Intuitive CPO’.
Check Portfolio and Project categories and update the settings (see above).
9. Recommendations
For best results:
Tune the numbers of projects and posts per page
Please adjust the ‘Nu. of projects on portfolio pages’ settings in ‘Theme Options’ > ‘General’ according to the Portfolio layout you choose.
A similar recommendation goes for blog posts — try to use even numbers for 2-column layouts. The setting controlling the number of posts per page is located in ‘Settings’ > ‘Reading’, its title is ‘Blog pages show at most’.
Upload big images, they will be scaled down automatically
What you might not know is that you don’t need to resize images manually before uploading — WordPress automatically generates all the sizes of an image used in the currently active theme once you upload an image. So if your images’ size is in the range of 1500px (by the bigger side) to 3750px (by the bigger side), just upload them, and WP will automatically create copies in all the needed sizes. If you use pictures which are smaller than 1500px by the bigger size, they may turn out to display incorrectly. And if you use images that are bigger than 3750px by the bigger size, WP may have problems processing them (depending on your server).
Sometimes a one-image gallery makes sense
If you want to insert a single image that would be opened in a lightbox when clicked, consider creating one-image galleries.