For my new stamp blog, I looked for a highly visual layout, and came across The Unstandard, a WordPress theme that influenced others. The basic idea is that each blog post is represented by a single image in the index pages (i.e. the home, archive, category, tag and search result pages), instead of being inserted in full or as an excerpt, as most themes do. Since I aimed for the blog to somehow mimic a stamp album, having index pages display just stamp images was ideal.
The theme is very easy to use. When writing each post, add two custom fields, named lead_image and secondary_image. The value of each field is the URL of an image, which can be external to your site or have been previously uploaded. The larger lead image will appear at the top of your blog post, while the smaller secondary image will appear in the index pages. The theme automatically crops the images to the dimensions needed. This means you can use the same URL for both custom fields, which is what I do in my stamp blog: each post is about a group of stamps and I select one of them to be featured both in the post header and in the index pages. I think that using the same image is better, because it provides ‘navigational continuity’ when the blog visitors select a post from an index page. The theme demo site also uses the same images for post headers and index pages. The theme crops the images by selecting the central part and enlarging to the required ratio. This usually works fine, but occasionally the relevant part of the image is not in the middle. In those cases you have to crop your images on your computer (593 x 225 pixels for the lead image and 293 x 150 pixels for the secondary image) and then upload them.
Version 1.2.1 of the theme has some problems, and to fix them I had to find my way through the PHP and CSS files in the Appearance>Editor administration panel. Here is a list of the problems, my fixes, and the solutions I’d like to see in the next release of the theme, in the hope it’s useful for other users of this great theme.
- Problem: Clicking the ‘About’ button at the top of each page doesn’t do anything.
Fix: Replace/#by/aboutinheader.php.
Solution: This change should be part of the next version, so that at least there is an error message if the user hasn’t created the ‘About’ page. - Problem: Categories are shown in multiple columns at the bottom of each post. I prefer them on the sidebar, using the usual categories widget.
Fix: In filespage.php,single.phpandindex.phpdelete the line of code that includes theshow_categories.phpfile.
Solution: Create a theme option that allows to turn categories at the bottom on or off. - Problem: HTML tags like
<strong>,<code>and<em>are ignored, forcing one to use the HTML editor to write posts, in order to use alternative HTML tags like<b>.
Fix: Delete those tags inreset.css, so that their default behaviour is in effect.
Solution: I’m not a CSS expert, so there may be a better way to do it. - Problem: The blog’s tagline is not shown below the blog’s name.
Fix: Insert a PHP call tobloginfo('description');inheader_text.php.
Solution: Do proper styling of the tagline. - Problem: The number of comments is superposed on the secondary images. This obscures them and doesn’t look good if most posts have no comments.
Fix: Delete thepost-commentsclass inindex.php.
Solution: Provide a theme option that allows this feature to be turned on or off. - Problem: The date format of a post is hard-wired to
'M jS Y'(e.g. ‘Aug 31st 1999′).
Fix: Changed it to'j F Y'(i.e. ’31 August 1999′) insingle.php.
Solution: Ideally, the theme would automatically pick up the format chosen in the Settings>General administration panel. - Problem: If a blog post hasn’t been tagged, the box below the post will just state ‘This post has been tagged’, because it assumes a list of tags will follow.
Fix: Insingle.php, change the text within thefor-tagsparagraph to the following (note the punctuation and spacing):
This post is <?php if (!get_the_tag_list()) echo 'not'; ?>
tagged<?php the_tags(' ', ', ', ''); ?>.I also did another small change to the theme, which is a matter of taste: in style.css I reduced the opacity of the title box over the stamp images from 80% to 70%.
Tags: themes
Thank you so much for the tips on lead and secondary images.
I was having major difficulty trying to figure out how to make them work.
FP
For Problem 6. you can also go into style.css and just shrink the link text and/or the padding around the button. That way you can get the comments button to be a much smaller focus of the picture and allow the lead and secondary images to show through
SpinzCycle,
I guess you mean Problem 5. Good suggestion indeed, if one wants to keep the number of comments showing. Thanks.
Thank you! This post answers several questions I had about why the tagline wasn’t showing up and other key concerns about appearance. I love the theme and these notes will help tremendously.
Hi There,
Thanks for this blog post, it’s great!
I am also using the unstandard template and I am fairly new in programming so I get easily lost.
I would like the main post (with the lead image) to be related to a specific category. let say “featured”. How should I do this. I am not certain of what I am doing so I might try a few things around but I don’t think I will manage to get something working.
Thanks for your help and thanks again for your post.
Freddy
Freddy,
As you rightly say, The Unstandard shows the main post (i.e. the first post in your home page) with the lead image instead of the smaller secondary image. The Unstandard doesn’t change the order in which posts are shown: it’s from most to least recent, as usual. To have a particular post appear in first place, just make it sticky, a built-in WordPress feature to override the chronological order. In the Edit Posts panel, just do a Quick Edit of the post you want and select the ‘make stick’ checkbox. Of course, don’t forget to deselect the same box in the previously featured (i.e. sticky) post.
Hi, thanks for the info. It really helps.
I have a question I thought you may be able to answer: In the theme options you are able to turn on ‘Show lead_image’ which puts the lead_image above a singe post. However, any content added in the post (including leave a reply box) does not align to the lead_image. Is there any way to change this?
Sorry for only now seeing and approving your comment, I must have the e-mail notification facility mis-configured.
It’s a good question: the text body is indeed narrower than the lead image. Sorry, but I don’t know where to change it. It’s probably buried in some CSS file that comes with the theme…
Emma,
I now found a way. Go to the Edit Themes page in administration mode and edit the style.css file. Look for
.post.single .entry { ... padding: 10px 0 0 80px;and replace0 0 80pxby7px 0 7px. This basically makes the left and right margin indent by 7 pixels and align with the lead image. For the comments, I changed in#respond { ... margin-left: 80px;the 80 to 7, too. Those two changes were enough for me but you may have to change other occurrences of 80px to 7px.Thank you so much for writing this post. I just started using the Unstandard theme and have turned to this page several times to implement various fixes. Thank you! Thank you! Thank you! I can’t thank you enough.
Sheila, I’m glad it was useful to you. I see your images are mostly A4 portrait, whereas the theme works best with landscape images and hence is distorting your images. I have a similar problem with some of the vertical stamp images I show in my stamp blog. What I do in those cases is to upload a second image that is cropped at the bottom, and use that cropped image as the lead image. It’s a bit of a manual hassle. If you find a better way to do it, let me know.
Thanks for the suggestion, Michael. I might try that. I’m hoping to figure out how to change the size of the index image fields to make them fit my images better and add a third column of images. I’m new to php but I’m a quick study. I’ll let you know if I have any success. If I can’t change the theme I’ll have to crop my images.
I’m sorry for getting your name wrong, Michel.
I’m working on changing the image sizes on my test site and found and fixed another small problem with the Unstandard theme – it doesn’t come with any META tags in the header.
A META tag defining “description” populates the text under your site’s title in Google search results. Without the META “description” tag, Google displays whatever bit of text you have in the body or footer (for some reason I don’t understand, the tagline doesn’t show up when I search for my site’s name in Google).
Anyway, this can be especially problematic for the Unstandard theme because there isn’t any text on the home page. The index is filled with images.
I read up on META tags here: http://www.apromotionguide.com/metatag.html, and added “description”, “keyword” and “robot” META tags to the header.php file.
-Sheila
Sheila, thanks for the tip! Have now updated my stamp blog’s header, following your advice.