Free WP Theme – Pork and Beans!

Just finished another theme to add to my collection and I must say, I am just now getting the real hang of this theme production. This time around, I went a little unorthodox. That’s not true – It is a regular two column design; it does have the standard navigation; the sidebar is in the right side; The archive, single and other template are intact; but I did throw in a lot of Javascript, bolder color schema and a combination of rounded corners, etches and fades.

Update – there has been a security vulnerability in an image handling script in this theme. Please update to the new Timthumb. Read more details here.

Javascript / jQuery Goodness

I’m a big fan of animation in web design. Especially ones that enhance your pages functionality, accessibility and of course – quality. This is the case in the tabbed containers that you get in Pork and Beans’ top sidebar and comments form.

pork-and-beans-2

The code is from Queness, I was able to squeeze a lot of content into such constrained spaces. Content that are to be grouped logically in the first place. For instance, in the comments area, the form shows up as default, but you can also switch from a selection of subscription options, as well as a list of related posts.

Other Javascript features include the sliding captions on the images – courtesy of Buildinternet.com, and a Scroll to the top button found in the footer area.

Colors Schema, Aesthetics and Auto Resizable Images,

The original design didn’t include a wood background, nor was there a patch of grass in the footer – but I figured, it needed some identity. I know what you’re thinking: What does it have to do with “Pork and Beans”? Absolutely nothing. Who said the name had to relate anyway? Picked up the color scheme from the “Moboogie” Color template from Adobe’s Kuler website. Images are automatically resized using a custom field entry (image). For best results, use images wider than 562 pixels.

Plugins Needed

The sidebar has a Flickr Box included which will need you to download the flickrRSS plugin by Eightface. The sidebar is also fully widgetized, styled to match the rest of the page’s elements. You will also need the Similar Posts plugin by Rob Marsh – which will pull related posts to the current article. This will show right below a single article, in the last tab in the comments form.

Conclusion

Pork and Beans is ideal for the traditional blogger. Although it may work best with people who have high quality and vivid photos to include with their articles. I do not suggest customizing it to match another look – since the colors and the background images will be difficult to mess with. Well, if you really must need to tweak, then by all means. I must also mention that I started to code to satisfy IE 6 quirks – but gave up. There is also a bug that the body background shifts to the right on scroll, but goes back to the original position. I don’t know what causes it, but if any of you experience the same thing – please leave a comment.

You can see Pork and Beans live in action from this link, Download the theme from here. All I ask is to spread the word, leave a comment or follow me in Twitter.

Update – You can now download the PSD:. Note that the PSD does not look exactly like the demo (changed my mind a couple of times during coding).

