1. Theme installation, demo content import
1.1. Install the theme
In your Admin Panel go to Appearance > Themes > Add New > Upload. Choose the theme file (mauer-storyteller.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:
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.
Once the plugin is installed, click ‘Run importer’:
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 > 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
General options like the logo, layouts, etc. can be found in the ‘Theme Options’ section of the Admin Panel. Each of the options has an explanation of what it does right on the spot. For example:
Be sure to click the ‘Update’ button to save options.
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 called in the 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.
4. Widgets setup
In your Admin Panel go to Appearance > Widgets. You will see three widgetized areas there: Bottom – Left, Bottom – Center and Bottom – Right:
Depending on the version of WordPress you are using, WordPress may have put a few widgets into the ‘Blog – Left’ area. If that’s the case, it’s recommended to first remove the default widgets (by simply dragging them out of that area).
After the default widgets are removed, you can add the ones of your choice by dragging them from the list on the left to one of the widgetized areas on the right.
To have the same widgets setup as the one you see in the demo (storyteller.mauer.co), use the following widgets:
‘Bottom – Left’ — ‘Tags’
‘Bottom – Center’ — ‘Blog Subscriptions (Jetpack)’, requires Jetpack (see below).
‘Bottom – Right’ — ‘Categories’
5. Connecting the Jetpack plugin
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 also automatically create OpenGraph tags on your pages — this will tell Facebook to use images when someone posts a link to your site on Facebook.
6. Instagram feed setup
Instagram requires its users to get access tokens for serving their photos outside Instagram. An access token provides a secure way for a website to ask Instagram to display the images.
Click the ‘Get Token’ link (shown on the screenshot above). This will take you to a special page on Mauer Themes website where you can generate the token.
Once you click ‘Get the token’, you will be asked by Instagram to authorize Mauer Themes. When you do that, you will get the token. Copy and paste it into the ‘Instagram Access Token’ field in your Admin Panel and save the settings.
Please note: This does not give Mauer Themes access to your private data. The sole purpose of this procedure is to let you create a token with which you can show your Instagram photos on your website (the photos that are publicly accessible on Instagram).
Facebook (who own Instagram) have changed Instagram API mid-summer 2020 and they made the old tokens that you may have acquired obsolete. Also, due to COVID-19, Facebook has paused developer verification which is needed to start accessing Instagram data after the API change. Until Facebook resumes developer verification, Mauer Themes has switched to a third-party plugin for displaying the Instagram feed.
To show your Instagram photos in the footer of your website, please first make sure you have installed and activated the Smash Balloon Instagram Feed plugin.
Then please go to ‘Instagram Feed’ in your Admin Panel menu. Once you are there, please click the ‘Connect an Instagram Account’ button. You will be guided in connecting the account:
Next, click “Add to Primary Feed” and “Save Changes”:
After that, please go to ‘Theme Options’ and make sure to check the ‘Show Instagram feed’ checkbox.
Now your website is displaying your latest Instagram posts at the bottom of every page.
7. Social sharing setup
Theme demo has sharing buttons after post content:
To have sharing buttons on your website, please make sure, you have connected Jetpack (see “Connecting the Jetpack plugin” section of this guide). Once you have connected Jetpack, in your Admin Menu go to ‘Settings’ > ‘Sharing’, apply the settings you see on this screenshot and click ‘Save Changes’:
In case you’re wondering about the social profiles icons in the header, they can be set up in Theme Options.
8. Featured Images for Post Grids
With this theme, you can specify different featured images for post grids and single post pages. To do that, please use the “Featured Image for Post Grids” box in the Admin area.
Having a separate picture for post lists is particularly useful for the Masonry layout. Masonry really kicks off with pictures of different aspect ratios. For instance, the left picture in the above screenshot uses a horizontal version of an image for single post page, and a vertical version for post lists.
You may also find it interesting to use totally different images for post lists and single post pages, as demonstrated in the right picture in the above screenshot.
For best results:
Tune the number of posts per page
The respective setting is located here: ‘Settings’ > ‘Reading’ > ‘Blog pages show at most’.
For 2-column layouts, it’s best to use a number that is divisible by 2. The recommended values are 8 and 12. Similarly, for 3-column layouts, it’s best to use a number that is divisible by 3. The recommended values are 9 and 12.
If you are using the ‘Make the first blog post big’ option, please mind that this adds an extra post to the first page of the blog. E.g., if you have 9 set in ‘Blog pages show at most’, there will be 10 posts shown on the first blog page. This helps keep the layout consistent.
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.