Free Vesper theme for Wordpress 27th July 2008

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

Vesper Theme

Download

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.

43 Responses to “Free Vesper theme for Wordpress”

  2. Derek Herman

    Aug 03, 08 at 7:53 pm

    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

  4. Christina

    Aug 09, 08 at 8:21 pm

    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.

  6. James

    Aug 11, 08 at 3:17 pm

    Awesome theme. Looking forward to trying it out.

  8. Derek Herman

    Aug 11, 08 at 3:38 pm

    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.

  10. Rich

    Aug 15, 08 at 4:52 pm

    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!

  12. Derek Herman

    Aug 15, 08 at 5:20 pm

    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.

  14. Derek Herman

    Aug 15, 08 at 7:07 pm

    You can also try this variation of the theme which is a dark red. http://valendesigns.com/vesper-dark-a-new-theme-variation/

    Cheers,
    Derek

  16. Rich

    Aug 16, 08 at 12:20 am

    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.

  18. Derek Herman

    Aug 16, 08 at 1:17 am

    @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.

  20. Steve

    Aug 19, 08 at 11:11 pm

    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

  22. Derek Herman

    Aug 19, 08 at 11:31 pm

    @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

  24. Vesper | Blogger Template

    Aug 21, 08 at 12:15 pm

    [...] Author: valendesigns [...]

  26. Aguilar

    Aug 21, 08 at 12:55 pm

    There is a problem with listings in IE7. I’ll try to fix it. Thank anyway for your work

  28. Aguilar

    Aug 21, 08 at 1:15 pm

    A simple float:left in .post solved the issue under IE7

  30. sandy

    Aug 21, 08 at 4:54 pm

    hi,thanks for you theme.
    At my “about” page,why have a “Subpages” at the page’s right ?
    3Q~~:)

  32. Derek Herman

    Aug 21, 08 at 5:18 pm

    @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.

  34. Adé

    Aug 26, 08 at 2:58 am

    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

  36. Derek Herman

    Aug 26, 08 at 3:04 am

    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;

  38. Adé

    Aug 26, 08 at 9:29 am

    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.

  40. Kathryn

    Aug 26, 08 at 1:02 pm

    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!

  42. Derek Herman

    Aug 26, 08 at 1:52 pm

    @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.

  44. Kathryn

    Aug 27, 08 at 8:03 am

    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.

  46. Derek Herman

    Aug 27, 08 at 12:20 pm

    @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.

  48. Derek Herman

    Aug 27, 08 at 12:26 pm

    @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.

  50. Michael Hackney

    Sep 01, 08 at 7:26 am

    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!

  52. Derek Herman

    Sep 01, 08 at 1:39 pm

    @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.

  54. Michael Hackney

    Sep 01, 08 at 3:01 pm

    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

  56. Michael Hackney

    Sep 01, 08 at 3:09 pm

    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.

  58. Michael Hackney

    Sep 01, 08 at 3:12 pm

    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.

  60. Derek Herman

    Sep 01, 08 at 4:10 pm

    @Michael

    Glad you got it figured out, sorry I couldn’t be anymore helpful, I’ve been really busy lately.

  62. Michael Hackney

    Sep 01, 08 at 6:35 pm

    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!

  64. Luky

    Sep 08, 08 at 8:30 am

    Hello, i would like to display entire post. How can i remove “continue reading” in every post? Thank you, Luky

  66. Derek Herman

    Sep 08, 08 at 8:35 am

    @Luky

    Comment #18 up above explains that. Please look through the comments.

    Thank you

  68. Luky

    Sep 08, 08 at 10:40 am

    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)

  70. Derek Herman

    Sep 16, 08 at 11:58 am

    @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.

  72. Lara Scott

    Sep 24, 08 at 2:51 am

    Hi
    I like the theme a lot. Thanks for it. Any chance we could have videos visible, rather than a link?

  74. Michael Hackney

    Sep 26, 08 at 9:26 am

    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.

  76. HUbner

    Oct 11, 08 at 7:58 am

    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

  78. Pages tagged "vesper"

    Oct 12, 08 at 10:01 pm

    [...] bookmarks tagged vesper Free Vesper theme for Wordpress saved by 5 others     lobotomytazarpop bookmarked on 10/13/08 | [...]

  80. Derek Herman

    Oct 14, 08 at 6:56 pm

    @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.

  82. Monet Wheels

    Oct 28, 08 at 12:47 am

    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!

  84. Dan

    Nov 13, 08 at 6:31 pm

    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.

  86. Derek Herman

    Nov 13, 08 at 8:00 pm

    @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.

Leave a Reply

Recent news

Categories

Tags