New version of the WordPress Vigilance theme released

Yesterday, Drew Strojny aka Jestro released the new version of his Vigilance theme for WordPress, which you might have guessed happens to be the theme I currently use on this blog. 1.13 fixes a couple of issues, and people using it should upgrade.

Features and fixes in version 1.13:

  • Fixed bugs relating to link colour switching in the theme options menu
  • Added an option to disable image hovers in the theme options menu
  • Properly cleared entry div to fix floated blockquotes and other floated elements
  • Added automatic author comment highlighting

You can grab the newest release on the theme’s website

For those who don’t know Vigilance let me tell you about this great theme.

Vigiliance is a theme for the WordPress blog software and has been released under the GNU GPLv3, it focuses on readability, a elegant default colour scheme and a couple of features you could expect to find in in commercial premium themes like a dedicated options page in the design-section of you admin panel. Options range from an easy way to change colours, the looks and header images of the theme to easy ways to include code for Google Analytics or Google Adsense without having to install a plugin or alter files of the theme.

One recent design change on my blog you may have noticed was the inclusion of thumbnails, and larger intro images only being shown on the main page but not on the single post page itself. This is a feature I’ve been working on with good buddy Robert who basically did most of the initial work and helped me to replace my own sub par piece of code.

Before I provide you with the code, let me explain what it does and how it exactly used:

WordPress gives you the option to use so called Custom Fields for ever page and every post of your blog, you can use these custom fields to define meta data like some special keys which you can grab via PHP to use in you theme or for plugins.

We added the following keys to use in your Vigilance theme:

  • thumbnail: 140×140 pixels
  • entryimg: 594×140 pixels
  • caption

Both image keys are used in the same way, you put either “thumbnail” or “entryimg” in the key field in you custom fields tab and enter the url as the value in the text area next to it. You should resize images to the given sizes beforehand or they will be resized automatically which might distort their ratio.

Setting a caption, like adding copyright information, links or license information to one of these pictures is just as easy, just enter caption as the key and the text you want to be used as the caption as the value, html code can be used to set links.

Now get to the code, the most important part of it is added to the index.php of your Vigilance theme right below the <div class="entry clear"> line:

15
16
<?php $img = get_post_meta($post->ID, "thumbnail", true); $caption = get_post_meta($post->ID, "caption", true); echo ($img == "") ? "" : '<div id="thumbnail-caption"><div id="postthumb"><a href="'.get_permalink().'" title="read more..."><img src="'.$img."\" /></a></div>$caption</div>"; ?>
<?php $img = get_post_meta($post->ID, "entryimg", true); $caption = get_post_meta($post->ID, "caption", true); echo ($img == "") ? "" : '<div id="entryimg"><a href="'.get_permalink().'" title="read more..."><img src="'.$img."\" /></a>$caption</div>"; ?>

The next and last step is to add style information to your used CSS file which can both be the original one or the one of the child theme:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#postthumb {
float:left top;
margin:6px 8px 0px 0px;
overflow:hidden;
color:#999;
font-size: 0.7333em;
text-align: right;
}
 
#postthumb a {
text-decoration:none;
}
 
#postthumb img {
background:#ffffff;
border:solid 1px #ddd;
width:140px;
height:140px;
padding:2px;
}
 
#entryimg {
float:center;
overflow:hidden;
color:#999;
font-size: 0.7333em;
text-align: right;
font-style: italic;
}
 
#entryimg a {
text-decoration:none;
}
 
#entryimg img {
background:#ffffff;
border:solid 1px #ddd;
width:594px;
height:140px;
padding:2px;
}
 
#thumbnail-caption {
float:left;
text-align: left;
overflow:hidden;
color:#999;
font-size: 0.7333em;
font-style: italic;
}

You might also like

Comments are closed.