Looking for a professional, clean layout? Vesper is your answer.
We love giving back to the open source community and thought what a better way than to build a beautiful template. Vesper is a free widget ready 2 column fixed width template written in valid standards based code for the Wordpress content management system. Vesper supports second level subpage navigation that is very similar to our own here. Basically, if a top level page has child pages it will display them in the sidebar when viewing that page, even if you have widgets enabled.
As well, Vesper has support for a more advanced paging navigation through the use of the wp-pagenavi plugin. The template has the pagination style built into the style.css file and removes the call to the default CSS file that comes with wp-pagenavi by a simple remove action in the functions.php file in the Vesper directory, so everything should work right out of the box.
In addition, Vesper is Wordpress 2.6 compatible and should also work in previous version but has only been tested in 2.3 and above. You can download the latest version of Vesper below and play around with it. If you have any questions, found a bug, or think there is room for improvement to the code please leave a comment.
Screenshot
Download File
Installation
- Download Vesper
- Unpack the zip file
- Upload the ‘vesper’ folder and all of its contents to the ‘/wp-content/themes/’ directory
- Activate the theme through the ‘Design’ menu in WordPress
- Download the wp-pagenavi plugin by Lester Chan
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Done, enjoy!
Features
Features include: Excerpt Reloaded; WP-Pagenavi; Recent Posts; Widget-Ready; simple, clean, organized layout; Valid HTML; Valid CSS.
Donations
- Make a donation and help keep the awesomeness flowing.
Disclaimer
Valen Designs grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.
Valen Designs, cannot guarantee or imply reliability, serviceability, or function of these programs.
All programs contained herein are provided to you "AS IS" without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Comments Closed
Sorry, comments for this entry are closed at this time.
Well, I think that I’m going to check and make sure this template is up to the standards of the Wordpress theme directory (pretty sure it is) for version 2.6 and submit it there. It’s a nice simple theme so having in the directory is just going to get Vesper on more blogs. If anyone uses it let me know so I can see your site and how you implemented it.
Cheers
I really like this template, I was thinking of using it for a blog site about pugs. I’ll let you know if I do, but thanks for making it free. It’s a nice simple template and I love the colors. Good work.
Awesome theme. Looking forward to trying it out.
Update: Vesper should be available in the Wordpress Theme directory shortly. I uploaded last week but there was a delay due to an oversight on my part and is now fixed and ready to get approved. It wasn’t a code issue just the licensing needing to GPL compatible and is now fixed so it should be available to the masses very soon.
@Christina – I would love to see your rendition of Vesper, please forward a link when you get your site up so I can take a look at it. As well, I appreciate the kind words.
@James – Thanks for stopping by and hope it works out for your next project.
How can I change the color from orange to red or green? I know how to change the text color, but I don’t know how to change the image files or even all of the ones that need changing. Please help!
Rich,
In order to change the color of the header you would need to do 4 pretty simple things.
1) Change the bg.png to your new preferred color scheme.
2) Change the input.gif to have a border that matches the new color scheme.
3) Change the search.gif to also have a border that matches the new color scheme.
4) Change the top, left & right border color in the CSS for the navigation to match the new color scheme.
If you need more help I can maybe make some new image files for you based on your color scheme but would need to know what color you want it changed to. Other wise if you are familiar with Photoshop making new images should be a breeze. Hope that answers your question.
You can also try this variation of the theme which is a dark red. http://valendesigns.com/wordpress/vesper-dark-a-new-theme-variation/
Cheers,
Derek
Thanks, I’m going to stick with the dark version. I’m not sure if the problem exists on both versions, but at least on Dark, single.php incorrectly says “next_posts_link” and “previous_posts_link” instead of next_post_link and previous_post_link. At any rate, I love the theme.
@Rich
It’s all fixed now and you can download the dark version on the other post. However, Wordpress has to approve the changes and it seems to be taking them a few days to get to it so the latest version 1.0.6 of the Vesper theme will be in the directory shortly.
Thanks for pointing that out and I appreciate the heads up with such a quick response.
Hi,
this is a lovely theme, perfect for customising. However, I noticed something strange: on the main page, blockquotes, ol and ul are not rendered correctly, but on the post page they are ok. Any thoughts?
Thx,
Steve
@Steve
Yes I know exactly why this is happening and is fixed in the latest version but Wordpress is taking a long time to update and approve the latest theme.
If you want to show certain html tags like ol, ul, or blockquote you need to add them to the excerpt-reloaded code in the theme.
If you go to wp-loop.php and add the tags you want to the code I believe it’s line 27, it should start with the_excerpt_reloaded(100, ’some tags’……)
Add your list of acceptable tags separated by commas inside the ().This should solve any issues you are having.
Cheers
There is a problem with listings in IE7. I’ll try to fix it. Thank anyway for your work
A simple float:left in .post solved the issue under IE7
hi,thanks for you theme.
At my “about” page,why have a “Subpages” at the page’s right ?
3Q~~:)
@Aguilar
The float on the image didn’t get cleared and I will update it in the next release.
@Sandy
The subpage feature is only available when you have a subpage. For no other reason than to display those pages. How else would you navigate to that page? If you are seeing that functionality and you didn’t intent to have it, then you are using the theme in a way that it wasn’t meant for and will need to make some adjustments. If you want to make a page that is hidden or don’t want subpages on the about page you will need to add that to the sidebar if (is_page(‘about’) { do this } else …
Hope that helps.
Hey Derek- Thanks for sharing your theme. I really like it’s clarity.
I just discovered Wordpress and fiddled around with your theme, but don’t really know what I’m doing yet. As you can see, the search box is shifted downward to create some space. Can you give me a hint on how to get a logo on top of it, into the top right corner of the header?
Thanks again, A
Thanks Adé, if you want to add a logo you have a few options. What I would do though is add an image with the id=”logo” and give it something close to this:
#logo {
position: absolute;
top: 0;
right 0;
}
Make sure to keep the image code inside the header and if the header isn’t already make it position: relative;
Thanks for your feedback,
So I would stick something like this:
into the header.php? Would that sit before or after all the “site-meta” stuff?
And the #logo{… lines you mentioned go into the styles.css right? Does it matter where? I assume in the “main site elements” section.
Thanks for bearing with me here. A.
When I go to click on comments on my blog this message appears: Fatal error: Call to undefined function: get_avatar() in /usr/local/wordpress-2.3.1/wp-content/themes/vesper/comments.php on line 29
Any idea how I can fix this?
Thanks!
@Kathryn
You need to update your version of Wordpress there is a plugin that does it for you and I talk about it in a post about securing Wordpress. The reason for the error is that the theme is using the built in functionality of the new get_avatar but 2.3.1 does not support it. If you are against updating which I strongly suggest doing you can remove the code from the-loop.php if my memory serves me. You will just delete the line with the above function in it. If you still have questions let me know and I’ll see if I can help you out when in front of my computer and not on my iPhone.
Thanks. I’m actually not able to upgrade at the moment right now so do you think deleting the line I posted earlier would work until I can upgrade? Also I was wondering if it is possible to put our logo in the header?
Thanks again.
@Kathryn
Edit line 29 in the comments.php and replace:
echo get_avatar( $comment, 35 );with:
if (function_exists('get_avatar')) { echo get_avatar( $comment, 35 ); }That should fix the problem.
@Adé
The code got stripped out of the comment but if you were saying:
<img src=”yourpath” id=”logo” alt=”logo” />
Then yes, you would add an image to the header. It would be located after the div with the id=”header” and put the CSS part around the other header CSS stuff so it is easy to find but no it doesn’t matter where it is located really.
Derek, I’m using your theme for my blog – very nicely done. I am having trouble with img alignments though. In the default theme, I could configure my images to align center and break text to the next line. With Vesper, no matter what I do, the text wraps around the img and I can not get it to break and start a new section. Even inserting a gets wrapped upon Save and does not work. This happens in all browsers on Macs and Windows that I’ve tested against. I am using 1.0.6 and WP 2.6.
Cheers!
@Michael
Change line 289 to 303 in the CSS to:
.post-entry img.alignright {
float: right;
margin: .4em 0 0 1em;
padding: 0 0 10px 10px;
}
.post-entry img.alignleft {
float: left;
margin: .4em 1em 0 0;
padding: 0 10px 10px 0;
}
.post-entry img.aligncenter {
display: block;
margin: .4em auto;
padding: 0 10px 10px 10px;
}
I think that should fix your problem. Let me know if it doesn’t.
Thanks Derek, I copied that code into my style.css and refreshed my browser pages but it still behaves the same. Any other suggestions?
cheers,
Michael
Derek, I should have said that I replaced the 3 styles that were already there that had the ‘-’ in the name (i.e. align-right) with the new code you posted above.
Ok, I discovered that if I take out the style right above that at line 284:
.post-entry img {
float: left;
margin: .4em 0 0 1em;
padding: 0 10px 10px 0;
}
everything seems to work now.
@Michael
Glad you got it figured out, sorry I couldn’t be anymore helpful, I’ve been really busy lately.
No problem, thank YOU for sharing this really nice template. I will probably make some customizations and change colors but the basics are very nice.
cheers!
Hello, i would like to display entire post. How can i remove “continue reading” in every post? Thank you, Luky
@Luky
Comment #18 up above explains that. Please look through the comments.
Thank you
Derek i look through all comments, but i didn’t find answer to my question. Problem will be probably with Excerpt Reloaded. I tried to swap the_excerpt for the_content in wp-loop.php as i have read on wordpress.org forum, but no success. Can you give me any other advices please?
I have another question. I would like to put bigger font on hyperlink text. It works only on single post page but on main page i see the same size of font like normal text.
(i hope you understand me, my english is bad)
@Luky
Sorry I have been really busy juggling about 10 projects the last two weeks so I havn’t had a lot of time to respond. If you replace the_excerpt_reload() with the_content() it will show the whole post.
I’m not sure about the links but if you look through the code I’m sure there is a second .class that you probably need to style for the different pages.
Hi
I like the theme a lot. Thanks for it. Any chance we could have videos visible, rather than a link?
Lara, if you are interested in Quicktime videos, there is a way to do it and it also streams several different versions of the video based on the client receiving it. I have an example on my blog at http://eclecticguy.com/2008/09/17/kayaking-on-the-nashua-river-herons-herons-everywhere/
Scroll down to the video and click it to play. It requires copying some code in to one of your template files. Quicktime has an export option that then creates the necessary code, jpg and video files that you upload to your blog.
Hope that helps.
Hi Derek,
I like the theme very much. And maybe will use it for my Blog.
I want to change the color in the Header…. The white letters into black…….
In your example Vesper Orange into black color…
Thanks
@HUbner
You need to change the CSS. Sorry I can’t be more help but if you don’t know how to do that you should go to Google and search for “Basic CSS Tutorials” and I’m sure you will find something useful.
As well, the header is an image if you change to this
#header {
background: #000;
….
}
that will get you started.
Just wanted to send a quick update and thank you again for your theme! :) We added a few more things to it and you can check it out to see some of the updates. It’s a great design and has great style! Thank you again!
Hello, is there any way to turn off the truncating mechanism and have the entire post listed on the blog landing page instead of snippets?
Excellent theme BTW.
Thank you for sharing.
@Dan
You need to replace the_excerpt_reloaded(….) in the index.php with the_content(), and that should fix the issue. If not send me an email with a link and what exactly the problem is and I’ll try to be more specific with my response. Oh, and thank you.
Hi Derek.
First, thanks for a wonderful theme, it is awesome.
Second, I need help. I have problem with perex, it it that part of text displaxed above . It cannot display any colors, bold or italic in it. But when i click continue reading, all the text from start to end of post is ok=as i writed it in admin panel, it means all colors, bold and italic parts of text are displaxed corectly. But in back in perex not. Can you help me please? Iam crazy of it. Im sorry for my english. Thank you very much.
I got it! It need to use brain only.
For others users which have the same problem: It is simple. Edit the wp-loop.php file and at line where is <?php the_excerpt_reloaded( ADD HERE THE TAGS WHICH YOU WANT TO ALLOW IN PEREX EX. or etc…). is for italic and for bold text.
Hey Derek! AWESOME theme! One of my favorite Wordpress themes, actually; very simple and elegant. We decided to use it for our tech blog, and haven’t looked back!
I have two questions:
1. – When I embed an image in a post, it displays properly with the correct transparent border wrapped to the text. But when I add a link to that image, it creates a strange visible border that looks much sloppier. Any way to fix this? I can demonstrate if need be.
2. – Is there a way to stop the default wrapping of the text to the images altogether?
Again, great work, and thanks for your help!
Nice theme there Derek. I’ve installed it over at http://www.quityesterday.com/blog. I’m going to contact you now for some custom work.
Cheers.
Sorry everyone for not responding to your comments, I was in the hospital most of last month and this month I have been playing catch up. I’ll try to answer some questions in the next day or two, for now I just wanted people to know I didn’t completely forget about them.
Hi Derek,
Thanks for your wonderful custom work to this theme. Am very happy with your results and highly recommend your work to others.
Take care and good to hear you’re out of hospital now.
Cheers.
Glad to help, I always enjoy a little Frankenstein action. I think it’s hard to tell it was once Vesper, but in reality it wasn’t big of a change to the core code. Anyhow, happy that you’re happy.
Cheers
@tim: can you post a link and also what browser you’re using?
Trackbacks