127 thoughts on “Free WP Theme – Pork and Beans!

    Paul says:

    You have here a very nice template. Now, I wonder if it’s possible to include Lightbox in the “Comments”-page as it is in your theme Lucky Guess? That would be a very nice feature.
    Best regards,
    /Paul

    Paul says:

    Hmm, It wasn’t that hard to include…Works really great!

    Great theme, thanks! I’ve been looking for something just like this.

    Andrew says:

    Thanks for the theme!

    joker says:

    cool ! very useful theme, great job and thank you.

    It’s beautiful and very useful!

    Active-buy says:

    Thanks for theme, very useful!

    Michael,

    How do I change the Pork & Beans logo?

    monarch says:

    Nice template but :
    How do you get the thumbnails/images to appear on the homepage??

    wichan says:

    good verymuch themeswordpress.

    Persimón says:

    Very nice theme, lot of thanks!

    D says:

    Thanks for the awesome theme. Could you share the photoshop files for the background image?

    Awesome theme. I’m using on my new blog and start customizing.

    I have small problems though and need your help:
    1. How to add white margin around each photo from FlickerRSS? Hence, all photo will display nicely.
    2. When I format my article to have ordered list, post always convert to bullet list. Also, in excerpt, the list will be displayed in sequence as like in paragraph.
    Please take a look here: http://stainlesssteel-grill.com

    Many thanks

    Hi There!
    Great Theme, thanks a lot for it. But i have no thumbnails on the homepage…Have build a custom field called “image”, value: (example)http://actionjaxon.de/wp-content/uploads/2011/01/example.jpg
    but there is no picture at my homepage. The url is definitly correct, copy & paste it to my browser and the picture was displayed. Is there a little help? Will be thankfull!

    Regards
    Carsten

    Erica says:

    The background is really my love. Wood with green color. Thanks

    Ed says:

    These themes are nothing short of amazing. Thanks for letting us play with them.

    A strange thing happened while previewing Pork and Beans both the demo site on the Web and my local WP installation using XAMPP. In IE8 I get the following error message: “Stack Overflow at Line: 1516.” In Firefox I get no such error. Any thoughts?

    Jorgen says:

    Fantastic! Simplest and coolest theme in ages. Can’t believe you give it away… (But I am happy you do ;))

    Quick Q: When using the custom fields to have the picture on the home screen, how do you get the larger picture in the actual blog, and not “just” the one used on the front page?

    @Jorgen – you have to insert it inside the post.

    Charlie says:

    What are the fonts used in the logo for this design?

    andrew says:

    helo, i want to ask how to add sub meniu item to navigation?

    ty

    Adam says:

    Great theme! I love the additional features it seems very clean. Is there any way to change the wood background with the grass? I’m new to all of this and I’m not sure if it is possible to mess with that. Also, how do you apply the PSD that you provided for download?

    Kimberley says:

    How do you change the title and tagline. I can’t get rid of the Pork&Beans

    Brian B says:

    I added the flickrRss plugin and added photos etc but the settings between the plugin and CSS need something. In the demo it depicts 3 images across by 3 images down – if I select 9 it does 9 photos in a line going straight down the page. How and where can I adjust the CSS to do exactly what the demo is showing – link is http://va-outdoors.com/g3mike

    in the flickRSS settings page, under “Item HTML” – enter the code below:

    <li><a href="%flickr_page%" title="%title%"><img src="%image_square%" alt="%title%"/></a></li>

    Thanks for a theme, Necessarily I use in practice!

    leemour says:

    Wonderfull theme! Well thought-through! Big thanks!

    Kevin says:

    How do I change the category listing on a post to show all the parent->child relationships? I’m running this under WP3.0 and all I see is the immediate child category. I have updated category.php, single.php and index.php to no avail. The existing code reads as which I think should show the category path, but does not seem to work. Any ideas?

    Great theme, thank a lot!

    tsblue says:

    nice theme

    Geo says:

    I love the theme but I cannot get it to work.. telling me that the style sheet is missing.. what do I need to do.

    Try uploading the theme manually. upload the theme files into wp-content/themes/ folder.

    alchazin says:

    Very great free theme. I use it for my blog.
    But, i have the problem.
    why in my home, under post title, the image and “continue reading” not shown?
    like on the demo.
    you can chek at alchazin.com
    Thx b4.

    use custom fields: with “image” as key and the physical url of the image as the “value” in each post.

    sam says:

    Love the theme, really nice and fresh keep up the good work!

    David Rufner says:

    For the free blogger template… any idea of how to change the spacing between lines in the body of the post? This would be helpful to me as I would like to tighten these a bit!

    Thanks.

    download firebug for firefox – inspect the lines between the post and apply paddings in the css.

    Raj says:

    One of the best free themes I’ve encountered. Hat’s off to you, it shows when someone has put some effort into a theme.

    By the way, how do I get an image into the posts on the home page?

    Thanks.

    @Raj – use custom images with the key “image”. to learn more about custom images: http://codex.wordpress.org/Custom_Fields

    HotaruCMS says:

    WOW!! I love your theme. Slick, clean, and elegant. Nice work.

    Would you have any interest in porting it to a project I’m a part of? It’s called HotaruCMS, and it’s a free, open-source, truly modular CMS written in PHP.

    Feel free to check out the live demo too. We’d love to have you on our team!

    Kyle
    HotaruCMS Team

    Very interesting. How’s the front end design process like?

    This theme is awesome. Thanks for giving it up for free!

    William says:

    Hi,

    The theme is great! Can we use it on small business website?

    Thanks,

    Barton says:

    Beautiful theme, keep’em coming.

    Alex says:

    Please can you advise how to change the logo Pork and Beans. I have a png logo – but I cannot work out how to get it onto the header.
    Also some tutorial or hints at how to configure the site would be great – I am new at all this!

    there should be an image file in the images folder (logo.png) – just replace that in photoshop

    Alex says:

    Thanks Michael
    I have replaced the bplogo.png in the templates images folder, also created one in the wp-includes/images – but still no joy.
    Which folder must the logo be in?

    Sorry for the stupid questions – but I am new at this.

    @alex – the pblogo.png inside the images folder is the only place you should replace. send me your url.

    Alex says:

    http://bp.carpedp.com

    Do you mean the images folder in wp-includes/images

    Thanks

    No – wp-content/themes/pork-and-beans/images folder – and the file name is actually pblogo2.png. sorry.

    Alex says:

    Hi Michael
    Another question – how or where do I add adverts as depicted under “Sponsors”?
    What size must they be – I see they are square.
    If I add code in the one widget position – then the ads appear above Sponsors – I do not seem able to find how to get into “sponsors”.
    Thanks

    the sponsors section is actually hard coded inside the file named sidebar.php. look under “Sponsors” and there’s an ordered list with the advertisement thumbnails. the sizes of the thumbnails are 125 px x 125 px.

    I’ve just found another problem with the jQuery tabs on the sidebar. It cannot work if I use Lightbox plugin in the post, please help me.

    Could you please give me the PSD file ? I need it to edit the title of the blog. Thanks in advance

    Lighaiche says:

    Fortunately, we have a lot of really smart women in the business.

    Jel says:

    Como resolver o bug no Internet Explore?
    Ajude-me por favor.

    These are great designs. Thank you!

    FBT says:

    Hi Michael, you are a great designer.

    Pork & Beans are really cool theme.

    I have converting your clam shell theme into blogger template some times ago. Maybe I made a mistake because of not asking your permission before, so I want to apologize to you.

    If you allow, I want to convert Pork & Beans into blogger template. Many Blogger User are likes the design of Clam Shell theme, I think they are will love Pork & Beans too. Thanks

    Regard,

    FBTemplate

    @FBT – okay go ahead. Maybe keep the footer credits? thank you.

    FBT says:

    you are the designer, of course the footer credit include your name. Thanks.

    Shahid says:

    Hi,

    this is great theme, thanks for this theme. I have one problem.. I created custom field image and assign its value to image url but still image is not show as a thumb on front page…. is there any thing else I need to do??? Please reply me , I really appreciate your help..

    thanks

    @Shahid – make sure your custom field is set to “image”. see: http://pork.fearlessflyer.com/wp-content/uploads/2009/07/custom-field.jpg

    Khaizrie says:

    hello Micheal,

    i have the same problem..
    can u help me..i have follow all the instruction but nothing appear on the front page..

    Thanks for the great theme Micheal

    Nguyen Duy Anh says:

    Another thing, could you please release a PSD file for this theme ?

    Nguyen Duy Anh says:

    I can just say that this theme is the greatest theme for personal blog I’ve ever seen.It’s simple but beautiful. I really like the tabbed contact form, so great. Could you please introduce me some tutorial for making something like that ? Thanks in advance

    You are so kind for publishing this theme free. Hope to see more great theme from you! Thank you very much!

    Damn, this is one hell of a theme mate!
    I can feel that you’ve put a lot of efforts on this one.

    I’ve listed this theme on http://www.cmstheme.net/theme/wordpress/pork-and-beans.html

    Can’t wait to see other WordPress theme from you.

    Andy says:

    Great theme overall again Michael but the fancy comments tabs area is quite jerky when I click on the Subscribe and Share, Relate posts Tabs from the comments area…

    I am on Firefox 3.0.12 and Vista if this might be an issue?

    Fer says:

    Remove the “www” from the adress value
    http://yourdomain.com/wp-content/uploads/2010/12/image.jpg
    that works for me

    😀

    Sam Dunn says:

    Very nice theme, superb use of Sliding Boxes. Stamp of approval.

    Tony Lumpkin says:

    I can’t get the recent/tags/cat/archieve on the Pork & Bean wordpress theme. Can you assist to let me know how to get those tabs activated and show text info.

Leave a Reply

Your email address will not be published. Required fields are marked *