The Befuddled User’s Guide to Setting Up the AltoFocus Theme

202007- there is currently a bug affecting the Altofocus theme’s layout if you have the “Older Posts” button enabled.


The AltoFocus theme is very popular with WordPressdotcom photography bloggers, but there are a few settings that need some tweaking in the Customizer if you want your site looking  like the theme’s demo site. While there is set-up information on AltoFocus’ theme showcase page, this special theme guide is a result of questions asked in our community forums by confused users (including me!) while setting up their site.

I recommend you read through the full text below for its added explanations, but there are a shorter step-by-step version and screenshots at the bottom of the longer section.
altofocus-home-page
I. Your Site’s Front Page/Homepage
II. Enabling the Special Header Slideshow on Posts or Pages
III. Notes and Observations

I. Your Site’s Front Page/Homepage

First make sure that you have set your site’s front page to display your latest blog posts and not a static front page.

Displaying your latest blog posts on your front page is the default setting for new sites so if you are setting up an entirely new site, you don’t need to change this setting. However, if you are switching from another theme where you used a static front page as your homepage, you may need to change your Homepage setting in your site’s Customizer under Homepage settings>Your homepage displays>Check ‘Your latest posts’>Click the Save/Publish button to save your changes.

Second, the AltoFocus homepage, as demoed, is image-centric so you’ll want to make sure to add Featured Images to each of your blog posts when you publish them. Optimally AltoFocus’ featured images should be 1200 pixels wide or 900 pixels tall. (Remember to optimize your images before uploading them to your site and you can find some suggestions for image editing programs in my “To Edit or Not to Edit” post.)

Third, if you want your posts’ Featured Images to appear on your site’s homepage, like in the AltoFocus demo, you will need to enable the following Content Options setting in your site’s Customizer: Content Options>Featured Images>Check ‘Display on blog and archives’>Click the Save/Publish button. Archive pages include Category, Tag, Author, daily, monthly, yearly archives and search pages, which are all created by the WP software when the relevant link is clicked on your site. Post details, like your post title and date, will be displayed when someone moves their cursor over the image.

If you don’t set Featured Images to display on the blog page, or don’t add a Featured Image to your post, your blog and archives pages will display a box for each post with your post title and date inside.

Lastly, if you want to highlight a few Featured Images on your homepage, like the larger image shown on the AltoFocus demo site, you will first need to create and add a specific  tag to a few posts. Then, you will need to enable the following Featured Content settings in your site’s Customizer: Featured Content>under ‘Tag Name’ add that specific tag you’ve added or will add to a few posts >Check ‘Display tag content in all listings’>Click the Save/Publish” button.

The tiling effect on the AltoFocus demo site’s front page is achieved because there are only a few featured posts tagged with the special tag among the regular ones. If you tag many posts with your special tag, that effect is lost.

There is also an optional tick box under Featured Content that allows you to hide that special tag from appearing in the tags you’ve added to your Post and any Tag Cloud widget you have added to your site.

Screenshots illustrating the above:

 

Short(er) Version:

  1. Customizer>Homepage Settings>Your homepage displays>Your latest posts
  2. Add Featured Images to each of your posts/pages (1200 pixels wide or 900 pixels tall)
  3. To display Featured Images on the Homepage: Customizer>Content Options>Featured Images>’Display on blog and archives’
  4. Display large Featured Image: First add a special tag to a few Posts. Then: Customizer>Featured Content>Add Special Tag name>Check ‘Display tag content in all listings’
  5. In all cases, save/publish your changed settings.

II. Enabling AltoFocus’ Header Slideshow on Posts

In AltoFocus you can enable a slideshow in the header of your Post like in this demo post. In order for the slideshow to appear in the header area, you will need to do the following:

  1. Create and add a Gallery Slideshow to your Post or Page following this support guide on Galleries and Slideshows. Important note: The only Gallery type that will create the header slideshow is the Slideshow type. If you choose any other Gallery type, the header slideshow will not be displayed.
  2. Next, go to the Customizer >Content Options>Featured Image>Check ‘Display on single posts’>Click the ‘Save/Publish’ button.

Keep in mind that like the regular Gallery slideshow, the more you add larger images to the slideshow, the longer it may take for the feature to show up in your post.

Screenshots illustrating the above:

 

III. Notes and Observations

Adding a Featured Image to your Post before publishing is the only way to be relatively certain that the image Publicized to social media sites, like Twitter and/or Facebook, is the image you chose. Why do I say “relatively certain”? Because things may go pear-shaped due to changes on those social media sites, but for the most part the Featured Image is the one that is used.

Occasionally I use an IFTTT recipe to add blog posts from Instagram, which then Publicizes my blog post with an image to Twitter. To make sure there is an image along with the post, under Customizer>Content Options>Featured Images I’ve also selected Automatically use first image in post.’ This is really convenient.

The combination of the above settings sometimes leads to the unexpected, like images displaying twice in a post or when using the header slideshow, any other Gallery added to the post displays like the header slideshow in the body of the post.* All-in-all, AltoFocus is a great theme for visual content and I hope you’ll find this theme guide useful in setting up your own AltoFocus site.

*reported as a bug and now fixed!

1 Comment

Comments are closed.