Download “Gallery”: A Free WordPress Theme

Advertisement

Just recently we asked1 you to let us know what theme you would like us to release next. Among numerous comments we found many request for a gallery-theme that could be particularly useful for portfolios and showcases. At the very same time Christopher Wallace32 has been designing an advanced gallery-WordPress-theme for the design community and Smashing Magazine’s audience. And today finally we are proud to release it – for free, of course.

Gallery WordPress Theme

Gallery is a beautiful, free, gallery-style Thematic child theme for WordPress, designed by Christopher Wallace32 especially for Smashing Magazine and its readers. It is extremely flexible and can be used as a starting point for design galleries and portfolios.

Screenshot4

This theme can be seen in action on MixCSS.com5, which is being launched as a high-end design gallery that showcases the true power of the Gallery theme. You can subscribe to the MixCSS.com RSS feed6 or check out the live site7, which acts as a demo for the Gallery theme.

As always, the template is completely free and may be used for any private or commercial project without any restrictions whatsoever.

Screenshot218

Gallery is packed with loads of cool features like a jQuery slide hover effect on thumbnails, lazyloading for thumbnails (great if using a lot of thumbnails on one page), built-in social media links for each gallery item and seamless integration with the following plugins: WP-PostRatings9, BuySellAds plugin10, and Contact Form 711.

Screenshot12

If you'd like an endless wall of thumbnails, LazyLoad allows you to show as many posts on the homepage as you'd like, allowing your users to scroll endlessly down the page without having to load hundreds of images right away. This effect mimics "endless scroll."

Screenshot13

Gallery also supports WordPress 2.7 threaded comments for an elegant commenting experience.

Screenshot14

Social media links allow you to save each gallery item to Delicious.com15 or post a link to the gallery page in your twitter feed. Social media icons provided by Rogie King16.

Screenshot17

Features

  • WordPress 2.7 compatible
  • Built on the Thematic framework
  • jQuery hover effects
  • 'Save to Delicious' link
  • 'Tweet This' link
  • Flexible footer widget area
  • WP-PostRatings integration
  • Contact Form 7 integration
  • BuySellAds plugin integration

Usage/Installation

To use the Gallery Theme, you will need to follow these installation instructions:

  1. Download the latest version18 of Thematic.
  2. Download the latest version19 of the Gallery WordPress theme.
  3. Unzip and upload both themes to your "wp-content/themes/" directory.
  4. In WordPress, go to "Appearance > Themes" and activate the "Gallery" theme.
  5. To change the number of items displayed on the home page, go to
    "Settings > Reading" and change "Blog pages show at most" to 28 (4
    rows) or 35 (5 rows) or more for the LazyLoad plugin to work its magic. LazyLoader will automatically delay loading of thumbnails that are out of the user's view.

Adding Gallery Items

To use the default options for the Gallery Theme, here are instructions for creating gallery entries:

  1. Create a thumbnail for each entry sized 125×125
  2. Create a full-sized image for each entry sized 500×375
  3. Upload both images to /wp-content/uploads or use the image uploader in WordPress to upload the images to the same folder
  4. Next, create a custom field called "thumbnail" and enter the
    location of the thumbnail file, for example
    "/wp-content/uploads/design-name-125×125.jpg"
  5. You will need to create another custom field called "full-image" and enter the location of the full-size image in that field.
  6. You may also enter custom fields for "web-url" and "designer" if you want to add additional information to each entry.

Setting Up Star Ratings

  1. Install the WP-Post Ratings plugin20 from WordPress.org. Activate both the plugin and the widgets.
  2. To switch the type of images to transparent .PNGs, open wp-content/plugins/wp-postratings/wp-postratings.php in a text editor and change the following lines (should be near the top of the document):

    ### Define Image Extension
    define('RATINGS_IMG_EXT', 'gif');
    //define('RATINGS_IMG_EXT', 'png');

    to match this:

    ### Define Image Extension
    //define('RATINGS_IMG_EXT', 'gif');
    define('RATINGS_IMG_EXT', 'png');

  3. Then upload that file back into the plugins folder.
  4. In your WordPress admin panel, click the Ratings > Options link on the left sidebar.
  5. The transparent .PNG stars should be selected by default.
  6. Under 'Ratings AJAX Style' change 'Show Loading Image With Text' to 'No' and 'Show Fading In And Fading Out Of Ratings' to 'No.'
  7. Click 'Save Changes.'
  8. Now click the 'Ratings Templates' on the left sidebar.
  9. Replace the text in the 'Ratings Vote Text' box with the following code:

    %RATINGS_IMAGES_VOTE%

  10. Replace the text in the 'Ratings Voted Text' with the following code:

    %RATINGS_IMAGES%

  11. Click the 'Save' button.
  12. You should now see your star ratings show on the gallery single pages next to the title of the gallery item.

