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-bild.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.
Theme Options — Fonts
To enable custom fonts check the ‘Enable custom typography’ checkbox at the beginning of the Theme Options > Fonts section. There are two fonts that can be customized: ‘Body font’ and ‘Titles and navigation font’.
When selecting a particular font, make sure that:
– It has the font weight you want to use it in.
– It supports your language.
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.
Remember you can always uncheck ‘Enable custom typography’ if you want to return to the default theme fonts.
3. What are Portfolio Projects and Galleries
After you install and activate the theme and the plugins, you will notice 2 new items in your WordPress Admin menu. These are for the 2 custom post types that the theme uses: Portfolio Projects and Galleries.
The difference, in a word:
Gallery = Pictures
Project = Pictures + Text
Galleries are slideshows of pictures, they don’t have descriptions and text — just the optional cover texts. They are great if you just want to show pictures.
Gallery example
Portfolio projects are pages with text and pictures. They are great if you want to present your photos with a description or tell a story by mixing text with photos.
Portfolio project example
4. Assigning a custom front page
In addition to the standard WordPress options to assign a static page or the blog feed to the front page, Bild offers a few more:
– Assign a Gallery to the front page (as in the demo).
– Assign a Project.
– Assign the Galleries archive.
– Assign the Projects archive.
To do any of the following, you need a page with the template of ‘Custom Front Page’ to be set as the static front page in Settings > Reading. If you have imported the demo content you already have this page. And if you have followed the instructions in ‘Theme installation, demo content import’ part of this guide (the ‘Final steps’), you should have the custom front page displayed as the front page.
To select what your custom front page displays, please go to Pages and start editing that page.
Please note that you can exclude the gallery/project displayed as the front page from the archives. This enables you to create a special showcase for the front page — as it is done in the demo.
To assign a different project/gallery, hover over the item in the right column and delete it. Then you will be able to choose a new one.
5. 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 ‘Bild contact form’ form (as it is already added to the About & Contact 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.
6. 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’.
7. Blog widgets setup
In your Admin Panel go to Appearance > Widgets. You will see the ‘Blog Widgets’ widgetized area on the right there.
You can add widgets to this area by simply dragging them from the ‘Available widgets’ section (on the left).
If you wish to have the same widgets set as in the demo, please drag the following widgets to the area:
The ‘About me’ widget is powered by the ‘Mauer Bild About Widget’ plugin that comes with the theme.
8. 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”:
9. 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 with the ‘Bild Gallery’ block (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.
You can see a demonstration here.
10. Legacy galleries
Together with the default gallery style offered by the ‘Bild Gallery’ Gutenberg block, this theme enables you to create galleries in the style that was introduced in the older versions of Bild. You can switch between modern and legacy modes for any given gallery just like that:
The difference between the gallery modes:
Modern galleries: Thumbnails keep their aspect ratio and have space around, they always fit the height of the screen. The captions are displayed on the page (not only in the lightbox). This type is recommended.
Legacy galleries: The way it used to be in older versions: thumbnails are cropped and stacked much tighter. They are automatically organized into rows of 1 or 2 images, or can be manually organized with the #half tag.
You can see examples of the two styles of galleries here.
If you wish to insert images that you’ve uploaded while using a pre-Gutenberg version of Bild (before 1.2), to the new ‘Bild Gallery’ Gutenberg block, it’s recommended to first regenerate those images (‘regenerate thumbnails’), as thumbnail sizes have been adjusted.
11. Changing order of portfolio items, categories, etc.
Surely, you can change the order of your portfolio projects or galleries 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, Galleries, Project Categories, Gallery categories and update the settings (see above).
Now you can just drag and drop these in the Admin Panel to change their order.
12. Recommendations
For best results:
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.