Adding Widgets to the Footer

  1. Make sure you activated the WP-Post Ratings widgets when you activated the plugin.
  2. In your WordPress Admin, click Widgets on the sidebar.
  3. From the drop-down box under 'Current Widgets' select '1st Subsidiary Aside' and click 'Show.'
  4. Drag the widgets you'd like to see shown in this area from left to right (Highest Rated, Most Rated, Recent Comments, etc.)
  5. Click 'Save.'
  6. You should now see your widgets in the footer.

Download the theme for free!

Screenshot218

We express sincere gratitude to Christoper Wallace for his truly impressive work. Please let us know in the comments if this release meets your expectations. And if not, please let us know what we could improve in the upcoming releases!

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/04/21/smashing-community-wordpress-theme-comment-and-win/
  2. 2 http://www.chris-wallace.com
  3. 3 http://www.chris-wallace.com
  4. 4 http://www.smashingmagazine.com/images/gallery-wordpress-theme/large-preview.jpg
  5. 5 http://MixCSS.com
  6. 6 http://feeds2.feedburner.com/mixcss
  7. 7 http://mixcss.com
  8. 8 http://www.smashingmagazine.com/images/gallery-wordpress-theme/large-preview.jpg
  9. 9 http://wordpress.org/extend/plugins/wp-postratings/
  10. 10 http://wordpress.org/extend/plugins/buy-sell-ads/
  11. 11 http://wordpress.org/extend/plugins/contact-form-7/
  12. 12 http://www.smashingmagazine.com/images/gallery-wordpress-theme/large-preview.jpg
  13. 13 http://www.smashingmagazine.com/images/gallery-wordpress-theme/large-preview.jpg
  14. 14 http://www.smashingmagazine.com/images/gallery-wordpress-theme/large-preview.jpg
  15. 15 http://Delicious.com
  16. 16 http://www.rogieking.com
  17. 17 http://www.smashingmagazine.com/images/gallery-wordpress-theme/large-preview.jpg
  18. 18 http://themeshaper.com/
  19. 19 http://chris-wallace.com/downloads/gallery-latest.zip
  20. 20 http://wordpress.org/extend/plugins/wp-postratings/
  21. 21 http://www.smashingmagazine.com/images/gallery-wordpress-theme/large-preview.jpg
  22. 22 http://www.smashingmagazine.com/images/gallery-wordpress-theme/large-preview.jpg
  23. 23 http://mixcss.com/
  24. 24 http://chris-wallace.com/downloads/gallery-latest.zip

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    I need help! Theme works in all areas except on the front page. The image areas seem to be broken. Any help would be much appreciated! Here’s the site: Link

    0
  2. 202

    A new version of Gallery has just been released here.

    0
  3. 403

    worldtouristplace.com———————–browse it……….

    0
  4. 604

    I really request only one thing; the ability to change the dimensions of the thumbnails and large images. If this could be done, your theme would be PERFECT.

    Other than that, your theme is excellent and is a joy to use!

    Thanks.

    0
  5. 805

    @Brian – I’m with you on the portrait format issue – about half of my shots are taken in portrait and slicing off half an image to fit is a shame. Otherwise a superb theme.

    0
  6. 1006

    @Sean – read your solution to the portraits issue – it works – thanks!!

    0
  7. 1207

    hi. i’m having some problems with adding Adding Widgets to the Footer. I’m using 2.8 and I cannot find the “Show” button for “1st Subsidiary Aside’

    1

    0
  8. 1408

    amazing theme, just what i was looking for !

    0
  9. 1609

    Renat Zarbailov

    July 7, 2009 8:50 pm

    What’s a way to have a bigger logo? I tried replacing the supplied “Gallery” logo with a large one of my own but it seems that the code limits the size to 164X50. Any help is truly appreciated!

    Renat

    0
  10. 1810

    daniele marino

    July 8, 2009 8:34 am

    uhm… someone can tell me why in my home page the theme seems “broken” and in the single categories pages the theme works well? o_O

    ty in advance (and thanks to SM and chris wallace)

    0
  11. 2011

    Whoa, so much responses. Hope nobody asked such stuff, i will ask now..
    Can you make something like a GUI for importing thumbnauls? It wold be nice. I saw some Woo – Themes are using GUIs for custom fields, so you don’t need to edit the custom fields yourself. Would be a nice feature…

    0
  12. 2212

    I have been using this theme for a while (and love it) but once I upgraded to the next version when you hover over the thumbs they no longer slide up to show the title.

    Any help on how to fix this would be greatly appreciated.

    I am currently using Child Theme 1.1.1.

    Thank you in advance

    0
  13. 2413

    I have installed it and works great! Thanks!

    One question though. It only shows 10 images “post” thumbnail and creates another page. Is there any way I can change the amount of post thumbnails on a page, or is this something I am missing completely?

    Thanks,
    Stunod

    0
  14. 2815

    can this be used on wordpress free? i need help bout that. ty

    0
  15. 3016

    Will this theme work for latest wordpress 2.8.1?!
    If so then I will use it!

    Thanks for a nice theme and for any answer to my question!

    0
  16. 3217

    Ohh forgot to ask one other thing….

    What font is used for this logo?

    http://www.chris-wallace.com/gallery/

    I would like to use the same font but change the name of the logo. I am trying to edit the logo in photoshop.

    Where can I get the font?

    Thanks.

    0
  17. 3418

    Jonathan Quintin

    July 20, 2009 10:02 am

    Can you add more pictures on a clients page?

    0
  18. 3619

    Great theme,
    thx a lot 4 sharing

    0
  19. 3820

    thx for this theme :) is beautiful

    0
  20. 4021

    I like it and I am using it for Flash Website Gallery with little mods. :)

    0
  21. 4222

    Nice!

    How did you make that adsense square? :P

    It look nice…

    0
  22. 4423

    It is great. I must try this them now.

    0
  23. 4624

    Incredible!
    I will be customizing this for a Java based CMS that I am using. It is going to be a lot of work, but it is worth it.

    Arigato

    0
  24. 4825

    This post was really helpful.I would like to come back again and see the useful information in this page.

    Thanks ,

    0
  25. 5026

    Thank him for sharing if you people want to change colors your self. Wat a wonderful Theme

    0
  26. 5227

    I’ve been trying to figure out how to add WP “pages” onto the bar next to “posts” so that it’s more prominent on the overall site (as opposed to the top right). Can anybody help me? I’m new to this and would love you forever and ever.

    0
  27. 5428

    How do you make the thumbnails bigger than 125×125?

    i am having a tough time figuring this out. it’s a great theme, but 125×125 thumbnails won’t work for me, they need to be bigger for what i am doing.

    0
  28. 5629

    would have been so much better (and usable) if this was a stand alone theme. The fact its a sub-theme makes it useless. I would love to see someone make this a stand alone theme.

    0
  29. 5830

    Hi Chris,
    I’m interested in whether its possible to add adverts/html into my header, such as a skype button. There are plugins called hooks i’ve tried but these seem to push down the background so are pretty useless.

    Would it be possibe for example to add images that are links to other websites within the css. I’ve tried adding php tags in the functions sheet, but I assume I shouldn’t really mess with this. Website = http://www.artygirl.co.uk

    Hope too hear from you soon

    Thanks
    Judi

    0
  30. 6031

    Hi Chris
    My website keeps being hit by spam through the gallery comment form. Is there a captcha form or plugin that can be enabled on your contact form?

    Thanks Judi

    0
  31. 6232

    Hey,

    i get this error: (http://zett.bplaced.net/wordpress/hallo-welt/)

    Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /users/zett/www/wordpress/wp-content/themes/gallery/functions.php on line 131

    Warning: file_get_contents(http://tinyurl.com/api-create.php?url=http%3A%2F%2Fzett.bplaced.net%2Fwordpress%2Fhallo-welt%2F) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /users/zett/www/wordpress/wp-content/themes/gallery/functions.php on line 131

    eMail: zietzschi@gmx.net

    0
  32. 6433

    Thank you for this post a wp gallery is just what the doctor ordered!

    0
  33. 6634

    anasını sikim ßen ßoyLe işin ya yapanLarın daaa yaaa

    0
  34. 6835

    ßen ßu işi yapanLarınn ttaa anasından ßæşLayımmm süLaLesinii yaaaaaaaaaaaaaaaaaa

    0
  35. 7036

    Im sorry if this seems like a dumb question, but I am still kind of new. I have been digging through this for about 3 hours now and I cant find where to change the colors of the fonts. I want to change the color of the post title and content. Also the color for the about and rss at the top of the pages. Any help will be much appreciated please!!!
    BTW, this is a great theme and thank you!

    0
  36. 7237

    camilo benavides

    August 19, 2009 7:36 am

    hi, i have a problem with a single post:
    Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in themes/gallery/functions.php on line 131

    Warning: file_get_contents(http://tinyurl.com/create.php?url=’mypermalink’) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in themes/gallery/functions.php on line 131

    0
  37. 7438

    THX.. a lot it very cool !!

    0
  38. 7639

    Absolutely LOVE this theme. Perfect for my portfolio.

    Matt, anything you want to update can be found in the CSS file.

    0
  39. 7840

    A nice customization of the gallery theme with google maps and flash gallery. Easily can also be used for real estate web sites.

    0
  40. 8041

    does ANYBODY know how to remove the jQuery thumbnail “scroll up” thingy to the homepage?????????????

    0
  41. 8242

    where can i modify the “tweet this” code? (i want to remove the via @mixcss thing)

    0
  42. 8443

    I have this message coming up that I don’t know what it means. Any help would be greatly appreciated. Thank you.

    Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /home/.largent/inlieu/studioinlieu.com/bookmarks/wp-content/themes/gallery/functions.php on line 131

    Warning: file_get_contents(http://tinyurl.com/api-create.php?url=http%3A%2F%2Fwww.studioinlieu.com%2Fbookmarks%2F%3Fp%3D15) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /home/.largent/inlieu/studioinlieu.com/bookmarks/wp-content/themes/gallery/functions.php on line 131

    0
  43. 8644

    How add Video ?

    0
  44. 8845

    Any HELP!?

    Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /nfs/c05/h03/mnt/75323/domains/desigg.com/html/wp-content/themes/gallery/functions.php on line 131

    Warning: file_get_contents(http://tinyurl.com/api-create.php?url=http%3A%2F%2Fdesigg.com%2F2009%2F09%2F05%2Fnew-post%2F) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /nfs/c05/h03/mnt/75323/domains/desigg.com/html/wp-content/themes/gallery/functions.php on line 131

    0
  45. 9046

    After spending some (way too much) time on google, I found a solution to the file_get_contents issue:

    1) Create a file in the wordpress install directory named ‘php.ini’.
    2) Paste the following text inside of the file & then save it.

    allow_url_fopen = On
    allow_url_include = On

    Hope it helps.

    0
  46. 9247

    Is there a way to re-size the homepage images/screenshots to a bit larger size? If so how can this be done?

    0
  47. 9448

    Am I the only one missing the PSD ?
    Uselsss without it.

    0
  48. 9649

    @Roby, what PSD? what are you trying to modify?
    @Jonathan. Go to Media Settings and adjust the values for the thumbnail, medium and large image sizes.
    @Narley Fabricio, in a new post, scroll down to the Post Video Options. You can enter video URL, dimensions and embeded code.
    @Matt, try taking a look style.css, for #page-nav li a the default colour is #BBBBBB, visiteda:visited {color:#FFFFFF; and for hover a:hover { color: #ddd
    @Judi, there are plenty of Captchas available, search via Add New Plugin in WordPress Admin.

    0
  49. 9850

    @ Jonathon, Sorry, I did not post a complete response, I have now added a tutorial to change thumbnail image sizes which can be found at http://theledlightingcompany.co.uk/SuperGallery/design/4-thumbnail-sizes/ look forward to any responses.

    0
  50. 10051

    @Narcis, check out the functions.php for Gallery and look for the following code.
    <a href="http://www.twitter.com/home?status=" title="Share on Twitter">Tweet This

    0

↑ Back to top